.player-card[data-player-id][aria-busy="true"] {
	opacity: .7;
}
.player-card[data-player-id]:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}
.hdle-player-panel-status {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 2147483647;
	max-width: min(28rem, calc(100vw - 2rem));
	padding: .75rem 1rem;
	border-radius: .25rem;
	background: #1d2327;
	color: #fff;
	box-shadow: 0 2px 12px rgb(0 0 0 / 20%);
	font: 400 14px/1.5 system-ui, sans-serif;
}
.hdle-player-panel-status[hidden] { display: none; }
.hdle-player-panel-status.is-error { background: #8a2424; }

/* Placeholders live in the real Elementor widgets. Their containers,
   typography, spacing and responsive image rules own the layout. */
.hdle-player-panel-pending { position: relative; }
.hdle-player-panel-loader { display: contents; }
.hdle-player-skeleton {
	border-radius: 3px;
	background: linear-gradient(100deg, #292826 25%, #45433f 45%, #292826 65%);
	background-size: 250% 100%;
	animation: hdle-player-shimmer 1.6s ease-in-out infinite;
	color: transparent !important;
	text-shadow: none !important;
	pointer-events: none;
}
.hdle-player-skeleton-line,
.hdle-player-skeleton-value {
	display: inline-block;
	height: .8em;
	max-width: 100%;
	vertical-align: baseline;
	line-height: inherit;
	overflow: hidden;
}
.hdle-player-skeleton-line { width: 100%; min-width: 2ch; }
.hdle-player-skeleton-flag {
	display: block;
	flex: 0 0 auto;
	width: var(--hdle-flag-size, 32px);
	max-width: 100%;
	aspect-ratio: 580 / 389;
	border-radius: 0;
}
.hdle-player-panel-error-state .hdle-player-skeleton { animation: none; }
.hdle-player-panel-error {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	right: 1rem;
	z-index: 3;
	padding: 1rem;
	background: #100f0d;
	color: #fff;
	border: 1px solid #45433f;
	border-radius: 3px;
}
.hdle-player-panel-loader .hdle-player-panel-message {
	margin: 0 0 1rem;
	color: inherit;
	font: inherit;
	font-size: 1rem;
	line-height: 1.5;
}
.hdle-player-panel-loader .hdle-player-panel-retry {
	padding: .75rem 1rem;
	border: 1px solid currentColor;
	border-radius: 3px;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
}
.hdle-player-panel-loader [hidden] { display: none !important; }
.hdle-player-panel-retry:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@keyframes hdle-player-shimmer {
	from { background-position: 100% 0; }
	to { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
	.hdle-player-skeleton { animation: none; }
}