/**
 * Vinyl card — King music card + spinning-LP player.
 *
 * The player is adapted from Josh Bader's "Skeuomorphic Audio Player"
 * (codepen.io/joshbader/pen/GqXbVZ). Everything is scoped under .wwp-vinyl
 * and renamed with a wwp-vinyl__ prefix: the pen's bare .button / .progress /
 * .cover / button selectors collide with King's own.
 *
 * Changed from the pen on purpose:
 *   - The record is NOT pushed up out of the card (the pen's
 *     translate(-50%,-25%) + margin-bottom:-13%). The light panel starts
 *     above it so the whole LP is visible.
 *   - Sized by the card, not the page: the panel is a size container and the
 *     player's em is 1/20 of the card width, so every proportion of the pen
 *     survives in a 214px grid column or a 400px one.
 *   - The track title uses the card's own title font (King's Nunito), not
 *     Roboto Condensed.
 */

/* --- colour tokens: light (default), dark, custom ----------------------- */

/*
 * Light is the pen's own palette. Dark is a MID grey, not near-black: the
 * record is #111, and a panel dark enough to match the site would swallow it.
 * #4a4a51 keeps the LP reading as a black disc with a visible rim while still
 * sitting quietly in the dark theme. A custom colour (Customizer / post box)
 * overrides only the panel; the rest of the palette follows the mode.
 */
.wwp-vinyl {
	--vp-bg: #eee;
	--vp-bg-top: #f4f4f4;
	--vp-bg-bottom: #e6e6e6;
	--vp-hi: rgba(255, 255, 255, 1);
	--vp-rim: #ddd;
	--vp-rim-edge: #bbb;
	/*
	 * Contrast raised from the pen (owner: "controls barely seen, same colour
	 * as the background"). The pen engraves #ddd arrows into #f4f4f4 buttons
	 * on a #eee panel - lovely in a screenshot, invisible on a phone.
	 */
	--vp-text: #4f4f55;
	--vp-title: #222226;
	--vp-muted: #7d7d84;
	--vp-emboss: rgba(255, 255, 255, 0.9);
	--vp-bar: #b4b4ba;
	--vp-bar-fill: #2d2d33;
	--vp-btn-top: #c9c9cf;
	--vp-btn-bottom: #fafafa;
	--vp-btn-face: #fdfdfd;
	--vp-btn-rim: #bdbdc3;
	--vp-btn-glow: rgba(255, 255, 255, 0.75);
	--vp-btn-hover: #ffffff;
	--vp-btn-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.22);
	--vp-arrow: #55555c;
	--vp-arrow-on: #1f8fe0;
	--vp-toggle: #6e6e76;
	--vp-toggle-on: #1f8fe0;
}

/* Dark — and the button strip of Split, which sits on the card's own grey. */
.wwp-vinyl.is-dark,
.wwp-vinyl.is-split .wwp-vinyl__actions {
	--vp-bg: #4a4a51;
	--vp-bg-top: #54545b;
	--vp-bg-bottom: #424249;
	--vp-hi: rgba(255, 255, 255, 0.12);
	--vp-rim: #6c6c74;
	--vp-rim-edge: #5a5a61;
	--vp-text: #d6d6dc;
	--vp-title: #ffffff;
	--vp-muted: #a9a9b1;
	--vp-emboss: rgba(0, 0, 0, 0.45);
	--vp-bar: #2c2c32;
	--vp-bar-fill: #f0f0f4;
	--vp-btn-top: #36363d;
	--vp-btn-bottom: #64646b;
	--vp-btn-face: #5a5a61;
	--vp-btn-rim: #38383f;
	--vp-btn-glow: rgba(255, 255, 255, 0.1);
	--vp-btn-hover: #63636a;
	--vp-btn-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.45);
	--vp-arrow: #ececf0;
	--vp-arrow-on: #7cc7ff;
	--vp-toggle: #c2c2c9;
	--vp-toggle-on: #7cc7ff;
}

/* A chosen panel colour: flat, so the shuffle icon's mask matches exactly. */
.wwp-vinyl.has-custom-bg {
	--vp-bg: var(--vp-custom);
	--vp-bg-top: var(--vp-custom);
	--vp-bg-bottom: var(--vp-custom);
}

/*
 * Split's button strip: the pen's LIGHT raised buttons with dark arrows,
 * sitting on the card's own dark grey - the most contrast either way, and the
 * same buttons as the light deck above, so it reads as one player. The
 * shuffle / repeat glyphs are light grey on the strip. --vp-bg is the card's
 * own grey (King paints it rgb(32, 32, 36)) because the shuffle glyph masks
 * part of itself in it.
 */
.wwp-vinyl.is-split .wwp-vinyl__actions {
	--vp-bg: #202024;
	--vp-emboss: rgba(255, 255, 255, 0.9);
	--vp-btn-top: #b9bac1;
	--vp-btn-bottom: #f2f2f5;
	--vp-btn-face: #fbfbfc;
	--vp-btn-rim: #a7a8b0;
	--vp-btn-glow: rgba(255, 255, 255, 0.8);
	--vp-btn-hover: #ffffff;
	--vp-btn-shadow: 0 0.2em 0.6em rgba(0, 0, 0, 0.55);
	--vp-arrow: #34343a;
	--vp-arrow-on: #1f8fe0;
	--vp-toggle: #d2d3da;
	--vp-toggle-on: #6cc0ff;
}

/* --- the card around it ------------------------------------------------- */

/*
 * Full width, like a cover image (an inset read as "narrower than the other
 * cards" — owner), rounded on all four corners so it still reads as a panel
 * above King's likes/date box.
 *
 * It GROWS to fill the card: the grid stretches every card to its row's
 * height (style.css, "Uniform grid cards"), so the panel takes whatever the
 * row gives and centres the player in it. Its natural size is deliberately a
 * little SHORTER than a neighbouring cover card at every width (see the
 * sizing note on .wwp-vinyl__player), so it never sets the row's height —
 * sizing it to match exactly only ever held at one screen width.
 */
.wwp-vinyl {
	container-type: inline-size;
	position: relative;
	flex: 1 1 auto;
	/*
	 * In one column there is no row to stretch to, so the panel is at least
	 * as tall as a cover card's cover + title block (300px + ~68px; see
	 * "Uniform grid cards" in style.css). In a row it never exceeds a
	 * neighbour: every neighbour is at least that tall.
	 */
	min-height: calc(var(--wwp-card-cover-h, 300px) + 68px);
	display: flex;
	flex-direction: column;
	margin: 0;
	border-radius: 14px;
	background-color: var(--vp-bg);
	background-image: linear-gradient(var(--vp-bg-top), var(--vp-bg-bottom));
	box-shadow:
		inset 0 0.0625rem 0 var(--vp-hi),
		inset 0 -0.125rem 0.0625rem rgba(0, 0, 0, 0.18);
	overflow: hidden;
}

/*
 * The format badge and share button are white-on-image in a normal card. On
 * the light panel they would vanish, so they get a dark chip of their own.
 */
article:has(> .wwp-vinyl) .content-right-top .king-post-format a,
article:has(> .wwp-vinyl) .post-featured-trending .king-ft-link {
	background-color: rgba(24, 24, 28, 0.78);
	color: #fff;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

/* The card's own footer keeps its natural height; the panel takes the rest. */
article:has(> .wwp-vinyl) > .article-meta {
	flex: 0 0 auto;
	padding-top: 12px;
}

/*
 * No category / title block under the player: the panel already names the
 * track, and with it the card stood taller than its row (owner, 2026-09-28).
 * The likes / views / comments / date box stays.
 */
article:has(> .wwp-vinyl) .article-meta-head {
	display: none;
}

article:has(> .wwp-vinyl) .content-avatar img {
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.35);
}

/* --- the player --------------------------------------------------------- */

.wwp-vinyl__player {
	position: relative;
	/* 20em = the card width, as in the pen's 20em-wide player. */
	/*
	 * Sizing: with the record at its 7em natural size the panel is ~16em =
	 * 0.8 x the card width. A cover card is ~0.68w of image + ~120px of title
	 * and footer, so the vinyl card stays the shorter one at every
	 * multi-column width and never sets the row's height; the record then
	 * grows into the space the row gives it. A fixed 10em record overshot at
	 * 1440px (a 336px card set its row 24px taller).
	 *
	 * The 16px cap matters as much as the flex: King's cover images are a
	 * FIXED height (cards measure 349px whether 214px or 589px wide), so a
	 * player that kept scaling with width outgrew them on two-column tablets
	 * (a 393px card set its row 26px taller). At 16px the natural panel is
	 * ~256px + footer, under a cover card at every width.
	 */
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-size: clamp(9px, 5cqi, 16px);
	padding-top: 0.6em;
	color: var(--vp-text);
	font-weight: 300;
	line-height: 1.25;
	-webkit-user-select: none;
	user-select: none;
}

.wwp-vinyl__album {
	position: relative;
	/*
	 * Every ring below is in em and is drawn from the edge inward, so a disc
	 * of any size keeps its grooves and simply shows more or less lead-in.
	 */
	/*
	 * The record FLEXES: 7em is its natural size (what keeps the panel
	 * shorter than a neighbouring cover card at every width), and it grows
	 * into whatever height the row hands the panel, up to 78% of the card's
	 * width - the pen's own proportion (15em of 20em). Height comes from
	 * flex; aspect-ratio derives the width, so it stays a circle.
	 */
	flex: 1 1 7em;
	align-self: center;
	width: auto;
	height: auto;
	min-height: 7em;
	max-height: 78cqi;
	aspect-ratio: 1;
	margin: 0 auto 0.6em;
	overflow: hidden;
	background-color: #111;
	border: 1px solid #111;
	border-radius: 50%;
	cursor: pointer;
	box-shadow:
		0 0.0625em 0.1875em rgba(0, 0, 0, 0.5),
		0 0 0.125em 0.3125em var(--vp-rim),
		0 0.0625em 0 0.375em var(--vp-rim-edge),
		0 0 0.375em 0.325em rgba(0, 0, 0, 0.3),
		0 0 0.5em 0.375em rgba(0, 0, 0, 0.3),
		0 0.25em 1em 0.5em rgba(0, 0, 0, 0.15),
		inset 0 0 0 0.0625em rgba(0, 0, 0, 0.5),
		inset 0 0 0 0.1875em rgba(255, 255, 255, 1),
		inset 0 0 0 0.375em rgba(0, 0, 0, 0.5),
		inset 0 0 0 0.4375em rgba(255, 255, 255, 0.2),
		inset 0 0 0 0.5em rgba(0, 0, 0, 0.5),
		inset 0 0 0 0.5625em rgba(255, 255, 255, 0.3),
		inset 0 0 0 0.625em rgba(0, 0, 0, 0.5),
		inset 0 0 0 0.6875em rgba(255, 255, 255, 0.2),
		inset 0 0 0 0.75em rgba(0, 0, 0, 0.5),
		inset 0 0 0 0.8125em rgba(255, 255, 255, 0.3),
		inset 0 0 0 0.875em rgba(0, 0, 0, 0.5),
		inset 0 0 0 0.9375em rgba(255, 255, 255, 0.3),
		inset 0 0 0 1em rgba(0, 0, 0, 0.5),
		inset 0 0 0 1.0625em rgba(255, 255, 255, 0.2),
		inset 0 0 0 1.125em rgba(0, 0, 0, 0.5),
		inset 0 0 0 1.1875em rgba(255, 255, 255, 0.3),
		inset 0 0 0 1.25em rgba(0, 0, 0, 0.5),
		inset 0 0 0 1.3125em rgba(255, 255, 255, 0.2),
		inset 0 0 0 1.375em rgba(255, 255, 255, 0.2),
		inset 0 0 0 1.4375em rgba(0, 0, 0, 0.5),
		inset 0 0 0 1.5em rgba(255, 255, 255, 0.3),
		inset 0 0 0 1.5625em rgba(0, 0, 0, 0.5),
		inset 0 0 0 1.625em rgba(255, 255, 255, 0.3),
		inset 0 0 0 1.6875em rgba(0, 0, 0, 0.5),
		inset 0 0 0 1.75em rgba(255, 255, 255, 0.2),
		inset 0 0 0 1.8125em rgba(0, 0, 0, 0.5),
		inset 0 0 0 1.875em rgba(255, 255, 255, 0.2),
		inset 0 0 0 1.9375em rgba(0, 0, 0, 0.5),
		inset 0 0 0 2em rgba(255, 255, 255, 0.3),
		inset 0 0 0 2.0625em rgba(0, 0, 0, 0.5),
		inset 0 0 0 2.125em rgba(0, 0, 0, 0.5),
		inset 0 0 0 2.1875em rgba(255, 255, 255, 0.1),
		inset 0 0 0 2.25em rgba(0, 0, 0, 0.5),
		inset 0 0 0 2.3125em rgba(255, 255, 255, 0.2),
		inset 0 0 0 2.375em rgba(255, 255, 255, 0.1),
		inset 0 0 0 2.4375em rgba(0, 0, 0, 0.5),
		inset 0 0 0 2.5em rgba(255, 255, 255, 0.3),
		inset 0 0 0 2.5625em rgba(0, 0, 0, 0.5),
		inset 0 0 0 2.625em rgba(255, 255, 255, 0.2),
		inset 0 0 0 2.6875em rgba(0, 0, 0, 0.5),
		inset 0 0 0 2.75em rgba(255, 255, 255, 0.2),
		inset 0 0 0 2.8125em rgba(0, 0, 0, 0.5),
		inset 0 0 0 2.875em rgba(255, 255, 255, 0.2),
		inset 0 0 0 2.9375em rgba(0, 0, 0, 0.5),
		inset 0 0 0 3em rgba(255, 255, 255, 0.3),
		inset 0 0 0 3.0625em rgba(0, 0, 0, 0.5),
		inset 0 0 0 3.125em rgba(0, 0, 0, 0.5),
		inset 0 0 0 3.1875em rgba(255, 255, 255, 0.2),
		inset 0 0 0 3.25em rgba(0, 0, 0, 0.5),
		inset 0 0 0 3.3125em rgba(255, 255, 255, 0.2),
		inset 0 0 0 3.375em rgba(255, 255, 255, 0.1),
		inset 0 0 0 3.4375em rgba(0, 0, 0, 0.5),
		inset 0 0 0 3.5em rgba(255, 255, 255, 0.3);
}

/* Sheen across the grooves. */
.wwp-vinyl__album::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	background-image:
		linear-gradient(-45deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.125), rgba(255, 255, 255, 0) 70%),
		linear-gradient(-48deg, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0) 55%),
		linear-gradient(-42deg, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0) 55%),
		radial-gradient(circle at top left, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 80%),
		radial-gradient(circle at bottom right, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 80%);
}

/*
 * The label: 40% of the record, the pen's ratio (6em of 15em), so it scales
 * with the record as the record flexes. The inner div is the full label.
 */
.wwp-vinyl__cover,
.wwp-vinyl__cover div {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	width: 40%;
	height: 40%;
	overflow: hidden;
	transform-origin: 0 0;
	transform: rotate(0) translate(-50%, -50%);
	border-radius: 50%;
	animation: wwp-vinyl-spin 4s linear infinite paused;
}

.wwp-vinyl__cover div {
	width: 100%;
	height: 100%;
	border-radius: 0;
	animation: wwp-vinyl-spin 2s linear infinite reverse paused;
}

.wwp-vinyl__cover::before,
.wwp-vinyl__cover::after {
	content: '';
	position: absolute;
	z-index: 10;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	transform-origin: 0 0;
	transform: rotate(0) translate(-50%, -50%);
	border-radius: 50%;
	box-shadow: inset 0 0.0625em rgba(255, 255, 255, 0.3);
	animation: wwp-vinyl-spin 4s linear infinite reverse paused;
}

/* The spindle. */
.wwp-vinyl__cover::after {
	width: 0.25em;
	height: 0.3125em;
	margin-top: -0.0625em;
	background-color: #eee;
	border-radius: 0.125em;
	box-shadow:
		inset 0 -0.0625em 0.0625em rgba(0, 0, 0, 0.5),
		inset 0.0625em -0.0625em 0.125em rgba(255, 255, 255, 0.15),
		inset -0.0625em -0.0625em 0.125em rgba(255, 255, 255, 0.15),
		inset 0 -0.125em 0.125em rgba(0, 0, 0, 0.8),
		0 0.0625em 0.0625em rgba(0, 0, 0, 0.5),
		0 0.0625em 0.25em 0.0625em rgba(0, 0, 0, 0.15),
		0 0 0.25em 0.125em rgba(0, 0, 0, 0.15);
}

/*
 * --wwp-vinyl-label-zoom enlarges the label inside its round mask. The
 * WorldWidePop label PNG has no alpha: its red disc covers ~87% of the square
 * and the corners are a baked-in checkerboard, so at 100% a checker ring
 * shows. 1.16 fills the mask with the disc. Set per site in the Customizer.
 */
.wwp-vinyl__cover img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(100% * var(--wwp-vinyl-label-zoom, 1.16));
	height: calc(100% * var(--wwp-vinyl-label-zoom, 1.16));
	max-width: none;
	margin: 0;
	object-fit: cover;
	transform-origin: 0 0;
	transform: rotate(0) translate(-50%, -50%);
	animation: wwp-vinyl-spin 4s linear infinite paused;
}

.wwp-vinyl__player.is-playing .wwp-vinyl__cover img,
.wwp-vinyl__player.is-ffing .wwp-vinyl__cover,
.wwp-vinyl__player.is-ffing .wwp-vinyl__cover::before,
.wwp-vinyl__player.is-ffing .wwp-vinyl__cover::after,
.wwp-vinyl__player.is-rwing .wwp-vinyl__cover div {
	animation-play-state: running;
}

/* The deck: record + time + title. Takes the panel's spare height. */
.wwp-vinyl__deck {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/* --- Split ---------------------------------------------------------------
 *
 * Owner's third variation: laid out like a cover card. The deck (record,
 * time, title) is a light area EXACTLY the height of a cover image, rounded
 * like one; the buttons sit below it on the card's own dark grey, where a
 * cover card has its title. So the record lines up with the covers beside it
 * and the buttons line up with their titles.
 */
.wwp-vinyl.is-split {
	background: none;
	box-shadow: none;
	border-radius: 14px 14px 0 0;
}

.wwp-vinyl.is-split .wwp-vinyl__player {
	justify-content: flex-start;
	padding-top: 0;
}

.wwp-vinyl.is-split .wwp-vinyl__deck {
	flex: 0 0 auto;
	box-sizing: border-box;
	height: var(--wwp-card-cover-h, 300px);
	padding-top: 0.9em;
	background-color: var(--vp-bg);
	background-image: linear-gradient(var(--vp-bg-top), var(--vp-bg-bottom));
	border-radius: 14px 14px 0 0;
	box-shadow: inset 0 -0.125rem 0.0625rem rgba(0, 0, 0, 0.12);
}

.wwp-vinyl.is-split .wwp-vinyl__album {
	min-height: 0;
}

.wwp-vinyl.is-split .wwp-vinyl__info {
	padding-bottom: 0.7em;
}

/* The strip takes what is left above the likes box, controls centred in it. */
.wwp-vinyl.is-split .wwp-vinyl__actions {
	flex: 1 1 auto;
	padding: 0.25em 0;
}

/* --- time, title, artist ----------------------------------------------- */

.wwp-vinyl__info {
	padding: 0 0.75em;
	text-align: center;
	text-shadow: 0 0.0625em var(--vp-emboss);
}

.wwp-vinyl__time {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 0.3em;
	font-size: 0.8em;
	font-variant-numeric: tabular-nums;
}

.wwp-vinyl__time > * {
	margin: 0 0.5em;
}

.wwp-vinyl__progress {
	position: relative;
	flex-grow: 2;
	height: 0.1875em;
	background-color: var(--vp-bar);
	border-radius: 0.125em;
	box-shadow: 0 0.0625em var(--vp-emboss);
	cursor: pointer;
	touch-action: none;
}

/* A fat, invisible hit area — a 2px line is not a touch target. */
.wwp-vinyl__progress::before {
	content: '';
	position: absolute;
	inset: -0.75em 0;
}

.wwp-vinyl__progress span {
	display: block;
	width: 0;
	height: 100%;
	background-color: var(--vp-bar-fill);
	border-radius: inherit;
}

.wwp-vinyl__progress:focus-visible {
	outline: 2px solid #8bc3e6;
	outline-offset: 0.375em;
}

.wwp-vinyl__track {
	overflow: hidden;
	color: var(--vp-title);
	font-family: inherit;
	font-size: 1.1em;
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.wwp-vinyl__artist {
	margin-top: 0.1em;
	color: var(--vp-text);
	font-size: 0.875em;
}

.wwp-vinyl__artist {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.wwp-vinyl__sep[hidden] {
	display: none;
}

.wwp-vinyl__count {
	margin-left: 0.5em;
	color: var(--vp-muted);
	font-size: 0.875em;
	font-variant-numeric: tabular-nums;
}

.wwp-vinyl__count[hidden] {
	display: none;
}

/* --- transport ---------------------------------------------------------- */

.wwp-vinyl__actions {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 0.4em 0 0.6em;
	font-size: 0.8em;
}

/* Undo whatever King or a plugin paints on a bare <button>. */
.wwp-vinyl__actions button {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	font-size: 100%;
	line-height: 1;
	color: inherit;
	background-color: transparent;
	border: none;
	box-shadow: none;
	text-shadow: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.wwp-vinyl__actions button:focus {
	outline: none;
}

.wwp-vinyl__actions button:focus-visible {
	outline: 2px solid #8bc3e6;
	outline-offset: 2px;
	border-radius: 50%;
}

.wwp-vinyl__actions button:disabled {
	opacity: 0.35;
	cursor: default;
}

.wwp-vinyl__actions .wwp-vinyl__button {
	width: 3em;
	height: 3em;
	background-image: linear-gradient(var(--vp-btn-top), var(--vp-btn-bottom));
	border-radius: 50%;
	box-shadow: var(--vp-btn-shadow);
}

.wwp-vinyl__button::before {
	content: '';
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	width: 80%;
	height: 80%;
	transform: translate(-50%, -50%);
	background-color: var(--vp-btn-face);
	border: 0.125em solid var(--vp-btn-rim);
	border-radius: 50%;
	box-shadow: inset 0 0.25em 1em -0.25em var(--vp-btn-glow);
}

.wwp-vinyl__button:hover::before {
	background-color: var(--vp-btn-hover);
}

.wwp-vinyl__actions .wwp-vinyl__play {
	width: 4em;
	height: 4em;
}

.wwp-vinyl__actions .wwp-vinyl__rw {
	right: -0.25em;
	margin-left: 0.375em;
	transform: scaleX(-1);
}

.wwp-vinyl__actions .wwp-vinyl__ff {
	left: -0.25em;
	margin-right: 0.375em;
}

.wwp-vinyl__button .arrow {
	position: absolute;
	z-index: 10;
	top: 50%;
	left: 50%;
	width: 30%;
	height: 30%;
	overflow: hidden;
	transform: translate(-50%, -50%);
}

.wwp-vinyl__button .arrow::before,
.wwp-vinyl__button .arrow::after {
	content: '';
	position: absolute;
	left: -50%;
	width: 100%;
	height: 100%;
	transform: scale(1.2, 0.7) rotate(45deg);
	background-color: var(--vp-arrow);
	box-shadow:
		inset 0 0.125em 0.125em -0.0625em rgba(0, 0, 0, 0.15),
		0.0625em 0.0625em 0.125em var(--vp-emboss);
}

.wwp-vinyl__button .arrow::after {
	left: 0;
	transform: none;
	background-color: transparent;
	box-shadow: inset 0.0625em 0 0.125em -0.0625em rgba(0, 0, 0, 0.1);
}

.wwp-vinyl__player.is-paused .wwp-vinyl__play .arrow {
	margin-left: 0.1875em;
}

.wwp-vinyl__player.is-playing .wwp-vinyl__play .arrow::before,
.wwp-vinyl__player.is-playing .wwp-vinyl__play .arrow::after {
	left: 0;
	width: 0.4375em;
	transform: none;
	background-color: var(--vp-arrow);
	box-shadow:
		inset 0.0625em 0.125em 0.125em -0.0625em rgba(0, 0, 0, 0.15),
		0.0625em 0.0625em 0.125em var(--vp-emboss);
}

.wwp-vinyl__player.is-playing .wwp-vinyl__play .arrow::after {
	left: auto;
	right: 0;
}

.wwp-vinyl__rw .arrow,
.wwp-vinyl__ff .arrow {
	width: 20%;
	height: 20%;
	margin-left: 12%;
}

.wwp-vinyl__rw .arrow:first-child,
.wwp-vinyl__ff .arrow:first-child {
	margin-left: -4%;
}

.wwp-vinyl__button:active .arrow::before,
.wwp-vinyl__player.is-rwing .wwp-vinyl__rw .arrow::before,
.wwp-vinyl__player.is-ffing .wwp-vinyl__ff .arrow::before,
.wwp-vinyl__player.is-playing .wwp-vinyl__play .arrow::before,
.wwp-vinyl__player.is-playing .wwp-vinyl__play .arrow::after {
	background-color: var(--vp-arrow-on);
}

/*
 * Shuffle and repeat: the pen draws each in a 1.375em box, which is also its
 * tap target - 18px on a phone. The drawing now lives in .wwp-vinyl__glyph
 * and the button around it is a 2.75em (44px+ on phones) target.
 */
.wwp-vinyl__actions .wwp-vinyl__shuffle,
.wwp-vinyl__actions .wwp-vinyl__repeat {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75em;
	height: 2.75em;
	color: var(--vp-toggle);
	border-radius: 50%;
}

.wwp-vinyl__glyph {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 1.375em;
	height: 1.375em;
}

/* Shuffle — drawn entirely in CSS, as in the pen. */

.wwp-vinyl__shuffle .arrow {
	position: absolute;
	top: 0.1875em;
	left: 0;
	width: 0.375em;
	height: 0.125em;
	color: inherit;
	background-color: currentColor;
}

.wwp-vinyl__shuffle .arrow::before {
	content: '';
	position: absolute;
	top: 0;
	left: calc(100% + 0.125em);
	width: 0.5em;
	height: 1em;
	transform: skewX(30deg);
	border-bottom: 0.125em solid;
	border-left: 0.125em solid;
	box-shadow:
		-0.3125em 0 0 -0.1875em var(--vp-bg),
		inset 0.375em 0.25em 0 -0.25em var(--vp-bg);
}

.wwp-vinyl__shuffle .arrow::after {
	content: '';
	position: absolute;
	top: 0.6875em;
	left: calc(100% + 0.625em);
	border: 0.25em solid transparent;
	border-left-width: 0.375em;
	border-left-color: currentColor;
}

.wwp-vinyl__shuffle .arrow:first-child {
	transform-origin: 0 0.5em;
	transform: scaleY(-1);
}

/* Repeat. */
.wwp-vinyl__repeat .wwp-vinyl__glyph {
	border: 0.125em solid;
	border-right-color: transparent;
	border-radius: 50%;
}

.wwp-vinyl__repeat .wwp-vinyl__glyph::before {
	content: '';
	position: absolute;
	top: -0.125em;
	left: -0.125em;
	width: calc(100% + 0.25em);
	height: calc(100% + 0.25em);
	transform: rotate(-45deg);
	border: 0.125em solid transparent;
	border-right-color: currentColor;
	border-radius: 50%;
}

.wwp-vinyl__repeat .wwp-vinyl__glyph::after {
	content: '';
	position: absolute;
	top: 50%;
	right: -0.3125em;
	border: 0.25em solid transparent;
	border-top-width: 0.375em;
	border-top-color: currentColor;
}

.wwp-vinyl__actions .wwp-vinyl__shuffle.is-active,
.wwp-vinyl__actions .wwp-vinyl__repeat.is-active {
	color: var(--vp-toggle-on);
}

/* Their 2.75em boxes already carry the breathing room the pen gave them. */
.wwp-vinyl__actions .wwp-vinyl__shuffle {
	margin-right: 0.125em;
}

.wwp-vinyl__actions .wwp-vinyl__repeat {
	margin-left: 0.125em;
}

/*
 * Phone-sized cards (one column on an iPhone / large phone, two on a tablet):
 * a thumb, not a pointer, so the transport comes up to ~46px prev / next and
 * ~61px play. Multi-column desktop cards (<340px) keep the tighter size,
 * which is what keeps the panel shorter than its neighbours.
 */
@container (min-width: 340px) {
	.wwp-vinyl__actions {
		font-size: 0.95em;
	}
}

@keyframes wwp-vinyl-spin {
	100% {
		transform: rotate(360deg) translate(-50%, -50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wwp-vinyl__cover,
	.wwp-vinyl__cover div,
	.wwp-vinyl__cover::before,
	.wwp-vinyl__cover::after,
	.wwp-vinyl__cover img {
		animation: none;
	}
}

/*
 * SoundCloud's widget, behind the record. It must stay IN the page (a
 * display:none iframe may never finish loading), so it is a 1px, invisible,
 * untouchable frame; the record's own buttons drive it.
 */
.wwp-vinyl__sc {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

/*
 * Source badge in the "who · what" line: SoundCloud's logo (always, linked to
 * the track - SoundCloud asks embeds to credit it), or a "Suno" tag when the
 * card opts in. MP3 / R2 files carry none.
 */
.wwp-vinyl__src {
	display: inline-flex;
	align-items: center;
	margin-right: 0.4em;
	vertical-align: -0.05em;
	text-decoration: none;
	text-shadow: none;
}

.wwp-vinyl__src[hidden] {
	display: none;
}

.wwp-vinyl__src.is-soundcloud {
	color: #ff5500;
	font-size: 1.15em;
}

.wwp-vinyl__src.is-suno {
	padding: 0.1em 0.5em;
	color: #fff;
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.04em;
	background: #111;
	border-radius: 1em;
}

/* --- Video loop ----------------------------------------------------------
 *
 * Split, with the light deck replaced by a silent square video loop. The
 * record shrinks into the bottom-left corner and keeps spinning; time, title
 * and artist sit beside it on a scrim and fade out a few seconds into a song
 * (.is-quiet, set by vinyl-player.js), coming back on a tap, a pause or a new
 * track. The card carries .is-split too, so its height and button strip are
 * Split's.
 */
.wwp-vinyl.is-video .wwp-vinyl__deck {
	position: relative;
	overflow: hidden;
	padding: 0;
	background: #000;
}

.wwp-vinyl__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

/* Scrim under the words; fades with them so the quiet video is clean. */
.wwp-vinyl.is-video .wwp-vinyl__deck::after {
	content: '';
	position: absolute;
	inset: auto 0 0;
	z-index: 1;
	height: 62%;
	background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.72));
	pointer-events: none;
	transition: opacity 0.6s ease;
}

.wwp-vinyl.is-video .wwp-vinyl__album {
	position: absolute;
	left: 0.8em;
	bottom: 0.8em;
	z-index: 2;
	flex: none;
	width: calc(38cqi * var(--wwp-rec-scale, 0.8));
	height: auto;
	min-height: 0;
	max-height: none;
	margin: 0;
}

.wwp-vinyl.is-video .wwp-vinyl__info {
	position: absolute;
	left: calc(38cqi * var(--wwp-rec-scale, 0.8) + 1.5em);
	right: 0.8em;
	bottom: 0.9em;
	z-index: 2;
	padding: 0;
	text-align: left;
	--vp-title: #ffffff;
	--vp-text: #e7e7ec;
	--vp-muted: #c9c9d0;
	--vp-emboss: rgba(0, 0, 0, 0.55);
	--vp-bar: rgba(255, 255, 255, 0.35);
	--vp-bar-fill: #ffffff;
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.wwp-vinyl.is-video .wwp-vinyl__time {
	justify-content: flex-start;
	margin: 0 0 0.35em;
	padding: 0;
}

.wwp-vinyl.is-video .wwp-vinyl__time > * {
	margin: 0 0.4em 0 0;
}

.wwp-vinyl.is-video .wwp-vinyl__track {
	font-size: 1em;
}

/* Quiet: the words and scrim step aside; the record keeps spinning. */
.wwp-vinyl.is-video .is-quiet .wwp-vinyl__info {
	opacity: 0;
	transform: translateY(0.4em);
	pointer-events: none;
}

.wwp-vinyl.is-video .wwp-vinyl__player.is-quiet .wwp-vinyl__deck::after {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.wwp-vinyl.is-video .wwp-vinyl__info,
	.wwp-vinyl.is-video .wwp-vinyl__deck::after {
		transition: none;
	}
}

/* --- 45 single --------------------------------------------------------------
 * A 45's label is proportionally bigger than an LP's.
 */
.wwp-vinyl.is-45 .wwp-vinyl__cover {
	width: 52%;
	height: 52%;
}

/* --- Suno player -------------------------------------------------------------
 *
 * Suno's own embed fills the cover (it streams the song itself), and our
 * record badge floats over its bottom-right watermark: rounded on all four
 * corners and inset from the edges, so it reads as a badge rather than a
 * strip cut off by the card. Suno's play button and seek bar stay uncovered -
 * they are the only controls its audio has. King's category and title show
 * below, as on a cover card.
 */
.wwp-vinyl.is-suno {
	flex: 0 0 auto;
	min-height: 0;
	background: none;
	box-shadow: none;
	border-radius: 14px 14px 0 0;
}

article:has(> .wwp-vinyl.is-suno) .article-meta-head {
	display: block;
}

article:has(> .wwp-vinyl.is-suno) > .article-meta {
	flex: 1 1 auto;
	padding-top: 0;
}

.wwp-vinyl.is-suno .wwp-vinyl__deck {
	position: relative;
	flex: none;
	height: var(--wwp-card-cover-h, 300px);
	overflow: hidden;
	background: #11131f;
	border-radius: 14px 14px 0 0;
}

.wwp-vinyl__sunoframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.wwp-vinyl__badge {
	/* Taps pass through to the play layer underneath. */
	pointer-events: none;
	position: absolute;
	right: 8px;
	bottom: 8px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 6px 14px 6px 6px;
	color: var(--wwp-badge-ink, #241a05);
	font-size: 13px;
	line-height: 1.2;
	/* A metallic sweep of the chosen colour (WorldWidePop gold by default). */
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--wwp-badge, #e0b451) 55%, #fff) 0%,
		var(--wwp-badge, #e0b451) 45%,
		color-mix(in srgb, var(--wwp-badge, #e0b451) 78%, #000) 100%
	);
	border-radius: 999px 14px 14px 999px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.wwp-vinyl__badge-text strong {
	display: block;
	font-weight: 700;
}

.wwp-vinyl__badge-state {
	font-size: 11px;
	font-weight: 600;
	opacity: 0.8;
}

.wwp-vinyl__mini {
	position: relative;
	flex: none;
	width: 54px;
	height: 54px;
	overflow: hidden;
	border-radius: 50%;
	background:
		repeating-radial-gradient(circle, #111 0 1.5px, #242424 1.5px 3px);
	/* Between nothing and a white ring: a thin warm edge and a soft lift. */
	box-shadow:
		0 0 0 1.5px rgba(255, 240, 200, 0.75),
		0 0 9px 1px rgba(255, 214, 120, 0.5),
		0 3px 7px rgba(0, 0, 0, 0.45);
	animation: wwp-vinyl-mini 3s linear infinite paused;
}

.wwp-vinyl__mini img {
	position: absolute;
	inset: 30%;
	width: 40%;
	height: 40%;
	border-radius: 50%;
	object-fit: cover;
	transform: scale(var(--wwp-vinyl-label-zoom, 1.16));
}

.wwp-vinyl.is-45 .wwp-vinyl__mini img {
	inset: 24%;
	width: 52%;
	height: 52%;
}

.wwp-vinyl__sunocard.is-playing .wwp-vinyl__mini {
	animation-play-state: running;
}

@keyframes wwp-vinyl-mini {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wwp-vinyl__mini {
		animation: none;
	}
}

/*
 * The layer over Suno's embed: the embed is the picture, this is the play
 * button (it opens Suno's own player in a small window - see the JS). A
 * round play mark in the middle, shown until the song is playing.
 */
.wwp-vinyl__sunocatch {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: rgba(0, 0, 0, 0);
	border: 0;
	cursor: pointer;
	transition: background 0.2s ease;
}

.wwp-vinyl__sunocatch:hover {
	background: rgba(0, 0, 0, 0.18);
}

.wwp-vinyl__sunocatch:focus-visible {
	outline: 2px solid var(--wwp-badge, #e0b451);
	outline-offset: -4px;
}

.wwp-vinyl__sunoplay {
	position: relative;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--wwp-badge, #e0b451);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.wwp-vinyl__sunoplay::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 54%;
	border-style: solid;
	border-width: 12px 0 12px 20px;
	border-color: transparent transparent transparent var(--wwp-badge-ink, #241a05);
	transform: translate(-50%, -50%);
}

.wwp-vinyl__sunocatch:hover .wwp-vinyl__sunoplay {
	transform: scale(1.06);
}

.wwp-vinyl__sunocard.is-playing .wwp-vinyl__sunoplay {
	opacity: 0;
}

/* --- Cover art ---------------------------------------------------------------
 *
 * The Suno card's look, playing our own files (owner: "the skin can be
 * reused, the embedded Suno dead end put to the side"). Artwork fills the
 * cover; a gold play button in the middle; the record badge bottom-right;
 * progress as a thin seekable bar on the cover's bottom edge. King's title
 * shows below, as on a cover card.
 */
.wwp-vinyl.is-cover {
	flex: 0 0 auto;
	min-height: 0;
	background: none;
	box-shadow: none;
	border-radius: 14px 14px 0 0;
}

article:has(> .wwp-vinyl.is-cover) .article-meta-head {
	display: block;
}

article:has(> .wwp-vinyl.is-cover) > .article-meta {
	flex: 1 1 auto;
	padding-top: 0;
}

.wwp-vinyl.is-cover .wwp-vinyl__player {
	padding: 0;
	color: var(--wwp-badge-ink, #241a05);
}

.wwp-vinyl.is-cover .wwp-vinyl__deck {
	position: relative;
	flex: none;
	height: var(--wwp-card-cover-h, 300px);
	overflow: hidden;
	background: #111;
	border-radius: 14px 14px 0 0;
}

.wwp-vinyl__art {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	transition: background-image 0.4s ease;
}

/* The whole cover is the play button; the gold disc marks it. */
.wwp-vinyl.is-cover .wwp-vinyl__bigplay {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: rgba(0, 0, 0, 0);
	border: 0;
	cursor: pointer;
	transition: background 0.2s ease;
}

.wwp-vinyl.is-cover .wwp-vinyl__bigplay:hover {
	background: rgba(0, 0, 0, 0.16);
}

.wwp-vinyl.is-cover .wwp-vinyl__bigplay:focus-visible {
	outline: 2px solid var(--wwp-badge, #e0b451);
	outline-offset: -4px;
}

.wwp-vinyl.is-cover .wwp-vinyl__bigplay > span {
	position: relative;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--wwp-badge, #e0b451);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
	transition: transform 0.2s ease, opacity 0.25s ease;
}

/* Play triangle. */
.wwp-vinyl.is-cover .wwp-vinyl__bigplay > span::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 54%;
	border-style: solid;
	border-width: 12px 0 12px 20px;
	border-color: transparent transparent transparent var(--wwp-badge-ink, #241a05);
	transform: translate(-50%, -50%);
}

/* Pause bars while playing; the disc steps back until hovered or focused. */
.wwp-vinyl.is-cover .is-playing .wwp-vinyl__bigplay > span {
	opacity: 0;
}

.wwp-vinyl.is-cover .is-playing .wwp-vinyl__bigplay:hover > span,
.wwp-vinyl.is-cover .is-playing .wwp-vinyl__bigplay:focus-visible > span {
	opacity: 0.92;
}

.wwp-vinyl.is-cover .is-playing .wwp-vinyl__bigplay > span::after {
	left: 50%;
	width: 18px;
	height: 22px;
	border: 0;
	border-left: 6px solid var(--wwp-badge-ink, #241a05);
	border-right: 6px solid var(--wwp-badge-ink, #241a05);
	box-sizing: border-box;
}

.wwp-vinyl.is-cover .wwp-vinyl__bigplay:hover > span {
	transform: scale(1.06);
}

/* The badge: the Suno card's, but the text is the player's own. */
.wwp-vinyl.is-cover .wwp-vinyl__badge {
	bottom: 14px;
	max-width: calc(100% - 22px);
}

.wwp-vinyl.is-cover .wwp-vinyl__badge-text {
	min-width: 0;
}

.wwp-vinyl.is-cover .wwp-vinyl__track {
	display: block;
	overflow: hidden;
	color: inherit;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.wwp-vinyl.is-cover .wwp-vinyl__artist {
	display: block;
	margin: 0;
	overflow: hidden;
	color: inherit;
	font-size: 11px;
	font-weight: 600;
	opacity: 0.8;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-shadow: none;
}

.wwp-vinyl.is-cover .wwp-vinyl__count {
	color: inherit;
}

/* The record in the badge: the small disc, no white rim. */
.wwp-vinyl.is-cover .wwp-vinyl__album {
	flex: none;
	align-self: center;
	width: 54px;
	height: 54px;
	min-height: 0;
	max-height: none;
	margin: 0;
	border: 0;
	font-size: 9px;
	background: repeating-radial-gradient(circle, #111 0 1.5px, #242424 1.5px 3px);
	box-shadow:
		0 0 0 1.5px rgba(255, 240, 200, 0.75),
		0 0 9px 1px rgba(255, 214, 120, 0.5),
		0 3px 7px rgba(0, 0, 0, 0.45);
}

/* Progress: a thin bar along the cover's bottom edge, seekable. */
.wwp-vinyl.is-cover .wwp-vinyl__time {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	margin: 0;
	padding: 0;
}

.wwp-vinyl.is-cover .wwp-vinyl__time > * {
	margin: 0;
}

.wwp-vinyl.is-cover .wwp-vinyl__current,
.wwp-vinyl.is-cover .wwp-vinyl__duration {
	display: none;
}

.wwp-vinyl.is-cover .wwp-vinyl__progress {
	height: 4px;
	background-color: rgba(255, 255, 255, 0.22);
	border-radius: 0;
	box-shadow: none;
}

.wwp-vinyl.is-cover .wwp-vinyl__progress span {
	background-color: var(--wwp-badge, #e0b451);
}

.wwp-vinyl.is-cover .wwp-vinyl__actions[hidden] {
	display: none;
}

/* --- the visual stage ---------------------------------------------------------
 *
 * The Cover art and Video loop skins' picture: the cover image, then the
 * card's loops, images, SVGs and HTML animations. Layers stack; the showing
 * one is .is-on, the one going out .is-leaving for the length of the
 * transition (one beat when the card has a BPM - set by the JS as
 * --wwp-fx-dur). Transitions: fade, slide, zoom, blur, wipe.
 */
.wwp-vinyl__stage {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: #000;
	--wwp-fx-dur: 0.9s;
}

.wwp-vinyl__layer {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0;
	background-position: center;
	background-size: cover;
	transition:
		opacity var(--wwp-fx-dur) ease,
		transform var(--wwp-fx-dur) ease,
		filter var(--wwp-fx-dur) ease,
		clip-path var(--wwp-fx-dur) ease;
	will-change: opacity, transform;
}

.wwp-vinyl__layer.is-on {
	z-index: 2;
	opacity: 1;
}

.wwp-vinyl__layer.is-leaving {
	z-index: 1;
}

.wwp-vinyl__layer > img,
.wwp-vinyl__layer > video,
.wwp-vinyl__layer > iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
	pointer-events: none;
}

/* SVG artwork is often drawn to fit, not to fill: show all of it. */
.wwp-vinyl__layer.is-svg > img {
	object-fit: contain;
	background: #000;
}

/* Slide: in from the right, out to the left. */
.fx-slide .wwp-vinyl__layer {
	opacity: 1;
	transform: translateX(100%);
}

.fx-slide .wwp-vinyl__layer.is-on {
	transform: none;
}

.fx-slide .wwp-vinyl__layer.is-leaving {
	transform: translateX(-100%);
}

/* Zoom: settles in from slightly larger. */
.fx-zoom .wwp-vinyl__layer {
	transform: scale(1.14);
}

.fx-zoom .wwp-vinyl__layer.is-on {
	transform: none;
}

/* Blur: focuses in. */
.fx-blur .wwp-vinyl__layer {
	filter: blur(18px);
}

.fx-blur .wwp-vinyl__layer.is-on {
	filter: none;
}

/* Wipe: reveals left to right over the outgoing picture. */
.fx-wipe .wwp-vinyl__layer {
	opacity: 1;
	clip-path: inset(0 100% 0 0);
}

.fx-wipe .wwp-vinyl__layer.is-on,
.fx-wipe .wwp-vinyl__layer.is-leaving {
	clip-path: inset(0 0 0 0);
}

/* Pulse on the beat: a small kick on the showing picture. */
.wwp-vinyl__stage.is-beat .wwp-vinyl__layer.is-on {
	transform: scale(1.025);
	transition: transform 0.07s ease-out;
}

@media (prefers-reduced-motion: reduce) {
	.wwp-vinyl__layer {
		transition: opacity 0.3s ease;
	}

	.wwp-vinyl__stage.is-beat .wwp-vinyl__layer.is-on {
		transform: none;
	}
}

/*
 * A mini-game layer takes touches (other visuals are pictures). While one is
 * showing, the play button shrinks from the whole cover to its gold disc in
 * the top-left corner, so taps reach the game.
 */
.wwp-vinyl__layer.is-game > iframe {
	pointer-events: auto;
}

.wwp-vinyl__deck:has(.wwp-vinyl__stage.has-game) .wwp-vinyl__bigplay {
	inset: 10px auto auto 10px;
	width: 44px;
	height: 44px;
	background: none;
}

.wwp-vinyl__deck:has(.wwp-vinyl__stage.has-game) .wwp-vinyl__bigplay > span,
.wwp-vinyl.is-cover .is-playing .wwp-vinyl__deck:has(.wwp-vinyl__stage.has-game) .wwp-vinyl__bigplay > span {
	width: 44px;
	height: 44px;
	opacity: 0.95;
	transform: scale(0.7);
	transform-origin: top left;
}

/* Taps on the badge area still belong to the game only where the badge is not. */
.wwp-vinyl__deck:has(.wwp-vinyl__stage.has-game) .wwp-vinyl__badge {
	opacity: 0.85;
}

/* The rim element is only drawn on the Video loop skin. */
.wwp-vinyl__rim {
	display: none;
}

/*
 * Video loop skin: a frosted-GLASS rim instead of the pen's solid white
 * platter edge - it blurs the video behind the record, at the Customizer's
 * opacity (--wwp-rim-a, "Glass rim around the record"). The record's own
 * light rim shadows are turned off here so the glass is the only edge.
 */
.wwp-vinyl.is-video .wwp-vinyl__album {
	--vp-rim: transparent;
	--vp-rim-edge: transparent;
}

.wwp-vinyl.is-video .wwp-vinyl__rim {
	/* Tight to the record: a thin glass edge, not a platter. */
	--rim-w: 0.28em;
	position: absolute;
	left: calc(0.8em - var(--rim-w));
	bottom: calc(0.8em - var(--rim-w));
	z-index: 1;
	display: block;
	width: calc(38cqi * var(--wwp-rec-scale, 0.8) + 2 * var(--rim-w));
	aspect-ratio: 1;
	border-radius: 50%;
	background: rgba(255, 255, 255, calc(var(--wwp-rim-a, 0.35) * 0.55));
	border: 1px solid rgba(255, 255, 255, calc(var(--wwp-rim-a, 0.35) * 1.4));
	box-shadow:
		0 4px 18px rgba(0, 0, 0, calc(0.15 + var(--wwp-rim-a, 0.35) * 0.35)),
		inset 0 1px 1px rgba(255, 255, 255, calc(var(--wwp-rim-a, 0.35) * 1.2));
	-webkit-backdrop-filter: blur(8px) saturate(150%);
	backdrop-filter: blur(8px) saturate(150%);
	pointer-events: none;
}

/*
 * Smoother spinning edges on every record. Browsers anti-alias shapes, but a
 * CLIPPED circle that rotates is re-rasterised every frame and can stair-step.
 * Keeping the spinning parts on their own GPU layer and giving the label a
 * soft 1px masked edge (rather than a hard clip) keeps the rim clean in
 * motion.
 */
.wwp-vinyl__album,
.wwp-vinyl__cover,
.wwp-vinyl__cover div,
.wwp-vinyl__cover img {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform;
}

.wwp-vinyl__cover {
	-webkit-mask-image: radial-gradient(circle closest-side, #000 calc(100% - 1px), transparent 100%);
	mask-image: radial-gradient(circle closest-side, #000 calc(100% - 1px), transparent 100%);
}

/* The smaller Video loop record reads better with a slightly bigger label. */
.wwp-vinyl.is-video .wwp-vinyl__cover {
	width: 46%;
	height: 46%;
}

.wwp-vinyl.is-video.is-45 .wwp-vinyl__cover {
	width: 56%;
	height: 56%;
}

/* --- tally light: which card is playing -----------------------------------------
 *
 * Small and top-centre (King's share button is top-left, the format chip and
 * avatar top-right). Only while the card plays. "Now Playing" is the hero's
 * red pill; "On Air" and "Live" are a small red neon sign that flickers on
 * like a tube and then breathes; "Live" adds a pulsing dot.
 */
.wwp-vinyl__deck {
	position: relative;
}

.wwp-vinyl__tally {
	/* Red by default; "Green glow" in the post box swaps these. */
	--tally: #ff2d4f;
	--tally-rgb: 255, 45, 79;
	--tally-fill: #e5133b;
	--tally-ink: #fff5f5;
	position: absolute;
	top: 12px;
	left: 50%;
	z-index: 5;
	display: none;
	transform: translateX(-50%);
	pointer-events: none;
	white-space: nowrap;
	font-family: inherit;
	font-size: 10px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.is-playing .wwp-vinyl__tally {
	display: inline-flex;
	align-items: center;
}

/* Now Playing: the hero's red pill. */
.wwp-vinyl__tally.is-now {
	padding: 5px 9px;
	color: #fff;
	background: var(--tally-fill);
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* On Air / Live: a neon sign. */
.wwp-vinyl__tally.is-onair,
.wwp-vinyl__tally.is-live {
	gap: 6px;
	padding: 5px 10px;
	color: var(--tally-ink);
	background: rgba(8, 8, 10, 0.55);
	border: 1.5px solid var(--tally);
	border-radius: 999px;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	text-shadow:
		0 0 2px #fff,
		0 0 6px var(--tally),
		0 0 12px var(--tally);
	box-shadow:
		0 0 6px rgba(var(--tally-rgb), 0.85),
		0 0 14px rgba(var(--tally-rgb), 0.45),
		inset 0 0 6px rgba(var(--tally-rgb), 0.55);
}

.is-playing .wwp-vinyl__tally.is-onair,
.is-playing .wwp-vinyl__tally.is-live {
	animation:
		wwp-tally-on 0.9s steps(1, end) 1,
		wwp-tally-breathe 2.6s ease-in-out 0.9s infinite;
}

.wwp-vinyl__tally.is-live::before {
	content: '';
	width: 6px;
	height: 6px;
	background: var(--tally);
	border-radius: 50%;
	box-shadow: 0 0 6px var(--tally), 0 0 10px var(--tally);
	animation: wwp-tally-dot 1.2s ease-in-out infinite;
}

/* Green glow - the other studio light. */
.wwp-vinyl__tally.is-green {
	--tally: #2bff88;
	--tally-rgb: 43, 255, 136;
	--tally-fill: #10a957;
	--tally-ink: #f2fff7;
}

/* A tube striking: off, flash, off, on. */
@keyframes wwp-tally-on {
	0% { opacity: 0.1; }
	12% { opacity: 1; }
	20% { opacity: 0.25; }
	34% { opacity: 1; }
	42% { opacity: 0.4; }
	60% { opacity: 1; }
	100% { opacity: 1; }
}

@keyframes wwp-tally-breathe {
	0%, 100% { filter: brightness(1); }
	50% { filter: brightness(1.18); }
}

@keyframes wwp-tally-dot {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.35; transform: scale(0.75); }
}

@media (prefers-reduced-motion: reduce) {
	.is-playing .wwp-vinyl__tally.is-onair,
	.is-playing .wwp-vinyl__tally.is-live,
	.wwp-vinyl__tally.is-live::before {
		animation: none;
	}
}