/* Mission Categories */
.mission-categories {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.mission-categories::-webkit-scrollbar {
    display: none;
}

.category-btn {
    @apply px-6 py-2 rounded-full text-sm font-medium transition-all duration-200;
    @apply text-gray-600 hover:text-blue-600 hover:bg-blue-50;
    white-space: nowrap;
}

.category-btn.active {
    @apply bg-blue-600 text-white hover:text-white hover:bg-blue-700;
}

/* Mission Cards */
.mission-card {
    @apply bg-white rounded-lg shadow-lg overflow-hidden transition-all duration-300;
    transform: translateY(0);
}

.mission-card:hover {
    transform: translateY(-4px);
    @apply shadow-xl;
}

.mission-card .mission-image {
    @apply h-48 w-full object-cover;
    background-size: cover;
    background-position: center;
}

.mission-progress {
    @apply h-2 bg-blue-100 rounded-full overflow-hidden;
}

.mission-progress-bar {
    @apply h-full bg-blue-600 transition-all duration-500;
}

/* Progress Bars Animation */
@keyframes progressAnimation {
    0% { width: 0; }
    100% { width: var(--progress-width); }
}

.progress-bar-daily, .progress-bar-weekly {
    animation: progressAnimation 1s ease-out forwards;
}

/* Mission Modal */
.modal-enter {
    animation: modalEnter 0.3s ease-out forwards;
}

.modal-leave {
    animation: modalLeave 0.3s ease-out forwards;
}

@keyframes modalEnter {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes modalLeave {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

/* Mission Timer */
#mission-timer {
    font-variant-numeric: tabular-nums;
}

/* Responsive Adjustments */
@media (max-width: 640px) {
    .mission-card .mission-image {
        height: 200px;
    }
}

/* Mission Status Badges */
.status-badge {
    @apply px-2 py-1 text-xs font-medium rounded-full;
}

.status-badge.active {
    @apply bg-green-100 text-green-800;
}

.status-badge.completed {
    @apply bg-blue-100 text-blue-800;
}

.status-badge.expired {
    @apply bg-red-100 text-red-800;
}

/* Mission Rewards Animation */
.reward-icon {
    @apply inline-flex items-center justify-center;
    animation: rewardPulse 2s infinite;
}

@keyframes rewardPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}