/* SA Classic landing. The look borrows from the game itself: the map loading screens,
   the steel plate of the loading frame, the amber labels of the login and the red of the
   mode tags. Fonts are self-hosted (OFL, see fonts/). */

@font-face {
	font-family: 'Big Shoulders Stencil';
	src: url(fonts/big-shoulders-stencil.woff2) format('woff2');
	font-weight: 700 900;
	font-display: swap;
}
@font-face {
	font-family: 'Big Shoulders';
	src: url(fonts/big-shoulders.woff2) format('woff2');
	font-weight: 600 800;
	font-display: swap;
}
@font-face {
	font-family: 'Archivo';
	src: url(fonts/archivo.woff2) format('woff2');
	font-weight: 400 700;
	font-display: swap;
}

:root {
	--base: #1a1e22;
	--base-deep: #14171a;
	--plate: #232527;
	--field: #121314;
	--line: #3a4046;
	--text: #e8e0c9;
	--muted: #a8a390;
	--amber: #f5a623;
	--signal: #d9261c;
	--signal-hi: #ef3a2e;
	--ok: #8fd16a;
	--bad: #ff7a6e;

	--stencil: 'Big Shoulders Stencil', 'Impact', 'Arial Narrow', sans-serif;
	--display: 'Big Shoulders', 'Arial Narrow', sans-serif;
	--body: 'Archivo', 'Segoe UI', system-ui, sans-serif;

	--wrap: 1200px;
	--chamfer: 14px;
	--header-h: 64px;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-h);
}

body {
	margin: 0;
	background: var(--base);
	color: var(--text);
	font-family: var(--body);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: inherit;
	text-decoration: none;
}

h1,
h2,
h3 {
	margin: 0;
	font-weight: 900;
}

:focus-visible {
	outline: 2px solid var(--amber);
	outline-offset: 3px;
}

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 24px;
}

.skip {
	position: absolute;
	left: 12px;
	top: -60px;
	z-index: 50;
	padding: 10px 16px;
	background: var(--amber);
	color: var(--base-deep);
	font-weight: 700;
}
.skip:focus {
	top: 12px;
}

.muted {
	color: var(--muted);
}

/* Brand: the logo itself, the stencil wordmark is baked into the art. */
.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--stencil);
	font-weight: 900;
	font-size: 28px;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.brand img {
	width: auto;
	height: 44px;
}
/* No cabecalho o logo vem sozinho, sem o wordmark ao lado, e por isso maior. */
.site-header .brand img {
	height: 52px;
}
.brand-sm {
	font-size: 22px;
}
.brand-sm img {
	height: 34px;
}

/* Discord */
.discord-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--display);
	font-weight: 700;
	font-size: 19px;
	letter-spacing: 0.02em;
	color: var(--muted);
}
.discord-link:hover {
	color: var(--text);
}
.icon-discord {
	width: 22px;
	height: auto;
}
.footer-discord {
	color: var(--amber);
	font-weight: 600;
}
.footer-discord:hover {
	text-decoration: underline;
}

/* Header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: rgba(20, 23, 26, 0.82);
	border-bottom: 1px solid rgba(58, 64, 70, 0.7);
	backdrop-filter: blur(10px);
}
.site-header .wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--header-h);
}
.site-header nav {
	display: flex;
	align-items: center;
	gap: 28px;
}
.site-header nav a:not(.btn) {
	font-family: var(--display);
	font-weight: 700;
	font-size: 19px;
	letter-spacing: 0.02em;
	color: var(--muted);
}
.site-header nav a:not(.btn):hover {
	color: var(--text);
}

/* Buttons: the chamfered corner is the cut of the game's loading frame. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 26px;
	border: 0;
	font-family: var(--display);
	font-weight: 800;
	font-size: 20px;
	line-height: 1.1;
	letter-spacing: 0.03em;
	cursor: pointer;
	clip-path: polygon(
		var(--chamfer) 0,
		100% 0,
		100% calc(100% - var(--chamfer)),
		calc(100% - var(--chamfer)) 100%,
		0 100%,
		0 var(--chamfer)
	);
	transition:
		background-color 0.15s ease,
		color 0.15s ease;
}
/* clip-path would cut an outside outline, so the focus ring sits inside. */
.btn:focus-visible {
	outline-offset: -5px;
	outline-color: #fff;
}
.btn:active {
	transform: translateY(1px);
}
.btn:disabled,
.btn[aria-disabled='true'] {
	opacity: 0.6;
	cursor: default;
	pointer-events: none;
}
.btn-primary {
	background: var(--signal);
	color: #fff;
}
.btn-primary:hover {
	background: var(--signal-hi);
}
.btn-ghost {
	background: rgba(232, 224, 201, 0.1);
	color: var(--text);
	box-shadow: inset 0 0 0 1px rgba(232, 224, 201, 0.35);
}
.btn-ghost:hover {
	background: rgba(232, 224, 201, 0.18);
}
.btn-ghost:focus-visible {
	outline-color: var(--amber);
}
.btn-sm {
	--chamfer: 9px;
	padding: 8px 16px;
	font-size: 17px;
}
.btn-lg {
	--chamfer: 18px;
	padding: 20px 40px;
	font-size: 26px;
}
.btn-block {
	width: 100%;
}

/* Hero */
.hero {
	position: relative;
	overflow: hidden;
	padding: 64px 0 88px;
	isolation: isolate;
}
.hero-backdrop {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--base-deep);
}
/* The current map, blurred into ambient light. The blur hides that the art is 512 px. */
.hero-backdrop img {
	position: absolute;
	inset: -12%;
	width: 124%;
	height: 124%;
	max-width: none;
	object-fit: cover;
	filter: blur(56px) saturate(1.4) brightness(0.6);
	opacity: 0;
	transition: opacity 1.4s ease;
}
.hero-backdrop img.is-on {
	opacity: 1;
}
.hero-backdrop::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px),
		linear-gradient(180deg, rgba(20, 23, 26, 0.35) 0%, rgba(20, 23, 26, 0.1) 40%, var(--base) 100%);
}

.hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	gap: 56px;
	align-items: start;
}

.hero-title {
	font-family: var(--stencil);
	font-weight: 900;
	font-size: clamp(58px, 8vw, 118px);
	line-height: 0.84;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	text-shadow: 0 4px 30px rgba(0, 0, 0, 0.45);
}
.hero-title span {
	display: block;
}

.hero-lede {
	max-width: 50ch;
	margin: 26px 0 34px;
	font-size: 19px;
	color: var(--text);
	opacity: 0.88;
}

/* The loading screen: the game's own map art, a progress bar, the map being loaded. */
.loader {
	max-width: 560px;
	/* clip-path on the screen would cut a box-shadow, so the shadow is cast from here. */
	filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.55));
}
/* The screen is the metal frame; the map sits 2 px inside with the same corner cut. */
.loader-screen {
	position: relative;
	aspect-ratio: 2 / 1;
	background: linear-gradient(135deg, #b9bdc0, #6c7176 60%, #9a9ea2);
	clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%, 0 22px);
}
.loader-screen img {
	position: absolute;
	inset: 2px;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	background: #000;
	clip-path: polygon(21px 0, 100% 0, 100% 100%, 0 100%, 0 21px);
	opacity: 0;
	transition: opacity 0.6s ease;
}
.loader-screen img.is-on {
	opacity: 1;
}
.loader-bar {
	position: relative;
	height: 12px;
	margin-top: 14px;
	background: rgba(0, 0, 0, 0.55);
	box-shadow: inset 0 0 0 1px rgba(232, 224, 201, 0.2);
}
.loader-fill {
	position: absolute;
	inset: 2px auto 2px 2px;
	width: 0;
	max-width: calc(100% - 4px);
	/* Segmented like the in-game HUD gauges. */
	background: repeating-linear-gradient(90deg, var(--amber) 0 10px, transparent 10px 13px);
	box-shadow: 0 0 14px rgba(245, 166, 35, 0.45);
	transition: width 0.18s linear;
}
.loader-status {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
	font-family: var(--display);
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0.02em;
	color: var(--amber);
}
#loader-pct {
	font-variant-numeric: tabular-nums;
}

.hero-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 30px;
}
.hero-note {
	margin: 0;
	font-size: 14px;
	color: var(--muted);
}

/* Registration: a steel plate from the loading frame, labels as in the game login. */
.enlist {
	position: relative;
	padding: 34px 30px 28px;
	background: linear-gradient(160deg, #2b2d30 0%, var(--plate) 45%, #1d1f21 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
	clip-path: polygon(
		var(--chamfer) 0,
		100% 0,
		100% calc(100% - var(--chamfer)),
		calc(100% - var(--chamfer)) 100%,
		0 100%,
		0 var(--chamfer)
	);
	--chamfer: 22px;
}
/* Bullet holes from the loading frame plate, faded into the panel. */
.enlist::before {
	content: '';
	position: absolute;
	top: -18px;
	right: -14px;
	width: 128px;
	height: 170px;
	background: url(img/holes.png) no-repeat;
	-webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent);
	mask-image: radial-gradient(closest-side, #000 55%, transparent);
	pointer-events: none;
}
.enlist > * {
	position: relative;
}
.enlist h2 {
	font-family: var(--stencil);
	font-size: 44px;
	line-height: 0.95;
	text-transform: uppercase;
}
.enlist-lede {
	margin: 8px 0 22px;
	color: var(--muted);
	font-size: 15px;
}

.field {
	display: grid;
	grid-template-columns: 86px minmax(0, 1fr);
	background: var(--field);
	box-shadow:
		inset 0 0 0 1px #34373a,
		0 1px 0 rgba(255, 255, 255, 0.05);
	margin-top: 12px;
}
.field label {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 8px;
	background: #1c1d1f;
	border-right: 1px solid #34373a;
	color: var(--amber);
	font-size: 15px;
	font-weight: 600;
}
.field input {
	width: 100%;
	min-width: 0;
	padding: 14px 14px;
	border: 0;
	background: transparent;
	color: var(--text);
	font: inherit;
	font-size: 16px;
}
.field input::placeholder {
	color: #6f6d63;
}
.field input:focus {
	outline: none;
}
.field:focus-within {
	box-shadow: inset 0 0 0 2px var(--amber);
}

.field-hint {
	min-height: 20px;
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--muted);
}
.field-hint.ok,
.form-msg.ok {
	color: var(--ok);
}
.field-hint.bad,
.form-msg.bad {
	color: var(--bad);
}

.enlist .btn-block {
	margin-top: 22px;
	padding: 16px 20px;
	font-size: 22px;
}
.form-msg {
	min-height: 22px;
	margin: 14px 0 0;
	font-size: 15px;
}
.fine {
	margin: 16px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--muted);
}
.fine a {
	color: var(--amber);
	font-weight: 600;
}
.fine a:hover {
	text-decoration: underline;
}

/* Sections */
.maps,
.modes,
.download {
	padding: 96px 0;
}
.section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 32px;
	margin-bottom: 36px;
}
.section-head h2,
.download h2 {
	font-family: var(--stencil);
	font-size: clamp(42px, 5.4vw, 72px);
	line-height: 0.9;
	text-transform: uppercase;
}
.section-head p {
	max-width: 46ch;
	margin: 0;
	color: var(--muted);
}

/* Maps: the loading screens at close to their native 512 px. */
.map-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.map-grid li {
	background: #000;
	box-shadow: 0 0 0 1px var(--line);
}
.map-grid img {
	width: 100%;
	aspect-ratio: 2 / 1;
}

/* Modes */
.modes {
	background: var(--base-deep);
}
.mode-list {
	margin: 0;
	border-top: 1px solid var(--line);
}
.mode {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 8px 40px;
	align-items: baseline;
	padding: 26px 0;
	border-bottom: 1px solid var(--line);
}
.mode dt {
	font-family: var(--display);
	font-weight: 800;
	font-size: clamp(30px, 3.2vw, 42px);
	line-height: 1;
}
.mode dd {
	max-width: 58ch;
	margin: 0;
	color: var(--muted);
}

/* Download */
.download {
	border-top: 1px solid var(--line);
}
.download-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}
.download-main > p:first-of-type {
	max-width: 42ch;
	margin: 20px 0 30px;
	color: var(--muted);
}
.steps {
	counter-reset: step;
	margin: 0;
	padding: 0;
	list-style: none;
}
.steps li {
	counter-increment: step;
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	column-gap: 12px;
	padding: 20px 0;
	border-bottom: 1px solid var(--line);
}
.steps li:first-child {
	padding-top: 4px;
}
.steps li::before {
	content: counter(step);
	grid-row: span 2;
	font-family: var(--stencil);
	font-weight: 900;
	font-size: 64px;
	line-height: 0.8;
	color: var(--amber);
}
.steps strong {
	font-size: 18px;
}
.steps span {
	color: var(--muted);
	font-size: 15px;
}
.steps a {
	color: var(--amber);
	font-weight: 600;
}
.steps a:hover {
	text-decoration: underline;
}

/* Help: one collapsible row per problem, the same rules as the mode list. */
.help {
	padding: 96px 0;
	border-top: 1px solid var(--line);
	background: var(--base-deep);
}
.help-list {
	border-top: 1px solid var(--line);
}
.help-item {
	border-bottom: 1px solid var(--line);
}
.help-item summary {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 24px 0;
	font-family: var(--display);
	font-weight: 800;
	font-size: clamp(22px, 2.4vw, 30px);
	line-height: 1.1;
	cursor: pointer;
	list-style: none;
}
.help-item summary::-webkit-details-marker {
	display: none;
}
.help-item summary::before {
	content: '+';
	flex: none;
	width: 20px;
	font-family: var(--stencil);
	color: var(--amber);
}
.help-item[open] summary::before {
	content: '\2212';
}
.help-item summary:hover {
	color: var(--amber);
}
.help-body {
	max-width: 72ch;
	padding: 0 0 28px 36px;
	color: var(--muted);
}
.help-body p,
.help-body ol {
	margin: 0 0 14px;
}
.help-body ol {
	padding-left: 22px;
}
.help-body li {
	margin-bottom: 6px;
}
.help-body strong {
	color: var(--text);
}
.help-body a {
	color: var(--amber);
	font-weight: 600;
}
.help-body a:hover {
	text-decoration: underline;
}
.help-body code {
	padding: 1px 6px;
	background: var(--field);
	box-shadow: 0 0 0 1px var(--line);
	font-size: 0.92em;
	overflow-wrap: anywhere;
}
.help-warn {
	padding: 14px 18px;
	border-left: 3px solid var(--amber);
	background: var(--plate);
}

/* Footer */
.site-footer {
	padding: 30px 0;
	border-top: 1px solid var(--line);
	background: var(--base-deep);
}
.site-footer .wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 24px;
	font-size: 14px;
}

/* The one orchestrated moment: the headline is stamped in, then the map starts loading. */
@media (prefers-reduced-motion: no-preference) {
	.hero-title span {
		animation: stamp 0.5s cubic-bezier(0.2, 0.9, 0.2, 1) both;
	}
	.hero-title span:nth-child(2) {
		animation-delay: 0.1s;
	}
	.hero-title span:nth-child(3) {
		animation-delay: 0.2s;
	}
	.loader {
		animation: rise 0.6s 0.35s ease-out both;
	}
}
@keyframes stamp {
	from {
		opacity: 0;
		transform: scale(1.12);
		filter: blur(6px);
	}
	to {
		opacity: 1;
		transform: none;
		filter: none;
	}
}
@keyframes rise {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	.hero-backdrop img,
	.loader-screen img,
	.loader-fill {
		transition: none;
	}
}

@media (max-width: 1020px) {
	/* One column, with the form right under the headline. */
	.hero-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}
	.hero-main {
		display: contents;
	}
	.hero-title {
		order: 1;
	}
	.hero-lede {
		order: 2;
	}
	.enlist {
		order: 3;
		max-width: 520px;
		margin-bottom: 48px;
	}
	.loader {
		order: 4;
	}
	.hero-actions {
		order: 5;
	}
	.map-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.download-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 44px;
	}
}

@media (max-width: 720px) {
	/* The section links fold away; the Discord stays, as the icon alone. */
	.site-header nav a:not(.btn):not(.discord-link) {
		display: none;
	}
	.discord-link span {
		display: none;
	}
	.brand img {
		height: 38px;
	}
	.hero {
		padding: 40px 0 64px;
	}
	.hero-lede {
		font-size: 17px;
	}
	.mode {
		grid-template-columns: minmax(0, 1fr);
	}
	.maps,
	.modes,
	.download,
	.help {
		padding: 72px 0;
	}
	.help-body {
		padding-left: 0;
	}
}

@media (max-width: 520px) {
	.wrap {
		padding: 0 16px;
	}
	.map-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.enlist {
		padding: 28px 20px 22px;
	}
	.btn-lg {
		width: 100%;
		padding: 18px 24px;
		font-size: 23px;
	}
}