@charset "utf-8";
/* GLOBAL: INSTANTIATE
-------------------------------------------------------------------------------*/
@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/montserrat-regular-variable.ttf') format('truetype');
	font-weight: 400 800;
	font-style: normal;
}
@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/montserrat-italic-variable.ttf') format('truetype');
	font-weight: 400 800;
	font-style: italic;
}
@font-face {
	font-family: 'SN Pro';
	src: url('../fonts/snpro-regular-variable.ttf') format('truetype');
	font-weight: 600 800;
	font-style: normal;
}
:root {
	--color-black: #000000;
	--color-slate: #222121;
	--color-rose: oklch(45% 46% 0deg);
	--color-pop: #F42987;
	--color-pink: rgb(224 26 120);
	--color-blush: #E27CAB;
	--color-fog: #8E8E8E;
	--color-cloud: #DCDDDE;
	--color-silver: #F4F4F4;
	--color-white: #FFFFFF;
	--font-sans: 'Montserrat', Helvetica, Arial, sans-serif;
	--font-accent: 'SN Pro', Helvetica, Arial, sans-serif;
	--font-ty: 12px;
	--font-sm: clamp(0.9167rem, 0.91rem + 0.0296vw, 0.9377rem);
	--font-md: clamp(1.0313rem, 0.9622rem + 0.307vw, 1.25rem);
	--font-lg: clamp(1.1602rem, 1.0003rem + 0.7103vw, 1.6663rem);
	--font-hg: clamp(1.3052rem, 1.0159rem + 1.2855vw, 2.2211rem);
	--font-gt: clamp(1.4683rem, 0.997rem + 2.0946vw, 2.9607rem);
	--weight-base: 450;
	--weight-medium: 500;
	--weight-bold: 750;
	--weight-heavy: 800;
	--width-slim: 800px;
	--width-wide: 1500px;
	--width-edge: clamp(8px, -14.5px + 4.5vw, 50px);
	--radius-sm: 5px;
	--radius-lg: 40px;
	--radius-full: 999px;
	--spacing-sm: 12px;
	--spacing-md: clamp(12px, 2.5vw, 25px);
	--spacing-lg: clamp(12px, 5vw, 50px);
	--spacing-xl: clamp(12px, 7.5vw, 75px);
	--motion: 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.000);
	--sidehead-full: clamp(140px, calc(73.333px + 11.111vw), 240px);
	--sidehead-inset: calc(var(--sidehead-full) + 20px);
	--swiper-theme-color: var(--color-pink);
	--swiper-pagination-bullet-horizontal-gap: 8px;
	--swiper-pagination-bullet-border-radius: 0;
	--swiper-pagination-bullet-height: 12px;
	--swiper-pagination-bullet-width: 64px;
	--swiper-pagination-bottom: 0;
}
@media (prefers-reduced-motion: reduce) {
	* {
		animation: none !important;
		transition: none !important;
	}
}
/* GLOBAL: TYPOGRAPHY
-------------------------------------------------------------------------------*/
html {
	scroll-behavior: smooth;
	color: var(--color-black);
	background-color: var(--color-white);
	line-height: 1.4;
}
body {
	font-family: var(--font-sans);
	font-size: var(--font-md);
	font-weight: var(--weight-base);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body, select, input, textarea {
	font-weight: var(--weight-base);
}
h1, h2, h3, h4, h5, h6 {
	font-weight: var(--weight-bold);
	line-height: 1.2;
	text-wrap: balance;
}
h1, h2, h3, h4, h5, h6 :has(+ p) {
	margin-bottom: unset;
}
div {
	h1, h2, h3, h4, h5, h6 {
		margin-top: unset;
	}
}
h1 {
	font-size: var(--font-gt);
}
h2 {
	font-size: var(--font-hg);
}
p {
	text-wrap: pretty;
	line-height: 1.6;
	orphans: 3;
	widows: 3;
}
/*
p:last-of-type,
:last-child {
	margin-bottom: unset;
} */
strong {
	font-weight: 700;
}
small {
	font-size: var(--font-ty);
}
ul:not([class*="list-"]) {
	padding-inline-start: 4px;
	li {
		padding: 0 0 8px 8px;
	}
	li::marker {
		content: "·";
	}
}
.list-reset {
	margin: unset;
	padding: unset;
	list-style: none;
}
.text-invert {
	color: var(--color-white);
	font-weight: var(--weight-medium);
}
.text-pink {
	color: var(--color-pink);
}
.text-lg {
	font-size: var(--font-lg);
	line-height: 1.5;
	text-wrap: balance;
}
.type-accent,
.property,
.eyebrow,
.btn-accent {
	font-size: var(--font-sm);
	font-family: var(--font-accent);
	font-weight: var(--weight-bold);
	text-transform: uppercase;
	line-height: 1.3;
	letter-spacing: .75px;
}
.prose span {
	color: var(--color-pink);
}
@media (min-width: 1000px) {
	.prose ul {
		columns: 2;
		gap: var(--spacing-lg);
	}
}
.prose ul li {
	margin-block-end: 1em;
	break-inside: avoid-column;
}
.prose ul p {
	margin-block-start: 4px;
}
/* GLOBAL: LINKS
-------------------------------------------------------------------------------*/
::-moz-selection {
	background: #b3d4fc;
	text-shadow: none;
}
::selection {
	background: #b3d4fc;
	text-shadow: none;
}
a {
	text-decoration: underline;
	color: var(--color-black);
	font-weight: var(--weight-medium);
}
a:hover {
	color: var(--color-pink);
}
.text-invert a:not(.btn) {
	color: var(--color-white);
}
.text-invert a:not(.btn):hover {
	color: var(--color-pop);
	fill: currentColor;
}
[class*="btn-"] {
	text-decoration: none;
	display: inline-flex;
	place-items: center;
	line-height: 1.1;
	gap: 8px;
	min-height: 44px;
	padding-inline: 0.5em;
	font-weight: var(--weight-bold);
	padding: 4px;
	padding-inline-end: 1em;
	gap: 8px;
	transition: all var(--motion);
	text-wrap: balance;
}
[class*="btn-"] svg {
	fill: currentColor;
	background-color: var(--color-silver);
	display: flex;
	width: 46px;
	height: 46px;
	padding: 8px;
	margin-inline-end: 4px;
	flex-shrink: 0;
}
.btn-light {
	background: var(--color-white);
	color: var(--color-black);
}
.btn-light svg {
	background: var(--color-silver);
	fill: var(--color-pink);
}
.btn-light:hover {
	background: var(--color-pink);
	color: var(--color-white);
}
.btn-light:hover svg {
	background: var(--color-black);
	fill: var(--color-white);
}
.btn-dark {
	background: var(--color-black);
	color: var(--color-white);
}
.btn-dark svg {
	background: var(--color-slate);
	fill: var(--color-white);
}
.btn-dark:hover {
	background: var(--color-pink);
	color: var(--color-white);
}
.btn-dark:hover svg {
	background: var(--color-black);
	fill: var(--color-white);
}
.btn-caret {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 20"><path d="M3.993 16.008v-4.013h4.014V8.003H3.994V4.011H.001V0h3.992v4.011h4.014v3.992H12v3.992H8.007v4.013zV20H0v-3.992Z" fill="%23E01A78"/></svg>');
	background-size: 6px 10px;
	background-repeat: no-repeat;
	background-position: center right 8px;
	padding-right: 20px;
	padding-left: 0;
}
.btn-caret:hover {
	color: var(--color-pink);
}
.btn-px {
	--pixel-size: 3px;
	text-transform: uppercase;
	font-family: var(--font-accent);
	padding: 4px 12px;
	line-height: 1.3;
	letter-spacing: 1px;
	cursor: pointer;
	transition: all var(--motion);
	color: var(--color-white);
	border-style: solid;
	border-width: var(--pixel-size);
	border-image-slice: 3;
	border-image-width: 3;
	border-image-repeat: stretch;
	border-image-outset: var(--pixel-size);
	border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='%238E194E' %3E%3Cpath d='M2 0 h4 v1 h-4 z M1 1 h1 v1 h-1 z M6 1 h1 v1 h-1 z M0 2 h1 v4 h-1 z M7 2 h1 v4 h-1 z M1 6 h1 v1 h-1 z M6 6 h1 v1 h-1 z M2 7 h4 v1 h-4 z'/%3E%3C/svg%3E");
}
.btn-px svg {
	padding: unset;
	background: unset;
	width: 14px;
	height: 14px;
}
.btn-ext {
	border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='%23E01A78' %3E%3Cpath d='M2 0 h4 v1 h-4 z M1 1 h1 v1 h-1 z M6 1 h1 v1 h-1 z M0 2 h1 v4 h-1 z M7 2 h1 v4 h-1 z M1 6 h1 v1 h-1 z M6 6 h1 v1 h-1 z M2 7 h4 v1 h-4 z'/%3E%3C/svg%3E");
}
/*
.mm-ocd-opened .btn-ext {
	border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='%23430B24' %3E%3Cpath d='M2 0 h4 v1 h-4 z M1 1 h1 v1 h-1 z M6 1 h1 v1 h-1 z M0 2 h1 v4 h-1 z M7 2 h1 v4 h-1 z M1 6 h1 v1 h-1 z M6 6 h1 v1 h-1 z M2 7 h4 v1 h-4 z'/%3E%3C/svg%3E");
}
.mm-ocd--open {
	z-index: 1000;
} */
.btn-ext svg {
	fill: var(--color-rose);
}
.btn-ext:hover {
	background: var(--color-white);
	color: var(--color-black);
	border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='%239D0051' %3E%3Cpath d='M2 0 h4 v1 h-4 z M1 1 h1 v1 h-1 z M6 1 h1 v1 h-1 z M0 2 h1 v4 h-1 z M7 2 h1 v4 h-1 z M1 6 h1 v1 h-1 z M6 6 h1 v1 h-1 z M2 7 h4 v1 h-4 z'/%3E%3C/svg%3E");
	svg {
		fill: var(--color-pink);
	}
}
/* GLOBAL: ACCENTS 
-------------------------------------------------------------------------------*/
.logo,
.footer-logo {
	display: flex;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="150" viewBox="0 0 300 150"><path d="M0 0h300v98.773L256 150H0Z" fill="%23FFF"/></svg>');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	max-width: 270px;
	aspect-ratio: 2 / 1;
	margin-left: -1px;
}
.logo img {
	padding: 20px 50px 25px 40px;
}
hr {
	border: transparent;
	border-top: 1px solid var(--color-cloud);
}
.eyebrow {
	color: var(--color-fog);
	position: relative;
	padding-bottom: 10px;
	text-wrap: balance;
	height: min-content;
	margin-block-end: revert;
}
.eyebrow::after {
	content: '';
	display: block;
	position: absolute;
	border-bottom: 3px solid currentColor;
	width: 70px;
	height: 0;
	bottom: 0;
	left: 0;
	z-index: 1000;
}
.btn-accent {
	font-size: var(--font-md);
	font-weight: var(--weight-bold) !important;
	padding-inline: 1em 4px;
}
.btn-accent svg {
	background: var(--color-pink);
	margin-inline: 4px 0;
}
.btn-accent:hover {
	background: var(--color-white);
	color: var(--color-black);
}
.chevron {
	display: flex;
	gap: 0.5em;
	align-items: flex-start;
	margin-block-end: var(--spacing-md);
}
.chevron svg {
	background-color: var(--color-pink);
	fill: var(--color-white);
	padding: 8px;
	width: 36px;
	height: 36px;
	top: -4px;
}
.header,
.footer {
	position: relative;
}
.header a,
.footer a {
	text-decoration: none;
}
.header::before,
.header::after,
.footer::before,
.footer::after {
	content: '';
	display: block;
	pointer-events: none;
	position: absolute;
	z-index: 100;
}
@media (min-width: 700px) {
	.header::before,
	.footer::before {
		width: 180px;
		height: 20px;
		transform: translate(-50%);
		left: 50%;
	}
	.header::before {
		background-color: var(--color-blush);
		top: 0;
	}
	.footer::before {
		background-color: #2E2D2D;
		bottom: 0;
	}
}
.header::after,
.footer::after {
	--_stroke: 3px;
	--_offset: min(var(--width-edge), 32px);
	width: 24px;
	height: 24px;
	border-style: solid;
	border-color: var(--color-white);
}
.header::after {
	top: var(--_offset);
	left: var(--_offset);
	border-width: var(--_stroke) 0 0 var(--_stroke);
	z-index: 10000;
}
.footer::after {
	bottom: var(--_offset);
	right: var(--_offset);
	border-width: 0 var(--_stroke) var(--_stroke) 0;
}
.section-silver {
	background-color: var(--color-silver);
}
.section-silver-top {
	background-image: linear-gradient(180deg, var(--color-silver) 50%, var(--color-white) 50%);
}
/* GLOBAL: CONTAINERS
-------------------------------------------------------------------------------*/
body {
	background-color: var(--color-white);
	overflow-x: hidden;
}
.container {
	display: flex;
	flex-flow: column;
	margin-inline: auto;
	width: 100%;
	max-width: var(--width-wide);
	padding: 3em var(--width-edge);
	position: relative;
	overflow: visible;
}
[class*="container-"] {
	display: grid;
	gap: var(--spacing-xl);
}
@media (min-width: 600px) {
	.container-half {
		grid-template-columns: repeat(2, 1fr);
	}
	.container-third {
		grid-template-columns: repeat(3, 2fr);
	}
	.container-sidehead {
		grid-template-columns: var(--sidehead-full) 1fr;
	}
}
/* LANDMARK: HEADER
-------------------------------------------------------------------------------*/
.utility {
	width: 100%;
	height: 100px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
	align-items: center;
	position: absolute;
	>div {
		display: flex;
		padding: var(--spacing-sm);
		gap: var(--spacing-sm);
	}
}
.utility>div>a {
	position: relative;
	z-index: 100;
}
.header {
	position: relative;
	height: 100px;
	background-color: var(--color-pink);
}
.header .logo {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="150" viewBox="0 0 300 150"><path d="M0 0h300v98.773L256 150H0Z" fill="%23E01A78"/></svg>');
	position: relative;
	z-index: 10;
	top: 50px;
	left: var(--width-edge);
}
@media (max-width: 600px) {
	.header .logo {
		left: unset;
		margin-left: unset;
		max-width: 40vw;
		top: 60px;
	}
	.header .logo img {
		padding: 5px 10px 15px 20px;
	}
}
/* SECTION: HERO
-------------------------------------------------------------------------------*/
.hero {
	--_offset: 80%;
	padding-inline: var(--width-edge);
	background-color: var(--color-pink);
	background-image: linear-gradient(180deg, var(--color-pink) var(--_offset), var(--color-white) var(--_offset));
}
.hero-wrapper {
	background-image: linear-gradient(180deg, var(--color-rose) 0%, #C5005C var(--_offset), var(--color-white) var(--_offset));
}
.hero-wrapper .container-half {
	display: grid;
	grid-template-rows: var(--spacing-xl) auto var(--spacing-xl);
	gap: 0 var(--spacing-lg);
}
.hero-content {
	align-content: center;
	grid-area: 2 / 1 / 2 / 2;
	text-wrap: balance;
}
.hero-asset {
	grid-area: 1 / 2 / -1 / -1;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hero-asset video {
	object-position: center;
	aspect-ratio: 16 / 9;
	width: 100%;
	object-fit: contain;
}
@media (max-width: 699px) {
	.hero-wrapper .container-half {
		grid-template-rows: var(--spacing-xl) auto auto;
		grid-template-columns: unset;
		gap: var(--spacing-sm);
		background-image: linear-gradient(180deg, var(--color-rose) 0%, #C5005C var(--_offset));
		padding-block-end: var(--spacing-md);
	}
	.hero-content {
		grid-area: 3 / 1;
		padding: var(--spacing-sm);
	}
	.hero-asset {
		grid-area: 2 / 1;
	}
}
.page-about .hero-content p {
	margin-block-start: var(--spacing-sm);
}
.game-hero h1 {
	font-size: calc(var(--font-gt) * 1.1);
}
.game-hero .container {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-template-rows: 1fr;
	background-color: var(--color-black);
	padding: 0;
	max-width: unset;
	overflow: hidden;
}
.game-hero .container,
.game-hero .game-mast {
	max-height: min(65vh, 650px);
}
.game-logo {
	grid-area: 1 / 2 / -1 / -1;
	z-index: 2;
	align-self: center;
	max-height: 450px;
}
.game-hero .game-mast {
	grid-area: 1 / 1 / -1 / -1;
	z-index: 1;
	object-fit: cover;
	width: 100%;
	height: 100%;
}
@media (max-width: 700px) {
	.game-hero .container {
		aspect-ratio: 1;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 2fr 1fr;
	}
	.game-logo {
		grid-area: 2 / 2 / -1 / 1;
	}
	.game-mast {
		object-position: 20%
	}
}
.page-games-ori .game-logo {
	transform: scale(120%) !important;
	overflow: visible;
}
.page-games-simpler-times .game-mast {
	object-position: center 90%;
}
/* FEATURE: CAROUSEL
-------------------------------------------------------------------------------*/
.swiper-carousel {
	height: 500px;
}
.swiper-carousel .swiper-slide {
	max-width: var(--width-wide);
	display: grid;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 500px;
	overflow: hidden;
	flex-shrink: 0;
}
.swiper-carousel .swiper-slide img {
	max-width: 100%;
	max-height: 100%;
	object-fit: cover;
}
/* FEATURE: GALLERY
-------------------------------------------------------------------------------*/
.gallery {
	--_depth: 100px;
	background-image:
		linear-gradient(180deg, var(--color-silver) var(--_depth), var(--color-black) var(--_depth), var(--color-slate) 100%);
	padding-block-end: calc(var(--spacing-xl) * 2);
}
.gallery-wrapper {
	max-width: 1000px;
	width: 100%;
	margin-inline: auto;
}
.swiper-gallery {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--color-black);
}
.swiper-gallery .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.swiper-gallery-thumbs {
	overflow: visible;
}
.swiper-gallery-thumbs .swiper-wrapper {
	flex-wrap: wrap;
	height: auto !important;
	gap: 8px;
	padding-block-start: var(--spacing-md);
}
.swiper-gallery-thumbs .swiper-slide {
	width: calc(20% - 6.4px) !important;
	aspect-ratio: 16 / 9;
	height: auto !important;
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 0.2s ease;
	user-select: none;
	outline: 2px solid #2D2D2D;
	outline-offset: -2px;
}
@media (max-width: 1024px) {
	.swiper-gallery-thumbs .swiper-slide {
		width: calc(25% - 6px) !important;
	}
}
@media (max-width: 600px) {
	.swiper-gallery-thumbs .swiper-slide {
		width: calc(33.333% - 5.333px) !important;
	}
}
.swiper-gallery-thumbs .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}
.swiper-gallery-thumbs .swiper-slide-thumb-active {
	opacity: 1;
	outline: 2px solid var(--color-white);
	outline-offset: -2px;
}
.swiper-gallery-thumbs .swiper-slide:hover:not(.swiper-slide-thumb-active) {
	opacity: 1
}
/* SECTION: CALLOUT
-------------------------------------------------------------------------------*/
.callouts .container {
	display: flex;
	gap: var(--spacing-md);
}
.callout {
	padding: var(--spacing-lg);
	background-size: cover, cover;
	background-repeat: no-repeat, repeat-x;
}
.callout-pink {
	background-color: var(--color-pink);
	background-image:
		linear-gradient(135deg, var(--color-pink) 30%, color-mix(in oklab, var(--color-pink) 10%, transparent 90%) 100%),
		url('../images/texture-pixels-pink.webp');
}
.callout-slate {
	background-color: var(--color-slate);
	background-image:
		linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 50%, rgba(34, 33, 33, 0.5) 100%),
		url('../images/texture-pixels-slate.webp');
}
.callout .eyebrow {
	color: inherit;
}
.callout-content h2 {
	font-size: var(--font-lg);
	margin-block-end: 0.1em;
	line-height: 1.35;
}
.callout-content h2+p {
	margin-block-start: unset;
}
.callout-content .btn-dark:hover {
	background-color: var(--color-white);
}
.callout-slate .btn-dark {
	background-color: var(--color-pink);
}
@media (min-width: 700px) {
	.callout-content h2 {
		margin-block-start: unset;
	}
	.callout-content {
		max-width: 900px;
		text-wrap: balance;
	}
	.page-home callout {
		display: grid;
		grid-template-columns: var(--sidehead-inset) 1fr;
		align-items: start;
	}
}
@media (min-width: 800px) {
	.page-home .callout {
		display: grid;
		grid-template-columns: var(--sidehead-inset) 1fr;
	}
}
.values {
	display: grid;
	gap: var(--spacing-sm);
	margin-block-start: var(--spacing-lg);
	.callout {
		padding: var(--spacing-md);
	}
	h3 {
		font-size: 1.2em;
	}
}
@media (min-width: 1000px) {
	.values {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--spacing-md);
	}
}
/* SECTION: SIGNPOST
-------------------------------------------------------------------------------*/
.signposts {
	background-color: var(--color-pink);
	background-image: url(../images/texture-pixels-pink.webp);
	background-size: 50%;
}
.signposts .container {
	gap: var(--spacing-lg);
}
.signpost {
	display: flex;
	flex-flow: column;
	background-color: var(--color-black);
	padding: var(--spacing-lg);
}
.signpost .eyebrow {
	color: var(--color-white);
}
.signpost-content {
	display: flex;
	flex-flow: column;
	height: 100%;
}
.signpost-links {
	margin-top: auto;
}
.signpost .btn-dark {
	background-color: var(--color-slate);
	font-weight: var(--weight-bold);
	width: 100%;
	&:hover {
		background-color: var(--color-white);
	}
	svg {
		background-color: var(--color-black);
	}
}
@media (max-width: 899px) {
	.signposts .container-half {
		grid-template-columns: unset;
	}
}
@media (max-width: 1000px) {
	.signposts .container {
		gap: var(--spacing-md);
	}
}
/* FEATURE: LOGOS
-------------------------------------------------------------------------------*/
.logos {
	--_w: 140px;
	--_h: 90px;
	--_r: 1.5 / 1;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--spacing-lg);
}
.logos > * {
	flex: 0 1 var(--_w);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--_h);
}
.logos > * img {
	display: block;
	width: 100%;
	max-width: var(--_w);
	max-height: var(--_h);
	aspect-ratio: var(--_r);
	object-fit: contain;
	object-position: center;
	filter: grayscale(100%) contrast(.9);
	transition: transform var(--motion);
}
.logos a:hover img {
	transform: scale(1.03);
}
/* FEATURE: TRACK
-------------------------------------------------------------------------------*/
.track {
	position: relative;
	overflow-x: auto;
	overflow-y: visible;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}
.track::-webkit-scrollbar {
	display: none;
}
@media (max-width: 599px) {
	.track {
		width: 100dvw;
		margin-left: calc(var(--width-edge) * -1);
		scroll-padding-left: var(--width-edge);
		padding-left: var(--width-edge);
	}
}
@media (min-width: 600px) {
	.track {
		width: calc(100dvw - (max((100dvw - 1500px) / 2, 0px) + var(--sidehead-full) + (var(--width-edge)) + var(--spacing-xl)));
	}
}
.track-wrapper {
	display: flex;
	gap: var(--spacing-sm);
}
.track-wrapper::after {
	content: "";
	flex: 0 0 1px;
}
.card {
	scroll-snap-align: start;
}
/* SECTION: CARDS
-------------------------------------------------------------------------------*/
.card {
	flex: 0 0 360px;
	padding: var(--spacing-sm);
	background-color: var(--color-white);
}
.card-callout {
	font-size: var(--font-sm);
	color: var(--color-pink);
	font-weight: var(--weight-bold);
	font-family: var(--font-accent);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.card-title {
	font-size: var(--font-md);
	font-weight: var(--weight-bold);
	text-wrap: balance;
}
.card p {
	font-size: var(--font-sm);
}
.card img {
	background-color: var(--color-cloud);
	width: 100%;
	aspect-ratio: 1;
}
.card {
	display: flex;
	flex-flow: column;
	align-items: flex-start;
}
.card:not(:has(.card-callout)) .card-title {
	margin-block-start: var(--spacing-lg);
}
.card-credit {
	font-weight: 600;
	margin-block-start: auto;
}
.card .btn-caret {
	margin-block-start: auto;
}
.testimonials .card p:not(.card-credit) {
	flex-grow: 1;
}
/* SECTION: CATALOG
-------------------------------------------------------------------------------*/
.catalog {
	background-image: linear-gradient(180deg, #FFFF 0%, #F4F4F4 40%, #EFEFEF 100%);
	padding-block-end: var(--spacing-lg);
}
.catalog>.container {
	display: flex;
}
.catalog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: var(--spacing-md);
}
@media (max-width: 580px) {
	.catalog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
.box {
	position: relative;
	z-index: 1;
	max-width: 400px;
	background-color: var(--color-black);
	color: var(--color-white);
	display: grid;
	grid-template-rows: auto 1fr;
	transition: background-color var(--motion);
}
.box a {
	text-decoration: none;
}
.box-title {
	display: block;
	font-size: var(--font-lg);
	font-weight: var(--weight-bold);
	color: var(--color-white);
	line-height: 1.3;
	text-wrap: balance;
	padding-block-end: var(--spacing-md);
	&::after {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 2;
		cursor: pointer;
	}
}
.box-art {
	position: relative;
	overflow: hidden;
}
.box img {
	transition: scale var(--motion);
}
.box:hover {
	background-color: var(--color-slate);
	img {
		scale: 1.03;
	}
	a {
		color: currentColor;
	}
}
.box-callout {
	width: 100%;
	font-size: var(--font-sm);
	color: var(--color-white);
	font-weight: var(--weight-bold);
	font-family: var(--font-accent);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	background-color: var(--color-pink);
	padding: 4px var(--spacing-sm);
	position: absolute;
	bottom: 0;
	z-index: 2;
	pointer-events: 0;
	clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 100%, 0 100%);
}
.box:has(.box-callout) .box-art {
	position: relative;
	&::after {
		background-image: linear-gradient(0deg, #000F 0%, #0000 100%);
		content: '';
		display: block;
		position: absolute;
		width: 100%;
		height: 50px;
		bottom: 0;
		left: 0;
		z-index: 1;
	}
}
.box-content {
	padding: var(--spacing-sm);
	display: flex;
	flex-flow: column;
	justify-content: space-between;
}
.box-platforms {
	display: flex;
	margin-left: -6px;
	width: unset;
}
.box-platforms a {
	padding: 6px;
	position: relative;
	z-index: 10;
	&:hover svg {
		fill: var(--color-pop);
	}
}
.box-platforms svg {
	fill: var(--color-white);
	transition: fill var(--motion);
	width: 26px;
	height: 26px;
}
.box-filler {
	background-image: linear-gradient(to bottom, transparent 20%, var(--color-cloud) 100%);
}
/* SECTION: GAME
-------------------------------------------------------------------------------*/
.game-details {
	background-color: var(--color-silver);
}
.game-platforms {
	display: flex;
	flex-flow: column;
	gap: 4px;
}
.game-platforms h3 {
	margin-block-end: 8px;
}
.game-dev {
	display: block;
	margin-block: 1em 1.5em;
}
.game-dev img {
	max-width: 220px;
	max-height: 120px;
	object-fit: contain;
}
.game-info p,
.game-info ul {
	font-size: var(--font-sm);
}
.game-info h3+p {
	margin-block-start: 4px;
}
.game-info h3+ul {
	margin-block-start: 8px;
}
/* SECTION: EMBED
-------------------------------------------------------------------------------*/
.embed-buttons {
	display: flex;
	flex-flow: column;
	gap: 0.25em;
	margin-block-end: var(--spacing-xl);
}
/* LANDMARK: FOOTER
-------------------------------------------------------------------------------*/
.footer {
	background-color: var(--color-black);
}
.footer a:hover {
	color: var(--color-pop);
}
.footer-logo {
	margin-top: calc(3em * -1);
	filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.23));
}
@media (max-width: 600px) {
	.footer-logo {
		margin-left: calc(var(--width-edge) * -1) !important;
		;
	}
}
.footer-logo a {
	display: block;
	padding: 8px 0 12px 18px;
	&:hover img {
		transform: scale(1.03);
	}
}
.footer-logo img {
	height: 100%;
	transition: transform var(--motion);
}
.footer-content {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-md);
	&>div {
		flex: 1 1 250px;
		margin-block-end: var(--spacing-sm);
	}
}
@media (min-width: 1000px) {
	.footer-content {
		max-width: 85%;
	}
}
.footer h3 {
	color: var(--color-pop);
	font-family: var(--font-accent);
	font-size: var(--font-sm);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-block-start: var(--spacing-lg);
	margin-block-end: var(--spacing-sm);
	&:first-child {
		margin-block-start: unset;
	}
}
.footer nav ul {
	display: flex;
	flex-flow: column;
	gap: .5em;
}
.channels {
	fill: var(--color-white);
	display: inline-flex;
	flex-flow: row;
	gap: 18px;
	svg {
		width: 24px;
		height: 24px;
	}
}
.footer .btn-px {
	border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='%239D0051' %3E%3Cpath d='M2 0 h4 v1 h-4 z M1 1 h1 v1 h-1 z M6 1 h1 v1 h-1 z M0 2 h1 v4 h-1 z M7 2 h1 v4 h-1 z M1 6 h1 v1 h-1 z M6 6 h1 v1 h-1 z M2 7 h4 v1 h-4 z'/%3E%3C/svg%3E");
	&:hover {
		color: var(--color-black);
	}
	svg {
		fill: var(--color-pop);
	}
	&:hover svg {
		fill: var(--color-pop);
	}
}
.legal {
	padding-block: var(--spacing-sm) var(--spacing-lg);
}
.legal p {
	max-width: var(--sidehead-full);
	text-wrap: balance;
	font-size: 12px;
	color: #FFF5;
	font-weight: 500;
}
@media (max-width: 800px) {
	.legal p {
		max-width: unset;
	}
}
.text-invert .legal a {
	color: currentColor;
	text-decoration: underline;
}
/* FEATURE: MMENU
-------------------------------------------------------------------------------*/
/* body:has(.mm-ocd--open) .utility>div {
	position: absolute;
	z-index: 10000 !important;
} */
.mm-ocd--open {
	background: rgba(0, 0, 0, .7);
}
.mm-spn--navbar::after {
	display: none !important;
}
.mm-spn.mm-spn--navbar ul {
	top: 140px;
}
.mm-spn.mm-spn--light {
	background: var(--color-pink);
	color: var(--color-white);
	font-weight: var(--weight-bold)
}
.mm-spn.mm-spn--light ul,
.mm-spn.mm-spn--light li {
	padding: unset;
}
.mm-spn svg {
	width: 10px;
}
.mm-spn a {
	font-size: 1.3em;
	font-weight: var(--weight-bold);
	text-transform: uppercase;
	line-height: 1.3;
	letter-spacing: .75px;
}
.mm-spn a:hover {
	color: var(--color-white);
	background-color: var(--color-pop);
	outline: 1px solid var(--color-pink);
}
.mm-spn li.menu-ext a {
	display: flex;
	gap: 10px;
	font-size: 14px;
	font-family: var(--font-accent);
	svg {
		fill: #86003D;
		top: 2px;
	}
}
.mm-spn li.menu-ext~li.menu-ext {
	border: none;
}
.menu-social span {
	display: flex;
	padding-block: unset;
	&>svg {
		top: 12px;
	}
	a:first-of-type {
		margin-inline-start: 8px;
	}
	a {
		display: flex;
		place-items: center;
		padding-block: 8px 12px;
		padding-inline: 12px;
		svg {
			min-width: 18px;
			fill: var(--color-white);
		}
	}
}
.mm-spn .menu-social a:not(:last-child) {
	width: unset;
	&:after {
		display: none;
	}
}
.menu-toggle:hover {
	background: var(--color-white);
	color: var(--color-black);
	.menu-toggle__lines span {
		background: var(--color-pink);
	}
}
.menu-toggle {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	background: none;
}
.menu-toggle__lines {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 26px;
	height: 12px;
}
.menu-toggle__lines span {
	display: block;
	width: 100%;
	height: 3px;
	background: var(--color-white);
	transform-origin: center;
	transition: all var(--motion);
}
.menu-toggle.is-active .menu-toggle__lines span:first-child {
	transform: translateY(4.25px) rotate(45deg);
}
.menu-toggle.is-active .menu-toggle__lines span:last-child {
	transform: translateY(-4.25px) rotate(-45deg);
}
/* FEATURE: SWIPER
-------------------------------------------------------------------------------*/
.swiper-pagination {
	background-color: var(--color-white);
}