/* Player Profile (Players/Index) - skeleton loading states */

.profile-module-skeleton {
    display: grid;
    gap: 10px;
}

.skeleton-line {
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--surface-2) 0%,
        var(--surface-3) 45%,
        var(--surface-2) 100%
    );
    background-size: 200% 100%;
    animation: player-profile-skeleton-shimmer 1.4s ease-in-out infinite;
}

.skeleton-line--sm {
    width: 45%;
}

.skeleton-line--lg {
    width: 80%;
    height: 18px;
}

.skeleton-pill {
    display: inline-block;
    width: 42px;
    height: 14px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--surface-2) 0%,
        var(--surface-3) 45%,
        var(--surface-2) 100%
    );
    background-size: 200% 100%;
    animation: player-profile-skeleton-shimmer 1.4s ease-in-out infinite;
}

.skeleton-pill--sm {
    width: 28px;
    height: 12px;
}

.profile-stat-tile--skeleton .profile-stat-tile__value {
    display: inline-flex;
    justify-content: flex-end;
}

.showcase-sidebar--skeleton .showcase-item--skeleton {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    min-height: 44px;
    background: var(--surface-1);
    border: 1px solid var(--surface-3);
    overflow: hidden;
}

.showcase-sidebar--skeleton .showcase-item--skeleton .skeleton-pill {
    width: 24px;
    height: 10px;
    opacity: 0.9;
}

/* Inline skeleton for horizontal ticker bar */
.profile-module-skeleton--inline {
    display: flex;
    align-items: center;
    padding: 0.625rem 1rem;
    border-radius: 10px;
    background: var(--surface-1);
    border: 1px solid var(--surface-2);
}

.skeleton-line--inline {
    height: 10px;
    width: 320px;
    max-width: 100%;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--surface-2) 0%,
        var(--surface-3) 45%,
        var(--surface-2) 100%
    );
    background-size: 200% 100%;
    animation: player-profile-skeleton-shimmer 1.4s ease-in-out infinite;
}

.profile-friends-row__avatar--skeleton {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-block;
    background: linear-gradient(
        90deg,
        var(--surface-2) 0%,
        var(--surface-3) 45%,
        var(--surface-2) 100%
    );
    background-size: 200% 100%;
    animation: player-profile-skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes player-profile-skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton-line,
    .skeleton-pill {
        animation: none;
    }
}