.vsm-box {
    @apply p-6 rounded-xl border-2 transition-all duration-300 transform hover:-translate-y-1 cursor-pointer;
}

.vsm-icon {
    @apply w-12 h-12 rounded-full flex items-center justify-center text-xl font-bold;
}

.vsm-tag {
    @apply px-3 py-1 rounded-full text-sm font-medium;
}

.hover\:shadow-yellow:hover {
    box-shadow: 0 10px 25px -5px rgba(234, 179, 8, 0.2), 
                0 10px 10px -5px rgba(234, 179, 8, 0.04);
}

.vsm-level {
    @apply opacity-0 translate-y-8 transition-all duration-500;
}

.animate-fadeInUp {
    @apply opacity-100 translate-y-0;
}

/* Custom tooltip styling */
#tooltip {
    transition: opacity 0.2s ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .vsm-box {
        @apply p-4;
    }
    .vsm-icon {
        @apply w-10 h-10 text-lg;
    }
}