/* Skeleton Loading Styles */
/* Modern skeleton loading for better UX */

/* Base skeleton animation */
.skeleton {
    background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 8px;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Game Card Skeleton */
.game-card-skeleton {
    background: var(--bg-card, #1a1a1a);
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
}

.game-card-skeleton .skeleton-image {
    width: 100%;
    aspect-ratio: 3/4;
    background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

.game-card-skeleton .skeleton-content {
    padding: 15px;
}

.game-card-skeleton .skeleton-title {
    height: 20px;
    width: 80%;
    margin-bottom: 10px;
    background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
}

.game-card-skeleton .skeleton-tags {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.game-card-skeleton .skeleton-tag {
    height: 24px;
    width: 60px;
    background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 12px;
}

.game-card-skeleton .skeleton-meta {
    display: flex;
    justify-content: space-between;
}

.game-card-skeleton .skeleton-stat {
    height: 14px;
    width: 50px;
    background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
}

/* Grid of skeletons */
.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
    padding: 10px 0;
}

/* Hide skeleton when content loads */
.games-grid-modern.loaded .skeleton-grid {
    display: none;
}

/* Responsive */
@media (max-width: 768px) {
    .skeleton-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }

    .game-card-skeleton .skeleton-content {
        padding: 10px;
    }

    .game-card-skeleton .skeleton-title {
        height: 16px;
    }

    .game-card-skeleton .skeleton-tag {
        height: 20px;
        width: 50px;
    }
}