/* NextPlay Vote — frontend. Colors can be overridden from the theme via these variables. */
.npv-wrap {
	--npv-panel: #05051c;
	--npv-text: #ffffff;
	--npv-muted: rgba(255, 255, 255, 0.72);
	--npv-accent: #ffe500;
	--npv-voted: #37d67a;
	--npv-radius: 4px;
	--npv-panel-radius: 12px; /* streamer panels */
	--npv-card-radius: 8px; /* game boxes */
	--npv-stroke: 6px; /* yellow outline around streamer photos */

	/* Layout reacts to the space the theme gives the shortcode, not to the window size. */
	container: npv / inline-size;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	padding: clamp(72px, 8vw, 128px) clamp(16px, 4vw, 64px) clamp(64px, 7vw, 112px);
	color: var(--npv-text);
	font-family: var(--npv-font, inherit); /* set from the Font setting; empty = theme font */
	line-height: 1.3;
}

/* Full-bleed: break out of the theme's content column to span the whole window.
   --npv-sbw (scrollbar width) is set by frontend.js so 100vw doesn't cause horizontal scrolling. */
.npv-wrap.npv-full.npv-full {
	width: calc(100vw - var(--npv-sbw, 0px));
	max-width: none;
	margin-right: calc(50% - 50vw + var(--npv-sbw, 0px) / 2);
	margin-left: calc(50% - 50vw + var(--npv-sbw, 0px) / 2);
}

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

.npv-wrap.npv-has-bg {
	background:
		linear-gradient(180deg, rgba(2, 2, 14, 0) 25%, rgba(2, 2, 14, 0.8) 55%, rgba(2, 2, 14, 0.97) 78%, #02020e 100%),
		linear-gradient(100deg, #1686c9 0%, #3b3fa8 22%, #7a2d95 45%, #c9205a 70%, #ff2d2d 100%);
}

.npv-grid {
	display: grid;
	grid-template-columns: repeat(var(--npv-cols, 3), minmax(0, 1fr)); /* number of streamers shown */
	gap: clamp(20px, 3.5cqi, 64px);
	max-width: min(1400px, calc(var(--npv-cols, 3) * 480px)); /* 1–2 streamers don't stretch across the screen */
	margin: 0 auto;
}

/* Column */
.npv-col {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(20px, 2.2cqi, 32px) clamp(16px, 1.8cqi, 26px) clamp(16px, 1.8cqi, 26px);
	background: var(--npv-panel);
	border-radius: var(--npv-panel-radius);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.npv-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	min-height: clamp(110px, 10cqi, 160px);
	margin-bottom: clamp(16px, 2cqi, 28px);
}

.npv-wrap .npv-title {
	margin: clamp(12px, 1.5cqi, 24px) 0 0;
	padding: 0;
	color: var(--npv-text);
	font-family: inherit;
	font-size: clamp(22px, 2.5cqi, 34px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	overflow-wrap: break-word;
	hyphens: manual;
}

.npv-name,
.npv-suffix {
	display: block;
}

.npv-suffix {
	max-width: 6.5em; /* "HAS SELECTED" breaks onto two lines, as in the design */
}

/* Streamer photo — sticks out of the panel's top-right corner */
.npv-photo {
	flex: 0 0 auto;
	width: clamp(96px, 9cqi, 150px);
	margin: clamp(-56px, -3.5cqi, -24px) clamp(-48px, -3cqi, -12px) 0 0;
}

.npv-photo img {
	display: block;
	width: 100%;
	height: auto;
}

.npv-photo-cutout .npv-photo img {
	filter:
		drop-shadow(var(--npv-stroke) 0 0 var(--npv-accent))
		drop-shadow(calc(var(--npv-stroke) * -1) 0 0 var(--npv-accent))
		drop-shadow(0 var(--npv-stroke) 0 var(--npv-accent))
		drop-shadow(0 calc(var(--npv-stroke) * -1) 0 var(--npv-accent))
		drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45));
}

.npv-photo-circle .npv-photo img {
	aspect-ratio: 1;
	object-fit: cover;
	border: var(--npv-stroke) solid var(--npv-accent);
	border-radius: 50%;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}

/* Game cards */
.npv-games {
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 0.9cqi, 14px);
}

.npv-wrap button.npv-game {
	appearance: none;
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 460 / 215;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 3px solid transparent;
	border-radius: var(--npv-card-radius);
	isolation: isolate; /* keeps the zoomed image inside the rounded corners in Safari */
	background: #111130;
	color: var(--npv-text);
	font: inherit;
	text-align: center;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	cursor: pointer;
	transition: border-color 0.2s, opacity 0.25s, filter 0.25s, transform 0.2s;
}

.npv-game-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.npv-game-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 12px 36px;
	background: linear-gradient(135deg, #2a1f6b, #7a2d95 55%, #c9205a);
	font-size: clamp(18px, 1.8cqi, 28px);
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1.05;
}

.npv-game-caption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 30px 12px 9px;
	/* Dark band that stays solid behind the text, whatever the artwork looks like. */
	background: linear-gradient(180deg, rgba(3, 3, 20, 0) 0%, rgba(3, 3, 20, 0.82) 45%, rgba(3, 3, 20, 0.95) 100%);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 1px rgba(0, 0, 0, 0.9);
}

.npv-game-title {
	font-size: 15px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.01em;
}

.npv-game-dev {
	color: rgba(255, 255, 255, 0.9);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
}

.npv-wrap button.npv-game:not(:disabled):hover,
.npv-wrap button.npv-game:focus-visible {
	border-color: rgba(255, 255, 255, 0.85);
	outline: none;
}

.npv-wrap button.npv-game:not(:disabled):hover .npv-game-img {
	transform: scale(1.04);
}

.npv-wrap button.npv-game.is-pending {
	border-color: var(--npv-accent);
}

.npv-wrap button.npv-game.is-voted {
	border-color: var(--npv-voted);
	opacity: 1;
}

.npv-wrap button.npv-game:disabled {
	cursor: default;
}

.npv-col.has-voted button.npv-game:not(.is-voted),
.npv-wrap.is-closed button.npv-game {
	opacity: 0.55;
	filter: grayscale(0.4);
}

/* "Your vote" badge */
.npv-badge:empty {
	display: none;
}

.npv-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--npv-voted);
	color: #04210f;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Confirmation modal. <dialog> sits in the browser's top layer, so it's centered on screen
   regardless of where the tapped game is on the page. */
html:has(.npv-modal[open]) {
	overflow: hidden; /* no background scrolling while the modal is open */
	scrollbar-gutter: stable;
}

.npv-wrap .npv-modal {
	position: fixed;
	inset: 0;
	width: min(380px, calc(100% - 32px));
	max-width: none;
	height: fit-content;
	max-height: calc(100% - 32px);
	margin: auto;
	padding: 0;
	overflow: auto;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--npv-panel-radius);
	background: var(--npv-panel);
	color: var(--npv-text);
	font-family: inherit;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

.npv-wrap .npv-modal[open] {
	animation: npv-modal-in 0.2s ease-out;
}

.npv-wrap .npv-modal::backdrop {
	background: rgba(3, 3, 20, 0.72);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

@keyframes npv-modal-in {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.97);
	}
}

.npv-modal-media {
	position: relative;
	aspect-ratio: 460 / 215;
	overflow: hidden;
	background: #111130;
}

.npv-modal-media:empty {
	display: none;
}

.npv-modal-media .npv-game-img {
	transition: none;
}

.npv-modal-body {
	padding: 18px 20px 20px;
	text-align: center;
}

.npv-wrap .npv-modal-eyebrow {
	margin: 0 0 6px;
	color: var(--npv-accent);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.npv-wrap .npv-modal-title {
	margin: 0;
	padding: 0;
	color: var(--npv-text);
	font-family: inherit;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.15;
	text-transform: none;
}

.npv-wrap .npv-modal-dev {
	margin: 4px 0 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 14px;
	font-weight: 600;
}

.npv-wrap .npv-modal-note {
	margin: 14px 0 0;
	color: var(--npv-muted);
	font-size: 13px;
	line-height: 1.4;
}

.npv-wrap .npv-modal-msg {
	margin: 12px 0 0;
	font-size: 15px;
	font-weight: 700;
}

.npv-wrap .npv-modal-msg:empty {
	display: none;
}

.npv-modal-msg.is-success {
	color: var(--npv-voted);
}

.npv-modal-msg.is-error {
	color: #ff8a8a;
}

.npv-modal-box.is-done .npv-modal-note {
	display: none;
}

.npv-modal-actions {
	display: flex;
	gap: 10px;
	margin-top: 18px;
}

.npv-modal-actions .npv-btn {
	flex: 1 1 0;
}

.npv-wrap .npv-btn[hidden] {
	display: none;
}

.npv-wrap .npv-btn {
	appearance: none;
	min-height: 46px; /* comfortable tap target on phones */
	margin: 0;
	padding: 12px 16px;
	border: 2px solid var(--npv-accent);
	border-radius: var(--npv-radius);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: none;
	cursor: pointer;
}

.npv-wrap .npv-btn-primary {
	flex: 1 1 auto;
	background: var(--npv-accent);
	color: #0b0b1e;
}

.npv-wrap .npv-btn-ghost {
	background: transparent;
	color: var(--npv-text);
	border-color: rgba(255, 255, 255, 0.4);
}

.npv-wrap .npv-btn:hover {
	filter: brightness(1.08);
}

.npv-wrap .npv-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.npv-wrap .npv-btn:disabled {
	opacity: 0.6;
	cursor: progress;
}

.npv-wrap .npv-msg {
	min-height: 1.3em;
	margin: 12px 0 0;
	color: var(--npv-muted);
	font-size: 14px;
}

.npv-msg.is-success {
	color: var(--npv-voted);
}

.npv-msg.is-error {
	color: #ff8a8a;
}

.npv-msg a {
	color: var(--npv-accent);
	font-weight: 700;
}

.npv-wrap.is-loading .npv-games,
.npv-col.is-busy .npv-games {
	opacity: 0.7;
	pointer-events: none;
}

/* Thank-you page: Steam wishlist call to action */
.npv-thanks-head {
	max-width: 780px;
	margin: 0 auto clamp(28px, 4cqi, 48px);
	text-align: center;
}

.npv-wrap .npv-thanks-title {
	margin: 0;
	padding: 0;
	color: var(--npv-text);
	font-family: inherit;
	font-size: clamp(26px, 4cqi, 44px);
	font-weight: 800;
	line-height: 1.1;
	text-transform: uppercase;
}

.npv-wrap .npv-thanks-text {
	margin: 14px 0 0;
	color: rgba(255, 255, 255, 0.88);
	font-size: clamp(15px, 1.6cqi, 18px);
	line-height: 1.5;
}

.npv-cta-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)); /* three wide cards per row on desktop */
	gap: clamp(16px, 2.2cqi, 32px);
	max-width: 1320px;
	margin: 0 auto;
}

@container npv (max-width: 1000px) {
	.npv-cta-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 760px;
	}
}

@container npv (max-width: 640px) {
	.npv-cta-grid {
		grid-template-columns: minmax(0, 1fr);
		max-width: 420px;
	}
}

.npv-wrap .npv-cta {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--npv-card-radius);
	background: var(--npv-panel);
	color: var(--npv-text);
	text-decoration: none;
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
	transition: transform 0.2s, border-color 0.2s;
}

.npv-wrap a.npv-cta:hover,
.npv-wrap a.npv-cta:focus-visible {
	border-color: var(--npv-accent);
	outline: none;
	transform: translateY(-3px);
}

.npv-cta-media {
	position: relative;
	display: block;
	aspect-ratio: 460 / 215;
	overflow: hidden;
	background: #111130;
}

.npv-cta-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 14px 14px 16px;
	text-align: center;
}

.npv-cta-title {
	font-size: 18px;
	font-weight: 800;
	line-height: 1.2;
}

.npv-cta-dev {
	color: var(--npv-muted);
	font-size: 14px;
	font-weight: 600;
}

/* Steam-style green wishlist button */
.npv-wrap .npv-cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin-top: 16px;
	min-height: 0;
	padding: 12px 22px;
	border: 0;
	border-radius: 3px;
	background: linear-gradient(180deg, #a4d007 0%, #79a70a 50%, #536b22 100%);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
	box-shadow: 0 2px 10px rgba(124, 172, 12, 0.35);
	transition: filter 0.2s, box-shadow 0.2s;
}

.npv-steam-icon {
	flex: 0 0 auto;
	display: block;
}

.npv-wrap a.npv-cta:hover .npv-cta-btn,
.npv-wrap a.npv-cta:focus-visible .npv-cta-btn {
	filter: brightness(1.12);
	box-shadow: 0 4px 16px rgba(124, 172, 12, 0.5);
}

/* Footer logo */
.npv-footer {
	display: flex;
	justify-content: center;
	margin-top: clamp(24px, 4cqi, 56px);
}

.npv-footer img {
	display: block;
	max-width: min(460px, 100%);
	height: auto;
}

/* Tablet / phone: one column */
@container npv (max-width: 860px) {
	.npv-grid {
		grid-template-columns: minmax(0, 1fr);
		max-width: 540px;
		gap: 56px;
	}

	.npv-wrap .npv-title {
		font-size: clamp(24px, 7cqi, 34px);
	}

	.npv-photo {
		width: clamp(96px, 26cqi, 140px);
		margin: -48px -8px 0 0;
	}

	.npv-game-title {
		font-size: 16px;
	}

	.npv-game-dev {
		font-size: 13.5px;
	}

	.npv-footer img {
		width: 70%;
		max-width: 70%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.npv-wrap *,
	.npv-wrap *::before,
	.npv-wrap *::after {
		transition: none !important;
	}
}