/* Общие стили для скелетонов */
.skeleton {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    height: 100%;
    width: 100%;
    position: absolute;
     border-radius: inherit; 
}
.cards-games-skeleton {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    height: 100%;
    width: 100%;
}
.stat-skeleton {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    height: 100%;
    width: 100%;
    /* position: absolute; */
    /* border-radius: inherit; */
}
.game-banner-skeleton {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    height: 100%;
    width: 100%;
    position: absolute;
    /* border-radius: inherit; */
}
/* Базовые скелетоны */
.skeleton-text {
    height: 1em;
    width: 100%;
    border-radius: 0.5rem;
}

.skeleton-circle {
    border-radius: 50%;
}

/* Скелетоны для карточек */
.skeleton-card {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 75% );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: inherit;
    border-radius: 10px;
    padding: 0;
    margin-bottom: 0;
}

/* Скелетоны для изображений */
.skeleton-image {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 0.5rem;
}

.skeleton-avatar {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
}

/* Скелетоны для списков */
.skeleton-list-item {
    height: 3rem;
    margin-bottom: 0.5rem;
    border-radius: 0.5rem;
}

/* Скелетоны для форм */
.skeleton-input {
    height: 2.5rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.skeleton-button {
    height: 2.5rem;
    width: 100%;
    border-radius: 0.5rem;
}

/* Скелетоны для профиля */
.skeleton-profile-banner {
    width: 100%;
    aspect-ratio: 2.95;
    border-radius: 0.5rem;
}

.skeleton-profile-avatar {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
}

.skeleton-profile-info {
    height: 1.2rem;
    margin-bottom: 0.5rem;
    border-radius: 0.3rem;
}

/* Скелетоны для игр */
.skeleton-game-card {
    width: 100%;
    aspect-ratio: 0.85;
    border-radius: 0.5rem;
}

/* Скелетоны для уведомлений */
.skeleton-notification {
    height: 3rem;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Скелетоны для чата */
.skeleton-message {
    height: 4rem;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}

.skeleton-chat-input {
    height: 3rem;
    border-radius: 1.5rem;
}

/* Анимация */
@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Утилиты для размеров */
.skeleton-w-25 { width: 25%; }
.skeleton-w-50 { width: 50%; }
.skeleton-w-75 { width: 75%; }
.skeleton-w-100 { width: 100%; }

.skeleton-h-25 { height: 25%; }
.skeleton-h-50 { height: 50%; }
.skeleton-h-75 { height: 75%; }
.skeleton-h-100 { height: 100%; }

/* Утилиты для отступов */
.skeleton-m-1 { margin: 0.25rem; }
.skeleton-m-2 { margin: 0.5rem; }
.skeleton-m-3 { margin: 1rem; }
.skeleton-m-4 { margin: 1.5rem; }

.skeleton-p-1 { padding: 0.25rem; }
.skeleton-p-2 { padding: 0.5rem; }
.skeleton-p-3 { padding: 1rem; }
.skeleton-p-4 { padding: 1.5rem; }