/* MVC placeholders exist before Blazor mounts, outside component CSS isolation. */
@media (max-width: 540px) {
    .cs-vsa-ui[data-cs-blazor-component="cs-compare-matchup-analyzer"]:empty {
        display: grid;
        place-items: center;
        height: 662.78px;
        max-width: 100%;
        width: 521px;
        border-radius: 1.75rem;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01)),
            #232129;
    }

    .cs-vsa-ui[data-cs-blazor-component="cs-compare-matchup-analyzer"]:empty::after {
        content: "";
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        border: 0.25rem solid rgba(255, 255, 255, 0.15);
        border-top-color: var(--cs-theme-primary);
        animation: cs-compare-matchup-placeholder-spin 0.8s linear infinite;
    }
}

@media (min-width: 541px) {
    .cs-vsa-ui[data-cs-blazor-component="cs-compare-matchup-analyzer"]:empty {
        display: grid;
        place-items: center;
        height: 858.41px;
        max-width: 100%;
        width: 800px;
        border-radius: 1.75rem;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01)),
            #232129;
    }

    .cs-vsa-ui[data-cs-blazor-component="cs-compare-matchup-analyzer"]:empty::after {
        content: "";
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        border: 0.25rem solid rgba(255, 255, 255, 0.15);
        border-top-color: var(--cs-theme-primary);
        animation: cs-compare-matchup-placeholder-spin 0.8s linear infinite;
    }
}

@keyframes cs-compare-matchup-placeholder-spin {
    to {
        transform: rotate(360deg);
    }
}