/*
 * Coinslot Promos. Every color, font, radius, slant and shadow comes from the theme tokens
 * (--cs-*), so placements follow Character Select, Modern Arcade and every color scheme.
 * Box art tilts by --csp-tilt; Modern Arcade sets it to zero.
 */

:root {
	--csp-tilt: calc(-3deg * var(--cs-sx, 1));
	--csp-hard: calc(6px * var(--cs-sx, 1) * var(--cs-shadow-o, 1)) calc(6px * var(--cs-shadow-o, 1)) 0 var(--cs-shadow);
	--csp-hard-sm: calc(3px * var(--cs-sx, 1) * var(--cs-shadow-o, 1)) calc(3px * var(--cs-shadow-o, 1)) 0 var(--cs-shadow);
	--csp-blur: blur(26px) saturate(1.35) brightness(0.5);
	--csp-tile-gap: 12px;
}
:root.cs-design-modern {
	--csp-tilt: 0deg;
}

/* ---------- Shared ---------- */
/* Device targeting works before the script runs, so nothing flashes on the wrong device. */
@media (max-width: 760px) {
	[data-csp-devices="desktop"] {
		display: none !important;
	}
}
@media (min-width: 761px) {
	[data-csp-devices="phone"] {
		display: none !important;
	}
}
.csp-spot[hidden],
.csp-bill[hidden],
.csp-bill [hidden],
.csp-spot [hidden],
.csp-end[hidden],
.csp-load[hidden],
.csp-sticky[hidden],
[data-csp][hidden] {
	display: none !important;
}
.csp-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.csp-badges:empty {
	display: none;
}
.csp-badge {
	display: inline-block;
	padding: 2px 10px 3px;
	background: var(--cs-red);
	color: var(--cs-select-ink);
	font-family: var(--cs-font-display);
	font-size: 15px;
	line-height: 1.2;
	letter-spacing: var(--cs-track);
	text-transform: var(--cs-caps);
	white-space: nowrap;
	transform: skewX(var(--cs-sk));
	box-shadow: calc(2px * var(--cs-sx) * var(--cs-shadow-o)) calc(2px * var(--cs-shadow-o)) 0 var(--cs-shadow);
	border-radius: var(--cs-radius-pill);
}
.csp-label {
	display: inline-block;
	padding: 1px 8px;
	border: 1px solid color-mix(in srgb, var(--cs-ink) 30%, transparent);
	background: color-mix(in srgb, var(--cs-bar) 70%, transparent);
	color: var(--cs-mute);
	font: 600 11px/1.5 var(--cs-font-body);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	border-radius: var(--cs-radius-pill);
}
.csp-close {
	display: grid;
	place-items: center;
	inline-size: 26px;
	block-size: 26px;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--cs-ink) 30%, transparent);
	background: var(--cs-bar);
	color: var(--cs-ink);
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
}
.csp-close:hover {
	border-color: var(--cs-yellow);
}
/* Art boxes: one rule for every image container. */
.csp-bill__bg img,
.csp-bill__art img,
.csp-bill__pick-art img,
.csp-mini__bg img,
.csp-mini__art img,
.csp-tile__bg img,
.csp-tile__art img,
.csp-banner__art img,
.csp-banner__thumb img,
.csp-upnext__bg img,
.csp-load__art img,
.csp-sticky__art img,
.csp-inart__art img,
.csp-spot__thumb img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}
.csp-bill__bg img,
.csp-mini__bg img,
.csp-tile__bg img,
.csp-upnext__bg img {
	filter: var(--csp-blur);
	transform: scale(1.35);
}
.cs-btn .cs-icon,
.csp-tile__play .cs-icon {
	font-size: 0.8em;
}

/* ---------- 1. Spotlight bar ---------- */
.csp-spot {
	position: relative;
	z-index: 51;
	background: linear-gradient(calc(90deg * var(--cs-sx)), color-mix(in srgb, var(--cs-red) 50%, var(--cs-bar)) 0, var(--cs-bar) 55%);
	border-block-end: 1px solid color-mix(in srgb, var(--cs-ink) 12%, transparent);
}
.csp-spot__inner {
	position: relative;
	display: flex;
	align-items: center;
	padding-inline-end: calc(var(--cs-gutter) + 36px);
}
.csp-spot__msgs {
	position: relative;
	flex: 1;
	min-inline-size: 0;
	block-size: 44px;
	overflow: hidden;
}
.csp-spot__msg {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--cs-body-ink);
	font-size: 14px;
	text-decoration: none;
	opacity: 0;
	transform: translateY(70%);
	pointer-events: none;
	transition: opacity var(--cs-dur-slow) var(--cs-ease), transform var(--cs-dur-slow) var(--cs-ease);
}
.csp-spot__msg.is-on {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}
.csp-spot__thumb {
	flex: none;
	inline-size: 28px;
	block-size: 28px;
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--cs-ink) 25%, transparent);
	border-radius: var(--cs-radius-sm);
}
.csp-spot__text {
	flex: 1;
	min-inline-size: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.csp-spot__text b {
	color: var(--cs-ink);
}
.csp-spot__cta {
	flex: none;
	color: var(--cs-yellow);
	font-weight: 700;
	letter-spacing: var(--cs-track);
	text-transform: var(--cs-caps);
}
.csp-arrow {
	display: inline-block;
	transition: transform var(--cs-dur) var(--cs-ease);
}
.csp-spot__msg:hover .csp-arrow {
	transform: translateX(calc(4px * var(--cs-sx)));
}
.csp-spot__msg:hover .csp-spot__text b {
	text-decoration: underline;
}
.csp-spot .csp-close {
	position: absolute;
	inset-block-start: 9px;
	inset-inline-end: var(--cs-gutter);
	background: transparent;
	border-color: transparent;
}
.csp-spot .csp-close:hover {
	border-color: color-mix(in srgb, var(--cs-ink) 30%, transparent);
}

/* ---------- 2. Billboard ---------- */
.csp-bill {
	position: relative;
	margin-block: 26px 6px;
	block-size: clamp(340px, 31vw, 410px);
	overflow: hidden;
	border: var(--cs-bw-2) solid var(--cs-yellow);
	background: var(--cs-bar);
	box-shadow: var(--csp-hard);
	border-radius: var(--cs-radius);
}
.csp-bill__slide {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 32px;
	padding: 32px 48px 88px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s var(--cs-ease), visibility 0s linear 0.5s;
}
.csp-bill__slide.is-on {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.5s var(--cs-ease);
}
.csp-bill__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.csp-bill__slide.is-custom .csp-bill__bg img {
	filter: none;
	transform: none;
}
.csp-bill__slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(calc(90deg * var(--cs-sx)), color-mix(in srgb, var(--cs-bar) 94%, transparent) 0, color-mix(in srgb, var(--cs-bar) 60%, transparent) 42%, transparent 72%);
}
.csp-bill__slide.is-custom::after {
	background: linear-gradient(calc(90deg * var(--cs-sx)), color-mix(in srgb, var(--cs-bar) 92%, transparent) 0, color-mix(in srgb, var(--cs-bar) 40%, transparent) 46%, transparent 64%);
}
.csp-bill__copy {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: start;
	gap: 14px;
	max-inline-size: 580px;
}
.csp-bill__title {
	font-size: clamp(38px, 4.6vw, 66px);
}
.csp-bill__text {
	display: -webkit-box;
	margin: 0;
	max-inline-size: 46ch;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	color: var(--cs-body-ink);
	font-size: 17px;
	line-height: 1.5;
}
.csp-bill__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 20px;
	margin-block-start: 6px;
}
.csp-bill__meta {
	color: var(--cs-mute);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: var(--cs-track);
	text-transform: var(--cs-caps);
}
.csp-bill__art {
	position: relative;
	z-index: 1;
	display: block;
	inline-size: clamp(170px, 17vw, 240px);
	aspect-ratio: 1;
	margin-inline-end: 12px;
	overflow: hidden;
	border: var(--cs-bw-2) solid var(--cs-yellow);
	transform: rotate(var(--csp-tilt));
	box-shadow: var(--csp-hard), 0 20px 50px rgb(0 0 0 / 0.5);
	border-radius: var(--cs-radius-sm);
	transition: transform var(--cs-dur-mid) var(--cs-ease);
}
.csp-bill__art:hover {
	transform: rotate(0deg) scale(1.03);
}
.csp-bill__rail {
	position: absolute;
	z-index: 2;
	inset-block-end: 16px;
	inset-inline-end: 16px;
	display: flex;
	gap: 8px;
}
.csp-bill__pick {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 10px;
	row-gap: 6px;
	inline-size: 178px;
	padding: 6px 10px 6px 6px;
	border: var(--cs-bw) solid color-mix(in srgb, var(--cs-ink) 20%, transparent);
	background: color-mix(in srgb, var(--cs-bar) 78%, transparent);
	backdrop-filter: blur(8px);
	color: var(--cs-ink);
	font: 700 13px/1.25 var(--cs-font-body);
	text-align: start;
	cursor: pointer;
	border-radius: var(--cs-radius-sm);
	transition: border-color var(--cs-dur) var(--cs-ease);
}
.csp-bill__pick:hover,
.csp-bill__pick.is-on {
	border-color: var(--cs-yellow);
}
.csp-bill__pick-art {
	grid-row: span 2;
	block-size: 40px;
	overflow: hidden;
	border-radius: calc(var(--cs-radius-sm) * 0.6);
}
.csp-bill__pick-title {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	align-self: end;
}
.csp-bill__prog {
	display: block;
	align-self: start;
	block-size: 3px;
	overflow: hidden;
	background: color-mix(in srgb, var(--cs-ink) 15%, transparent);
	border-radius: 2px;
}
.csp-bill__prog i {
	display: block;
	block-size: 100%;
	inline-size: 0;
	background: var(--cs-yellow);
}
.csp-bill__pick.is-on .csp-bill__prog i {
	animation: csp-prog var(--csp-rotate, 6s) linear forwards;
}
.csp-bill.is-paused .csp-bill__prog i {
	animation-play-state: paused;
}
@keyframes csp-prog {
	to {
		inline-size: 100%;
	}
}

/* 2b. Billboard with side promos */
.csp-split {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 20px;
	margin-block: 26px 6px;
}
.csp-bill--single {
	margin: 0;
	block-size: auto;
	min-block-size: 380px;
}
.csp-bill--single .csp-bill__slide {
	padding-block-end: 32px;
}
.csp-split__side {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: 20px;
}
.csp-split--solo {
	grid-template-columns: minmax(0, 1fr);
}
.csp-mini {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-block-size: 170px;
	padding: 18px 20px;
	overflow: hidden;
	border: var(--cs-bw-2) solid var(--cs-frame);
	background: var(--cs-bar);
	color: var(--cs-ink);
	text-decoration: none;
	box-shadow: var(--csp-hard-sm);
	border-radius: var(--cs-radius);
	transition: border-color var(--cs-dur) var(--cs-ease), transform var(--cs-dur-mid) var(--cs-ease);
}
.csp-mini:hover {
	border-color: var(--cs-red);
}
.csp-mini__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.csp-mini::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(calc(90deg * var(--cs-sx)), color-mix(in srgb, var(--cs-bar) 90%, transparent) 0, transparent 75%);
}
.csp-mini__art {
	position: absolute;
	z-index: 1;
	inset-block-start: 50%;
	inset-inline-end: 18px;
	inline-size: min(42%, 140px);
	aspect-ratio: 1;
	overflow: hidden;
	border: var(--cs-bw-2) solid var(--cs-yellow);
	transform: translateY(-50%) rotate(calc(var(--csp-tilt) * -1));
	box-shadow: var(--csp-hard-sm);
	border-radius: var(--cs-radius-sm);
}
.csp-mini__copy {
	position: relative;
	z-index: 2;
	display: grid;
	justify-items: start;
	gap: 8px;
	max-inline-size: 52%;
}
.csp-mini__title {
	font-family: var(--cs-font-display);
	font-weight: 400;
	font-size: 28px;
	line-height: var(--cs-display-lh);
	letter-spacing: var(--cs-track);
	text-transform: var(--cs-caps);
	transform: skewX(var(--cs-sk));
}
.csp-mini__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--cs-yellow);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: var(--cs-track);
	text-transform: var(--cs-caps);
}

/* ---------- 3. Featured tile ---------- */
.csp-tile .cs-tile__frame {
	border-color: var(--cs-yellow);
	box-shadow: 0 0 0 2px var(--cs-yellow), 0 0 22px color-mix(in srgb, var(--cs-yellow) 45%, transparent);
}
.csp-tile:hover .cs-tile__frame,
.csp-tile:focus-visible .cs-tile__frame {
	border-color: var(--cs-red);
	box-shadow: 0 0 0 3px var(--cs-red), 0 0 22px color-mix(in srgb, var(--cs-red) 45%, transparent);
}
/* A light sweep every few seconds. */
.csp-tile .cs-tile__frame::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / 0.28) 48%, transparent 60%) -200% 0 / 250% 100% no-repeat;
	animation: csp-shine 4.5s var(--cs-ease) infinite 1.2s;
	pointer-events: none;
}
@keyframes csp-shine {
	0%,
	72% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}
.csp-tile .cs-tile__title {
	color: var(--cs-yellow);
}
.csp-tile__play {
	position: absolute;
	z-index: 2;
	inset-inline: 8px;
	inset-block-end: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 4px 8px 5px;
	background: var(--cs-yellow);
	color: var(--cs-navy);
	font-family: var(--cs-font-display);
	font-size: 17px;
	line-height: 1.15;
	letter-spacing: var(--cs-track);
	text-transform: var(--cs-caps);
	white-space: nowrap;
	transform: skewX(var(--cs-sk));
	box-shadow: var(--csp-hard-sm);
	border-radius: var(--cs-radius-pill);
}
/* Wide tile: two columns, and exactly one tile tall. */
.csp-tile-li--wide {
	grid-column: span 2;
}
.csp-tile-li--wide .cs-tile__frame {
	aspect-ratio: auto;
	block-size: 0;
	padding-block-end: calc(50% - var(--csp-tile-gap) / 2 - 2 * var(--cs-bw-2));
	box-sizing: content-box;
}
.csp-tile-li--wide .cs-tile__frame img {
	transition: none;
}
.csp-tile__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.csp-tile__art {
	position: absolute;
	z-index: 1;
	inset-block-start: 10%;
	inset-inline-start: 5%;
	inline-size: 40%;
	aspect-ratio: 1;
	overflow: hidden;
	border: var(--cs-bw-2) solid var(--cs-yellow);
	transform: rotate(var(--csp-tilt));
	box-shadow: var(--csp-hard-sm);
	border-radius: var(--cs-radius-sm);
}
.csp-tile__pitch {
	position: absolute;
	z-index: 1;
	inset-block-start: 12%;
	inset-inline: 51% 6%;
	display: grid;
	gap: 6px;
	color: var(--cs-ink);
}
.csp-tile__pitch strong {
	font-family: var(--cs-font-display);
	font-weight: 400;
	font-size: clamp(20px, 2vw, 28px);
	line-height: var(--cs-display-lh);
	letter-spacing: var(--cs-track);
	text-transform: var(--cs-caps);
}
.csp-tile__pitch span {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	color: var(--cs-body-ink);
	font-size: 13px;
	line-height: 1.4;
}
.csp-tile-li--wide .csp-tile__play {
	inset-inline: 51% 6%;
	inset-block-end: 11%;
}
.csp-tile-li--wide .cs-tile__badge {
	z-index: 2;
}
/* Rows never wrap (see the theme), so the promo pushes the last tile out instead. */

/* ---------- 4. Inline banner ---------- */
.csp-banner {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 22px;
	min-block-size: 132px;
	padding: 18px 28px 18px 20px;
	overflow: hidden;
	border: var(--cs-bw-2) solid var(--cs-frame);
	background: var(--cs-bar);
	color: var(--cs-ink);
	text-decoration: none;
	box-shadow: var(--csp-hard);
	border-radius: var(--cs-radius);
	transition: border-color var(--cs-dur) var(--cs-ease);
}
.csp-banner:hover {
	border-color: var(--cs-yellow);
}
.csp-banner--nothumb {
	grid-template-columns: minmax(0, 1fr) auto;
}
.csp-banner__art {
	position: absolute;
	inset-block: 0;
	inset-inline: 32% 0;
	opacity: 0.85;
	-webkit-mask-image: linear-gradient(calc(90deg * var(--cs-sx)), transparent, #000 45%);
	mask-image: linear-gradient(calc(90deg * var(--cs-sx)), transparent, #000 45%);
}
.csp-banner__thumb {
	position: relative;
	z-index: 1;
	inline-size: 92px;
	aspect-ratio: 1;
	overflow: hidden;
	border: var(--cs-bw-2) solid var(--cs-yellow);
	transform: rotate(var(--csp-tilt));
	box-shadow: var(--csp-hard-sm);
	border-radius: var(--cs-radius-sm);
}
.csp-banner__copy {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 4px;
}
.csp-banner__title {
	font-family: var(--cs-font-display);
	font-weight: 400;
	font-size: 36px;
	line-height: var(--cs-display-lh);
	letter-spacing: var(--cs-track);
	text-transform: var(--cs-caps);
	color: var(--cs-yellow);
	transform: skewX(var(--cs-sk));
	transform-origin: var(--cs-origin);
}
.csp-banner__text {
	color: var(--cs-ink);
	font-weight: 600;
	text-shadow: 0 1px 8px rgb(0 0 0 / 0.6);
}
.csp-banner__btn {
	position: relative;
	z-index: 1;
}
.csp-banner__label {
	position: absolute;
	z-index: 1;
	inset-block-start: 8px;
	inset-inline-end: 8px;
}
.csp-lb-wrap {
	display: grid;
	justify-items: center;
	gap: 6px;
}
.csp-lb {
	display: block;
	max-inline-size: 100%;
	overflow: hidden;
	line-height: 0;
	border: var(--cs-bw) solid var(--cs-frame);
	border-radius: var(--cs-radius-sm);
	transition: border-color var(--cs-dur) var(--cs-ease);
}
.csp-lb:hover {
	border-color: var(--cs-yellow);
}
.csp-lb img {
	display: block;
	max-inline-size: 100%;
	block-size: auto;
}

/* ---------- 5. Up next ---------- */
.csp-upnext {
	display: grid;
	gap: 12px;
	border-color: color-mix(in srgb, var(--cs-yellow) 70%, var(--cs-frame));
}
.csp-upnext__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 0;
}
.csp-upnext__art {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border: var(--cs-bw) solid var(--cs-frame);
	background: var(--cs-screen);
	border-radius: var(--cs-radius-sm);
}
.csp-upnext__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.csp-upnext__box {
	position: absolute;
	inset-block-start: 12%;
	left: 50%;
	block-size: 76%;
	inline-size: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border: var(--cs-bw-2) solid var(--cs-yellow);
	transform: translateX(-50%) rotate(var(--csp-tilt));
	box-shadow: var(--csp-hard-sm);
	border-radius: var(--cs-radius-sm);
	transition: transform var(--cs-dur-mid) var(--cs-ease);
}
.csp-upnext__art:hover .csp-upnext__box {
	transform: translateX(-50%) rotate(0deg) scale(1.05);
}
.csp-upnext__title {
	font-family: var(--cs-font-display);
	font-weight: 400;
	font-size: 28px;
	line-height: var(--cs-display-lh);
	letter-spacing: var(--cs-track);
	text-transform: var(--cs-caps);
	color: var(--cs-ink);
}
.csp-upnext__text {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	color: var(--cs-body-ink);
	font-size: 14px;
	line-height: 1.5;
}
.csp-upnext__btn {
	inline-size: 100%;
}

/* ---------- 6. Loading card and end screen ---------- */
.csp-load {
	position: absolute;
	z-index: 3;
	inset-inline: 0;
	inset-block-end: 14px;
	inline-size: min(100% - 28px, 440px);
	margin-inline: auto;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity var(--cs-dur-slow) var(--cs-ease), transform var(--cs-dur-slow) var(--cs-ease);
}
.csp-load.is-in {
	opacity: 1;
	transform: none;
}
.csp-load__card {
	display: grid;
	grid-template-columns: 54px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 8px 12px 8px 8px;
	border: var(--cs-bw) solid color-mix(in srgb, var(--cs-ink) 25%, transparent);
	background: color-mix(in srgb, var(--cs-bar) 88%, transparent);
	backdrop-filter: blur(8px);
	color: var(--cs-ink);
	text-decoration: none;
	box-shadow: 0 10px 30px rgb(0 0 0 / 0.45);
	border-radius: var(--cs-radius-sm);
}
.csp-load__card:hover {
	border-color: var(--cs-yellow);
}
.csp-load__art {
	block-size: 54px;
	overflow: hidden;
	border-radius: calc(var(--cs-radius-sm) * 0.6);
}
.csp-load__copy {
	min-inline-size: 0;
	text-align: start;
}
.csp-load__copy small {
	display: block;
	color: var(--cs-mute);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.csp-load__copy strong {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-family: var(--cs-font-display);
	font-weight: 400;
	font-size: 21px;
	line-height: var(--cs-display-lh);
	letter-spacing: var(--cs-track);
	text-transform: var(--cs-caps);
}
.csp-load .csp-close {
	position: absolute;
	inset-block-start: -11px;
	inset-inline-end: -11px;
}
.csp-end {
	position: absolute;
	z-index: 4;
	inset: 0;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 20px;
	padding: 24px;
	background: color-mix(in srgb, var(--cs-bar) 90%, transparent);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity var(--cs-dur-slow) var(--cs-ease);
}
.csp-end.is-in {
	opacity: 1;
}
.csp-end__title {
	flex: none;
	margin: 0;
	font-size: clamp(24px, 3.4cqw, 34px);
}
.csp-end__title::after {
	display: none;
}
.csp-end__row {
	display: grid;
	grid-template-columns: repeat(var(--csp-end-count, 3), minmax(0, 1fr));
	gap: 16px;
	inline-size: min(100cqw - 48px, var(--csp-end-count, 3) * 186px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.csp-end .cs-tile:not(.csp-tile) .csp-tile__play {
	opacity: 0;
	transition: opacity var(--cs-dur) var(--cs-ease);
}
.csp-end .cs-tile:hover .csp-tile__play {
	opacity: 1;
}
.csp-end .cs-tile__frame img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}
.csp-next-btn {
	border-color: var(--cs-yellow);
}

/* ---------- 7. Phone sticky card ---------- */
.csp-sticky {
	position: fixed;
	z-index: 60;
	inset-inline: 10px;
	inset-block-end: calc(10px + env(safe-area-inset-bottom, 0px));
	transform: translateY(140%);
	transition: transform var(--cs-dur-slow) var(--cs-ease);
}
.csp-sticky.is-in {
	transform: none;
}
.csp-sticky__card {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 8px 10px 8px 8px;
	border: var(--cs-bw-2) solid var(--cs-yellow);
	background: color-mix(in srgb, var(--cs-bar) 94%, transparent);
	backdrop-filter: blur(10px);
	color: var(--cs-ink);
	text-decoration: none;
	box-shadow: var(--csp-hard-sm), 0 12px 32px rgb(0 0 0 / 0.5);
	border-radius: var(--cs-radius);
}
.csp-sticky__card--noart {
	grid-template-columns: minmax(0, 1fr) auto;
	padding-inline-start: 14px;
}
.csp-sticky__art {
	block-size: 52px;
	overflow: hidden;
	border-radius: calc(var(--cs-radius-sm) * 0.6);
}
.csp-sticky__copy {
	min-inline-size: 0;
}
.csp-sticky__copy strong {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-family: var(--cs-font-display);
	font-weight: 400;
	font-size: 21px;
	line-height: var(--cs-display-lh);
	letter-spacing: var(--cs-track);
	text-transform: var(--cs-caps);
}
.csp-sticky__copy small {
	display: block;
	color: var(--cs-mute);
	font-size: 12px;
	font-weight: 600;
}
.csp-sticky .csp-close {
	position: absolute;
	inset-block-start: -11px;
	inset-inline-end: -4px;
}
@media (min-width: 761px) {
	.csp-sticky {
		display: none;
	}
}

/* ---------- 8. Article card ---------- */
.csp-inart {
	margin-block: 30px;
}
.cs-prose .csp-inart__link,
.csp-inart__link {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	overflow: hidden;
	border: var(--cs-bw-2) solid var(--cs-frame);
	background: var(--cs-bar);
	color: var(--cs-ink);
	text-decoration: none;
	box-shadow: var(--csp-hard-sm);
	border-radius: var(--cs-radius);
	transition: border-color var(--cs-dur) var(--cs-ease);
}
.cs-prose .csp-inart__link:hover {
	color: var(--cs-ink);
	border-color: var(--cs-yellow);
}
.cs-prose .csp-inart__link--noart,
.csp-inart__link--noart {
	grid-template-columns: minmax(0, 1fr);
}
.csp-inart__art {
	position: relative;
	min-block-size: 170px;
}
.cs-prose .csp-inart__art img {
	position: absolute;
	inset: 0;
	block-size: 100%;
	margin: 0;
}
.csp-inart__copy {
	display: grid;
	align-content: center;
	justify-items: start;
	gap: 6px;
	padding: 18px 24px;
	line-height: 1.45;
}
.csp-inart__copy small {
	color: var(--cs-yellow);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.csp-inart__copy strong {
	font-family: var(--cs-font-display);
	font-weight: 400;
	font-size: 30px;
	line-height: var(--cs-display-lh);
	letter-spacing: var(--cs-track);
	text-transform: var(--cs-caps);
}
.csp-inart__text {
	color: var(--cs-body-ink);
	font-size: 15px;
}
.csp-inart .cs-btn {
	margin-block-start: 6px;
}

/* ---------- Modern Arcade deltas: soft depth instead of hard frames ---------- */
.cs-design-modern .csp-badge {
	padding: 3px 10px;
	border: 1px solid color-mix(in srgb, var(--cs-yellow) 60%, transparent);
	background: color-mix(in srgb, var(--cs-yellow) 28%, var(--cs-bar));
	color: var(--cs-ink);
	font-family: var(--cs-font-body);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.cs-design-modern .csp-spot {
	background: linear-gradient(calc(90deg * var(--cs-sx)), color-mix(in srgb, var(--cs-yellow) 32%, var(--cs-bar)) 0, var(--cs-bar) 55%);
}
.cs-design-modern .csp-bill,
.cs-design-modern .csp-mini,
.cs-design-modern .csp-banner,
.cs-design-modern .csp-inart__link,
.cs-design-modern .csp-sticky__card {
	border: 1px solid var(--cs-hair);
	box-shadow: var(--cs-elev-2);
}
.cs-design-modern .csp-mini:hover,
.cs-design-modern .csp-banner:hover,
.cs-design-modern .cs-prose .csp-inart__link:hover {
	border-color: color-mix(in srgb, var(--cs-yellow) 60%, transparent);
	box-shadow: var(--cs-elev-2), var(--cs-glow);
}
.cs-design-modern .csp-bill__art,
.cs-design-modern .csp-mini__art,
.cs-design-modern .csp-tile__art,
.cs-design-modern .csp-banner__thumb,
.cs-design-modern .csp-upnext__box {
	border: 1px solid var(--cs-hair-strong);
	box-shadow: var(--cs-elev-2);
}
.cs-design-modern .csp-tile .cs-tile__frame {
	border-color: transparent;
	box-shadow: var(--cs-glow);
}
.cs-design-modern .csp-tile:hover .cs-tile__frame {
	box-shadow: var(--cs-ring);
}
.cs-design-modern .csp-tile .cs-tile__title {
	color: var(--cs-ink);
}
.cs-design-modern .csp-tile__play {
	font-family: var(--cs-font-body);
	font-weight: 600;
	font-size: 13px;
	padding: 6px 10px;
	text-transform: none;
}
.cs-design-modern .csp-banner__title,
.cs-design-modern .csp-tile__pitch strong,
.cs-design-modern .csp-mini__title,
.cs-design-modern .csp-upnext__title,
.cs-design-modern .csp-inart__copy strong,
.cs-design-modern .csp-load__copy strong,
.cs-design-modern .csp-sticky__copy strong {
	font-weight: 700;
}
.cs-design-modern .csp-banner__title {
	color: var(--cs-ink);
}
.cs-design-modern .csp-upnext {
	border-color: color-mix(in srgb, var(--cs-yellow) 45%, transparent);
}

/* ---------- Smaller screens ---------- */
@media (max-width: 1080px) {
	.csp-bill__pick {
		inline-size: auto;
		grid-template-columns: 40px;
		padding: 5px;
	}
	.csp-bill__pick-title {
		display: none;
	}
	.csp-bill__pick-art {
		grid-row: auto;
	}
	.csp-split {
		grid-template-columns: minmax(0, 1fr);
	}
	.csp-split__side {
		grid-template-rows: none;
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 760px) {
	.csp-spot__thumb,
	.csp-spot .csp-label {
		display: none;
	}
	.csp-spot__msg {
		gap: 8px;
		font-size: 13px;
	}
	.csp-spot .csp-badge {
		font-size: 12px;
		padding-inline: 7px;
	}
	.csp-bill {
		block-size: 450px;
		margin-block-start: 18px;
	}
	.csp-bill__slide {
		grid-template-columns: minmax(0, 1fr);
		align-items: end;
		padding: 22px 20px 78px;
	}
	.csp-bill__art {
		position: absolute;
		inset-block-start: 22px;
		inset-inline-end: 20px;
		inline-size: 100px;
		margin: 0;
	}
	.csp-bill__copy {
		gap: 10px;
	}
	.csp-bill__title {
		font-size: clamp(32px, 9vw, 44px);
	}
	.csp-bill__text {
		font-size: 15px;
	}
	.csp-bill__slide::after {
		background: linear-gradient(0deg, color-mix(in srgb, var(--cs-bar) 95%, transparent) 0, color-mix(in srgb, var(--cs-bar) 60%, transparent) 55%, transparent 85%);
	}
	.csp-bill__rail {
		inset-inline: 20px auto;
	}
	.csp-split__side {
		grid-template-columns: minmax(0, 1fr);
	}
	.csp-bill--single {
		min-block-size: 400px;
	}
	.csp-bill--single .csp-bill__slide {
		padding-block-end: 22px;
	}
	.csp-banner {
		grid-template-columns: auto minmax(0, 1fr);
		gap: 14px;
		padding: 16px;
	}
	.csp-banner__thumb {
		inline-size: 64px;
	}
	.csp-banner__title {
		font-size: 26px;
	}
	.csp-banner__btn {
		grid-column: 1 / -1;
		justify-self: start;
	}
	.csp-banner__art {
		inset-inline-start: 20%;
	}
	.csp-tile__pitch span {
		display: none;
	}
	.csp-inart__link,
	.cs-prose .csp-inart__link {
		grid-template-columns: minmax(0, 1fr);
	}
	.csp-inart__art {
		min-block-size: 0;
		aspect-ratio: 16 / 9;
	}
	.csp-end {
		gap: 12px;
		padding: 12px;
	}
	.csp-end .cs-tile__title {
		display: none;
	}
}