:root {
	--night: #0b0d1a;
	--void: #05060d;
	--panel: #141830;
	--edge: #262c52;
	--ink: #eef0ff;
	--dim: #a3a9d1;
	--mint: #37f0c6;
	--orange: #ff8a3d;
	--ceiling: #12292e;
	--floor: #2c1e20;
}

/* The game's own typeface, for the name, the headings and the buttons */
@font-face {
	font-family: "Liberation Sans";
	src: url("fonts/LiberationSans-Bold.woff2") format("woff2");
	font-weight: 700 800;
	font-display: swap;
}

* {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--ink);
	background: var(--night);
}

a {
	color: var(--mint);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

.wrap {
	max-width: 60rem;
	margin: 0 auto;
	padding: 0 1rem;
}

h1,
h2,
h3,
.name,
.button {
	font-family: "Liberation Sans", system-ui, sans-serif;
	font-weight: 700;
	line-height: 1.2;
}

.duo {
	color: var(--mint);
}

.swap {
	color: var(--orange);
}

/* The top of every page: the ceiling lane, with its lit edge, and the name */
.top {
	background: var(--ceiling);
	border-bottom: 0.3rem solid var(--mint);
}

.top .wrap {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 4rem;
}

.top img {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.6rem;
}

.top .name {
	font-size: 1.6rem;
	letter-spacing: 0.02em;
	text-decoration: none;
}

.top nav,
.top .language {
	margin-left: auto;
}

.top nav a {
	color: var(--ink);
	font-weight: 600;
}

.language select {
	font: inherit;
	font-size: 0.95rem;
	color: var(--ink);
	background: var(--void);
	border: 0.12rem solid var(--edge);
	border-radius: 0.6rem;
	padding: 0.35rem 0.6rem;
	max-width: 11rem;
}

/* The first screen: the feature graphic, what it is and the store button */
.hero {
	padding: 2rem 0 2.5rem;
	text-align: center;
	background: linear-gradient(var(--night), var(--void));
}

.hero img {
	margin: 0 auto 1.5rem;
	border-radius: 1rem;
	box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.5);
}

.hero h1 {
	margin: 0 0 0.5rem;
	font-size: clamp(1.9rem, 6vw, 3rem);
}

.hero p {
	max-width: 36rem;
	margin: 0 auto 1.25rem;
	color: var(--dim);
	font-size: 1.15rem;
}

.store {
	display: inline-block;
}

.store img {
	width: 13rem;
	margin: 0 auto;
	box-shadow: none;
	border-radius: 0;
}

section {
	padding: 2.5rem 0;
	border-top: 1px solid var(--edge);
}

h2 {
	margin: 0 0 1rem;
	font-size: 1.8rem;
	color: var(--mint);
}

.text p {
	max-width: 42rem;
}

/* The screenshots: a strip that scrolls sideways, with arrows where there is no finger */
.gallery {
	position: relative;
	max-width: 60rem;
	margin: 1.25rem auto 0;
	--fade-before: 0rem;
	--fade-after: 0rem;
}

.gallery.more-before {
	--fade-before: 3rem;
}

.gallery.more-after {
	--fade-after: 3rem;
}

.shots {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	padding: 0.75rem 1rem 1.25rem;
	scroll-snap-type: x mandatory;
	scroll-padding: 0 1rem;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--edge) transparent;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-before), #000 calc(100% - var(--fade-after)), transparent);
	mask-image: linear-gradient(to right, transparent, #000 var(--fade-before), #000 calc(100% - var(--fade-after)), transparent);
}

.shots a {
	flex: 0 0 auto;
	width: min(62vw, 15rem);
	border-radius: 1.1rem;
	scroll-snap-align: start;
	cursor: zoom-in;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.shots a:hover,
.shots a:focus-visible {
	transform: translateY(-0.3rem);
	box-shadow: 0 0.8rem 1.6rem rgba(55, 240, 198, 0.18);
}

.shots a:focus-visible {
	outline: 0.2rem solid var(--mint);
	outline-offset: 0.2rem;
}

.shots img {
	width: 100%;
	border-radius: 1.1rem;
	border: 0.15rem solid var(--edge);
}

.gallery .scroll {
	position: absolute;
	top: 50%;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	margin-top: -1.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ink);
	color: var(--night);
	box-shadow: 0 0.25rem 0 var(--dim), 0 0.4rem 1rem rgba(0, 0, 0, 0.4);
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.1s ease;
}

.gallery .scroll:active {
	transform: translateY(0.15rem);
	box-shadow: 0 0.1rem 0 var(--dim);
}

.gallery .scroll[disabled] {
	opacity: 0;
	pointer-events: none;
}

.gallery .previous {
	left: 0.25rem;
}

.gallery .next {
	right: 0.25rem;
}

@media (hover: none) and (pointer: coarse) {
	.gallery .scroll {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.shots a,
	.gallery .scroll {
		transition: none;
	}
}

/* What's inside: cards like the game's panels */
.cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cards li {
	padding: 1.1rem 1.2rem;
	background: var(--panel);
	border: 1px solid var(--edge);
	border-radius: 1rem;
}

.cards .icon {
	font-size: 1.8rem;
}

.cards h3 {
	margin: 0.4rem 0 0.3rem;
	font-size: 1.15rem;
}

.cards p {
	margin: 0;
	color: var(--dim);
}

.note {
	color: var(--dim);
	font-size: 0.95rem;
}

/* The last call: the icon, the name and the button again, on the floor lane */
.get {
	background: var(--floor);
	border-top: 0.3rem solid var(--orange);
}

.get-card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem 1.5rem;
	text-align: center;
}

.get-card > img {
	width: 5rem;
	border-radius: 1.1rem;
}

.get-text .name {
	font-size: 2rem;
}

.get-text p {
	margin: 0;
	color: var(--dim);
}

/* The other pages: plain text */
main .text h1 {
	font-size: 2.2rem;
	margin: 0 0 0.25rem;
}

main .text h2 {
	font-size: 1.3rem;
	margin-top: 2rem;
}

pre {
	white-space: pre-wrap;
	font-size: 0.85rem;
	color: var(--dim);
	background: var(--panel);
	border: 1px solid var(--edge);
	border-radius: 0.6rem;
	padding: 0.8rem 1rem;
}

footer {
	padding: 2rem 0 2.5rem;
	background: var(--void);
	color: var(--dim);
	font-size: 0.9rem;
}

footer .wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	align-items: center;
}

footer a {
	color: var(--dim);
}

footer .languages {
	flex-basis: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.9rem;
	margin-bottom: 0.75rem;
}

footer .languages a[aria-current] {
	color: var(--mint);
	text-decoration: none;
}