/* Destiny YouTube Player — click-to-play YouTube embeds styled to match the Destiny theme (works with any template). */

.dyt {
	--dyt-accent: #4fd6ff;
	--dyt-ar: 16 / 9;
	--dyt-radius: 10px;
	position: relative;
	width: 100%;
	margin: 1.6em auto;
	padding: 0;
}
.dyt.dyt-left { margin-left: 0; margin-right: auto; }
.dyt.dyt-right { margin-left: auto; margin-right: 0; }

.dyt-frame {
	position: relative;
	width: 100%;
	aspect-ratio: var(--dyt-ar);
	overflow: hidden;
	border-radius: var(--dyt-radius);
	border: 1px solid color-mix(in srgb, var(--dyt-accent) 22%, transparent);
	background: #05070d;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
}
@supports not (aspect-ratio: 1 / 1) {
	.dyt-frame { height: 0; padding-top: 56.25%; }
	.dyt-vertical .dyt-frame { padding-top: 177.78%; }
}

.dyt-poster,
.dyt-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.dyt-poster {
	display: block;
	cursor: pointer;
	color: #fff !important;
	text-decoration: none !important;
	background: radial-gradient(ellipse at 50% 45%, #13233d 0%, #05070d 75%);
}
.dyt-thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .5s ease, filter .3s ease;
}
.dyt-shade {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(5, 7, 13, .78) 0%, rgba(5, 7, 13, 0) 32%),
		linear-gradient(0deg, rgba(5, 7, 13, .55) 0%, rgba(5, 7, 13, 0) 40%);
	transition: background-color .3s ease;
}

.dyt-play {
	position: absolute;
	left: 50%;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	margin: -38px 0 0 -38px;
	padding-left: 4px;
	box-sizing: border-box;
	border-radius: 50%;
	background: var(--dyt-accent);
	color: #04121a;
	box-shadow: 0 0 0 8px color-mix(in srgb, var(--dyt-accent) 22%, transparent), 0 0 36px color-mix(in srgb, var(--dyt-accent) 60%, transparent);
	transition: transform .2s ease, box-shadow .2s ease;
}
.dyt-play svg { display: block; width: 32px; height: 32px; }

.dyt-title {
	position: absolute;
	left: 18px;
	right: 110px;
	top: 14px;
	overflow: hidden;
	font-family: 'Orbitron', 'Exo 2', system-ui, sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .04em;
	line-height: 1.35;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
}
.dyt-badge {
	position: absolute;
	right: 14px;
	top: 14px;
	padding: 4px 9px;
	border-radius: 5px;
	background: rgba(5, 7, 13, .72);
	border: 1px solid rgba(255, 255, 255, .18);
	font-family: system-ui, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #e8f4fa;
}

.dyt-poster:hover .dyt-thumb,
.dyt-poster:focus-visible .dyt-thumb { transform: scale(1.04); filter: brightness(1.08); }
.dyt-poster:hover .dyt-play,
.dyt-poster:focus-visible .dyt-play {
	transform: scale(1.08);
	box-shadow: 0 0 0 10px color-mix(in srgb, var(--dyt-accent) 30%, transparent), 0 0 48px color-mix(in srgb, var(--dyt-accent) 80%, transparent);
}
.dyt-poster:focus-visible { outline: 3px solid var(--dyt-accent); outline-offset: -3px; }

.dyt.is-playing .dyt-frame { border-color: color-mix(in srgb, var(--dyt-accent) 45%, transparent); }

.dyt-caption {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
	opacity: .8;
}
.dyt-left .dyt-caption { text-align: left; }
.dyt-right .dyt-caption { text-align: right; }

@media (max-width: 560px) {
	.dyt-play { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
	.dyt-play svg { width: 26px; height: 26px; }
	.dyt-title { font-size: 13px; left: 12px; top: 10px; right: 90px; }
	.dyt-badge { right: 10px; top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.dyt-thumb, .dyt-play { transition: none; }
	.dyt-poster:hover .dyt-thumb { transform: none; }
}

@media print {
	.dyt-play, .dyt-badge { display: none; }
}