.shoot-skeleton {
    --shoot-skeleton-base: var(--shoot-surface);
    --shoot-skeleton-highlight: var(--shoot-line);
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--shoot-skeleton-base);
    border-radius: .45rem;
}

.shoot-skeleton::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(100deg, transparent 20%, var(--shoot-skeleton-highlight) 50%, transparent 80%);
    transform: translateX(-100%);
    animation: shoot-skeleton-shimmer 1.7s ease-in-out infinite;
}

@keyframes shoot-skeleton-shimmer {
    to { transform: translateX(100%); }
}

.shoot-skeleton-card {
    padding: 1rem;
    border: 1px solid var(--shoot-line);
    border-radius: .75rem;
    background: var(--shoot-surface);
}

.shoot-skeleton-line { height: .85rem; }
.shoot-skeleton-line.is-short { width: 35%; }
.shoot-skeleton-line.is-medium { width: 58%; }
.shoot-skeleton-line.is-long { width: 82%; }
.shoot-skeleton-circle { width: 3.5rem; height: 3.5rem; border-radius: 50%; }
.shoot-skeleton-moon { width: 3.5rem; height: 3.5rem; border-radius: 50%; }
.shoot-skeleton-score { width: 3.25rem; height: 2.2rem; }
.shoot-skeleton-stack { display: grid; gap: .65rem; }
.shoot-skeleton-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.shoot-skeleton-summary-copy { flex: 1; display: grid; gap: .65rem; }
.shoot-skeleton-summary-meta { display: flex; align-items: center; gap: .55rem; }
.shoot-skeleton-cloud-bars { display: flex; align-items: end; gap: .35rem; min-height: 7rem; padding-top: .5rem; }
.shoot-skeleton-cloud-bar { flex: 1 0 1.8rem; min-height: 1.6rem; border-radius: .35rem .35rem 0 0; }
.shoot-skeleton-row { display: grid; grid-template-columns: 4.5rem 1fr 3.75rem; align-items: center; gap: .9rem; padding: .85rem 1rem; }
.shoot-skeleton-row.is-tonight { grid-template-columns: 1fr 4.5rem; }
.shoot-skeleton-chart { display: flex; align-items: end; justify-content: space-between; gap: .45rem; height: 7rem; padding: .25rem .4rem 0; }
.shoot-skeleton-chart-bar { flex: 1; min-width: .75rem; border-radius: .25rem .25rem 0 0; }
.shoot-skeleton-event { display: grid; grid-template-columns: 1fr 4rem; gap: 1rem; padding: .65rem .75rem; }

@media (prefers-reduced-motion: reduce) {
    .shoot-skeleton::after { display: none; }
}

@media (max-width: 575.98px) {
    .shoot-skeleton-row { grid-template-columns: 3.5rem 1fr 3rem; gap: .6rem; }
}