/* Warhallow's landing page, in the game's design system: the colors of Palette
   (scenes/ui/palette.gd), the fonts and styles of the theme (scenes/ui/theme.tres), and the
   pixel art of the sprites. One base pixel of the game is 2 CSS pixels here, so borders that
   are 2 px in the game are 4 px on the page. */

@font-face {
	font-family: "Jersey 15";
	src: url("../assets/fonts/Jersey15-Regular.ttf") format("truetype");
	font-display: swap;
}

@font-face {
	font-family: "Silkscreen";
	src: url("../assets/fonts/Silkscreen-Regular.ttf") format("truetype");
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: "Silkscreen";
	src: url("../assets/fonts/Silkscreen-Bold.ttf") format("truetype");
	font-weight: 700;
	font-display: swap;
}

:root {
	/* Palette */
	--background: #0b0e14;
	--dim: #06070c;
	--line: #1b2a44;
	--border: #2f4466;
	--border-muted: #4b5563;
	--slot: #0f1a2c;
	--text: #e6ecff;
	--text-secondary: #c4cbe6;
	--text-muted: #8a93b8;
	--text-locked: #5d6690;
	--cyan: #7fd6ff;
	--cyan-shadow: #2c8fb0;
	--orange: #ffa53d;
	--orange-shadow: #a85a10;
	--gold: #ffd250;
	--gold-shadow: #c98a1e;
	--gold-light: #fff0a8;
	--hero-back: #131a2c;
	--health-back: #3b1014;
	--health: #e2521f;
	--green: #78e682;
	--green-shadow: #2d6e3a;
	--red: #e6524d;
	--red-shadow: #5a1a1e;
	--red-light: #ff8a7a;
	/* The theme's ThreatFrame panel */
	--threat-back: #1d1520;
	--threat-border: #3a2430;

	/* One base pixel of the game */
	--px: 2px;
	--gutter: 32px;
	--body: 26px;
	--small: 22px;

	/* Pixel glyphs, drawn as bars like Glyph in the game */
	--glyph-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 9' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v9H0zM1 1h1v7H1zM2 2h1v5H2zM3 3h1v3H3zM4 4h1v1H4z'/%3E%3C/svg%3E");
	--glyph-key-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 7' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h1v1H2zM1 1h3v1H1zM0 2h5v1H0zM2 3h1v4H2z'/%3E%3C/svg%3E");
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 72px;
	background: var(--background);
}

body {
	margin: 0;
	background: var(--background);
	color: var(--text-secondary);
	font-family: "Jersey 15", ui-monospace, monospace;
	font-size: var(--body);
	line-height: 1.15;
	/* The pixel fonts render without antialiasing, as in the game. */
	-webkit-font-smoothing: none;
	-moz-osx-font-smoothing: unset;
	font-smooth: never;
	overflow-x: hidden;
}

img,
canvas,
.unit {
	image-rendering: pixelated;
}

p {
	margin: 0;
}

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

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

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

button {
	font: inherit;
}

::selection {
	background: var(--cyan);
	color: var(--background);
}

:focus-visible {
	outline: 4px solid var(--cyan);
	outline-offset: 4px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 8px;
	z-index: 100;
	padding: 8px 16px;
	background: var(--cyan);
	color: var(--background);
	text-decoration: none;
}

.skip-link:focus {
	left: 8px;
}

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

/* ---------- Shared pieces of the theme ---------- */

/* The theme's CtaButton: cyan, dark text, a 4 px shadow under it, an arrow on its left. */
.cta {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	padding: 10px 52px 10px 30px;
	border: 0;
	border-bottom: calc(4 * var(--px)) solid var(--cyan-shadow);
	background: var(--cyan);
	color: var(--background);
	font-family: "Jersey 15", monospace;
	font-size: 32px;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
}

.cta::before {
	content: "";
	width: 10px;
	height: 18px;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--glyph-right) center / 100% 100% no-repeat;
	mask: var(--glyph-right) center / 100% 100% no-repeat;
}

.cta:hover {
	background: #a6e4ff;
}

.cta:active {
	transform: translateY(4px);
	border-bottom-width: 4px;
}

/* Waiting for the Steam page: it looks like the game's CTA but does nothing. */
.cta[aria-disabled="true"] {
	cursor: default;
}

.cta[aria-disabled="true"]:hover {
	background: var(--cyan);
}

.cta[aria-disabled="true"]:active {
	transform: none;
	border-bottom-width: calc(4 * var(--px));
}

/* The tag on a store button whose page does not exist yet. */
.cta .soon {
	margin-left: 0.3em;
	padding: 0.1em 0.3em 0.15em;
	background: var(--background);
	color: var(--cyan);
	/* No text under 18 px, as in the game. */
	font-size: max(18px, 0.6em);
	line-height: 1;
}

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

.cta-small {
	padding: 4px 20px 4px 14px;
	gap: 10px;
	font-size: 24px;
	border-bottom-width: 6px;
}

.cta-small::before {
	width: 6px;
	height: 12px;
}

/* The theme's SecondaryButton. */
.btn-secondary {
	display: inline-flex;
	align-items: center;
	padding: 10px 30px;
	border: calc(2 * var(--px)) solid var(--border-muted);
	background: var(--background);
	color: var(--text-secondary);
	font-size: 30px;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.btn-secondary:hover {
	border-color: var(--cyan);
	color: #fff;
}

/* The theme's Card: dark, a cyan border and a hard shadow. */
.card {
	background: var(--background);
	border: calc(2 * var(--px)) solid var(--cyan);
	box-shadow: calc(5 * var(--px)) calc(5 * var(--px)) 0 var(--dim);
}

/* The theme's Keycap and KeyHint. */
.keycap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	padding: 2px 12px 4px;
	border: calc(2 * var(--px)) solid var(--border-muted);
	border-bottom-width: calc(4 * var(--px));
	color: var(--text);
	font-size: var(--small);
	line-height: 1;
}

.hints {
	display: flex;
	align-items: center;
	gap: 28px;
}

.hints-wrap {
	flex-wrap: wrap;
	row-gap: 12px;
}

.hint {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--text-muted);
	font-size: var(--small);
}

.hint .keycap + .keycap {
	margin-left: -4px;
}

.hint-label {
	color: var(--text-muted);
	font-size: var(--small);
}

/* Keyboard and mouse hints, or touch hints on a touch screen. */
.hints .only-touch {
	display: none;
}

@media (pointer: coarse) {
	.hints .only-keys {
		display: none;
	}

	.hints .only-touch {
		display: inline-flex;
	}
}

.key-arrows {
	display: inline-flex;
	gap: 6px;
	padding: 4px 0;
}

.key-arrows i {
	display: block;
	width: 10px;
	height: 14px;
	background: var(--text);
	-webkit-mask: var(--glyph-key-up) center / 100% 100% no-repeat;
	mask: var(--glyph-key-up) center / 100% 100% no-repeat;
}

.key-arrows .glyph-key-down {
	transform: scaleY(-1);
}

.key-arrows .glyph-key-left,
.key-arrows .glyph-key-right {
	width: 14px;
	height: 10px;
	-webkit-mask-image: none;
	mask-image: none;
	background: none;
	position: relative;
}

.key-arrows .glyph-key-left::before,
.key-arrows .glyph-key-right::before {
	content: "";
	position: absolute;
	left: 2px;
	top: -2px;
	width: 10px;
	height: 14px;
	background: var(--text);
	-webkit-mask: var(--glyph-key-up) center / 100% 100% no-repeat;
	mask: var(--glyph-key-up) center / 100% 100% no-repeat;
	transform: rotate(-90deg);
}

.key-arrows .glyph-key-right::before {
	transform: rotate(90deg);
}

/* The theme's SectionLabel and TagLabel: small orange capitals. */
.section-label,
.tag {
	color: var(--orange);
	font-size: var(--small);
	letter-spacing: 0.04em;
}

.tag-red {
	color: var(--red-light);
}

.tag-green {
	color: var(--green);
}

/* The heading.tres title: Silkscreen Bold, cyan, a darker cyan under it. */
.heading {
	font-family: "Silkscreen", monospace;
	font-weight: 700;
	font-size: 48px;
	line-height: 1;
	color: var(--cyan);
	text-shadow: 0 6px 0 var(--cyan-shadow);
}

.heading-small {
	font-size: 32px;
	text-shadow: 0 4px 0 var(--cyan-shadow);
}

.heading-enemy {
	color: var(--red);
	text-shadow: 0 6px 0 var(--red-shadow);
}

.chip {
	display: inline-block;
	padding: 1px 8px 3px;
	background: var(--line);
	color: var(--text);
	font-size: 20px;
	line-height: 1;
}

/* A unit sprite: the sheet's last frame, the one facing right, at twice its size. */
.unit {
	display: block;
	width: 128px;
	height: 128px;
	background-repeat: no-repeat;
	background-size: 400% 100%;
	background-position: 100% 0;
	flex: none;
}

.unit-1x {
	width: 64px;
	height: 64px;
}

.unit-96 {
	width: 192px;
	height: 192px;
}

.unit-128 {
	width: 256px;
	height: 256px;
}

/* The theme's upgrade row, as in the level-up choice. */
.upgrade-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 16px;
	background: var(--background);
	border: calc(2 * var(--px)) solid var(--line);
}

.upgrade-row-focus {
	background: var(--line);
	border-color: var(--gold);
}

.icon-slot {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	flex: none;
	background: var(--slot);
	border: calc(2 * var(--px)) solid var(--border);
}

.upgrade-row-focus .icon-slot {
	border-color: var(--cyan);
}

.icon-slot img {
	width: 64px;
	height: 64px;
}

.upgrade-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.upgrade-title {
	color: var(--text);
	font-size: 28px;
}

.upgrade-desc {
	color: var(--text-secondary);
	font-size: var(--small);
}

/* ---------- Top bar, shown once the title screen is scrolled past ---------- */

.topbar {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 50;
	background: var(--background);
	border-bottom: calc(2 * var(--px)) solid var(--line);
	transform: translateY(-110%);
	transition: transform 0.2s steps(4);
}

.topbar.is-shown {
	transform: none;
}

.topbar-inner {
	display: flex;
	align-items: center;
	gap: 32px;
	height: 64px;
}

.topbar-logo {
	font-family: "Silkscreen", monospace;
	font-weight: 700;
	font-size: 24px;
	color: var(--cyan);
	text-decoration: none;
	text-shadow: 0 3px 0 var(--cyan-shadow);
}

.topbar-nav {
	display: flex;
	gap: 4px;
	margin-right: auto;
}

.topbar-nav a {
	padding: 2px 10px;
	color: var(--text-secondary);
	font-size: var(--small);
	text-decoration: none;
}

.topbar-nav a:hover,
.topbar-nav a.is-current {
	background: var(--cyan);
	color: var(--background);
}

/* ---------- The title screen ---------- */

.hero {
	--z: 1;
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
	background: var(--background);
	display: flex;
	flex-direction: column;
}

.sky {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
}

.hero-squad {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
}

.hero-squad .unit {
	position: absolute;
	width: calc(64px * var(--z));
	height: calc(64px * var(--z));
	margin: calc(-32px * var(--z)) 0 0 calc(-32px * var(--z));
	/* Facing up, as on the title screen. */
	transform: rotate(-90deg);
}

.hero-inner {
	position: relative;
	z-index: 2;
	flex: 1;
	padding: calc(31px * var(--z)) calc(64px * var(--z)) calc(48px * var(--z));
}

/* The title's logo: Silkscreen Bold on two lines, with two stacked shadows. */
.logo {
	display: flex;
	flex-direction: column;
	font-family: "Silkscreen", monospace;
	font-weight: 700;
	font-size: calc(88px * var(--z));
	line-height: 0.76;
	color: var(--cyan);
	text-shadow:
		0 calc(6px * var(--z)) 0 var(--cyan-shadow),
		calc(6px * var(--z)) calc(12px * var(--z)) 0 var(--background);
}

.hero-pitch {
	margin-top: calc(20px * var(--z));
	max-width: 30em;
	color: var(--text);
	font-size: calc(22px * var(--z));
	line-height: 1.1;
	text-shadow: 0 var(--z) 0 var(--background);
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: calc(10px * var(--z));
	margin-top: calc(12px * var(--z));
}

.hero .cta {
	font-size: calc(24px * var(--z));
	padding: calc(5px * var(--z)) calc(26px * var(--z)) calc(5px * var(--z)) calc(15px * var(--z));
	gap: calc(8px * var(--z));
	border-bottom-width: calc(4px * var(--z));
}

.hero .cta::before {
	width: calc(5px * var(--z));
	height: calc(9px * var(--z));
}

/* The theme's MenuItem: the focused entry is filled cyan behind a dark arrow. */
.title-menu {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--z);
	margin-top: calc(12px * var(--z));
}

.menu-item {
	position: relative;
	padding: calc(2px * var(--z)) calc(14px * var(--z)) calc(2px * var(--z)) calc(30px * var(--z));
	color: var(--text-secondary);
	font-size: calc(27px * var(--z));
	line-height: 1.05;
	text-decoration: none;
	text-shadow: 0 var(--z) 0 var(--background);
}

.menu-item.is-focused,
.menu-item:focus-visible {
	background: var(--cyan);
	color: var(--background);
	text-shadow: none;
	outline: none;
}

.menu-item.is-focused::before,
.menu-item:focus-visible::before {
	content: "";
	position: absolute;
	left: calc(12px * var(--z));
	top: 50%;
	width: calc(5px * var(--z));
	height: calc(9px * var(--z));
	margin-top: calc(-4.5px * var(--z));
	background: var(--background);
	-webkit-mask: var(--glyph-right) center / 100% 100% no-repeat;
	mask: var(--glyph-right) center / 100% 100% no-repeat;
}

.hero-foot {
	position: absolute;
	left: calc(64px * var(--z));
	right: calc(24px * var(--z));
	bottom: calc(20px * var(--z));
	z-index: 2;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

.hero-foot .hint,
.hero-foot .hint-label {
	font-size: calc(19px * var(--z));
	text-shadow: 0 var(--z) 0 var(--background);
}

.hero-foot .keycap {
	font-size: calc(19px * var(--z));
	background: var(--background);
}

/* ---------- Sections ---------- */

.section {
	padding: 128px 0;
	border-top: calc(2 * var(--px)) solid var(--line);
}

.section-head {
	max-width: 760px;
	margin-bottom: 56px;
}

.section-head .heading {
	margin-top: 12px;
}

.lede {
	margin-top: 28px;
	color: var(--text-secondary);
	font-size: 28px;
	line-height: 1.15;
}

.subhead {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 640px;
	margin: 88px 0 32px;
}

.locked-note {
	display: inline-block;
	margin-top: 20px;
	padding: 2px 10px 4px;
	border: calc(2 * var(--px)) solid var(--text-locked);
	color: var(--text-muted);
	font-size: 20px;
}

/* 01: the loop */

.steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	counter-reset: step;
}

.step {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px 20px 24px;
}

.step-visual {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	place-items: center;
	height: 176px;
	margin-bottom: 12px;
	background: var(--slot);
	border: calc(2 * var(--px)) solid var(--line);
	overflow: hidden;
}

.step-number {
	color: var(--orange);
	font-size: var(--small);
}

.step-title {
	font-family: "Silkscreen", monospace;
	font-weight: 700;
	font-size: 32px;
	line-height: 1;
	color: var(--text);
}

.step p:last-child {
	font-size: 24px;
}

.keypad {
	display: grid;
	grid-template-columns: repeat(3, 56px);
	grid-template-rows: repeat(2, 56px);
	gap: 8px;
}

.keycap-big {
	font-size: 28px;
	min-width: 0;
	padding: 0;
}

.keypad [data-key="up"] {
	grid-column: 2;
	grid-row: 1;
}

.keypad [data-key="left"] {
	grid-column: 1;
	grid-row: 2;
}

.keypad [data-key="down"] {
	grid-column: 2;
	grid-row: 2;
}

.keypad [data-key="right"] {
	grid-column: 3;
	grid-row: 2;
}

.keypad .is-down {
	border-color: var(--cyan);
	border-bottom-width: calc(2 * var(--px));
	transform: translateY(4px);
	color: var(--cyan);
}

/* A recruitment circle: a tinted disc, a thin ring, a gauge filling clockwise from the top
   and the badge with the insignia of the unit waiting inside. */
.recruit-circle {
	--progress: 0.6;
	--unit-color: #50c8e6;
	position: relative;
	display: grid;
	place-items: center;
	width: 128px;
	height: 128px;
	border-radius: 50%;
	background: rgba(80, 200, 230, 0.15);
	box-shadow: inset 0 0 0 4px rgba(80, 200, 230, 0.5);
}

.recruit-gauge {
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	background: conic-gradient(var(--unit-color) calc(var(--progress) * 360deg), transparent 0);
	-webkit-mask: radial-gradient(circle, transparent 58px, #000 58.5px);
	mask: radial-gradient(circle, transparent 58px, #000 58.5px);
}

.recruit-circle .unit {
	transform: rotate(-90deg);
}

.recruit-badge {
	position: absolute;
	top: -24px;
	left: 50%;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-left: -23px;
	border: 4px solid #101830;
	border-radius: 50%;
	background: var(--unit-color);
}

.recruit-badge img {
	width: 18px;
	height: 18px;
}

.step .upgrade-row {
	width: calc(100% - 24px);
	padding: 10px;
}

.step .upgrade-row .upgrade-title {
	font-size: 24px;
}

.step .upgrade-row .upgrade-desc {
	font-size: 20px;
}

/* The extraction zone: a dithered green disc inside a ring of segments in two greens. */
.extraction-zone {
	display: grid;
	place-items: center;
	width: 144px;
	height: 144px;
	border-radius: 50%;
	background: repeating-conic-gradient(var(--green) 0 7.5deg, var(--green-shadow) 7.5deg 15deg);
	padding: 8px;
}

.extraction-zone span {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background:
		conic-gradient(from 0deg at 50% 50%, rgba(120, 230, 130, 0.25) 0 25%, transparent 0 50%, rgba(120, 230, 130, 0.25) 0 75%, transparent 0) 0 0 / 4px 4px,
		var(--slot);
	color: var(--green);
	font-size: 22px;
	letter-spacing: 0.08em;
}

/* 02: the field test */

.section-field {
	background:
		linear-gradient(var(--line) 2px, transparent 2px) 0 0 / 64px 64px,
		linear-gradient(90deg, var(--line) 2px, transparent 2px) 0 0 / 64px 64px,
		var(--dim);
	background-blend-mode: normal;
}

.section-field .section-head {
	position: relative;
}

.field {
	position: relative;
	width: 100%;
	max-width: 960px;
	aspect-ratio: 16 / 9;
	margin: 0 auto;
	background: #95805e;
	border: calc(2 * var(--px)) solid var(--cyan);
	box-shadow: calc(5 * var(--px)) calc(5 * var(--px)) 0 var(--background);
	overflow: hidden;
	outline: none;
	user-select: none;
	-webkit-user-select: none;
}

.field.is-portrait {
	aspect-ratio: 3 / 4;
}

.field.is-running .field-canvas {
	cursor: crosshair;
	touch-action: none;
}

.field-canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.field-hud {
	position: absolute;
	inset: 0;
	pointer-events: none;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: start;
	padding: 10px 12px;
	font-size: 20px;
	color: var(--text);
	text-shadow: 0 2px 0 var(--background);
}

.field-hud[hidden] {
	display: none;
}

.hud-left,
.hud-right {
	display: flex;
	align-items: center;
	gap: 10px;
}

.hud-left {
	flex-wrap: wrap;
}

.hud-right {
	justify-content: flex-end;
}

.hud-label {
	color: var(--text-secondary);
}

.hp-bar,
.xp-bar {
	display: block;
	height: 12px;
	border: 2px solid var(--background);
}

.hp-bar {
	width: 120px;
	background: var(--health-back);
}

.hp-bar span,
.xp-bar span {
	display: block;
	height: 100%;
	width: 100%;
	transform-origin: left center;
}

.hp-bar span {
	background: var(--health);
}

.hud-squad,
.hud-kills {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.hud-squad img,
.hud-kills img {
	width: 32px;
	height: 32px;
}

.hud-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.hud-timer {
	font-family: "Silkscreen", monospace;
	font-weight: 700;
	font-size: 32px;
	line-height: 1;
	color: var(--text);
	text-shadow: 0 4px 0 var(--background);
}

.hud-caption {
	padding: 0 8px;
	background: rgba(11, 14, 20, 0.72);
	color: var(--orange);
	font-size: 20px;
	text-shadow: none;
	white-space: nowrap;
}

.hud-caption.is-extract {
	color: var(--green);
}

.hud-pause {
	pointer-events: auto;
	padding: 0;
	border: 0;
	background: rgba(11, 14, 20, 0.72);
	cursor: pointer;
}

.hud-pause .keycap {
	font-size: 18px;
	padding: 0 8px 2px;
}

.hud-xp {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 10px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.hud-level {
	color: var(--gold);
	font-size: 22px;
}

.xp-bar {
	flex: 1;
	background: var(--line);
}

.xp-bar span {
	background: var(--gold);
}

.field-overlay {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 24px;
	background: rgba(6, 7, 12, 0.72);
	overflow: auto;
}

.field-overlay[hidden] {
	display: none;
}

.overlay-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	max-width: 560px;
	padding: 28px 32px 32px;
}

.overlay-small {
	align-items: center;
}

.overlay-title {
	font-size: 48px;
}

.overlay-card .cta {
	margin-top: 8px;
}

.overlay-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	margin-top: 8px;
}

.overlay-actions .cta {
	margin-top: 0;
}

.end-title {
	font-family: "Silkscreen", monospace;
	font-weight: 700;
	line-height: 1;
	color: var(--green);
	text-shadow: 0 4px 0 var(--green-shadow);
}

.end-title.is-defeat {
	color: var(--red);
	text-shadow: 0 4px 0 var(--red-shadow);
}

.stats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
}

.stats li {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--text-muted);
	font-size: var(--small);
}

.stats img {
	width: 32px;
	height: 32px;
}

.stats b {
	color: var(--text);
	font-weight: 400;
	font-size: 28px;
}

/* The level-up choice: a gold title over three upgrade rows. */
.levelup {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: min(600px, 100%);
}

.levelup-title {
	font-family: "Silkscreen", monospace;
	font-weight: 700;
	font-size: 40px;
	line-height: 1;
	color: var(--gold);
	text-shadow: 0 4px 0 var(--gold-shadow), 4px 8px 0 var(--background);
}

.levelup-sub {
	display: flex;
	gap: 12px;
	color: var(--text-secondary);
	font-size: var(--small);
}

.levelup-lv {
	color: var(--gold);
}

.levelup-choices {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	margin-top: 6px;
}

.levelup-choices .upgrade-row {
	width: 100%;
	padding: 8px 12px;
	text-align: left;
	color: inherit;
	cursor: pointer;
}

.levelup-choices .upgrade-row:hover,
.levelup-choices .upgrade-row:focus-visible {
	background: var(--line);
	border-color: var(--gold);
	outline: none;
}

.levelup-choices .upgrade-row:hover .icon-slot,
.levelup-choices .upgrade-row:focus-visible .icon-slot {
	border-color: var(--cyan);
}

.levelup-choices .icon-slot {
	width: 56px;
	height: 56px;
}

.levelup-choices .icon-slot img {
	width: 48px;
	height: 48px;
}

.levelup-choices .keycap {
	margin-left: auto;
	flex: none;
}

.field-foot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	max-width: 960px;
	margin: 32px auto 0;
	text-align: center;
}

.field-foot .hints {
	justify-content: center;
}

/* 03: the squad */

.unit-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
}

.unit-card,
.enemy-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.unit-card p:last-child,
.enemy-card p:last-child {
	font-size: 24px;
}

.unit-slot {
	display: grid;
	place-items: center;
	height: 176px;
	margin-bottom: 8px;
	background: var(--slot);
	border: calc(2 * var(--px)) solid var(--border);
}

.unit-slot .unit {
	transform: rotate(-90deg);
}

.unit-name {
	font-family: "Silkscreen", monospace;
	font-weight: 700;
	font-size: 24px;
	line-height: 1;
	color: var(--text);
}

.hero-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}

.hero-card {
	display: flex;
	gap: 20px;
	padding: 20px;
}

.portrait {
	display: grid;
	place-items: center;
	width: 136px;
	height: 136px;
	flex: none;
	background: var(--hero-back);
	border: calc(2 * var(--px)) solid var(--border);
	overflow: hidden;
}

.portrait .unit {
	transform: rotate(-90deg);
}

.hero-card > div {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.hero-name {
	font-family: "Silkscreen", monospace;
	font-weight: 700;
	font-size: 24px;
	line-height: 1;
	color: var(--text);
}

.power {
	color: var(--cyan);
	font-size: var(--small);
}

.hero-card p:not([class]) {
	font-size: 23px;
}

.chips {
	display: flex;
	gap: 6px;
	margin-top: 4px;
}

.keyword-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 32px;
}

/* 04: the enemy */

.section-enemy {
	background: linear-gradient(180deg, var(--background), #120c12 40%, var(--background));
}

.section-enemy .section-label {
	color: var(--red-light);
}

.enemy-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
}

.enemy-slot {
	background: var(--threat-back);
	border-color: var(--threat-border);
}

.enemy-card-wide {
	grid-column: span 1;
}

/* 1.5 times the armored sprite, which stays crisp on high density screens. */
.enemy-slot-big .unit {
	width: 144px;
	height: 144px;
}

/* Enemies face down, toward the squad. */
.enemy-slot .unit {
	transform: rotate(90deg);
}

.damage-table {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 40px;
	margin-top: 56px;
	padding: 20px 24px;
	background: var(--threat-back);
	border: calc(2 * var(--px)) solid var(--threat-border);
}

.damage {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 24px;
}

.damage b {
	color: var(--text);
	font-weight: 400;
	font-size: 28px;
}

.chip-ion {
	background: var(--cyan);
	color: var(--background);
}

.chip-explosive {
	background: var(--orange);
	color: var(--background);
}

.chip-kinetic {
	background: var(--border);
}

.boss {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 48px;
	align-items: center;
	margin-top: 88px;
	padding: 32px;
	background: var(--threat-back);
	border: calc(2 * var(--px)) solid var(--red);
	box-shadow: calc(5 * var(--px)) calc(5 * var(--px)) 0 var(--dim);
}

.boss-stage {
	position: relative;
	display: grid;
	place-items: center;
	width: 320px;
	height: 320px;
	background:
		radial-gradient(circle, rgba(226, 82, 31, 0.18) 0 40%, transparent 41%),
		var(--background);
	border: calc(2 * var(--px)) solid var(--threat-border);
	overflow: hidden;
}

.boss-stage .unit {
	transform: rotate(90deg);
}

.boss-flash {
	position: absolute;
	inset: 0;
	background: var(--gold-light);
	opacity: 0;
	pointer-events: none;
}

.boss-flash.is-flashing {
	animation: boss-flash 0.36s steps(3) forwards;
}

@keyframes boss-flash {
	from {
		opacity: 0.85;
	}
	to {
		opacity: 0;
	}
}

.boss-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.boss-name {
	font-family: "Silkscreen", monospace;
	font-weight: 700;
	font-size: 40px;
	line-height: 1;
	color: var(--red);
	text-shadow: 0 4px 0 var(--red-shadow);
}

.phases {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 8px;
}

.phase {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px 6px 6px;
	border: calc(2 * var(--px)) solid var(--threat-border);
	background: var(--background);
	color: var(--text-muted);
	font-size: var(--small);
	cursor: pointer;
}

.phase:hover {
	border-color: var(--red-light);
	color: var(--text);
}

.phase[aria-pressed="true"] {
	border-color: var(--red);
	background: var(--red-shadow);
	color: var(--text);
}

/* 05: the campaign */

.planets {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

.planet-card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 24px 28px;
	padding: 24px;
}

.planet-canvas {
	display: block;
	width: 200px;
	height: 200px;
	background: var(--background);
}

.planet-info {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
}

.planet-name {
	font-family: "Silkscreen", monospace;
	font-weight: 700;
	font-size: 40px;
	line-height: 1;
	color: var(--text);
}

.threat {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--text-muted);
	font-size: var(--small);
}

.pips {
	display: inline-flex;
	gap: 4px;
}

.pips i {
	width: 14px;
	height: 14px;
	background: var(--line);
}

.pips i.on {
	background: var(--red);
}

.missions {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 24px;
	counter-reset: mission;
	border-top: calc(2 * var(--px)) solid var(--line);
	padding-top: 12px;
}

.missions li {
	counter-increment: mission;
	display: grid;
	grid-template-columns: 24px 36px minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 10px;
	align-items: center;
	padding: 8px 6px;
}

.missions li:hover {
	background: var(--line);
}

.missions li::before {
	content: counter(mission, decimal-leading-zero);
	grid-column: 2;
	grid-row: 1;
	color: var(--text-muted);
	font-size: 20px;
}

.missions b {
	grid-column: 3;
	grid-row: 1;
	color: var(--text);
	font-weight: 400;
	font-size: 24px;
}

.missions span:not(.mission-icon) {
	grid-column: 3;
	grid-row: 2;
	font-size: 20px;
	color: var(--text-muted);
}

/* The hub's markers: a diamond, a shield for a hero, a hexagon with a skull for the boss. */
.mission-icon {
	grid-column: 1;
	grid-row: 1;
	width: 18px;
	height: 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Cpath fill='%237fd6ff' d='M4 0h1v1H4zM3 1h3v1H3zM2 2h5v1H2zM1 3h7v1H1zM0 4h9v1H0zM1 5h7v1H1zM2 6h5v1H2zM3 7h3v1H3zM4 8h1v1H4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mission-icon-hero {
	width: 22px;
	height: 24px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 12' shape-rendering='crispEdges'%3E%3Cpath fill='%237fd6ff' d='M0 0h11v7H0zM1 7h9v1H1zM2 8h7v1H2zM3 9h5v1H3zM4 10h3v1H4zM5 11h1v1H5z'/%3E%3Cpath fill='%230b0e14' d='M5 3h1v1H5zM4 4h1v1H4zM6 4h1v1H6zM3 5h1v1H3zM7 5h1v1H7z'/%3E%3C/svg%3E");
}

.mission-icon-boss {
	width: 26px;
	height: 30px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 15' shape-rendering='crispEdges'%3E%3Cpath fill='%23e6524d' d='M6 0h1v1H6zM4 1h5v1H4zM2 2h9v1H2zM0 3h13v9H0zM2 12h9v1H2zM4 13h5v1H4zM6 14h1v1H6z'/%3E%3Cpath fill='%230b0e14' d='M4 3h5v1H4zM3 4h7v1H3zM2 5h9v1H2zM2 6h2v2H2zM6 6h1v2H6zM9 6h2v2H9zM3 8h7v1H3zM4 9h1v1H4zM6 9h1v1H6zM8 9h1v1H8zM4 10h5v1H4z'/%3E%3C/svg%3E");
}

.planet-card-locked {
	grid-template-columns: minmax(0, 1fr);
	border-color: var(--border);
}

.planet-card-locked .planet-canvas {
	width: 128px;
	height: 128px;
}

.between {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 48px;
}

.hero-board {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.board-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px;
	background: var(--background);
	border: calc(2 * var(--px)) solid var(--border);
}

.board-card-out {
	border-color: var(--gold);
}

.board-card-down {
	border-color: var(--line);
}

/* The portrait slot of the game: the middle 48 px of the unit, shown at twice its size. */
.board-portrait {
	display: grid;
	place-items: center;
	width: 96px;
	height: 96px;
	flex: none;
	background: var(--hero-back);
	overflow: hidden;
}

.board-portrait .unit {
	transform: rotate(-90deg);
}

.board-mark {
	font-family: "Silkscreen", monospace;
	font-weight: 700;
	font-size: 40px;
	color: var(--text-locked);
}

.board-card > div {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.board-name {
	font-family: "Silkscreen", monospace;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.2;
	color: var(--text);
}

.board-card-out .board-name {
	color: var(--gold);
}

.board-card-down .board-name {
	color: var(--text-locked);
}

.board-status {
	font-size: 21px;
	color: var(--text-muted);
}

.board-card-out .board-status {
	color: var(--orange);
}

.board-card-down .board-status {
	color: var(--text-locked);
}

.branches {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.branch {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.branch-name {
	margin-bottom: 12px;
	color: var(--orange);
	font-size: var(--small);
}

.node {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 8px 12px 10px;
	background: var(--slot);
	border: calc(2 * var(--px)) solid var(--border);
}

.node + .node {
	margin-top: 20px;
}

/* The link to the node above. */
.node + .node::before {
	content: "";
	position: absolute;
	left: 24px;
	top: -24px;
	width: 4px;
	height: 20px;
	background: var(--border);
}

.node b {
	color: var(--text);
	font-weight: 400;
	font-size: 23px;
}

.node span {
	font-size: 20px;
	color: var(--text-muted);
}

.node-ultimate {
	border-color: var(--gold);
	background: #1a1608;
}

.node-ultimate b {
	color: var(--gold);
}

/* 06: co-op */

.coop {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
}

.coop .section-head {
	margin-bottom: 0;
}

.coop-field {
	position: relative;
	display: flex;
	justify-content: space-around;
	align-items: center;
	gap: 24px;
	padding: 40px 24px;
	background: url("../assets/tiles/desert_floor.png") 0 0 / 384px 128px;
	border: calc(2 * var(--px)) solid var(--cyan);
	box-shadow: calc(5 * var(--px)) calc(5 * var(--px)) 0 var(--dim);
}

.coop-squad {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, 64px);
	grid-template-rows: repeat(2, 64px);
	gap: 4px 16px;
	padding: 28px 16px 12px;
	border-radius: 50%;
}

.coop-squad .unit {
	transform: rotate(-90deg);
}

.coop-squad .chip {
	position: absolute;
	top: -8px;
	left: 50%;
	transform: translateX(-50%);
}

.chip-p1 {
	background: var(--cyan);
	color: var(--background);
}

.chip-p2 {
	background: var(--gold);
	color: var(--background);
}

/* Last call */

.finale {
	position: relative;
	min-height: 560px;
	overflow: hidden;
	display: grid;
	align-items: center;
	border-top: calc(2 * var(--px)) solid var(--line);
}

.finale-inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
	padding-top: 96px;
	padding-bottom: 96px;
}

.finale-title {
	font-family: "Silkscreen", monospace;
	font-weight: 700;
	font-size: 64px;
	line-height: 0.95;
	color: var(--cyan);
	text-shadow: 0 6px 0 var(--cyan-shadow), 6px 12px 0 var(--background);
}

.finale-platforms {
	margin-top: -16px;
	font-size: 28px;
}

.finale-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
}

.footer {
	padding: 48px 0 56px;
	border-top: calc(2 * var(--px)) solid var(--line);
	background: var(--dim);
}

.footer-inner {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.footer-logo {
	font-family: "Silkscreen", monospace;
	font-weight: 700;
	font-size: 32px;
	color: var(--cyan);
	text-shadow: 0 4px 0 var(--cyan-shadow);
}

.footer p {
	font-size: 22px;
}

/* ---------- Narrower screens ---------- */

@media (max-width: 1180px) {
	.topbar-nav {
		display: none;
	}

	.topbar-inner {
		justify-content: space-between;
	}

	.steps,
	.unit-grid,
	.enemy-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hero-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.planets,
	.between,
	.coop {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 720px) {
	:root {
		--gutter: 16px;
		--body: 24px;
		--small: 20px;
	}

	.section {
		padding: 80px 0;
	}

	.heading {
		font-size: 32px;
		text-shadow: 0 4px 0 var(--cyan-shadow);
	}

	.heading-enemy {
		text-shadow: 0 4px 0 var(--red-shadow);
	}

	.heading-small {
		font-size: 24px;
	}

	.lede {
		font-size: 25px;
	}

	.cta {
		font-size: 26px;
		padding: 8px 32px 8px 20px;
	}

	.btn-secondary {
		font-size: 24px;
		padding: 8px 20px;
	}

	.steps,
	.unit-grid,
	.keyword-grid,
	.hero-board,
	.missions {
		grid-template-columns: minmax(0, 1fr);
	}

	.enemy-grid {
		gap: 24px 16px;
	}

	.enemy-slot,
	.unit-slot {
		height: 136px;
	}

	.enemy-grid .unit {
		width: 96px;
		height: 96px;
	}

	.enemy-grid .enemy-slot-big .unit {
		width: 96px;
		height: 96px;
	}

	.unit-name {
		font-size: 20px;
	}

	.hero-card {
		flex-direction: column;
	}

	.boss {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		padding: 16px;
	}

	.boss-stage {
		width: 100%;
		height: 280px;
	}

	.boss-name {
		font-size: 32px;
	}

	.planet-card {
		grid-template-columns: minmax(0, 1fr);
		padding: 16px;
	}

	.planet-canvas {
		width: 160px;
		height: 160px;
	}

	.branches {
		grid-template-columns: minmax(0, 1fr);
	}

	.coop-field {
		flex-direction: column;
	}

	.finale-title {
		font-size: 40px;
	}

	.finale-platforms {
		font-size: 22px;
	}

	.hero-foot .hints {
		display: none;
	}

	.topbar-inner {
		gap: 12px;
	}

	.topbar-logo {
		font-size: 16px;
		text-shadow: 0 2px 0 var(--cyan-shadow);
	}

	.cta-small {
		font-size: 20px;
		padding: 2px 12px 2px 10px;
		gap: 8px;
		border-bottom-width: 4px;
	}

	.field-hud {
		font-size: 18px;
		padding: 6px 8px;
	}

	.hud-label,
	.hud-caption {
		display: none;
	}

	.hp-bar {
		width: 64px;
	}

	.hud-timer {
		font-size: 24px;
	}

	.field-overlay {
		padding: 12px;
	}

	.overlay-card {
		padding: 16px 18px 20px;
		gap: 10px;
	}

	.stats {
		gap: 4px 20px;
	}

	.overlay-actions {
		gap: 10px;
	}

	.overlay-card p:not(.overlay-title):not(.section-label) {
		font-size: 22px;
	}

	.overlay-title {
		font-size: 32px;
	}

	.levelup-title {
		font-size: 32px;
	}

	.levelup-choices .upgrade-row {
		gap: 10px;
	}

	.levelup-choices .keycap {
		display: none;
	}
}

/* The portrait title screen: the menu leaves, the planet sits under the text. */
.hero.is-portrait .title-menu {
	display: none;
}

.hero.is-portrait .hero-inner {
	padding: 88px 16px 0;
	flex: none;
}

.hero.is-portrait .logo {
	font-size: 64px;
	text-shadow: 0 4px 0 var(--cyan-shadow), 4px 8px 0 var(--background);
}

.hero-play {
	display: none;
}

.hero.is-portrait .hero-play {
	display: inline-flex;
	font-size: 24px;
	padding: 6px 16px;
}

.hero.is-portrait .hero-foot .hints {
	display: none;
}

.hero.is-portrait .hero-foot {
	left: 16px;
	right: 16px;
	justify-content: center;
}

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

	.topbar {
		transition: none;
	}

	.boss-flash.is-flashing {
		animation: none;
	}
}