* {
	box-sizing: border-box
}

html, body {
	height: 100%;
	margin: 0;
	font-family: Inter,system-ui,Arial
}
:root {
	--mobileOffset: 0;
}

/* Header */
header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 70px;
	background: #141414 !important;
	display: flex;
	align-items: center;
	padding: 0 20px;
	color: #012;
	z-index: 30
}

	header h1 {
		font-size: 18px;
		margin: 0
	}


/* Footer navbar */
.navbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 70px;
	background: #141414 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	z-index: 30
}

.nav-btn, .nav-count {
	appearance: none;
	border: 0;
	padding: 12px 18px;
	color: #fff;
	cursor: pointer;
	font-weight: 600
}


/* Main container (between header and navbar) */
.viewport {
	position: fixed;
	left: 0;
	right: 0;
	top: 70px;
	bottom: 70px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}


/* Wrapper that scrolls horizontally. It will be wider than viewport according to number of cards */
#wrapper {
	display: flex;
	gap: 18px;
	align-items: stretch;
	transform: translateX(0);
	transition: transform 450ms cubic-bezier(.22,.9,.3,1);
	will-change: transform;
	height: 100%;
	padding: 18px; /* space around cards */
}

.lazy-yt {
	width: 100%;
	aspect-ratio: 457 / 274;
	background: #000;
	display: block;
	position: relative;
	overflow: hidden;
}
/* Card style - each card should be 25% of viewport width on desktop */
.preference-card {
	margin-right: 0; /* gap between cards */
	padding: 18px 24px;
	box-shadow: 0 6px 18px rgba(2,20,12,0.08);
	height: calc(100vh - 176px);
	aspect-ratio: 1/1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: #141414;
	align-items: center;
	font-size: 18px;
	border-top: none;
	border-left: 1px solid #9d987f80;
	border-right: 1px solid #9d987f80;
	border-bottom: 2px solid #9d987f40
}
.preference-card-title {
	color: #9d987fcc !important;
	position: absolute;
	left: 0;
	bottom: 0;
	width: auto;
	padding: 12px calc(16px + 5vh) 12px 16px;
	background: linear-gradient(45deg, #141414,#000);
	font-size:larger !important;
	font-weight:600;
	border: 1px solid #ffffff10;
	border-bottom: none;
	border-left: none;
	clip-path: polygon(0 0, calc(100% - 5vh) 0, 100% 100%, 0 100%);
}

	.preference-card:last-child {
		margin-right: 0
	}
	.preference-card .card-top {
		aspect-ratio: 457 / 274;
		background: #141414;
		position:relative;
		box-shadow:inset 0 0 2vh #000
	}
.preference-card img {
	-webkit-user-drag: none;
	user-drag: none;
	user-select: none;
}
.preference-card .card-bottom {
	flex: 1;
	background: radial-gradient(#262626, #141414);
	text-indent: 4vh;
	padding: 2vh 0;
	color: #f3f4f5ab;
	overflow-y: auto;
	border-top: 1px solid #ffffff20
}
	.preference-card .card-top img {
		width: 100%;
		height: 100%;
		object-position: top center;
		object-fit: contain
	}

/* Visual hint for partially-visible 4th card: add a subtle mask on viewport edges (optional) */
.viewport::after {
	content: "";
	position: absolute;
	right: 0;
	top: 70px;
	bottom: 70px;
	width: 40px;
	pointer-events: none; /* gradient fade */
	opacity: .35
}


/* Responsive: on small screens - show one card per view, hide navbar and extend container to bottom */
@media (max-width:720px) {
	:root {
		--mobileOffset: 1;
	}
	body {
		background:#141414 !important
	}
		.viewport::after {
			display: none
		}

	#wrapper {
		padding: 16px;
		gap:unset
	}

	.preference-card {
		border-radius: 8px;
		width:calc(100vw - 32px);
		margin-right:16px;
		aspect-ratio:unset
	}
}


/* Accessibility helpers */
.sr-only {
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
	white-space: nowrap
}