/* Latest YouTube Embed Feed — frontend
 * Self-contained, theme-agnostic. All visuals driven by classes + two CSS
 * custom properties set inline by the shortcode:
 *   --lyf-bg   : background/frame colour
 *   --lyf-pad  : frame padding in px
 */

.lyf {
	--lyf-bg: #000;
	--lyf-pad: 0px;
	margin: 1.25rem auto;
	box-sizing: border-box;
}
.lyf *,
.lyf *::before,
.lyf *::after { box-sizing: border-box; }

/* Width presets (inline layout) */
.lyf-w-full          { max-width: 100%; }
.lyf-w-three-quarter { max-width: 75%; }
.lyf-w-half          { max-width: 50%; }

@media (max-width: 782px) {
	.lyf-w-three-quarter,
	.lyf-w-half { max-width: 100%; }
}

/* Frame (background option) */
.lyf-frame {
	position: relative;
	border-radius: 8px;
}
.lyf-bg-solid .lyf-frame {
	background: var(--lyf-bg);
	padding: var(--lyf-pad);
	border-radius: 10px;
}
/* ============================================================
   1980s CRT television set  (.lyf-bg-tv)
   Layout:  80% screen  |  20% wooden control casing
   Effects are intentionally subtle — period CRT, not horror glitch.
   ============================================================ */
.lyf-bg-tv {
	position: relative;
	z-index: 0;
}
/* Grounding shadow — anchors the set to the surface (no floating look). */
.lyf-bg-tv:not(.lyf-overlay-active)::after {
	content: "";
	position: absolute;
	left: 8%;
	right: 8%;
	bottom: -20px;
	height: 34px;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(50% 120% at 50% 0%, rgba(0,0,0,0.55), rgba(0,0,0,0) 72%);
	filter: blur(7px);
}

/* TV BODY — moulded dark-walnut/brown plastic casing with real depth.
   Light source top-left, shadows fall bottom-right. */
.lyf-bg-tv .lyf-frame {
	display: flex;
	align-items: stretch;
	padding: calc(var(--lyf-pad) + 20px);
	border-radius: 18px;                 /* moulded plastic, not flat-UI */
	border: 2px solid rgba(0,0,0,0.55);
	background:
		/* top-left plastic sheen */
		linear-gradient(150deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 30%),
		/* curved-casing shading */
		radial-gradient(130% 100% at 28% 18%, rgba(255,255,255,0.06), transparent 55%),
		/* walnut / brown plastic body */
		linear-gradient(160deg, #5a3a24 0%, #3c2415 45%, #2a1810 75%, #1c1009 100%);
	box-shadow:
		/* inner bevel — top-left highlight, carved-in moulding */
		inset 2px 2px 2px rgba(255,255,255,0.14),
		/* inner bevel — bottom-right shade */
		inset -3px -4px 9px rgba(0,0,0,0.6),
		inset 0 0 0 3px rgba(0,0,0,0.35),
		/* body weight — layered deep-black falloff bottom-right */
		0 2px 4px rgba(0,0,0,0.4),
		2px 10px 20px rgba(0,0,0,0.45),
		4px 26px 48px rgba(0,0,0,0.55),
		6px 40px 80px rgba(0,0,0,0.4);
}

/* ---- Screen side (80%) — recessed glass set into the casing --------- */
.lyf-bg-tv .lyf-screen-wrap {
	flex: 0 0 80%;
	max-width: 80%;
	position: relative;
	border-radius: 12px;
	padding: 12px;
	background: linear-gradient(160deg, #050505, #000);
	box-shadow:
		/* deep recess well + lip shadow cast by the casing from above */
		inset 0 3px 9px rgba(0,0,0,0.9),
		inset 0 -2px 5px rgba(0,0,0,0.7),
		inset 0 0 0 2px rgba(0,0,0,0.95),
		/* faint top-left highlight on the bezel lip */
		inset 1px 1px 1px rgba(255,255,255,0.06),
		/* thin sheen where the screen frame meets the casing */
		0 1px 0 rgba(255,255,255,0.05);
}
.lyf-bg-tv .lyf-stage {
	border-radius: 12px / 16px;   /* gentle CRT corner curve */
	overflow: hidden;
	transform: scale(1.012);      /* subtle bulge */
	box-shadow: inset 0 0 70px rgba(0,0,0,0.9), inset 0 0 120px rgba(0,0,0,0.5);
}
/* edge glow + vignette around the glass */
.lyf-bg-tv .lyf-screen-wrap::after {
	content: "";
	position: absolute;
	inset: 10px;
	border-radius: 12px;
	pointer-events: none;
	box-shadow:
		inset 0 0 24px rgba(120,180,255,0.10),
		inset 0 0 70px rgba(0,0,0,0.55);
}

/* ---- CRT scanlines + glass glare (always on for the TV look) -------- */
.lyf-crt { display: none; }
.lyf-bg-tv .lyf-crt {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	background:
		linear-gradient(115deg, rgba(255,255,255,0.05) 0%, transparent 35%),
		repeating-linear-gradient(0deg, rgba(0,0,0,0.16) 0 1px, transparent 1px 3px);
	opacity: 0.55;
}

/* ---- Subtle ongoing "signal" life — only while NOT actively playing -- */
@media (prefers-reduced-motion: no-preference) {
	.lyf-bg-tv:not(.is-playing) .lyf-stage {
		animation: lyf-breathe 9s ease-in-out infinite, lyf-jitter 7s steps(1) infinite;
	}
	.lyf-bg-tv:not(.is-playing) .lyf-crt {
		animation: lyf-drift 6s ease-in-out infinite;
	}
}
@keyframes lyf-breathe {
	0%, 100% { filter: brightness(1) contrast(1); }
	50%      { filter: brightness(1.035) contrast(1.04); }
}
@keyframes lyf-jitter {
	0%, 95%, 100% { transform: scale(1.012) translateY(0); }
	96%           { transform: scale(1.012) translateY(-1px); }
	97.5%         { transform: scale(1.012) translateY(1px); }
	99%           { transform: scale(1.012) translateY(-1px); }
}
@keyframes lyf-drift {
	0%, 100% { transform: translateX(0); }
	50%      { transform: translateX(0.6px); }
}

/* ---- Channel-finding sequence on load (.is-booting) ----------------- */
.lyf-signal { display: none; }
.lyf-bg-tv .lyf-signal {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	opacity: 0;
	overflow: hidden;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.85'/></svg>");
	background-size: 170px 170px;
}
.lyf-bg-tv.is-booting .lyf-signal {
	animation: lyf-boot 3.2s ease-out forwards, lyf-noise 0.3s steps(4) infinite;
}
/* rolling interference line that fades out as the picture locks in */
.lyf-bg-tv .lyf-signal > i {
	position: absolute;
	left: 0;
	right: 0;
	height: 9%;
	opacity: 0;
	background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.4), rgba(255,255,255,0));
}
.lyf-bg-tv.is-booting .lyf-signal > i {
	animation: lyf-interference 3.2s ease-out forwards;
}
@keyframes lyf-boot {
	0%   { opacity: 0.92; }
	60%  { opacity: 0.5; }
	100% { opacity: 0; }
}
@keyframes lyf-interference {
	0%   { top: -12%; opacity: 0.7; }
	80%  { opacity: 0.25; }
	100% { top: 112%; opacity: 0; }
}

/* ---- Wooden control casing (20%) ------------------------------------ */
.lyf-bg-tv .lyf-tv-panel {
	flex: 0 0 20%;
	max-width: 20%;
	margin-left: 14px;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	padding: 16px 8px;
	background:
		repeating-linear-gradient(90deg, rgba(0,0,0,0.18) 0 2px, rgba(255,255,255,0.02) 2px 5px),
		linear-gradient(180deg, #4a2c18, #2e1a0e 60%, #21130a);
	box-shadow:
		inset 0 0 0 2px rgba(0,0,0,0.4),
		inset 0 2px 8px rgba(255,255,255,0.06),
		0 6px 14px rgba(0,0,0,0.4);
}
.lyf-bg-tv .lyf-knob {
	width: 100%;
	max-width: 72px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	cursor: grab;
}
.lyf-bg-tv .lyf-knob:active { cursor: grabbing; }
.lyf-bg-tv .lyf-knob-face {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	position: relative;
	background: radial-gradient(circle at 38% 32%, #fafafa 0 8%, #cfcfcf 26%, #8a8a8a 55%, #3d3d3d 100%);
	box-shadow:
		0 3px 5px rgba(0,0,0,0.6),
		inset 0 1px 1px rgba(255,255,255,0.6),
		inset 0 -3px 5px rgba(0,0,0,0.5);
	transition: transform 0.2s ease;
}
/* dial indicator notch */
.lyf-bg-tv .lyf-knob-face::after {
	content: "";
	position: absolute;
	top: 5px;
	left: 50%;
	width: 3px;
	height: 14px;
	transform: translateX(-50%);
	border-radius: 2px;
	background: #222;
	box-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
/* each knob rests at a different angle, like a real set */
.lyf-bg-tv .lyf-knob--volume .lyf-knob-face { transform: rotate(120deg); }
.lyf-bg-tv .lyf-knob--tune   .lyf-knob-face { transform: rotate(-95deg); }
.lyf-bg-tv .lyf-knob:hover            .lyf-knob-face { transform: rotate(18deg); }
.lyf-bg-tv .lyf-knob--volume:hover    .lyf-knob-face { transform: rotate(138deg); }
.lyf-bg-tv .lyf-knob--tune:hover      .lyf-knob-face { transform: rotate(-77deg); }
.lyf-bg-tv .lyf-knob-label {
	font: 700 10px/1 -apple-system, system-ui, sans-serif;
	letter-spacing: 0.08em;
	color: #e9d8c2;
	text-shadow: 0 1px 1px rgba(0,0,0,0.6);
}

/* ---- Extra controls: power button + old-style faders ---------------- */
.lyf-tv-controls { gap: 14px; }
.lyf-ctl {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 100%;
}
.lyf-ctl-label {
	font: 700 10px/1 -apple-system, system-ui, sans-serif;
	letter-spacing: 0.08em;
	color: #e9d8c2;
	text-shadow: 0 1px 1px rgba(0,0,0,0.6);
}

/* Push-on/off power button with an indicator LED. */
.lyf-power-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 30px;
	padding: 0;
	border-radius: 6px;
	border: 1px solid rgba(0,0,0,0.6);
	background: linear-gradient(180deg, #ded8cc 0%, #b7b0a2 55%, #8d8678 100%);
	box-shadow:
		0 2px 3px rgba(0,0,0,0.5),
		inset 0 1px 1px rgba(255,255,255,0.65),
		inset 0 -2px 3px rgba(0,0,0,0.4);
	cursor: pointer;
}
.lyf-power-btn:active { transform: translateY(1px); }
.lyf-power-led {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #571c1c;
	box-shadow: inset 0 0 2px rgba(0,0,0,0.8);
	transition: background 0.15s ease, box-shadow 0.15s ease;
}
.lyf-power-btn.is-on .lyf-power-led {
	background: #35e06a;
	box-shadow: 0 0 7px #35e06a, inset 0 0 2px rgba(255,255,255,0.7);
}

/* Vertical fader sliders. */
.lyf-ctl--fader { gap: 8px; }
.lyf-slider {
	-webkit-appearance: slider-vertical;
	appearance: slider-vertical;
	writing-mode: vertical-lr;
	direction: rtl;
	width: 22px;
	height: 96px;
	margin: 0;
	background: transparent;
	cursor: pointer;
}
.lyf-slider::-webkit-slider-runnable-track {
	width: 6px;
	border-radius: 3px;
	background: linear-gradient(90deg, #0a0a0a, #2a2a2a);
	box-shadow: inset 0 0 2px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.08);
}
.lyf-slider::-moz-range-track {
	width: 6px;
	border-radius: 3px;
	background: linear-gradient(90deg, #0a0a0a, #2a2a2a);
	box-shadow: inset 0 0 2px rgba(0,0,0,0.9);
}
.lyf-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 22px;
	height: 13px;
	margin-left: -8px;
	border-radius: 3px;
	border: 1px solid rgba(0,0,0,0.55);
	background: linear-gradient(180deg, #fafafa 0%, #c9c2b4 55%, #8d8678 100%);
	box-shadow: 0 1px 2px rgba(0,0,0,0.55), inset 0 1px 1px rgba(255,255,255,0.7);
}
.lyf-slider::-moz-range-thumb {
	width: 22px;
	height: 13px;
	border-radius: 3px;
	border: 1px solid rgba(0,0,0,0.55);
	background: linear-gradient(180deg, #fafafa 0%, #c9c2b4 55%, #8d8678 100%);
	box-shadow: 0 1px 2px rgba(0,0,0,0.55), inset 0 1px 1px rgba(255,255,255,0.7);
}

/* Zoom scales the picture inside the screen (cropped by the 16:9 box), so the
   control panel stays put and visible the whole time — no native fullscreen. */
.lyf-has-extra-controls .lyf-player {
	transform: scale(var(--lyf-zoom, 1));
	transform-origin: center center;
	transition: transform 0.12s ease-out;
}

/* Maximise button (square "frame" glyph). */
.lyf-max-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 30px;
	padding: 0;
	border-radius: 6px;
	border: 1px solid rgba(0,0,0,0.6);
	background: linear-gradient(180deg, #ded8cc 0%, #b7b0a2 55%, #8d8678 100%);
	box-shadow:
		0 2px 3px rgba(0,0,0,0.5),
		inset 0 1px 1px rgba(255,255,255,0.65),
		inset 0 -2px 3px rgba(0,0,0,0.4);
	cursor: pointer;
}
.lyf-max-btn:active { transform: translateY(1px); }
.lyf-max-ico {
	width: 16px;
	height: 12px;
	border: 2px solid #2a2a2a;
	border-radius: 2px;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}
.lyf-max-btn.is-max .lyf-max-ico {
	width: 12px;
	height: 9px;
	border-color: #134a86;
	box-shadow: -4px 4px 0 -2px #2a2a2a, inset 0 0 0 1px rgba(255,255,255,0.4);
}

/* ---- Pseudo-fullscreen ("maximise") -------------------------------------
   iPhone Safari can't put custom controls around a natively fullscreen video,
   so we pin the whole component to the viewport with CSS, drop the wooden
   casing, size the picture to FIT below the control bar (never overflow), and
   keep the controls at the top where iPhone browser chrome won't cover them. */
.lyf-bg-tv.lyf-maximised {
	--lyf-bar: 72px;            /* height reserved for the control bar */
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	width: auto;
	max-width: none;
	height: 100vh;
	height: 100dvh;
	margin: 0;
	background: #000;
}
.lyf-bg-tv.lyf-maximised .lyf-frame {
	width: 100%;
	height: 100%;
	flex-direction: column;
	gap: 0;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: #000;
}
.lyf-bg-tv.lyf-maximised .lyf-screen-wrap {
	order: 2;
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: #000;
	display: flex;
	align-items: center;
	justify-content: center;
}
.lyf-bg-tv.lyf-maximised .lyf-screen-wrap::after { display: none; }
/* Fit a 16:9 box inside the area above the bar — width capped by both the
   viewport width and the height available, so it never spills off-screen. */
.lyf-bg-tv.lyf-maximised .lyf-stage {
	width: min(100vw, calc((100vh - var(--lyf-bar)) * 16 / 9));
	width: min(100vw, calc((100dvh - var(--lyf-bar)) * 16 / 9));
	max-width: 100%;
	transform: none;
	box-shadow: none;
	animation: none;
}
.lyf-bg-tv.lyf-maximised .lyf-ratio {
	padding-bottom: 0;
	height: auto;
	aspect-ratio: 16 / 9;
}

/* Control bar (above the video), horizontal faders. */
.lyf-bg-tv.lyf-maximised .lyf-tv-panel {
	order: 1;
	position: relative;
	flex: 0 0 auto;
	width: 100%;
	max-width: none;
	min-height: var(--lyf-bar);
	flex-direction: row;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	gap: 16px;
	margin: 0;
	padding: max(8px, env(safe-area-inset-top)) 12px 8px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: linear-gradient(180deg, rgba(8,5,4,0.98) 0%, rgba(22,15,10,0.86) 100%);
	z-index: 20;
}
.lyf-bg-tv.lyf-maximised .lyf-ctl {
	flex-direction: row;
	align-items: center;
	width: auto;
	gap: 8px;
}
.lyf-bg-tv.lyf-maximised .lyf-ctl--power,
.lyf-bg-tv.lyf-maximised .lyf-ctl--max { flex: 0 0 auto; }
.lyf-bg-tv.lyf-maximised .lyf-ctl--fader { flex: 0 1 190px; min-width: 90px; }
.lyf-bg-tv.lyf-maximised .lyf-ctl-label { order: -1; }
/* Re-orient the faders horizontally for the bottom bar. */
.lyf-bg-tv.lyf-maximised .lyf-slider {
	-webkit-appearance: none;
	appearance: none;
	writing-mode: horizontal-tb;
	direction: ltr;
	width: 100%;
	height: 22px;
}
.lyf-bg-tv.lyf-maximised .lyf-slider::-webkit-slider-runnable-track {
	width: 100%;
	height: 6px;
}
.lyf-bg-tv.lyf-maximised .lyf-slider::-moz-range-track {
	width: 100%;
	height: 6px;
}
.lyf-bg-tv.lyf-maximised .lyf-slider::-webkit-slider-thumb {
	margin-top: -4px;
	margin-left: 0;
}

/* On phones, stack the maximise controls top-to-bottom (POWER / VOL / ZOOM /
   MIN) instead of a row that runs off the side. There's plenty of vertical
   room because a 16:9 video is short in portrait. */
@media (max-width: 640px) {
	.lyf-bg-tv.lyf-maximised .lyf-tv-panel {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: flex-start;
		height: auto;
		min-height: 0;
		gap: 10px;
		padding: max(10px, env(safe-area-inset-top)) 16px 10px;
		overflow: visible;
	}
	.lyf-bg-tv.lyf-maximised .lyf-ctl,
	.lyf-bg-tv.lyf-maximised .lyf-ctl--power,
	.lyf-bg-tv.lyf-maximised .lyf-ctl--max,
	.lyf-bg-tv.lyf-maximised .lyf-ctl--fader {
		flex: 0 0 auto;
		width: 100%;
		min-width: 0;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 12px;
	}
	.lyf-bg-tv.lyf-maximised .lyf-ctl-label {
		order: -1;
		flex: 0 0 54px;
		width: 54px;
		text-align: left;
	}
	.lyf-bg-tv.lyf-maximised .lyf-ctl--fader .lyf-slider { flex: 1 1 auto; width: 100%; }
}

/* keep the video usable in fullscreen overlay despite the 20% casing */
.lyf-bg-tv.lyf-overlay-active .lyf-frame { width: min(96vw, 200vh); }

/* ---- Responsive: casing drops below the screen as a strip ----------- */
@media (max-width: 640px) {
	.lyf-bg-tv .lyf-frame { flex-direction: column; }
	.lyf-bg-tv .lyf-screen-wrap { flex-basis: auto; max-width: 100%; }
	.lyf-bg-tv .lyf-tv-panel {
		flex-basis: auto;
		max-width: 100%;
		margin: 14px 0 0;
		flex-direction: row;
		padding: 12px 8px;
	}
	.lyf-bg-tv .lyf-knob { max-width: none; flex: 1; }
	.lyf-bg-tv .lyf-ctl { flex: 1; width: auto; }
}

/* Stage + 16:9 ratio box */
.lyf-stage { position: relative; }
.lyf-ratio {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	background: #000;
}
.lyf-ratio > * {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Poster / play trigger */
.lyf-poster {
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	display: block;
	background: #000;
	z-index: 2;
}
.lyf-poster-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.lyf-overlay-text {
	position: absolute;
	left: 0;
	right: 0;
	padding: 1.1em 1em;
	color: #fff;
	text-align: center;
	pointer-events: none;
}
/* Vertical position variants (all horizontally centered) */
.lyf-ovl-bottom {
	bottom: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
}
.lyf-ovl-top {
	top: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0.75), transparent);
}
.lyf-ovl-center {
	top: 50%;
	transform: translateY(-50%);
	background: none;
}
.lyf-overlay-heading {
	margin: 0;
	color: #fff;
	line-height: 1.2;
	text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}

/* Font-size presets (responsive). "default" applies no class → heading tag size. */
.lyf-fs-s   { font-size: clamp(0.9rem, 2.4vw, 1.1rem); }
.lyf-fs-m   { font-size: clamp(1.1rem, 3.2vw, 1.6rem); }
.lyf-fs-l   { font-size: clamp(1.4rem, 4.5vw, 2.2rem); }
.lyf-fs-xl  { font-size: clamp(1.8rem, 6vw, 3rem); }
.lyf-fs-xxl { font-size: clamp(2.2rem, 8vw, 4rem); }

/* Font-family options ("inherit" applies no class → theme font). */
.lyf-ff-system { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.lyf-ff-arial  { font-family: Arial, Helvetica, sans-serif; }
.lyf-ff-georgia{ font-family: Georgia, "Times New Roman", serif; }
.lyf-ff-times  { font-family: "Times New Roman", Times, serif; }

/* Play button — all visuals driven by per-feed custom properties */
.lyf-play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--lyf-play-size, 84px);
	height: var(--lyf-play-size, 84px);
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--lyf-play-bg, rgba(0,0,0,0.55));
	border: var(--lyf-play-bw, 3px) solid var(--lyf-play-border, rgba(255,255,255,0.9));
	transition: transform 0.15s ease, filter 0.15s ease;
}
.lyf-play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	/* Triangle scales with the button size */
	border-width: calc(var(--lyf-play-size, 84px) * 0.19) 0 calc(var(--lyf-play-size, 84px) * 0.19) calc(var(--lyf-play-size, 84px) * 0.31);
	border-color: transparent transparent transparent var(--lyf-play-icon, #fff);
}
.lyf-poster:hover .lyf-play {
	transform: translate(-50%, -50%) scale(1.08);
	filter: brightness(1.15);
}

/* Player container (filled by the IFrame API or a plain iframe) */
.lyf-player { z-index: 1; }
.lyf-player iframe {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0;
	display: block;
}

.lyf-sound-prompt {
	position: absolute;
	left: 50%;
	bottom: 18px;
	z-index: 7;
	transform: translateX(-50%);
	border: 1px solid rgba(255,255,255,0.7);
	border-radius: 999px;
	padding: 10px 16px;
	background: rgba(0,0,0,0.72);
	color: #fff;
	font: 700 14px/1 -apple-system, system-ui, sans-serif;
	cursor: pointer;
	box-shadow: 0 6px 22px rgba(0,0,0,0.35);
}

/* Close button — only shown in overlay/fullscreen mode */
.lyf-close {
	display: none;
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 6;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(0,0,0,0.6);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

/* ---- Analogue TV tune-in intro ---- */
.lyf-tv-intro {
	z-index: 3;
	display: none;
	background: #111;
	overflow: hidden;
}
.lyf.is-tuning .lyf-tv-intro { display: block; }

.lyf-tv-noise {
	position: absolute;
	inset: -50%;
	width: 200%;
	height: 200%;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.85'/></svg>");
	opacity: 0.8;
	animation: lyf-noise 0.35s steps(4) infinite;
}
.lyf-tv-roll {
	position: absolute;
	left: 0;
	right: 0;
	height: 18%;
	background: linear-gradient(rgba(255,255,255,0.18), rgba(255,255,255,0));
	animation: lyf-roll 1.1s linear infinite;
}
.lyf.is-tuning .lyf-stage { animation: lyf-flicker 0.18s steps(2) infinite; }

@keyframes lyf-noise {
	0%   { transform: translate(0, 0); }
	25%  { transform: translate(-6%, 4%); }
	50%  { transform: translate(4%, -6%); }
	75%  { transform: translate(-4%, -3%); }
	100% { transform: translate(5%, 5%); }
}
@keyframes lyf-roll {
	0%   { top: -20%; }
	100% { top: 110%; }
}
@keyframes lyf-flicker {
	0%   { filter: brightness(1.4) contrast(1.2); }
	50%  { filter: brightness(0.7) contrast(1.5); }
	100% { filter: brightness(1.1) contrast(1.1); }
}
@media (prefers-reduced-motion: reduce) {
	.lyf-tv-noise,
	.lyf-tv-roll,
	.lyf.is-tuning .lyf-stage { animation: none; }
}

/* ---- Fullscreen overlay layout (active state) ----
   The video sits on a dark backdrop with a "close video" bar directly above
   it (matching the video's width), like an old-style lightbox player. */
.lyf-overlay-active {
	position: fixed;
	inset: 0;
	z-index: 99999;
	max-width: none !important;
	margin: 0;
	background: rgba(0,0,0,0.92);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 3vh 3vw;
}
.lyf-overlay-active .lyf-frame {
	width: min(96vw, 168vh); /* keep 16:9 within the viewport */
	max-width: 1600px;
}
.lyf-bg-tv.lyf-overlay-active .lyf-frame { width: min(96vw, 200vh); }

/* Close bar above the video — hidden until the overlay is open. */
.lyf-close-bar { display: none; }
.lyf-overlay-active .lyf-close-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	width: min(96vw, 168vh);
	max-width: 1600px;
	margin: 0 0 10px;
	padding: 8px 12px;
	background: rgba(0,0,0,0.65);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 8px;
}
.lyf-bg-tv.lyf-overlay-active .lyf-close-bar { width: min(96vw, 200vh); }
.lyf-close-bar-title {
	flex: 1 1 auto;
	min-width: 0;
	color: #f1f1f1;
	font: 600 14px/1.3 -apple-system, system-ui, sans-serif;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.lyf-close-bar-btn {
	flex: 0 0 auto;
	appearance: none;
	border: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border-radius: 6px;
	background: rgba(255,255,255,0.14);
	color: #fff;
	font: 600 14px/1 -apple-system, system-ui, sans-serif;
	transition: background 0.15s ease;
}
.lyf-close-bar-btn:hover { background: rgba(255,255,255,0.26); }
.lyf-close-bar-x { font-size: 20px; line-height: 1; }

/* Body-level overlay used by the "Open in iframe overlay" layout.
   This mirrors the Met Office approach: a standalone fixed overlay layer,
   not the shortcode wrapper itself. That keeps it reliable inside columns,
   page builders, transformed parents and theme stacking contexts. */
.lyf-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	flex-direction: column;
	background: rgba(0,0,0,0.92);
	box-sizing: border-box;
}
.lyf-modal-overlay *,
.lyf-modal-overlay *::before,
.lyf-modal-overlay *::after { box-sizing: border-box; }

/* Full-length close bar across the very top of the screen (Met Office style). */
.lyf-modal-overlay .lyf-close-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	flex: 0 0 auto;
	margin: 0;
	padding: 12px 18px;
	border: 0;
	border-radius: 0;
	border-bottom: 1px solid rgba(255,255,255,0.14);
	background: var(--lyf-bar-bg, rgba(0,0,0,0.9));
	color: var(--lyf-bar-text, #fff);
}
.lyf-modal-overlay .lyf-close-bar-title {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--lyf-bar-text, #fff);
	font: 600 15px/1.3 -apple-system, system-ui, sans-serif;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.lyf-modal-overlay .lyf-close-bar-btn {
	flex: 0 0 auto;
	appearance: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 6px;
	background: transparent;
	color: var(--lyf-bar-text, #fff);
	border: 1px solid currentColor;
	font: 600 14px/1 -apple-system, system-ui, sans-serif;
	transition: background 0.15s ease, opacity 0.15s ease;
}
.lyf-modal-overlay .lyf-close-bar-btn:hover { background: rgba(127,127,127,0.28); }

/* Video sits centred in the space below the bar. */
.lyf-modal-center {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3vh 3vw;
}
.lyf-modal-inner {
	width: min(96vw, 168vh);
	max-width: 1600px;
}
.lyf-modal-box {
	width: 100%;
	background: #000;
	box-shadow: 0 18px 60px rgba(0,0,0,0.55);
}
.lyf-modal-box .lyf-player iframe,
.lyf-modal-box .lyf-yt-target iframe {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0;
	display: block;
}

@media (max-width: 640px) {
	.lyf-modal-center { padding: 2vh 2vw; }
	.lyf-modal-overlay .lyf-close-bar { padding: 10px 12px; }
	.lyf-modal-overlay .lyf-close-bar-btn { padding: 7px 10px; }
}