@import url("/styles/vars.css");

* {
	box-sizing: border-box;
}

html,
body {
	background-color: var(--color-page-bg);
	background-image: var(--image-page-texture);
	background-position: var(--page-bg-position);
	background-repeat: var(--page-bg-repeat);
	background-size: var(--page-bg-size);
	background-attachment: var(--page-bg-attachment);
}

html {
	min-height: 100%;
	scroll-padding-top: calc(var(--app-store-bar-height) + env(safe-area-inset-top, 0px) + 16px);
}

body {
	min-height: 100vh;
	min-height: 100svh;
	margin: 0;
	padding-top: calc(var(--app-store-bar-height) + env(safe-area-inset-top, 0px));
	color: var(--color-text);
}

main {
	margin: 0 auto;
	min-height: calc(100vh - var(--app-store-bar-height) - env(safe-area-inset-top, 0px));
	min-height: calc(100svh - var(--app-store-bar-height) - env(safe-area-inset-top, 0px));
	width: 100%;
	max-width: 1200px;
	padding: var(--page-gutter);
	padding: var(--page-gutter) calc(var(--page-gutter) + env(safe-area-inset-right, 0px)) calc(var(--page-gutter) + env(safe-area-inset-bottom, 0px)) calc(var(--page-gutter) + env(safe-area-inset-left, 0px));
}

.intro {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--page-gutter);
}

.eyebrow,
a,
a:visited {
	margin: 0 0 var(--space-eyebrow-bottom);
	font-size: var(--font-size-eyebrow);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-eyebrow);
	text-transform: uppercase;
	color: var(--color-accent);
}

.code {
	margin: 0 0 var(--space-code-bottom);
	color: var(--color-danger);
	font-size: var(--font-size-code);
	font-weight: var(--font-weight-heavy);
	line-height: var(--line-height-code);
	letter-spacing: var(--letter-spacing-normal);
}

h1 {
	margin: 0;
	font-size: var(--font-size-title);
	line-height: var(--line-height-title);
	letter-spacing: var(--letter-spacing-normal);
}

p {
	max-width: var(--content-measure);
	margin: var(--space-copy-top) 0 0;
	color: var(--color-copy);
	font-size: var(--font-size-copy);
	line-height: var(--line-height-copy);
}

.game-modes li{
	list-style: none;
	margin: var(--space-copy-top) 0 0;
}

.game-modes li a {
	margin: 0 10px 0 0;
	font-size: var(--font-size-game-modes);
	display: inline-block;
	padding: 0.25em 0.5em;
	border: var(--border-width) solid var(--color-accent);
	border-radius: var(--radius-pill);
	text-decoration: none;
	color: var(--color-accent);
}

.status {
	display: inline-flex;
	align-items: center;
	gap: var(--space-status-gap);
	width: fit-content;
	margin-top: var(--space-status-top);
	border: var(--border-width) solid var(--color-status-border);
	border-radius: var(--radius-pill);
	padding: var(--space-status-padding-block) var(--space-status-padding-inline);
	color: var(--color-status-text);
	background: var(--color-status-bg);
	font-size: var(--font-size-status);
	font-weight: var(--font-weight-status);
}

.status::before {
	content: "";
	width: var(--status-dot-size);
	height: var(--status-dot-size);
	border-radius: var(--radius-round);
	background: var(--color-danger);
	box-shadow: 0 0 0 var(--status-dot-glow) var(--color-status-glow);
}


footer {
	margin-top: var(--space-code-bottom);
}

.game {
	line-height: 0;
	flex-shrink: 0;
	vertical-align: middle;
	margin: var(--space-game-mobile-top) auto;
	max-width: var(--game-width);
	width: var(--game-width-mobile);
	transform: rotate(var(--game-rotation-mobile));
}

.game img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 625px;
	box-shadow: var(--shadow-game);
		border-radius: var(--radius-game);
		overflow: hidden;
		transform: rotate(var(--game-rotation));
		line-height: 0;
		aspect-ratio: var(--game-aspect-ratio);
	margin: 0;
	object-fit: cover;
}

ul.faqShortcuts {
	display: none;
}

@media (min-width: 1025px) {
	.intro {
		flex-direction: row;
	}

	.game {
		margin: 0;
		width: var(--game-width);
		transform: none;
	}
}

@media (max-width: 768px) {
	ul.faqShortcuts {
		display: block;
	}
}

.app-store-bar {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	padding-top: env(safe-area-inset-top, 0px);
	background: rgba(0, 0, 0, 0.4);
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
}

.app-store-bar__download{
	opacity: 0.2;
}

@supports (animation-timeline: scroll()) and (animation-range: 0px 120px) {
	.app-store-bar {
		animation: app-store-bar-darken linear both;
		animation-timeline: scroll(root block);
		animation-range: 0px 120px;
	}

	@keyframes app-store-bar-darken {
		from {
			background-color: rgba(0, 0, 0, 0.2);
		}
		to {
			background-color: rgba(0, 0, 0, 0.8);
		}
	}
}

.app-store-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	max-width: 1200px;
	min-height: var(--app-store-bar-height);
	padding-block: 16px;
	margin: 0 auto;
	padding-inline: calc(var(--page-gutter) + env(safe-area-inset-left, 0px)) calc(var(--page-gutter) + env(safe-area-inset-right, 0px));
}

.app-store-bar a {
	margin: 0;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
}

.app-store-bar__app,
.app-store-bar__app:visited {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	color: #fff;
	font-size: 1rem;
	line-height: 1.3;
}

.app-store-bar__app img {
	flex-shrink: 0;
	border-radius: 11px;
}

.app-store-bar__app small {
	display: block;
	margin-top: 3px;
	color: #ccd4ce;
	font-size: 0.75rem;
	font-weight: 400;
}

.app-store-bar__download {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	border-radius: 6px;
}

.app-store-bar__download img {
	display: block;
	width: 120px;
	height: 40px;
}

.app-store-bar__download:hover {
	opacity: 0.85;
}

.app-store-bar a:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 4px;
}

@media (max-width: 380px) {
	.app-store-bar__inner {
		padding-inline: calc(16px + env(safe-area-inset-left, 0px)) calc(16px + env(safe-area-inset-right, 0px));
	}

	.app-store-bar__app small {
		display: none;
	}

}