/* Overlia Players: squad cards and the player shelf.
 *
 * Sizes inside a card are cqi of the card (each card is an inline-size
 * container), so number and name keep their proportions at any width.
 * Columns and the phone layout are container queries on the squad, not the
 * viewport, so the editor's phone preview behaves like a phone. */

@font-face {
	font-family: "OVP Industry";
	src: url("../../assets/fonts/industry.otf") format("opentype");
	font-weight: 100 900;
	font-display: swap;
}

/* Flag emoji for every system: Windows has none of its own. Only the flag
   code points use this font; everything else falls through. */
@font-face {
	font-family: "OVP Flags";
	src: url("../../assets/fonts/flags.woff2") format("woff2");
	unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
	font-display: swap;
}

.ovp {
	--ovp-ease: cubic-bezier(0.2, 0.75, 0.15, 1);
	--ovp-sh-dur: 480ms;
	--ovp-c: var(--ovp-cols, 4);
	container: ovp / inline-size;
	position: relative;
	margin: 0 auto;
	color: var(--ovp-text, #fff);
	text-align: left;
}

.ovp,
.ovp *,
.ovp *::before,
.ovp *::after {
	box-sizing: border-box;
}

/* --- headings -------------------------------------------------------------- */

.ovp .ovp__title,
.ovp .ovp-group__title {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--ovp-font);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: var(--ovp-align, center);
}

.ovp[data-align="left"] {
	--ovp-align: left;
}

.ovp .ovp__title {
	margin-bottom: clamp(20px, 5cqi, 48px);
	color: var(--ovp-title-color);
	font-size: clamp(22px, 7cqi, var(--ovp-title-size));
}

.ovp .ovp-group__title {
	margin-bottom: clamp(16px, 3.4cqi, 34px);
	color: var(--ovp-group-color);
	font-size: clamp(18px, 6cqi, var(--ovp-group-size));
}

.ovp[data-group-title="0"] .ovp-group__title {
	display: none;
}

/* Spacing between the groups on show: a group hidden by the switcher
   leaves no gap behind. */
.ovp .ovp-group[hidden] {
	display: none;
}

.ovp-group:not([hidden]) ~ .ovp-group:not([hidden]) {
	margin-top: var(--ovp-group-gap);
}

/* A group brought back by the switcher comes in. */
.ovp-group.is-shown {
	animation: ovp-group-in 0.45s var(--ovp-ease);
}

@keyframes ovp-group-in {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

/* --- group switcher ----------------------------------------------------------
 * Everyone, or one group at a time. Printed hidden; ovp.js shows it, so
 * without the script there are no buttons that do nothing. The pressed one
 * takes the accent colour, like the shelf's tabs. Phones scroll it sideways. */

.ovp .ovp-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin: 0 0 clamp(28px, 5cqi, 52px);
	padding: 0;
}

.ovp .ovp-filter[hidden] {
	display: none;
}

.ovp[data-align="left"] .ovp-filter {
	justify-content: flex-start;
}

.ovp .ovp-filter__btn {
	flex: none;
	margin: 0;
	padding: 11px 20px 10px;
	border: 1.5px solid color-mix(in srgb, var(--ovp-text) 26%, transparent);
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: var(--ovp-text);
	font: 700 13px/1 var(--ovp-font);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color 0.2s,
		border-color 0.2s,
		color 0.2s,
		transform 0.2s var(--ovp-ease);
}

.ovp .ovp-filter__btn:hover {
	border-color: color-mix(in srgb, var(--ovp-text) 60%, transparent);
	background: transparent;
	color: var(--ovp-text);
}

.ovp .ovp-filter__btn[aria-pressed="true"] {
	border-color: var(--ovp-sh-accent);
	background: var(--ovp-sh-accent);
	color: var(--ovp-sh-on-accent, #111);
}

.ovp .ovp-filter__btn:focus {
	outline: none;
}

.ovp .ovp-filter__btn:focus-visible {
	outline: 2px solid var(--ovp-sh-accent);
	outline-offset: 3px;
}

.ovp .ovp-filter__btn:active {
	transform: scale(0.96);
}

@container ovp (max-width: 560px) {
	.ovp .ovp-filter {
		flex-wrap: nowrap;
		justify-content: flex-start;
		padding: 2px 40px 4px 2px;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-mask: linear-gradient(to right, #000 calc(100% - 40px), transparent);
		mask: linear-gradient(to right, #000 calc(100% - 40px), transparent);
	}

	.ovp .ovp-filter::-webkit-scrollbar {
		display: none;
	}

	.ovp .ovp-filter__btn {
		padding: 10px 16px 9px;
		font-size: 12px;
	}
}

/* --- grid ------------------------------------------------------------------
 * Flex, not grid: the shelf is a full-width item placed after the last card
 * of a line, and its negative top margin cancels the row gap above it. A
 * grid track cannot be negative, so a closed shelf would leave a gap. */

.ovp .ovp-grid {
	--ovp-rg: var(--ovp-row-gap);
	--ovp-cg: var(--ovp-gap);
	display: flex;
	flex-wrap: wrap;
	gap: var(--ovp-rg) var(--ovp-cg);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Cards per row as set for each size: the squad under 900 px wide counts
   as a tablet, under 560 px as a phone. */
@container ovp (max-width: 899px) {
	.ovp-grid { --ovp-c: var(--ovp-cols-tablet, 3); }
}

@container ovp (max-width: 560px) {
	.ovp .ovp-grid {
		--ovp-c: var(--ovp-cols-phone, 2);
		--ovp-rg: min(var(--ovp-row-gap), 7cqi);
		--ovp-cg: min(var(--ovp-gap), 4cqi);
	}

	.ovp-group:not([hidden]) ~ .ovp-group:not([hidden]) {
		margin-top: min(var(--ovp-group-gap), 14cqi);
	}
}

.ovp .ovp-card,
.ovp .ovp-empty {
	flex: 0 0 calc((100% - (var(--ovp-c) - 1) * var(--ovp-cg)) / var(--ovp-c));
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ovp .ovp-empty {
	flex-basis: 100%;
	padding: 28px;
	border: 2px dashed rgba(127, 127, 127, 0.5);
	border-radius: 10px;
	color: rgba(160, 160, 160, 0.95);
	font-size: 14px;
	text-align: center;
}

/* --- card ------------------------------------------------------------------ */

.ovp .ovp-card {
	container: ovp-card / inline-size;
	position: relative;
}

/* The whole card is one button (or a plain box without the shelf). Themes
   style buttons heavily: everything that matters is set here. */
.ovp .ovp-card__hit {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	letter-spacing: normal;
	line-height: normal;
	text-align: left;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.ovp .ovp-card--static .ovp-card__hit {
	cursor: default;
}

.ovp .ovp-card__hit:hover,
.ovp .ovp-card__hit:focus,
.ovp .ovp-card__hit:active {
	border: 0;
	background: none;
	box-shadow: none;
	color: inherit;
}

.ovp .ovp-card__hit:focus {
	outline: none;
}

.ovp .ovp-card__hit:focus-visible {
	outline: 3px solid var(--ovp-accent);
	outline-offset: 4px;
}

.ovp-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: var(--ovp-ratio, 1);
	border-radius: var(--ovp-radius);
	background: var(--ovp-photo-bg);
	transition:
		transform 0.45s var(--ovp-ease),
		box-shadow 0.45s var(--ovp-ease);
}

.ovp .ovp-card__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	object-fit: cover;
	object-position: var(--ovp-x, 50%) var(--ovp-y, 30%);
	transition:
		transform 0.7s var(--ovp-ease),
		filter 0.45s ease;
}

.ovp-ph {
	position: absolute;
	bottom: 0;
	left: 20%;
	width: 60%;
	height: 82%;
	fill: rgba(255, 255, 255, 0.16);
}

/* Marker of the card whose shelf is open. */
.ovp-card__media::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 5px;
	background: var(--ovp-sh-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s var(--ovp-ease);
}

.ovp-card.is-active .ovp-card__media::after {
	transform: scaleX(1);
}

/* Number and name. Every line is trimmed to its capital letters
 * (text-box), so boxes are exactly as tall as the letters: the number is
 * sized to span both name lines and the gap, its top level with the upper
 * name and its baseline with the lower one. Industry's capitals are 0.70 of
 * the font size, hence the / 0.7. --ovp-nsz is the name size of the style,
 * --ovp-fit the factor ovp.js writes when a long name must shrink. */
.ovp-card__meta {
	--ovp-nsz: calc(9.6cqi * var(--ovp-name-scale, 1) * var(--ovp-fit, 1));
	--ovp-ngap: calc(var(--ovp-nsz) * 0.3);
	display: flex;
	gap: 4cqi;
	align-items: flex-start;
	padding-top: 5.5cqi;
	color: var(--ovp-text);
	font-family: var(--ovp-font);
	font-weight: 700;
	line-height: 1;
}

.ovp-card__num {
	flex: none;
	color: var(--ovp-num);
	font-size: calc((var(--ovp-nsz) * 2 + var(--ovp-ngap) / 0.7) * var(--ovp-num-scale, 1));
	line-height: 1;
	letter-spacing: -0.02em;
}

.ovp-card__name {
	display: flex;
	flex-direction: column;
	row-gap: var(--ovp-ngap);
	min-width: 0;
	font-size: var(--ovp-nsz);
	letter-spacing: 0.035em;
}

/* Lines never break inside a word; ovp.js shrinks a name that is too long. */
.ovp-card__first,
.ovp-card__last {
	display: block;
	white-space: nowrap;
}

.ovp-card__num,
.ovp-card__first,
.ovp-card__last {
	text-box: trim-both cap alphabetic;
}

/* Browsers without text-box (Firefox for now): line boxes taller than the
   letters, so the number is centred on the name instead. */
@supports not (text-box: trim-both cap alphabetic) {
	.ovp-card__meta {
		align-items: center;
	}

	.ovp-card__num {
		line-height: 0.8;
	}

	.ovp-card__first,
	.ovp-card__last {
		line-height: 0.95;
	}

	.ovp-card__name {
		row-gap: 0;
	}
}

.ovp[data-names="last_first"] .ovp-card__name {
	flex-direction: column-reverse;
}

.ovp[data-names="one_line"] .ovp-card__name {
	flex-direction: row;
	flex-wrap: wrap;
	column-gap: 0.3em;
}

.ovp[data-names="one_line"] .ovp-card__meta {
	align-items: center;
}

.ovp[data-names="one_line"] .ovp-card__num {
	font-size: calc(var(--ovp-nsz) * 1.7 * var(--ovp-num-scale, 1));
}

.ovp[data-upper="1"] :is(.ovp-card__name, .ovp-card__role, .ovp-pl__name) {
	text-transform: uppercase;
}

.ovp-card__role {
	display: block;
	margin-top: 2.4cqi;
	color: var(--ovp-accent);
	font-size: calc(6.2cqi * var(--ovp-name-scale, 1));
	letter-spacing: 0.08em;
	line-height: 1.15;
}

.ovp-card--staff .ovp-card__meta {
	flex-direction: column;
	gap: 0;
	align-items: flex-start;
}

.ovp-card__cap {
	position: absolute;
	top: 4cqi;
	right: 4cqi;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 13cqi;
	height: 13cqi;
	border-radius: 50%;
	background: var(--ovp-accent);
	color: #fff;
	font: 700 7.5cqi/1 var(--ovp-font);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.ovp[data-captain="0"] .ovp-card__cap {
	display: none;
}

/* Editor: people hidden on the page stay visible, faded. */
.ovp--editor .is-hidden {
	opacity: 0.38;
}

/* --- parts switched off --------------------------------------------------------
 * Number, first name and surname on the cards (data-card-*) and in the
 * shelf's header (data-pl-*). With one name line left on a card, the number
 * is sized for one line and centred on it, as in the "one line" order. In
 * the shelf the number follows whatever is left: the surname alone, or the
 * first name alone at the surname's size. */

.ovp[data-card-num="0"] .ovp-card__num,
.ovp[data-card-first="0"] .ovp-card__first,
.ovp[data-card-last="0"] .ovp-card__last,
.ovp[data-pl-num="0"] .ovp-pl__num,
.ovp[data-pl-first="0"] .ovp-pl__first,
.ovp[data-pl-last="0"] .ovp-pl__last {
	display: none;
}

.ovp:is([data-card-first="0"], [data-card-last="0"]) .ovp-card__meta {
	align-items: center;
}

.ovp:is([data-card-first="0"], [data-card-last="0"]) .ovp-card__num {
	font-size: calc(var(--ovp-nsz) * 1.7 * var(--ovp-num-scale, 1));
}

.ovp[data-pl-first="0"] .ovp-pl__id {
	--ovp-f: 0px;
	--ovp-g: 0px;
}

.ovp[data-pl-last="0"] .ovp-pl__id {
	--ovp-g: 0px;
}

.ovp[data-pl-last="0"] .ovp-pl__first {
	font-size: var(--ovp-l);
	opacity: 1;
}

.ovp[data-pl-last="0"] .ovp-pl__num {
	font-size: var(--ovp-l);
}

/* --- card styles (data-card) ----------------------------------------------- */

/* Name over the photo, on a shade. */
.ovp[data-card="overlay"] .ovp-card__meta {
	position: absolute;
	inset: auto 0 0;
	z-index: 1;
	padding: 22cqi 6cqi 6cqi;
	border-radius: 0 0 var(--ovp-radius) var(--ovp-radius);
	background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.45) 55%, transparent);
	pointer-events: none;
}

.ovp[data-card="overlay"] .ovp-card__meta {
	--ovp-nsz: calc(8.6cqi * var(--ovp-name-scale, 1) * var(--ovp-fit, 1));
}

/* Poster: a big outlined number over the picture, the name on a band. */
.ovp[data-card="poster"] .ovp-card__num {
	position: absolute;
	top: 3cqi;
	left: 5cqi;
	z-index: 1;
	color: transparent;
	font-size: calc(36cqi * var(--ovp-num-scale, 1));
	-webkit-text-stroke: max(1.5px, 0.7cqi) var(--ovp-num);
	opacity: 0.92;
	pointer-events: none;
}

.ovp[data-card="poster"] .ovp-card__meta {
	margin-top: -1px;
	padding: 4.5cqi 5cqi;
	border-radius: 0 0 var(--ovp-radius) var(--ovp-radius);
	background: var(--ovp-accent);
}

.ovp[data-card="poster"] .ovp-card__media {
	border-radius: var(--ovp-radius) var(--ovp-radius) 0 0;
}

.ovp[data-card="poster"] .ovp-card__meta {
	--ovp-nsz: calc(8.4cqi * var(--ovp-name-scale, 1) * var(--ovp-fit, 1));
	align-items: center;
}

.ovp[data-card="poster"] .ovp-card__role {
	color: inherit;
	opacity: 0.8;
}

/* Card: photo framed in a panel, the number on a coloured tab. */
.ovp[data-card="frame"] .ovp-card__hit {
	padding: 3.2cqi;
	border-radius: calc(var(--ovp-radius) + 3.2cqi);
	background: color-mix(in srgb, var(--ovp-photo-bg) 55%, #000);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.ovp[data-card="frame"] .ovp-card__meta {
	padding: 5cqi 2cqi 2.5cqi;
}

.ovp[data-card="frame"] .ovp-card__num {
	display: grid;
	place-items: center;
	min-width: 22cqi;
	height: 22cqi;
	padding: 0 2.5cqi;
	border-radius: 3cqi;
	background: var(--ovp-accent);
	font-size: calc(15cqi * var(--ovp-num-scale, 1));
	line-height: 1;
}

.ovp[data-card="frame"] .ovp-card__meta {
	--ovp-nsz: calc(8.4cqi * var(--ovp-name-scale, 1) * var(--ovp-fit, 1));
	align-items: center;
}

/* Simple: name centred on one line, the number small above it. */
.ovp[data-card="minimal"] .ovp-card__meta,
.ovp[data-card="round"] .ovp-card__meta {
	--ovp-nsz: calc(8cqi * var(--ovp-name-scale, 1) * var(--ovp-fit, 1));
	flex-direction: column;
	gap: 2.6cqi;
	align-items: center;
	text-align: center;
}

.ovp[data-card="minimal"] .ovp-card__num {
	color: var(--ovp-accent);
	font-size: calc(10cqi * var(--ovp-num-scale, 1));
	line-height: 1;
}

.ovp[data-card="minimal"] .ovp-card__name,
.ovp[data-card="round"] .ovp-card__name {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 0.3em;
}

.ovp[data-card="minimal"][data-names="last_first"] .ovp-card__name,
.ovp[data-card="round"][data-names="last_first"] .ovp-card__name {
	flex-direction: row-reverse;
}

/* Round: a circle photo with the number on a badge. */
.ovp[data-card="round"] .ovp-card__media {
	width: 84%;
	margin: 0 auto;
	aspect-ratio: 1;
	border-radius: 50%;
	box-shadow: 0 0 0 1.2cqi color-mix(in srgb, var(--ovp-accent) 70%, transparent);
}

.ovp[data-card="round"] .ovp-card__num {
	position: absolute;
	top: 64cqi;
	left: 68cqi;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 20cqi;
	height: 20cqi;
	border-radius: 50%;
	background: var(--ovp-accent);
	font-size: calc(10cqi * var(--ovp-num-scale, 1));
	line-height: 1;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.ovp[data-card="round"] .ovp-card__meta {
	padding-top: 6cqi;
}

.ovp[data-card="round"] .ovp-card.is-active .ovp-card__media {
	box-shadow: 0 0 0 1.2cqi var(--ovp-sh-accent);
}

.ovp[data-card="round"] .ovp-card__media::after {
	display: none;
}

.ovp[data-card="round"] .ovp-card__cap {
	top: 2cqi;
	right: 10cqi;
}

/* Centre: like "Poznaj drużynę" on the club's home page. The big surname
   under the photo, the first name small under it, no number (unless the big
   number behind the figure is on). */
.ovp[data-card="center"] .ovp-card__meta {
	--ovp-nsz: calc(11.5cqi * var(--ovp-name-scale, 1) * var(--ovp-fit, 1));
	flex-direction: column;
	gap: 0;
	align-items: center;
	padding-top: 6cqi;
	text-align: center;
}

.ovp[data-card="center"] .ovp-card__num {
	display: none;
}

.ovp[data-card="center"][data-names] .ovp-card__name {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	row-gap: calc(var(--ovp-nsz) * 0.34);
}

.ovp[data-card="center"] .ovp-card__last {
	order: 1;
}

.ovp[data-card="center"] .ovp-card__first {
	order: 2;
	font-size: calc(5.4cqi * var(--ovp-name-scale, 1));
	letter-spacing: 0.1em;
	opacity: 0.85;
}

.ovp[data-card="center"] .ovp-card--staff .ovp-card__meta {
	align-items: center;
}

/* --- photos: background and cut-out figures -------------------------------
 * data-bgstyle paints behind the photo: flat colour, gradient, a studio
 * spotlight, or nothing (the figure on the page). data-fit="cutout" shows a
 * transparent PNG whole, standing on the bottom edge, --ovp-cut its size;
 * a photo with its own background and the frame's proportions fills the
 * frame the same way. */

.ovp[data-bgstyle="gradient"] :is(.ovp-card__media, .ovp-pl__photo) {
	background: linear-gradient(to bottom, var(--ovp-photo-bg2), var(--ovp-photo-bg));
}

.ovp[data-bgstyle="spot"] :is(.ovp-card__media, .ovp-pl__photo) {
	background: radial-gradient(ellipse 78% 68% at 50% 36%, var(--ovp-photo-bg2), var(--ovp-photo-bg) 74%);
}

.ovp[data-bgstyle="none"] :is(.ovp-card__media, .ovp-pl__photo) {
	background: none;
}

.ovp[data-fit="cutout"] :is(.ovp-card__img, .ovp-pl__img) {
	inset: auto auto 0 50%;
	width: calc(var(--ovp-cut, 1) * 100%);
	height: calc(var(--ovp-cut, 1) * 100%);
	object-fit: contain;
	object-position: var(--ovp-x, 50%) 100%;
	transform-origin: 50% 100%;
	translate: -50% 0;
}

/* On the shelf the figure has its own size (the same when linked) and can
   be shifted: percent of the photo column's width (it is the container,
   so cqi), right and down are plus. */
.ovp[data-fit="cutout"] .ovp-pl__img {
	width: calc(var(--ovp-sh-cut, var(--ovp-cut, 1)) * 100%);
	height: calc(var(--ovp-sh-cut, var(--ovp-cut, 1)) * 100%);
	translate: calc(-50% + var(--ovp-sh-img-x, 0) * 1cqi) calc(var(--ovp-sh-img-y, 0) * 1cqi);
}

/* The big number behind the figure (data-bgnum). Under a photo with its
   own background it stays hidden behind it. */
.ovp-card__bgnum {
	display: none;
}

.ovp[data-bgnum="1"] .ovp-card__bgnum {
	position: absolute;
	top: 5cqi;
	left: 0;
	right: 0;
	display: block;
	color: color-mix(in srgb, var(--ovp-num) 10%, transparent);
	font: 700 calc(62cqi * var(--ovp-num-scale, 1)) / 0.8 var(--ovp-font);
	letter-spacing: -0.03em;
	text-align: center;
	-webkit-text-stroke: max(1px, 0.35cqi) color-mix(in srgb, var(--ovp-num) 38%, transparent);
	pointer-events: none;
	/* Shifted sideways by the setting, in percent of the photo's width. */
	translate: calc(var(--ovp-bgnum-x, 0) * 1%) 0;
}

/* --- hover (data-hover) ---------------------------------------------------- */

@media (hover: hover) {
	.ovp[data-hover="lift"] .ovp-card__hit:hover .ovp-card__media {
		transform: translateY(-6px);
		box-shadow: 0 22px 32px -16px rgba(0, 0, 0, 0.7);
	}

	.ovp[data-hover="zoom"] .ovp-card__hit:hover .ovp-card__img {
		transform: scale(1.08);
	}

	.ovp[data-hover="glow"] .ovp-card__hit:hover .ovp-card__media {
		box-shadow:
			0 0 0 3px var(--ovp-accent),
			0 0 34px color-mix(in srgb, var(--ovp-accent) 65%, transparent);
	}

	.ovp[data-hover="glow"] .ovp-card__hit:hover .ovp-card__img {
		filter: brightness(1.08) saturate(1.1);
	}

	.ovp[data-hover="tilt"] .ovp-card__hit:hover .ovp-card__media {
		transform: perspective(700px) rotateY(-7deg) rotateX(3deg) scale(1.02);
		box-shadow: 14px 20px 30px -16px rgba(0, 0, 0, 0.7);
	}

	.ovp[data-hover="shine"] .ovp-card__hit:hover .ovp-card__media::before {
		animation: ovp-shine 0.85s ease forwards;
	}
}

.ovp[data-hover="shine"] .ovp-card__media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.35) 50%, transparent 65%);
	transform: translateX(-110%);
	pointer-events: none;
}

@keyframes ovp-shine {
	to { transform: translateX(110%); }
}

/* Floating: up and down for as long as the pointer stays. */
@keyframes ovp-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

/* Out of the frame: the figure grows from its feet; a cut-out may leave
   the box. The resting shadow is clear, for Chrome (see below). */
.ovp[data-hover="pop"][data-fit="cutout"] .ovp-card__media {
	overflow: visible;
}

.ovp[data-hover="pop"] .ovp-card__img {
	transform-origin: 50% 100%;
}

.ovp[data-hover="pop"][data-fit="cutout"] .ovp-card__img {
	filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
}

/* 3D tilt after the pointer: ovp.js writes --ovp-tx / --ovp-ty (-0.5 to
   0.5) on the card; a light follows the pointer over the photo. */
.ovp[data-hover="follow"] .ovp-card__media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: radial-gradient(circle at calc(50% + var(--ovp-tx, 0) * 100%) calc(50% + var(--ovp-ty, 0) * 100%), rgba(255, 255, 255, 0.26), transparent 58%);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

@media (hover: hover) {
	.ovp[data-hover="float"] .ovp-card__hit:hover .ovp-card__media {
		box-shadow: 0 20px 30px -16px rgba(0, 0, 0, 0.65);
		animation: ovp-float 1.8s ease-in-out infinite;
	}

	.ovp[data-hover="pop"] .ovp-card__hit:hover .ovp-card__img {
		transform: scale(1.1);
	}

	.ovp[data-hover="pop"][data-fit="cutout"] .ovp-card__hit:hover .ovp-card__img {
		filter: drop-shadow(0 14px 14px rgba(0, 0, 0, 0.45));
		transform: scale(1.16);
	}

	.ovp[data-hover="follow"] .ovp-card__hit:hover .ovp-card__media {
		transform: perspective(800px) rotateX(calc(var(--ovp-ty, 0) * -16deg)) rotateY(calc(var(--ovp-tx, 0) * 18deg)) scale(1.03);
		box-shadow: calc(var(--ovp-tx, 0) * -26px) calc(18px - var(--ovp-ty, 0) * 16px) 30px -14px rgba(0, 0, 0, 0.7);
		transition-duration: 0.12s;
	}

	.ovp[data-hover="follow"] .ovp-card__hit:hover .ovp-card__media::before {
		opacity: 1;
	}

	/* Black and white until pointed at (or opened). */
	.ovp[data-hover="gray"] .ovp-card__img {
		filter: grayscale(1);
	}

	.ovp[data-hover="gray"] :is(.ovp-card__hit:hover, .ovp-card__hit:focus-visible, .ovp-card.is-active .ovp-card__hit) .ovp-card__img {
		filter: grayscale(0);
	}

	/* The others step back. */
	.ovp[data-hover="dim"] .ovp-card__hit {
		transition:
			opacity 0.35s ease,
			filter 0.35s ease;
	}

	.ovp[data-hover="dim"] .ovp-grid:has(.ovp-card__hit:hover) .ovp-card__hit:not(:hover) {
		opacity: 0.35;
		filter: grayscale(0.7);
	}
}

/* --- no background (data-bgstyle="none") ---------------------------------
 * The figure stands on the page. Nothing clips it (a zoom may rise above the
 * frame), and there is no box to lift, light or sweep: the hover effects
 * move and light the figure itself, whose shadow follows its outline. Each
 * resting state carries the same filters with a clear colour, so Chrome
 * does not fade the shadow colour through black. */

.ovp[data-bgstyle="none"][data-fit="cutout"] .ovp-card__media {
	overflow: visible;
}

.ovp[data-bgstyle="none"][data-hover="lift"] .ovp-card__img {
	filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
}

.ovp[data-bgstyle="none"][data-hover="glow"] .ovp-card__img {
	filter: drop-shadow(0 0 0 color(srgb 0 0 0 / 0)) brightness(1);
}

.ovp[data-bgstyle="none"][data-hover="shine"] .ovp-card__img {
	filter: brightness(1);
}

.ovp[data-bgstyle="none"][data-hover="shine"] .ovp-card__media::before {
	display: none;
}

@media (hover: hover) {
	.ovp[data-bgstyle="none"] .ovp-card__hit:hover .ovp-card__media {
		box-shadow: none;
	}

	.ovp[data-bgstyle="none"][data-hover="lift"] .ovp-card__hit:hover .ovp-card__media {
		transform: none;
	}

	.ovp[data-bgstyle="none"][data-hover="lift"] .ovp-card__hit:hover .ovp-card__img {
		filter: drop-shadow(0 16px 14px rgba(0, 0, 0, 0.55));
		transform: translateY(-8px);
	}

	.ovp[data-bgstyle="none"][data-hover="glow"] .ovp-card__hit:hover .ovp-card__img {
		filter: drop-shadow(0 0 16px color-mix(in srgb, var(--ovp-accent) 75%, transparent)) brightness(1.06);
	}

	.ovp[data-bgstyle="none"][data-hover="shine"] .ovp-card__hit:hover .ovp-card__img {
		filter: brightness(1.18);
	}

	.ovp[data-bgstyle="none"][data-hover="float"] .ovp-card__hit:hover .ovp-card__media {
		animation: none;
	}

	.ovp[data-bgstyle="none"][data-hover="float"] .ovp-card__hit:hover .ovp-card__img {
		filter: drop-shadow(0 16px 12px rgba(0, 0, 0, 0.45));
		animation: ovp-float 1.8s ease-in-out infinite;
	}
}

.ovp[data-bgstyle="none"][data-hover="float"] .ovp-card__img {
	filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
}

.ovp[data-bgstyle="none"][data-hover="follow"] .ovp-card__media::before {
	display: none;
}

/* --- entrance (data-anim) ---------------------------------------------------
 * Cards wait hidden until the script sees them on screen. Without the
 * script they come in by themselves after 2.5 s. */

.ovp[data-anim]:not([data-anim="none"]) .ovp-card {
	opacity: 0;
	animation: ovp-failsafe 0.5s 2.5s forwards;
}

.ovp.ovp--live[data-anim]:not([data-anim="none"]) .ovp-card {
	animation: none;
}

.ovp.ovp--live[data-anim]:not([data-anim="none"]) .ovp-card.is-in {
	animation: var(--ovp-in) var(--ovp-in-dur, 0.75s) var(--ovp-in-ease, var(--ovp-ease)) calc(var(--ovp-d, 0) * 65ms) both;
}

.ovp[data-anim="fade"] { --ovp-in: ovp-in-fade; }
.ovp[data-anim="up"] { --ovp-in: ovp-in-up; }
.ovp[data-anim="down"] { --ovp-in: ovp-in-down; }
.ovp[data-anim="side"] { --ovp-in: ovp-in-side; }
.ovp[data-anim="right"] { --ovp-in: ovp-in-right; }
.ovp[data-anim="zoom"] { --ovp-in: ovp-in-zoom; }
.ovp[data-anim="pop"] { --ovp-in: ovp-in-pop; --ovp-in-dur: 0.8s; --ovp-in-ease: ease-out; }
.ovp[data-anim="drop"] { --ovp-in: ovp-in-drop; --ovp-in-dur: 0.95s; --ovp-in-ease: ease-out; }
.ovp[data-anim="flip"] { --ovp-in: ovp-in-flip; }
.ovp[data-anim="swing"] { --ovp-in: ovp-in-swing; --ovp-in-dur: 1s; --ovp-in-ease: ease-out; }
.ovp[data-anim="deal"] { --ovp-in: ovp-in-deal; --ovp-in-dur: 0.7s; }
.ovp[data-anim="reveal"] { --ovp-in: ovp-in-reveal; --ovp-in-dur: 0.9s; }
.ovp[data-anim="blur"] { --ovp-in: ovp-in-blur; }
.ovp[data-anim="layers"] { --ovp-in: ovp-in-fade; --ovp-in-dur: 0.45s; }

/* A sign swinging down from its top edge. */
.ovp[data-anim="swing"] .ovp-card {
	transform-origin: 50% 0;
}

/* Layers: the card fades in, then the figure rises, the big number grows
   and the name slides in. Only "backwards": once played, the hover effects
   own these elements again. */
.ovp.ovp--live[data-anim="layers"] .ovp-card.is-in :is(.ovp-card__img, .ovp-ph) {
	animation: ovp-in-figure 0.85s var(--ovp-ease) calc(var(--ovp-d, 0) * 65ms + 0.05s) backwards;
}

.ovp.ovp--live[data-anim="layers"] .ovp-card.is-in .ovp-card__bgnum {
	animation: ovp-in-bignum 0.9s var(--ovp-ease) calc(var(--ovp-d, 0) * 65ms + 0.15s) backwards;
}

.ovp.ovp--live[data-anim="layers"] .ovp-card.is-in .ovp-card__meta {
	animation: ovp-in-meta 0.6s var(--ovp-ease) calc(var(--ovp-d, 0) * 65ms + 0.3s) backwards;
}

@keyframes ovp-failsafe {
	to { opacity: 1; }
}

@keyframes ovp-in-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes ovp-in-up {
	from { opacity: 0; transform: translateY(42px); }
	to { opacity: 1; transform: none; }
}

@keyframes ovp-in-zoom {
	from { opacity: 0; transform: scale(0.82); }
	to { opacity: 1; transform: none; }
}

@keyframes ovp-in-flip {
	from { opacity: 0; transform: perspective(900px) rotateY(-55deg); }
	to { opacity: 1; transform: none; }
}

@keyframes ovp-in-side {
	from { opacity: 0; transform: translateX(-46px); }
	to { opacity: 1; transform: none; }
}

@keyframes ovp-in-blur {
	from { opacity: 0; filter: blur(14px); transform: scale(1.05); }
	99.9% { filter: blur(0); }
	to { opacity: 1; filter: none; transform: none; }
}

@keyframes ovp-in-down {
	from { opacity: 0; transform: translateY(-42px); }
	to { opacity: 1; transform: none; }
}

@keyframes ovp-in-right {
	from { opacity: 0; transform: translateX(46px); }
	to { opacity: 1; transform: none; }
}

@keyframes ovp-in-pop {
	0% { opacity: 0; transform: scale(0.5); }
	55% { opacity: 1; transform: scale(1.07); }
	78% { transform: scale(0.97); }
	100% { opacity: 1; transform: none; }
}

@keyframes ovp-in-drop {
	0% { opacity: 0; transform: translateY(-90px); animation-timing-function: cubic-bezier(0.5, 0, 1, 0.6); }
	50% { opacity: 1; transform: translateY(0); animation-timing-function: ease-out; }
	68% { transform: translateY(-14px); animation-timing-function: ease-in; }
	84% { transform: translateY(0); animation-timing-function: ease-out; }
	92% { transform: translateY(-4px); animation-timing-function: ease-in; }
	100% { opacity: 1; transform: none; }
}

@keyframes ovp-in-swing {
	0% { opacity: 0; transform: perspective(800px) rotateX(-85deg); }
	50% { opacity: 1; transform: perspective(800px) rotateX(16deg); }
	75% { transform: perspective(800px) rotateX(-6deg); }
	100% { opacity: 1; transform: none; }
}

@keyframes ovp-in-deal {
	from { opacity: 0; transform: translate(-70px, 60px) rotate(-14deg) scale(0.9); }
	to { opacity: 1; transform: none; }
}

/* Uncovered from the bottom edge up (the clip reaches past the card, so
   nothing that sticks out is cut; none at the end). */
@keyframes ovp-in-reveal {
	from { opacity: 1; clip-path: inset(100% -40% -40% -40%); transform: translateY(26px); }
	99.9% { clip-path: inset(-40%); }
	to { opacity: 1; clip-path: none; transform: none; }
}

@keyframes ovp-in-figure {
	from { opacity: 0; transform: translateY(16%); }
}

@keyframes ovp-in-bignum {
	from { opacity: 0; transform: scale(0.6); }
}

@keyframes ovp-in-meta {
	from { opacity: 0; transform: translateX(-22px); }
}

/* --- shelf -------------------------------------------------------------------
 * One per squad, placed by ovp.js after the last card on the clicked card's
 * line. The 0fr/1fr grid row animates the height. Not stretched to its flex
 * line: stretching subtracts the negative margin from the line and a closed
 * shelf would keep a row gap of height. */

.ovp .ovp-shelf {
	container: ovp-shelf / inline-size;
	display: grid;
	flex: 0 0 100%;
	grid-template-rows: 0fr;
	align-self: flex-start;
	min-width: 0;
	margin: calc(var(--ovp-rg) * -1) 0 0;
	padding: 0;
	list-style: none;
	opacity: 0;
	transition:
		grid-template-rows var(--ovp-sh-dur) var(--ovp-ease),
		opacity calc(var(--ovp-sh-dur) * 0.66) ease;
}

.ovp .ovp-shelf.is-open {
	grid-template-rows: 1fr;
	opacity: 1;
}

.ovp-shelf__clip {
	min-height: 0;
	overflow: hidden;
}

.ovp-shelf__panel {
	--ovp-sh-pad: clamp(16px, 3.4cqi, 36px);
	position: relative;
	margin-top: 16px;
	padding: var(--ovp-sh-pad);
	border-radius: var(--ovp-sh-radius);
	background: var(--ovp-sh-bg);
	color: var(--ovp-sh-text);
	transform-origin: var(--ovp-notch, 50%) 0;
	transition: transform var(--ovp-sh-dur) var(--ovp-ease);
}

.ovp[data-sh-anim="slide"] .ovp-shelf:not(.is-open) .ovp-shelf__panel {
	transform: translateY(-28px);
}

.ovp[data-sh-anim="zoom"] .ovp-shelf:not(.is-open) .ovp-shelf__panel {
	transform: scale(0.9);
}

.ovp[data-sh-anim="drop"] .ovp-shelf:not(.is-open) .ovp-shelf__panel {
	transform: translateY(-70px) scale(0.97);
}

.ovp[data-sh-anim="rise"] .ovp-shelf:not(.is-open) .ovp-shelf__panel {
	transform: translateY(40px);
}

/* Tipped back from its top edge. */
.ovp[data-sh-anim="flip"] .ovp-shelf:not(.is-open) .ovp-shelf__panel {
	transform: perspective(1400px) rotateX(-30deg);
}

.ovp[data-sh-anim="blur"] .ovp-shelf__panel {
	transition:
		transform var(--ovp-sh-dur) var(--ovp-ease),
		filter var(--ovp-sh-dur) ease;
}

.ovp[data-sh-anim="blur"] .ovp-shelf:not(.is-open) .ovp-shelf__panel {
	filter: blur(14px);
	transform: scale(1.03);
}

/* A circle spreading from the card's pointer. */
.ovp[data-sh-anim="circle"] .ovp-shelf__panel {
	clip-path: circle(150% at var(--ovp-notch, 50%) 0);
	transition: clip-path calc(var(--ovp-sh-dur) * 1.5) var(--ovp-ease);
}

.ovp[data-sh-anim="circle"] .ovp-shelf:not(.is-open) .ovp-shelf__panel {
	clip-path: circle(0 at var(--ovp-notch, 50%) 0);
}

/* The content one piece after another: the photo from its side, then
   the name, the facts, the tabs and the stats. Played for every person
   shown (arrows too), not when the editor puts an open shelf back
   (.is-instant). */
.ovp[data-sh-anim="cascade"] {
	--ovp-casc-x: -40px;
}

.ovp[data-sh-anim="cascade"][data-sh-photo="right"] {
	--ovp-casc-x: 40px;
}

.ovp[data-sh-anim="cascade"] .ovp-shelf:not(.is-open) .ovp-shelf__panel {
	transform: translateY(-14px);
}

.ovp[data-sh-anim="cascade"] .ovp-shelf.is-open .ovp-pl__photo {
	animation: ovp-casc-photo 0.8s var(--ovp-ease) 0.1s backwards;
}

.ovp[data-sh-anim="cascade"] .ovp-shelf.is-open :is(.ovp-pl__head, .ovp-pl__facts, .ovp-fact, .ovp-pl__tabs, .ovp-stat, .ovp-pl__note) {
	animation: ovp-casc-up 0.55s var(--ovp-ease) calc(0.18s + var(--ovp-seq, 0) * 50ms) backwards;
}

/* Order: the name, the facts box and its facts, the tabs, the stats. */
.ovp[data-sh-anim="cascade"] .ovp-pl__facts { --ovp-seq: 1; }
.ovp[data-sh-anim="cascade"] .ovp-fact:nth-child(1) { --ovp-seq: 2; }
.ovp[data-sh-anim="cascade"] .ovp-fact:nth-child(2) { --ovp-seq: 3; }
.ovp[data-sh-anim="cascade"] .ovp-fact:nth-child(3) { --ovp-seq: 4; }
.ovp[data-sh-anim="cascade"] .ovp-fact:nth-child(4) { --ovp-seq: 5; }
.ovp[data-sh-anim="cascade"] .ovp-fact:nth-child(n + 5) { --ovp-seq: 6; }
.ovp[data-sh-anim="cascade"] .ovp-pl__tabs { --ovp-seq: 6; }
.ovp[data-sh-anim="cascade"] .ovp-stat:nth-child(1) { --ovp-seq: 7; }
.ovp[data-sh-anim="cascade"] .ovp-stat:nth-child(2) { --ovp-seq: 8; }
.ovp[data-sh-anim="cascade"] .ovp-stat:nth-child(3) { --ovp-seq: 9; }
.ovp[data-sh-anim="cascade"] .ovp-stat:nth-child(4) { --ovp-seq: 10; }
.ovp[data-sh-anim="cascade"] .ovp-stat:nth-child(5) { --ovp-seq: 11; }
.ovp[data-sh-anim="cascade"] .ovp-stat:nth-child(n + 6) { --ovp-seq: 12; }
.ovp[data-sh-anim="cascade"] .ovp-pl__note { --ovp-seq: 13; }

.ovp[data-sh-anim="cascade"] .ovp-shelf.is-instant * {
	animation: none;
}

@keyframes ovp-casc-photo {
	from { opacity: 0; transform: translateX(var(--ovp-casc-x)); }
}

@keyframes ovp-casc-up {
	from { opacity: 0; transform: translateY(14px); }
}

.ovp[data-sh-anim="none"] :is(.ovp-shelf, .ovp-shelf__panel) {
	transition: none;
}

/* The pointer up to the card. */
.ovp-shelf__panel::before {
	content: "";
	position: absolute;
	top: -15px;
	left: var(--ovp-notch, 50%);
	width: 30px;
	height: 16px;
	background: var(--ovp-sh-bg);
	translate: -50% 0;
	-webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* Outline instead of fill: the colour draws a frame, and the pointer
   becomes an open caret of the same stroke. The caret's legs are 45 degree,
   w thick (w * 1.4142 measured level), and the frame is masked open for
   exactly the caret's inner opening, so they meet cleanly. */
.ovp[data-sh-look="stroke"] .ovp-shelf__panel {
	--ovp-sw: 2px;
	--ovp-gapw: calc(15px - var(--ovp-sw) * 0.4142);
	background: transparent;
	color: var(--ovp-sh-text);
}

.ovp[data-sh-look="stroke"] .ovp-shelf__panel::after {
	content: "";
	position: absolute;
	inset: 0;
	border: var(--ovp-sw) solid var(--ovp-sh-bg);
	border-radius: inherit;
	pointer-events: none;
	-webkit-mask:
		linear-gradient(to right, #000 calc(var(--ovp-notch, 50%) - var(--ovp-gapw)), transparent 0 calc(var(--ovp-notch, 50%) + var(--ovp-gapw)), #000 0) top / 100% var(--ovp-sw) no-repeat,
		linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--ovp-sw)) no-repeat;
	mask:
		linear-gradient(to right, #000 calc(var(--ovp-notch, 50%) - var(--ovp-gapw)), transparent 0 calc(var(--ovp-notch, 50%) + var(--ovp-gapw)), #000 0) top / 100% var(--ovp-sw) no-repeat,
		linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--ovp-sw)) no-repeat;
}

.ovp[data-sh-look="stroke"] .ovp-shelf__panel::before {
	top: -15px;
	width: calc((15px + var(--ovp-sw)) * 2);
	height: calc(15px + var(--ovp-sw));
	-webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%, calc(100% - var(--ovp-sw) * 1.4142) 100%, 50% calc(var(--ovp-sw) * 1.4142), calc(var(--ovp-sw) * 1.4142) 100%);
	clip-path: polygon(0 100%, 50% 0, 100% 100%, calc(100% - var(--ovp-sw) * 1.4142) 100%, 50% calc(var(--ovp-sw) * 1.4142), calc(var(--ovp-sw) * 1.4142) 100%);
}

/* Previous, next, close. */
.ovp-shelf__tools {
	position: absolute;
	top: clamp(10px, 2cqi, 20px);
	right: clamp(10px, 2cqi, 20px);
	z-index: 3;
	display: flex;
	gap: 6px;
}

.ovp .ovp-shelf__btn {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--ovp-sh-text) 12%, transparent);
	box-shadow: none;
	color: var(--ovp-sh-text);
	cursor: pointer;
	transition: background-color 0.2s, transform 0.2s var(--ovp-ease);
}

.ovp .ovp-shelf__btn:hover,
.ovp .ovp-shelf__btn:focus-visible {
	background: color-mix(in srgb, var(--ovp-sh-text) 24%, transparent);
	color: var(--ovp-sh-text);
}

.ovp .ovp-shelf__btn:focus-visible {
	outline: 2px solid var(--ovp-sh-accent);
	outline-offset: 2px;
}

.ovp .ovp-shelf__btn:active {
	transform: scale(0.92);
}

.ovp .ovp-shelf__btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.ovp .ovp-shelf__btn svg {
	display: block;
}

.ovp .ovp-shelf__next svg {
	transform: scaleX(-1);
}

.ovp[data-sh-nav="0"] :is(.ovp-shelf__prev, .ovp-shelf__next) {
	display: none;
}

/* Content moving to another person: a short cross-fade. */
.ovp-shelf__content.is-swapping {
	animation: ovp-swap 0.38s var(--ovp-ease);
}

@keyframes ovp-swap {
	from { opacity: 0; transform: translateX(var(--ovp-swap-from, 18px)); }
	to { opacity: 1; transform: none; }
}

/* --- player in the shelf --------------------------------------------------- */

.ovp-pl {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	gap: clamp(18px, 3.4cqi, 44px);
	align-items: start;
}

.ovp[data-sh-photo="right"] .ovp-pl {
	grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
}

.ovp[data-sh-photo="right"] .ovp-pl__photo {
	order: 2;
}

/* Without a photo (data-sh-photo="none"): one column. */
.ovp[data-sh-photo="none"] .ovp-pl__photo {
	display: none;
}

.ovp[data-sh-photo="none"] .ovp-pl {
	grid-template-columns: minmax(0, 1fr);
}

.ovp[data-captain="0"] .ovp-pl__cap {
	display: none;
}

.ovp-pl__photo {
	container-type: inline-size;
	position: relative;
	overflow: hidden;
	aspect-ratio: 1;
	border-radius: max(0px, calc(var(--ovp-sh-radius) - 6px));
	background: var(--ovp-photo-bg);
}

.ovp .ovp-pl__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	object-fit: cover;
	object-position: var(--ovp-x, 50%) var(--ovp-y, 30%);
}

.ovp-pl__bignum {
	position: absolute;
	top: 3cqi;
	/* Shifted sideways by the setting (percent of the photo's width). */
	right: calc(5cqi - var(--ovp-sh-bignum-x, 0) * 1cqi);
	z-index: 1;
	color: transparent;
	font: 700 30cqi/0.8 var(--ovp-font);
	letter-spacing: -0.02em;
	-webkit-text-stroke: max(1.5px, 0.45cqi) rgba(255, 255, 255, 0.55);
	pointer-events: none;
}

/* Switched off in the settings (data-sh-bignum). */
.ovp[data-sh-bignum="0"] .ovp-pl__bignum {
	display: none;
}

/* Cut-out figure: the number large and faint behind the player. */
.ovp[data-fit="cutout"] .ovp-pl__bignum {
	top: 4%;
	right: auto;
	left: calc(60% + var(--ovp-sh-bignum-x, 0) * 1%);
	z-index: 0;
	color: color-mix(in srgb, var(--ovp-sh-text) 8%, transparent);
	font-size: 60cqi;
	translate: -50% 0;
	-webkit-text-stroke: max(1.5px, 0.4cqi) color-mix(in srgb, var(--ovp-sh-text) 32%, transparent);
}

/* Without a frame (data-sh-box="free") the figure stands on the shelf
   itself: the column runs to the panel's bottom edge, over its padding,
   rounded like the panel's corner. */
.ovp[data-fit="cutout"][data-sh-box="free"] .ovp-pl__photo {
	align-self: stretch;
	aspect-ratio: auto;
	min-height: clamp(280px, 40cqi, 520px);
	margin-bottom: calc(var(--ovp-sh-pad) * -1);
	border-radius: 0 0 0 var(--ovp-sh-radius);
	background: none;
}

.ovp[data-fit="cutout"][data-sh-box="free"][data-sh-photo="right"] .ovp-pl__photo {
	border-radius: 0 0 var(--ovp-sh-radius) 0;
}

.ovp-pl__body {
	container-type: inline-size;
	min-width: 0;
	padding-top: 4px;
}

.ovp-pl__head {
	/* Room for the buttons in the corner. */
	padding-right: 136px;
	margin-bottom: clamp(20px, 3.4cqi, 32px);
}

/* Number and name: the same trimming as on the cards. The number spans the
   first name, the gap and the surname exactly. */
.ovp-pl__id {
	--ovp-f: clamp(15px, 4.6cqi, 26px);
	--ovp-l: calc(clamp(22px, 9.6cqi, 58px) * var(--ovp-fit, 1));
	--ovp-g: calc(var(--ovp-l) * 0.26);
	display: flex;
	gap: clamp(12px, 2.8cqi, 26px);
	align-items: flex-start;
}

.ovp[data-sh-nav="0"] .ovp-pl__head {
	padding-right: 50px;
}

.ovp .ovp-pl__num {
	flex: none;
	color: var(--ovp-sh-accent);
	font: 700 calc(var(--ovp-f) + var(--ovp-l) + var(--ovp-g) / 0.7) / 1 var(--ovp-font);
	letter-spacing: -0.02em;
}

.ovp .ovp-pl__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 clamp(12px, 2.2cqi, 18px);
	padding: 0;
}

.ovp-pl__pos,
.ovp-pl__cap {
	display: inline-block;
	padding: 5px 10px 4px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--ovp-sh-text) 13%, transparent);
	font: 700 12px/1.1 var(--ovp-font);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ovp-pl__cap {
	background: var(--ovp-sh-accent);
	color: var(--ovp-sh-on-accent, #fff);
}

.ovp .ovp-pl__name {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	color: inherit;
	font-family: var(--ovp-font);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
}

/* Sizes follow the width of the text column (the body is a container),
   so long surnames still fit on one line. */
.ovp-pl__first {
	display: block;
	margin-bottom: var(--ovp-g);
	font-size: var(--ovp-f);
	white-space: nowrap;
	opacity: 0.8;
}

.ovp-pl__last {
	display: block;
	font-size: var(--ovp-l);
	white-space: nowrap;
}

.ovp .ovp-pl__num,
.ovp-pl__first,
.ovp-pl__last {
	text-box: trim-both cap alphabetic;
}

@supports not (text-box: trim-both cap alphabetic) {
	.ovp-pl__id {
		align-items: center;
	}

	.ovp .ovp-pl__num {
		line-height: 0.8;
	}

	.ovp-pl__first,
	.ovp-pl__last {
		line-height: 0.95;
	}

	.ovp-pl__first {
		margin-bottom: 0.1em;
	}
}

/* Facts. */
.ovp .ovp-pl__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px;
	margin: 0 0 clamp(18px, 3cqi, 30px);
	padding: 0;
	overflow: hidden;
	border-radius: 12px;
	background: color-mix(in srgb, var(--ovp-sh-text) 12%, transparent);
}

.ovp-fact {
	padding: 12px 14px;
	background: color-mix(in srgb, var(--ovp-sh-bg) 88%, #000);
}

.ovp[data-sh-look="stroke"] .ovp-fact {
	background: color-mix(in srgb, var(--ovp-sh-text) 5%, transparent);
}

.ovp .ovp-fact dt {
	margin: 0 0 4px;
	padding: 0;
	font: 700 11px/1.2 var(--ovp-font);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.62;
}

.ovp .ovp-fact dd {
	margin: 0;
	padding: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
}

.ovp-fact__sub {
	font-weight: 400;
	white-space: nowrap;
	opacity: 0.7;
}

.ovp-flag {
	margin-right: 0.4em;
	font-family: "OVP Flags", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
	font-size: 1.15em;
	line-height: 1;
	vertical-align: -0.08em;
}

/* Stats. */
.ovp-pl__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 12px;
}

.ovp .ovp-pl__tab {
	margin: 0;
	padding: 8px 14px 7px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: inherit;
	font: 700 12px/1.1 var(--ovp-font);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.7;
	cursor: pointer;
	transition: background-color 0.2s, opacity 0.2s;
}

.ovp .ovp-pl__tab:hover {
	background: color-mix(in srgb, var(--ovp-sh-text) 10%, transparent);
	color: inherit;
	opacity: 1;
}

.ovp .ovp-pl__tab[aria-selected="true"] {
	background: var(--ovp-sh-accent);
	color: var(--ovp-sh-on-accent, #fff);
	opacity: 1;
}

.ovp .ovp-pl__tab:focus-visible {
	outline: 2px solid var(--ovp-sh-text);
	outline-offset: 2px;
}

.ovp .ovp-stats {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ovp .ovp-stats[hidden] {
	display: none;
}

@container ovp-shelf (max-width: 1000px) {
	.ovp .ovp-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ovp .ovp-stat {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 14px 12px 12px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--ovp-sh-text) 8%, transparent);
	list-style: none;
}

.ovp-stat__icon {
	display: block;
	height: 22px;
	opacity: 0.85;
}

.ovp-stat__icon svg {
	display: block;
}

.ovp-stat__val {
	color: var(--ovp-sh-text);
	font: 700 clamp(24px, 6cqi, 38px) / 1 var(--ovp-font);
	letter-spacing: 0.01em;
}

.ovp-stat--goals .ovp-stat__val {
	color: var(--ovp-sh-accent);
}

.ovp-stat__label {
	font: 700 10.5px/1.2 var(--ovp-font);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.66;
}

.ovp .ovp-pl__note {
	margin: 12px 0 0;
	padding: 0;
	font-size: 12px;
	opacity: 0.5;
}

.ovp[data-st-note="0"] .ovp-pl__note {
	display: none;
}

/* Narrow shelf: photo above, smaller and wide. */
@container ovp-shelf (max-width: 680px) {
	.ovp .ovp-pl,
	.ovp[data-sh-photo="right"] .ovp-pl {
		grid-template-columns: minmax(0, 1fr);
	}

	.ovp[data-sh-photo="right"] .ovp-pl__photo {
		order: 0;
	}

	.ovp-pl__photo {
		aspect-ratio: 4 / 3;
	}

	.ovp[data-fit="cutout"][data-sh-box="free"] .ovp-pl__photo {
		min-height: 0;
		margin-bottom: 0;
		aspect-ratio: 4 / 3;
		border-radius: 0;
		-webkit-mask: linear-gradient(#000 80%, transparent);
		mask: linear-gradient(#000 80%, transparent);
	}

	.ovp-pl__head {
		padding-right: 0;
	}

	.ovp-pl__photo + .ovp-pl__body .ovp-pl__head {
		margin-top: 2px;
	}

	.ovp[data-sh-photo="none"] .ovp-pl__head {
		padding-right: 136px;
	}

	.ovp .ovp-pl__facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ovp .ovp-fact dd {
		font-size: 15px;
	}

	.ovp-shelf__tools {
		top: 10px;
		right: 10px;
	}

	.ovp .ovp-shelf__btn {
		background: rgba(0, 0, 0, 0.45);
		color: #fff;
	}
}

@container ovp-shelf (max-width: 420px) {
	.ovp .ovp-stat {
		padding: 10px 8px;
	}

	.ovp-stat__label {
		font-size: 9.5px;
		letter-spacing: 0.06em;
	}
}

/* --- team photo ---------------------------------------------------------------
 * The photo at full width with a tag (a round hit area, --ovp-tp percent of
 * the photo wide) on every tagged face. The person under the pointer (ovp.js
 * picks the nearest face, so the body counts too) gets a spotlight: the rest
 * of the photo darkens through a radial shade whose centre glides from face
 * to face (registered properties animate), and the name shows above the
 * face. Tags are invisible, dots or numbers (data-tp-markers); on touch
 * screens there are always dots, as nothing hovers there. */

@property --ovp-sx {
	syntax: "<percentage>";
	inherits: true;
	initial-value: 50%;
}

@property --ovp-sy {
	syntax: "<percentage>";
	inherits: true;
	initial-value: 50%;
}

.ovp .ovp-team {
	margin: 0 0 var(--ovp-group-gap);
}

.ovp--row .ovp-team,
.ovp[data-view="photo"] .ovp-team {
	margin-bottom: 0;
}

.ovp-team__body {
	--ovp-rg: 24px;
	display: flex;
	flex-wrap: wrap;
	row-gap: var(--ovp-rg);
}

.ovp-team__stage {
	--ovp-tag: calc(var(--ovp-tp, 4) * 1cqi);
	container-type: inline-size;
	position: relative;
	flex: 0 0 100%;
	min-width: 0;
	overflow: hidden;
	border-radius: var(--ovp-radius);
	transition:
		--ovp-sx 0.35s var(--ovp-ease),
		--ovp-sy 0.35s var(--ovp-ease);
}

.ovp .ovp-team__img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
}

.ovp-team__shade {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at var(--ovp-sx) var(--ovp-sy), transparent calc(var(--ovp-tag) * 0.75), rgba(0, 0, 0, 0.58) calc(var(--ovp-tag) * 1.9));
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.ovp[data-tp-dim="1"] .ovp-team__stage.is-hovering .ovp-team__shade {
	opacity: 1;
}

.ovp-team__tags {
	position: absolute;
	inset: 0;
}

.ovp .ovp-tag {
	position: absolute;
	z-index: 1;
	width: var(--ovp-tag);
	height: var(--ovp-tag);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: inherit;
	cursor: pointer;
	translate: -50% -50%;
	-webkit-tap-highlight-color: transparent;
}

.ovp .ovp-tag--static {
	cursor: default;
}

.ovp .ovp-tag:hover,
.ovp .ovp-tag:focus {
	background: transparent;
	box-shadow: none;
	outline: none;
}

.ovp .ovp-tag:focus-visible {
	outline: 2px solid var(--ovp-sh-accent);
	outline-offset: 2px;
}

.ovp .ovp-tag.is-hover,
.ovp .ovp-tag.is-active {
	z-index: 3;
}

/* Marker at the face. */
.ovp-tag__dot {
	position: absolute;
	top: 50%;
	left: 50%;
	display: none;
	place-items: center;
	translate: -50% -50%;
	pointer-events: none;
}

.ovp[data-tp-markers="dot"] .ovp-tag__dot {
	display: block;
	width: 10px;
	height: 10px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--ovp-sh-accent);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.25);
	font-size: 0;
}

.ovp[data-tp-markers="number"] .ovp-tag__dot:not(:empty) {
	display: grid;
	min-width: 22px;
	height: 22px;
	padding: 0 5px;
	border-radius: 11px;
	background: var(--ovp-sh-accent);
	color: var(--ovp-sh-on-accent, #111);
	font: 700 11px/1 var(--ovp-font);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.ovp[data-tp-markers="number"] .ovp-tag__dot:empty {
	display: block;
	width: 10px;
	height: 10px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: color-mix(in srgb, var(--ovp-sh-accent) 60%, #fff);
}

.ovp-tag.is-hover .ovp-tag__dot,
.ovp-tag.is-active .ovp-tag__dot {
	opacity: 0;
}

@media (hover: none) {
	.ovp[data-tp-markers="none"] .ovp-tag__dot {
		display: block;
		width: 9px;
		height: 9px;
		border: 2px solid #fff;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.35);
		box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
	}
}

/* The name above the face, under it near the top edge. ovp.js measures
   each label and moves it sideways by --ovp-lx so it stays inside the
   photo; never wider than the photo. */
.ovp .ovp-tag__label {
	position: absolute;
	bottom: calc(100% + 4px);
	left: 50%;
	display: flex;
	gap: 8px;
	align-items: center;
	max-width: calc(100cqi - 12px);
	padding: 8px 12px 7px;
	border-radius: 10px;
	background: var(--ovp-sh-bg);
	box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.6);
	color: var(--ovp-sh-text);
	font-family: var(--ovp-font);
	line-height: 1;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	translate: calc(-50% + var(--ovp-lx, 0px)) 6px;
	transition:
		opacity 0.2s ease,
		translate 0.25s var(--ovp-ease);
}

.ovp-tag--below .ovp-tag__label {
	top: calc(100% + 4px);
	bottom: auto;
	translate: calc(-50% + var(--ovp-lx, 0px)) -6px;
}

.ovp .ovp-tag.is-hover .ovp-tag__label,
.ovp .ovp-tag.is-active .ovp-tag__label,
.ovp .ovp-tag:focus-visible .ovp-tag__label {
	opacity: 1;
	translate: calc(-50% + var(--ovp-lx, 0px)) 0;
}

.ovp-tag__num {
	color: var(--ovp-sh-accent);
	font-size: 22px;
	font-weight: 700;
	text-box: trim-both cap alphabetic;
}

.ovp-tag__name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ovp-tag__role {
	padding-left: 8px;
	border-left: 1px solid color-mix(in srgb, var(--ovp-sh-text) 30%, transparent);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.7;
}

@container ovp (max-width: 560px) {
	.ovp .ovp-tag__label {
		gap: 6px;
		padding: 6px 9px 5px;
	}

	.ovp-tag__num {
		font-size: 17px;
	}

	.ovp-tag__name {
		font-size: 12px;
	}

	.ovp-tag__role {
		display: none;
	}
}

/* The tagging editor: tags show where they are. */
.ovp--tagging .ovp-team__stage {
	cursor: crosshair;
}

.ovp--tagging .ovp-tag {
	cursor: grab;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
}

.ovp--tagging .ovp-tag--static {
	box-shadow: inset 0 0 0 2px rgba(255, 200, 0, 0.7);
}

.ovp--tagging .ovp-tag.is-selected {
	box-shadow:
		inset 0 0 0 2px #fff,
		0 0 0 3px #3858e9;
}

.ovp--tagging .ovp-tag.is-dragging {
	cursor: grabbing;
}

/* --- "Poznaj drużynę": one row ------------------------------------------------
 * A title and a button to the squad page, then one row of cards. With the
 * carousel the row scrolls sideways (arrows, drag, swipe, autoplay) through
 * everyone; without it the cards past the row stay hidden. The shelf opens
 * under the whole row: it is placed after the stage, in a flex body whose
 * row gap its negative margin cancels. */

.ovp--row .ovp-row__head {
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 2.4cqi, 22px);
	align-items: center;
	margin-bottom: clamp(22px, 4cqi, 40px);
}

.ovp--row[data-align="left"] .ovp-row__head {
	align-items: flex-start;
}

.ovp--row .ovp-row__head .ovp__title {
	margin: 0;
}

.ovp .ovp-row__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin: 0;
	padding: 13px 40px 12px;
	border: 0;
	border-radius: 999px;
	background: var(--ovp-btn-bg);
	box-shadow: none;
	color: var(--ovp-btn-text);
	font: 700 14px/1 var(--ovp-font);
	letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;
	transition:
		background-color 0.2s,
		transform 0.2s var(--ovp-ease);
}

.ovp .ovp-row__btn:hover,
.ovp .ovp-row__btn:focus-visible {
	background: color-mix(in srgb, var(--ovp-btn-bg) 82%, #fff);
	color: var(--ovp-btn-text);
	text-decoration: none;
}

.ovp .ovp-row__btn:focus-visible {
	outline: 2px solid var(--ovp-btn-bg);
	outline-offset: 3px;
}

.ovp .ovp-row__btn:active {
	transform: scale(0.97);
}

.ovp-row__foot {
	display: flex;
	justify-content: center;
	margin-top: clamp(22px, 4cqi, 40px);
}

.ovp--row[data-align="left"] .ovp-row__foot {
	justify-content: flex-start;
}

.ovp-row__body {
	--ovp-rg: 24px;
	display: flex;
	flex-wrap: wrap;
	row-gap: var(--ovp-rg);
}

.ovp-row__stage {
	--ovp-c: var(--ovp-rc, 4);
	container-type: inline-size;
	position: relative;
	flex: 0 0 100%;
	min-width: 0;
}

@container ovp (max-width: 899px) {
	.ovp .ovp-row__stage { --ovp-c: var(--ovp-rc-tablet, 3); }
}

@container ovp (max-width: 560px) {
	.ovp .ovp-row__stage { --ovp-c: var(--ovp-rc-phone, 2); }
}

/* Room above and below for the hover lift and shadows, which the sideways
   scrolling would clip. */
.ovp .ovp-row__track {
	--ovp-c: inherit;
	flex-wrap: nowrap;
	margin: -14px 0 -18px;
	padding: 14px 0 18px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.ovp .ovp-row__track::-webkit-scrollbar {
	display: none;
}

.ovp .ovp-row__track > .ovp-card {
	scroll-snap-align: start;
}

.ovp .ovp-row__track.is-dragging {
	scroll-snap-type: none;
	cursor: grabbing;
}

.ovp .ovp-row__track.is-dragging .ovp-card__hit {
	pointer-events: none;
}

.ovp--row[data-carousel="0"] .ovp-row__track {
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: 0;
	overflow: visible;
	scroll-snap-type: none;
}

.ovp--row[data-align="left"][data-carousel="0"] .ovp-row__track {
	justify-content: flex-start;
}

.ovp .ovp-card[hidden] {
	display: none;
}

/* Arrows on the photos' middle line, inside the row. */
.ovp .ovp-row__nav {
	position: absolute;
	top: calc(14px + (100cqi - (var(--ovp-c) - 1) * var(--ovp-gap)) / var(--ovp-c) / var(--ovp-ratio, 1) / 2);
	z-index: 3;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
	color: #fff;
	cursor: pointer;
	translate: 0 -50%;
	transition:
		opacity 0.25s,
		background-color 0.2s,
		transform 0.2s var(--ovp-ease);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.ovp .ovp-row__nav:hover,
.ovp .ovp-row__nav:focus-visible {
	background: var(--ovp-btn-bg);
	color: var(--ovp-btn-text);
}

.ovp .ovp-row__nav:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.ovp .ovp-row__nav:active {
	transform: scale(0.92);
}

.ovp .ovp-row__nav svg {
	display: block;
}

.ovp .ovp-row__nav--prev {
	left: 10px;
}

.ovp .ovp-row__nav--next {
	right: 10px;
}

.ovp .ovp-row__nav--next svg {
	transform: scaleX(-1);
}

.ovp .ovp-row__nav:disabled,
.ovp .ovp-row__stage:not(.has-more) .ovp-row__nav {
	opacity: 0;
	pointer-events: none;
}

/* Phones swipe. */
@container ovp (max-width: 560px) {
	.ovp .ovp-row__nav {
		display: none;
	}
}

/* --- reduced motion --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ovp .ovp-card,
	.ovp.ovp--live .ovp-card.is-in {
		opacity: 1 !important;
		animation: none !important;
	}

	.ovp :is(.ovp-shelf, .ovp-shelf__panel, .ovp-card__media, .ovp-card__img) {
		transition: none !important;
	}

	.ovp .ovp-shelf__content.is-swapping,
	.ovp .ovp-group.is-shown,
	.ovp .ovp-card *,
	.ovp .ovp-shelf .ovp-pl * {
		animation: none !important;
	}
}