/* Global Skeleton / Shimmer (AJAX placeholders) */

@keyframes maledictionSkeletonShimmer
{
	0%
	{
		background-position: 100% 0;
	}
	100%
	{
		background-position: -100% 0;
	}
}

/*
 * Fluid skeletons: stay inside the parent grid cell (co-02).
 * Card and miniature share one media ratio (5/7) so tab switches do not shift the grid.
 * Neutralize Comp_InteractiveCard fixed --co-03 / --m-co-03 media sizes.
 */
.malediction-skeleton.compInteractiveCard
{
	box-sizing: border-box;
	max-width: 100%;
	min-width: 0;
	height: auto;
	min-height: 0;
	align-self: flex-start;
	overflow: hidden;
	pointer-events: none;
	user-select: none;
}

.malediction-skeleton .safeContentArea,
.malediction-skeleton .safeContentArea > div,
.malediction-skeleton .cardSubContainer,
.malediction-skeleton .miniatureSubContainer,
.malediction-skeleton .cardMediaContainer,
.malediction-skeleton .miniatureMediaContainer
{
	width: 100%;
	max-width: 100%;
	min-width: 0;
	min-height: 0;
	height: auto;
}

/* Unified media block: same footprint for card and miniature skeletons */
.malediction-skeleton .skeleton-media.skeleton-shimmer,
.malediction-skeleton .cardMedia.skeleton-shimmer,
.malediction-skeleton .miniatureMedia.skeleton-shimmer
{
	width: 100%;
	max-width: 100%;
	height: auto;
	min-height: 0;
	min-width: 0;
	aspect-ratio: 5 / 7;
	display: block;
}

/* Beat Comp_InteractiveCard media queries that set width/height: var(--co-03) */
@media screen and (max-width: 1000px)
{
	.malediction-skeleton.compInteractiveCard:not(.compInteractiveCard_CarouselSize)
	{
		min-height: 0;
	}

	.malediction-skeleton.compInteractiveCard:not(.compInteractiveCard_CarouselSize) .safeContentArea > div
	{
		min-height: 0;
	}

	.malediction-skeleton.compInteractiveCard:not(.compInteractiveCard_CarouselSize) .miniatureMedia.skeleton-shimmer:not(.onModalResourceImage),
	.malediction-skeleton.compInteractiveCard:not(.compInteractiveCard_CarouselSize) .cardMedia.skeleton-shimmer:not(.onModalResourceImage)
	{
		width: 100%;
		height: auto;
		aspect-ratio: 5 / 7;
	}
}

@media screen and (min-width: 1001px)
{
	.malediction-skeleton.compInteractiveCard:not(.compInteractiveCard_CarouselSize)
	{
		min-height: 0;
	}

	.malediction-skeleton.compInteractiveCard:not(.compInteractiveCard_CarouselSize) .safeContentArea > div
	{
		min-height: 0;
	}

	.malediction-skeleton.compInteractiveCard:not(.compInteractiveCard_CarouselSize) .miniatureMedia.skeleton-shimmer:not(.onModalResourceImage),
	.malediction-skeleton.compInteractiveCard:not(.compInteractiveCard_CarouselSize) .cardMedia.skeleton-shimmer:not(.onModalResourceImage)
	{
		width: 100%;
		height: auto;
		aspect-ratio: 5 / 7;
	}
}

.malediction-skeleton .skeleton-text-block
{
	width: 100%;
	max-width: 100%;
	margin-top: 12px;
	gap: 8px;
	flex-shrink: 0;
}

.malediction-skeleton .skeleton-text
{
	width: 80%;
	height: 16px;
	border-radius: 0.375rem;
	margin-inline: auto;
	flex-shrink: 0;
}

.malediction-skeleton .skeleton-text--short
{
	width: 55%;
}

/*
 * Comp_DeckCard skeleton — dimensions via CSS variables for reuse
 * Override per instance: style="--skeleton-deck-width: var(--co-06); --skeleton-deck-ratio: 5/8;"
 */
.malediction-skeleton.skeleton-deck-card.comp-deck-card
{
	pointer-events: none;
	user-select: none;
	min-width: 0;
	width: var(--skeleton-deck-width, var(--co-04));
	aspect-ratio: var(--skeleton-deck-ratio, 6 / 4);
}

@media screen and (max-width: 1000px)
{
	.malediction-skeleton.skeleton-deck-card.comp-deck-card
	{
		width: var(--skeleton-deck-width-mob, var(--m-co-04));
	}
}

.malediction-skeleton.skeleton-deck-card .comp-deck-card-body
{
	flex: 1 1 auto;
	min-height: 0;
}

.malediction-skeleton.skeleton-deck-card .comp-deck-card-art-track
{
	overflow: hidden;
	gap: var(--spc-1);
	height: 100%;
}

.malediction-skeleton.skeleton-deck-card .comp-deck-card-art.skeleton-media
{
	height: 100%;
	width: auto;
	flex-shrink: 0;
	aspect-ratio: var(--skeleton-art-ratio, 5 / 7);
	border-radius: 5px;
	display: block;
}

.malediction-skeleton.skeleton-deck-card .skeleton-avatar
{
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	flex-shrink: 0;
}

.malediction-skeleton .skeleton-shimmer
{
	background-color: rgba(255, 255, 255, 0.04);
	background-image: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255, 255, 255, 0.12) 50%,
		transparent 100%
	);
	background-size: 200% 100%;
	background-repeat: no-repeat;
	animation: maledictionSkeletonShimmer 1.5s linear infinite normal forwards;
	will-change: background-position;
	transform: translateZ(0);
	backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce)
{
	.malediction-skeleton .skeleton-shimmer
	{
		animation: none;
		background-image: none;
	}
}