/* SkyMe website. Colours are SkyMe's own UI palette (ui/SkyMeUi.java): the game's inventory grey with a faint blue tint
   for panels, and the see-through blue HUD look for overlays. */

@font-face {
	font-family: "Monocraft";
	src: url("../fonts/monocraft-regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Monocraft";
	src: url("../fonts/monocraft-bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	/* one GUI pixel, like Minecraft's GUI scale */
	--s: 3px;

	/* SkyMe panel palette */
	--panel: #C4C7CC;
	--panel-raised: #D2D5DA;
	--bevel: #53565B;
	--hl: #FDFFFF;
	--slot: #898C91;
	--slot-shadow: #35383D;
	--hover: #DCE5F0;
	--ink: #2B2E34;
	--ink-muted: #474B52;
	--blue: #1B66A0;
	--blue-ink: #14507F;
	--pink: #B0405F;
	--pink-ink: #8A2B47;

	/* SkyMe HUD palette */
	--hud-bg: rgba(9, 21, 25, 0.5);
	--hud-bg-solid: rgba(9, 21, 25, 0.82);
	--hud-border: rgba(85, 205, 252, 0.38);
	--sky: #55CDFC;
	--sky-pink: #F7A8B8;
	--hud-text: #F0F4FA;
	--hud-muted: #A6AFBC;
	--good: #5BE38A;
	--warn: #FFC857;
	--bad: #FF5C6C;

	/* page */
	--night: #0E1322;
	--night-2: #121A2D;
	--night-3: #19233C;
	--text: #E9EEF6;
	--muted: #AEB8C6;

	--pixel: "Monocraft", ui-monospace, "Cascadia Mono", Consolas, monospace;
	--sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--wrap: 1180px;
}

@media (max-width: 720px) {
	:root { --s: 2px; }
}

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

[hidden] { display: none !important; }

html {
	scroll-behavior: smooth;
	scroll-padding-top: 76px;
	-webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

body {
	margin: 0;
	background-color: var(--night);
	background-image: url("../img/ui/stars.png");
	background-size: 192px 192px;
	image-rendering: auto;
	color: var(--text);
	font: 400 1.0625rem/1.6 var(--sans);
	overflow-x: hidden;
}

img { max-width: 100%; }
.pixelated, .hero-isle, .hero-badge img, .area-title img, .brand img, .footer-brand img { image-rendering: pixelated; }

a { color: var(--sky); text-underline-offset: 3px; }
a:hover { color: var(--sky-pink); }

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

code, kbd {
	font-family: var(--pixel);
	font-size: 0.85em;
	background: rgba(85, 205, 252, 0.12);
	border: 1px solid rgba(85, 205, 252, 0.3);
	padding: 0 0.3em;
	white-space: nowrap;
}

kbd { background: rgba(247, 168, 184, 0.12); border-color: rgba(247, 168, 184, 0.35); }

.px { font-family: var(--pixel); font-weight: 400; letter-spacing: 0; }

.c-sky { color: var(--sky); }
.c-pink { color: var(--sky-pink); }
.c-dgray { color: #6B7280; }
.c-gray { color: var(--hud-muted); }
.muted { color: var(--muted); }

.sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

.skip {
	position: absolute;
	left: 8px; top: -60px;
	z-index: 100;
	padding: 8px 14px;
	background: var(--panel);
	color: var(--ink);
	font-family: var(--pixel);
	text-decoration: none;
}
.skip:focus { top: 8px; }

.wrap {
	width: min(100% - 32px, var(--wrap));
	margin-inline: auto;
}

/* ---------------------------------------------------------------- pixel UI kit */

/* SkyMeUi.panel(): outline with cut corners, light top-left and dark bottom-right bevel */
.panel {
	position: relative;
	background: none;
	border: calc(5 * var(--s)) solid transparent;
	border-image: url("../img/ui/panel.png") 5 fill / calc(5 * var(--s)) stretch;
	image-rendering: pixelated;
	color: var(--ink);
	padding: calc(1 * var(--s)) calc(2 * var(--s));
}

.panel a { color: var(--blue-ink); }
.panel a:hover { color: var(--pink-ink); }
.panel code, .panel kbd { background: rgba(27, 102, 160, 0.1); border-color: rgba(27, 102, 160, 0.35); color: var(--ink); }
.panel :focus-visible { outline-color: var(--pink); }

/* SkyMeUi.control(): raised button */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 44px;
	padding: 0.35em 1em;
	border: calc(2 * var(--s)) solid transparent;
	border-image: url("../img/ui/control.png") 2 fill / calc(2 * var(--s)) stretch;
	image-rendering: pixelated;
	background: none;
	color: var(--ink);
	font: 400 18px/1.2 var(--pixel);
	text-decoration: none;
	cursor: pointer;
	user-select: none;
}

.btn:hover { border-image-source: url("../img/ui/control-hover.png"); color: var(--pink); }
.btn:active { transform: translateY(1px); }
.btn[aria-pressed="true"] { border-image-source: url("../img/ui/control-hover.png"); color: var(--blue-ink); }
.btn[disabled] { opacity: 0.55; cursor: default; }

.btn-primary { border-image-source: url("../img/ui/control-primary.png"); color: #fff; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35); }
.btn-primary:hover { border-image-source: url("../img/ui/control-primary-hover.png"); color: #fff; }

.btn-small { min-height: 36px; padding: 0.25em 0.75em; font-size: 13.5px; }
.btn-big { min-height: 54px; padding: 0.5em 1.4em; font-size: 18px; }

/* see-through HUD panel with a thin theme-blue edge */
.hud {
	background: var(--hud-bg);
	border: var(--s) solid var(--hud-border);
	color: var(--hud-text);
	font-family: var(--pixel);
}

/* checkbox / radio rows */
.check {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	min-height: 36px;
	cursor: pointer;
	font-family: var(--pixel);
	font-size: 0.875rem;
}

.check input {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	width: 20px; height: 20px;
	margin: 0;
	border: 2px solid transparent;
	border-image: url("../img/ui/field.png") 1 fill / 2px stretch;
	image-rendering: pixelated;
	display: grid;
	place-content: center;
	cursor: pointer;
}

.check input[type="radio"] { border-radius: 0; }
.check input::after {
	content: "";
	width: 10px; height: 10px;
	background: var(--blue);
	transform: scale(0);
}
.check input:checked::after { transform: scale(1); }
.check input:focus-visible { outline: 3px solid var(--sky-pink); outline-offset: 2px; }
.check small { color: inherit; opacity: 0.8; font-family: var(--sans); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
	min-height: 34px;
	padding: 0.2em 0.75em;
	border: calc(1 * var(--s)) solid var(--bevel);
	background: var(--panel-raised);
	color: var(--ink);
	font: 400 0.8125rem/1.2 var(--pixel);
	cursor: pointer;
	box-shadow: inset 2px 2px 0 var(--hl), inset -2px -2px 0 #9A9DA4;
}
.chip:hover { border-color: var(--blue); color: var(--pink-ink); background: var(--hover); }
.chip[aria-pressed="true"] {
	background: var(--blue);
	border-color: #0E3A5C;
	color: #fff;
	box-shadow: inset 2px 2px 0 #5B9BD0, inset -2px -2px 0 #124770;
}

.field { display: grid; gap: 4px; font-size: 0.8125rem; }
.field input {
	min-height: 40px;
	padding: 0.35em 0.7em;
	border: 2px solid transparent;
	border-image: url("../img/ui/inset-dark.png") 1 fill / 2px stretch;
	image-rendering: pixelated;
	background: none;
	color: var(--hud-text);
	font: 400 0.9375rem/1.2 var(--pixel);
	width: 100%;
}
.field input::placeholder { color: #8D96A3; }

.range { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--pixel); font-size: 0.8125rem; }
.range input { accent-color: var(--blue); width: 130px; }
.range output { min-width: 4ch; }

.seg { display: inline-flex; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span {
	display: inline-block;
	padding: 0.4em 0.8em;
	min-height: 36px;
	border: 2px solid var(--bevel);
	background: var(--panel-raised);
	font: 400 0.8125rem/1.6 var(--pixel);
	color: var(--ink);
	box-shadow: inset 2px 2px 0 var(--hl), inset -2px -2px 0 #9A9DA4;
}
.seg label + label span { border-left: 0; }
.seg input:checked + span { background: var(--blue); color: #fff; box-shadow: inset 2px 2px 0 #5B9BD0, inset -2px -2px 0 #124770; }
.seg input:focus-visible + span { outline: 3px solid var(--sky-pink); outline-offset: 2px; position: relative; z-index: 1; }

/* ---------------------------------------------------------------- top bar */

.topbar {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(9, 15, 24, 0.86);
	border-bottom: 2px solid rgba(85, 205, 252, 0.3);
	backdrop-filter: blur(6px);
}

.topbar-inner {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 60px;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}

.brand-name { font: 400 27px/1 var(--pixel); }

.nav { margin-left: auto; }

.nav-list {
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-list a {
	display: inline-block;
	padding: 10px 10px;
	color: var(--text);
	font: 400 18px/1 var(--pixel);
	text-decoration: none;
}
.nav-list a:hover { color: var(--sky); }

.nav-toggle { display: none; }

@media (max-width: 1080px) {
	.nav-toggle { display: inline-flex; }
	.nav-list {
		display: none;
		position: absolute;
		left: 0; right: 0; top: 100%;
		flex-direction: column;
		padding: 8px 16px 16px;
		background: rgba(9, 15, 24, 0.97);
		border-bottom: 2px solid rgba(85, 205, 252, 0.3);
	}
	.nav-list.open { display: flex; }
	.nav-list a { padding: 12px 4px; width: 100%; }
	.topbar-dl { display: none; }
}

/* ---------------------------------------------------------------- hero */

.hero {
	position: relative;
	overflow: hidden;
	--k: 4;
	background:
		url("../img/warpmap/background.png") center bottom / calc(384px * var(--k)) calc(216px * var(--k)) repeat-x,
		url("../img/ui/stars.png") 0 0 / 192px 192px,
		#10172E;
	image-rendering: pixelated;
	padding: 72px 0 56px;
	isolation: isolate;
}

@media (max-width: 1100px) { .hero { --k: 3; } }
@media (max-width: 720px) { .hero { --k: 2.5; padding-top: 40px; } }

.hero::after {
	/* soften the horizon so text keeps its contrast */
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(10, 14, 32, 0.72) 0%, rgba(10, 14, 32, 0.35) 55%, rgba(10, 14, 32, 0) 80%);
	pointer-events: none;
}

.hero-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.hero-clouds {
	position: absolute;
	inset: 0;
	background: url("../img/warpmap/clouds.png") 0 bottom / calc(384px * var(--k)) calc(216px * var(--k)) repeat-x;
	image-rendering: pixelated;
	animation: clouds 160s linear infinite;
	opacity: 0.9;
}

@keyframes clouds {
	from { background-position-x: 0; }
	to { background-position-x: calc(384px * var(--k)); }
}

.hero-isle { position: absolute; width: auto; opacity: 0.9; animation: bob 7s ease-in-out infinite; }
.isle-a { height: calc(65px * 2); right: 6%; top: 8%; animation-delay: -2s; }
.isle-b { height: calc(64px * 2); right: 30%; top: 64%; opacity: 0.55; animation-delay: -4s; }
.isle-c { height: calc(52px * 2); left: 52%; top: 4%; opacity: 0.5; animation-delay: -1s; }
.isle-d { height: calc(55px * 2); right: 2%; top: 60%; opacity: 0.7; animation-delay: -5s; }

@keyframes bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

.hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
	gap: 40px;
	align-items: center;
}

.chatline {
	display: inline-block;
	margin: 0 0 18px;
	padding: 4px 10px;
	background: rgba(0, 0, 0, 0.45);
	font: 400 18px/1.4 var(--pixel);
}

.hero h1 {
	margin: 0 0 20px;
	font-size: 63px;
	line-height: 1.12;
	color: #fff;
	text-shadow: 0.0625em 0.0625em 0 #2A2350;
}

@media (max-width: 1100px) { .hero h1 { font-size: 54px; } }
@media (max-width: 720px) { .hero h1 { font-size: 36px; } .chatline { font-size: 13.5px; } }

.lead {
	max-width: 36em;
	margin: 0 0 28px;
	font-size: 1.1875rem;
	color: #E3E8F2;
}
.lead strong { color: #fff; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }

.hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font: 400 0.8125rem/1 var(--pixel);
}
.hero-meta li {
	padding: 6px 8px;
	background: var(--hud-bg-solid);
	border: 2px solid var(--hud-border);
	color: var(--hud-text);
}

.hero-art { position: relative; display: grid; place-items: center; min-height: 340px; }

.hero-badge {
	animation: bob 6s ease-in-out infinite;
	filter: drop-shadow(0 18px 0 rgba(10, 12, 30, 0.35));
}
.hero-badge img { width: 256px; height: 256px; display: block; }

.hero-hud {
	position: absolute;
	right: -8px;
	bottom: -36px;
	padding: 8px 12px 6px;
	background: var(--hud-bg-solid);
	font-size: 0.875rem;
	line-height: 1.55;
}
.hero-hud p { margin: 0; }
.hero-hud .hud-title { color: var(--sky); border-bottom: 2px solid var(--hud-border); margin-bottom: 4px; padding-bottom: 2px; }

.facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin: 48px 0 0;
	padding: 0;
	list-style: none;
}

.fact {
	display: grid;
	gap: 4px;
	padding: 12px 14px;
	background: var(--hud-bg-solid);
	border: 2px solid var(--hud-border);
	color: var(--hud-muted);
	font-size: 0.9375rem;
	line-height: 1.4;
}
.fact-big { color: #fff; font-size: 27px; line-height: 1.2; }

@media (max-width: 900px) {
	.hero-inner { grid-template-columns: 1fr; }
	.hero-art { min-height: 0; justify-items: start; grid-template-columns: auto auto; gap: 20px; align-items: end; }
	.hero-badge img { width: 128px; height: 128px; }
	.hero-hud { position: static; }
	.facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hero::after { background: rgba(10, 14, 32, 0.5); }
}

@media (max-width: 480px) {
	.hero-art { display: none; }
	.fact-big { font-size: 18px; }
	.isle-a, .isle-d { display: none; }
}

/* ---------------------------------------------------------------- sections */

.section { padding: 88px 0; position: relative; }
.section-dark { background-color: rgba(4, 8, 16, 0.55); border-block: 2px solid rgba(85, 205, 252, 0.14); }

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

.eyebrow {
	display: inline-block;
	margin: 0 0 10px;
	padding: 3px 8px;
	background: rgba(85, 205, 252, 0.12);
	border: 2px solid rgba(85, 205, 252, 0.35);
	color: var(--sky);
	font-size: 13.5px;
}

.section h2 {
	margin: 0 0 14px;
	font-size: 45px;
	line-height: 1.15;
	color: #fff;
	text-shadow: 0.0625em 0.0625em 0 #252B44;
}

.section-lead { margin: 0; color: var(--muted); font-size: 1.125rem; }

@media (max-width: 720px) {
	.section { padding: 64px 0; }
	.section h2 { font-size: 27px; }
}

/* ---------------------------------------------------------------- demos */

.demo {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: 40px;
	align-items: center;
	padding: 40px 0;
	border-top: 2px dashed rgba(85, 205, 252, 0.16);
}
.demo:first-of-type { border-top: 0; padding-top: 0; }
.demo-flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.demo-flip .demo-text { order: 2; }

.demo-wide { grid-template-columns: 1fr; gap: 24px; }
.demo-wide .demo-text {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 48px;
	align-items: start;
}
.demo-wide .demo-text h3 { grid-column: 1 / -1; }
.demo-wide .demo-text > p { grid-column: 1; }
.demo-wide .demo-text .demo-path { justify-self: start; }
.demo-wide .demo-text ul { grid-column: 2; grid-row: 2 / span 3; }

.demo h3 {
	margin: 0 0 12px;
	font-size: 27px;
	line-height: 1.2;
	color: var(--sky);
}

.demo-text p { margin: 0 0 14px; }

.ticks, .crosses { margin: 0 0 16px; padding: 0; list-style: none; }
.ticks li, .crosses li { position: relative; padding-left: 1.6em; margin-bottom: 8px; }
.ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--sky); font-family: var(--pixel); }
.crosses li::before { content: "✗"; position: absolute; left: 0; color: var(--pink); font-family: var(--pixel); }

.demo-path {
	display: inline-block;
	padding: 6px 10px;
	background: rgba(0, 0, 0, 0.4);
	font: 400 0.8125rem/1.5 var(--pixel);
	color: var(--hud-muted);
}
.demo-path span { color: var(--sky); }

.demo-note { font-size: 0.9375rem; color: var(--muted); }

.demo-stage { min-width: 0; }

@media (max-width: 960px) {
	.demo, .demo-flip { grid-template-columns: 1fr; gap: 24px; }
	.demo-flip .demo-text { order: 0; }
	.demo-wide .demo-text { display: block; }
}

/* the dark "game screen" behind demos */
.screen-bg {
	background: linear-gradient(180deg, #0C0E12 0%, #080A0D 100%);
}

/* ---------- warp map */

.warp {
	padding: 14px;
	background: linear-gradient(180deg, rgba(12, 14, 18, 0.95), rgba(8, 10, 13, 0.97));
	border: 2px solid #22283A;
}

.warp-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
	margin-bottom: 8px;
}
.warp-title { color: var(--hud-text); font-size: 18px; text-shadow: 2px 2px 0 #3B3F4A; }
.warp-hint { color: var(--hud-muted); font: 400 0.8125rem/1.3 var(--pixel); }

.warp-frame {
	position: relative;
	/* SkyMe frames the map with the panel colour and a blue top edge */
	border: calc(1 * var(--s)) solid var(--panel);
	border-top-color: var(--blue);
	box-shadow: calc(3 * var(--s)) calc(3 * var(--s)) 0 rgba(0, 0, 0, 0.25);
	line-height: 0;
}

.warp-canvas {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 384 / 216;
	image-rendering: pixelated;
	cursor: default;
}
.warp-canvas.pointer { cursor: pointer; }

.warp-spots { position: absolute; inset: 0; pointer-events: none; }
.warp-spot {
	position: absolute;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	pointer-events: none;
	color: transparent;
}
.warp-spot:focus-visible { outline: 3px solid var(--sky-pink); outline-offset: 0; }

.warp-card {
	position: absolute;
	z-index: 3;
	min-width: 12em;
	line-height: 1.3;
	font-family: var(--pixel);
	font-size: 0.8125rem;
	padding: 0 0 4px;
}
.warp-card.panel { border-image-source: url("../img/ui/panel-accent.png"); padding: 0 2px 4px; }
.warp-card.locked { border-image-source: url("../img/ui/panel.png"); }
.warp-card-title {
	margin: 0 0 4px;
	padding: 2px 6px 5px;
	color: var(--ink);
	font-size: 0.9375rem;
	background: linear-gradient(90deg, transparent, var(--blue) 25%, var(--blue) 75%, transparent) bottom / 100% 2px no-repeat;
}
.warp-card.locked .warp-card-title { color: var(--ink-muted); }
.warp-card-status { margin: 0 0 4px; padding: 0 6px; }
.warp-card-status.bad { color: #9C1F28; }
.warp-card-status.warn { color: #7A4F00; }
.warp-rows { margin: 0; padding: 0; list-style: none; }
.warp-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	min-height: 28px;
	padding: 3px 6px 3px 8px;
	border: 0;
	border-left: 2px solid transparent;
	background: none;
	color: var(--ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.warp-row .cmd { color: var(--ink-muted); }
.warp-row.primary { background: var(--hover); border-left-color: var(--blue); color: var(--blue-ink); }
.warp-row:hover, .warp-row:focus-visible { background: var(--hover); border-left-color: var(--pink); color: var(--pink-ink); outline: none; }
.warp-row:focus-visible { box-shadow: inset 0 0 0 2px var(--pink); }
.warp-row[aria-disabled="true"] { color: var(--ink-muted); cursor: not-allowed; }
.warp-row[aria-disabled="true"] .cmd { color: #9C1F28; }

.warp-status {
	margin: 10px 0 0;
	min-height: 1.4em;
	color: var(--hud-muted);
	font-size: 0.875rem;
}
.warp-status b { color: var(--sky); font-weight: 400; }

.warp.compact .warp-card {
	position: static;
	margin-top: 10px;
	width: 100%;
}

/* ---------- HUD editor */

.hudedit-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin-bottom: 10px;
}
.hud-snap-toggle { color: var(--hud-text); }
.hud-count { margin-left: auto; color: var(--hud-muted); font-size: 0.8125rem; }

.hud-filter {
	display: grid;
	gap: 10px;
	margin-bottom: 10px;
}
.hud-filter fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.hud-filter legend { float: left; width: 4.2em; padding: 0; font-size: 0.8125rem; color: var(--ink-muted); margin-right: 6px; }
.hud-filter .chips { flex: 1; }
.hud-filter .field span { color: var(--ink-muted); }
.hud-filter .hud-clear { justify-self: start; }

.hud-screen {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #10131C url("../img/warpmap/background.png") center / cover;
	image-rendering: pixelated;
	border: 2px solid #22283A;
	touch-action: none;
}
.hud-screen::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(4, 6, 12, 0.55);
}

.hud-stage {
	position: absolute;
	left: 0; top: 0;
	width: 480px; height: 270px;
	transform-origin: 0 0;
	font-family: var(--pixel);
	font-size: 9px;
	line-height: 11px;
	color: var(--hud-text);
	image-rendering: auto;
}

.hud-editor-title, .hud-editor-help {
	position: absolute;
	left: 0; right: 0;
	margin: 0;
	text-align: center;
	pointer-events: none;
}
.hud-editor-title { top: 4px; color: #fff; text-shadow: 1px 1px 0 #3F3F3F; }
.hud-editor-help { top: 16px; color: var(--hud-muted); font-size: 6.75px; line-height: 8px; }

.hud-guides { position: absolute; inset: 0; pointer-events: none; }
.hud-guide { position: absolute; background: var(--sky-pink); opacity: 0.9; }
.hud-guide.v { top: 0; bottom: 0; width: 1px; }
.hud-guide.h { left: 0; right: 0; height: 1px; }

.hud-hotbar {
	position: absolute;
	left: 50%;
	bottom: 2px;
	transform: translateX(-50%);
	display: flex;
	pointer-events: none;
	opacity: 0.8;
}
.hud-hotbar span {
	width: 20px; height: 20px;
	background: rgba(0, 0, 0, 0.45);
	border: 1px solid rgba(255, 255, 255, 0.18);
	margin-left: -1px;
}
.hud-hotbar span.sel { border-color: #fff; z-index: 1; }

.hud-el {
	position: absolute;
	transform-origin: 0 0;
	padding: 3px 4px 2px;
	background: var(--hud-bg);
	border: 1px solid var(--hud-border);
	white-space: nowrap;
	cursor: grab;
	user-select: none;
	touch-action: none;
}
.hud-el p { margin: 0; }
.hud-el .t { color: var(--sky); }
.hud-el .m { color: var(--hud-muted); }
.hud-el .g { color: var(--good); }
.hud-el .w { color: var(--warn); }
.hud-el .b { color: var(--bad); }
.hud-el .p { color: var(--sky-pink); }
.hud-el:hover { outline: 1px solid rgba(255, 255, 255, 0.7); }
.hud-el.dragging { cursor: grabbing; outline: 1px solid #fff; z-index: 5; }
.hud-el.selected { outline: 1px solid var(--sky-pink); }
.hud-el:focus-visible { outline: 1px solid var(--sky-pink); box-shadow: 0 0 0 1px var(--sky-pink); }
.hud-el.alert {
	background: transparent;
	border-color: transparent;
	font-size: 18px;
	line-height: 20px;
	color: var(--sky);
	text-shadow: 2px 2px 0 #0C3A4D;
	padding: 2px 4px;
}
.hud-el.alert:hover { border-color: rgba(85, 205, 252, 0.4); }
.hud-el canvas { display: block; image-rendering: pixelated; }

.hud-empty {
	position: absolute;
	left: 0; right: 0; top: 50%;
	margin: 0;
	text-align: center;
	color: var(--hud-muted);
}

.hud-touch {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
}
.hud-selected { color: var(--hud-muted); font-size: 0.8125rem; margin-right: auto; }

/* ---------- items + tooltips */

.items-screen {
	position: relative;
	height: 460px;
	overflow: hidden;
	background: linear-gradient(180deg, #11141B, #0A0C10);
	border: 2px solid #22283A;
	padding: 24px;
	display: grid;
	align-items: center;
}

.items-inv { width: max-content; max-width: 100%; justify-self: start; }

.inv-title { margin: 0 0 6px; color: var(--ink); font-size: 0.9375rem; }

.inv-grid {
	display: grid;
	grid-template-columns: repeat(3, calc(18 * var(--s)));
	gap: 0;
}

.slot {
	position: relative;
	width: calc(18 * var(--s));
	height: calc(18 * var(--s));
	padding: 0;
	border: var(--s) solid transparent;
	border-image: url("../img/ui/slot.png") 1 fill / var(--s) stretch;
	image-rendering: pixelated;
	background: none;
	cursor: default;
	display: grid;
	place-items: center;
}
.slot canvas, .slot img { width: calc(16 * var(--s)); height: calc(16 * var(--s)); image-rendering: pixelated; position: relative; z-index: 1; }
.slot .bg { position: absolute; inset: 0; z-index: 0; }
.slot .bg.circle { inset: calc(1 * var(--s)); border-radius: 50%; }
.slot:hover::after, .slot:focus-visible::after, .slot.hovered::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.45);
	z-index: 2;
}
.slot:focus-visible { outline: 3px solid var(--sky-pink); outline-offset: 1px; z-index: 3; }
.slot .count {
	position: absolute;
	right: 1px; bottom: -1px;
	z-index: 3;
	color: #fff;
	font: 400 calc(8 * var(--s)) / 1 var(--pixel);
	text-shadow: var(--s) var(--s) 0 #3F3F3F;
	pointer-events: none;
}

.tooltip-layer { position: absolute; inset: 0; pointer-events: none; z-index: 10; }

.mc-tooltip {
	position: absolute;
	left: 0; top: 0;
	padding: 5px 7px 6px;
	background: rgba(16, 0, 16, 0.94);
	border: 2px solid;
	border-image: linear-gradient(180deg, rgba(80, 0, 255, 0.55), rgba(40, 0, 127, 0.55)) 1;
	outline: 2px solid rgba(16, 0, 16, 0.94);
	color: #AAAAAA;
	font: 400 18px/20px var(--pixel);
	white-space: pre;
	will-change: transform;
	text-shadow: 2px 2px 0 rgba(30, 30, 30, 0.9);
}
.mc-tooltip p { margin: 0; min-height: 20px; }
.mc-tooltip .first { margin-bottom: 4px; }

/* Minecraft chat colour codes */
.f0 { color: #000000; } .f1 { color: #0000AA; } .f2 { color: #00AA00; } .f3 { color: #00AAAA; }
.f4 { color: #AA0000; } .f5 { color: #AA00AA; } .f6 { color: #FFAA00; } .f7 { color: #AAAAAA; }
.f8 { color: #555555; } .f9 { color: #5555FF; } .fa { color: #55FF55; } .fb { color: #55FFFF; }
.fc { color: #FF5555; } .fd { color: #FF55FF; } .fe { color: #FFFF55; } .ff { color: #FFFFFF; }
.fl { font-weight: 700; }
.fsky { color: var(--sky); } .fpink { color: var(--sky-pink); }

.items-controls, .items-touch, .seq-controls, .bars-controls, .chat-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin-top: 12px;
}
.items-controls .check, .seq-controls .check, .bars-controls .check { color: var(--hud-text); }
.items-touch { gap: 8px; }

@media (max-width: 720px) {
	.items-screen { height: 440px; padding: 10px; align-items: start; }
	.inv-grid { grid-template-columns: repeat(5, calc(18 * var(--s))); }
	.mc-tooltip { font-size: 13.5px; line-height: 15px; padding: 4px 5px 5px; }
	.mc-tooltip p { min-height: 15px; }
}

/* ---------- chat */

.chat-screen {
	position: relative;
	height: 340px;
	overflow: hidden;
	background: linear-gradient(180deg, #1A2340 0%, #2D2A55 70%, #503E6E 100%);
	border: 2px solid #22283A;
	display: flex;
	align-items: flex-end;
	padding: 12px;
}

.chat-log {
	width: 100%;
	max-height: 100%;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	background: rgba(0, 0, 0, 0.5);
	font: 400 18px/22px var(--pixel);
	color: #fff;
	text-shadow: 2px 2px 0 #3F3F3F;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.chat-log li {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	padding: 1px 8px;
	white-space: normal;
	overflow-wrap: anywhere;
	animation: chat-in 160ms ease-out;
}
.chat-log li .head { flex: none; width: 18px; height: 18px; margin-top: 2px; image-rendering: pixelated; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35); }
.chat-log li.flash { background: rgba(247, 168, 184, 0.18); }

@keyframes chat-in {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: none; }
}

.chat-ping {
	position: absolute;
	top: 12px; right: 12px;
	padding: 4px 8px;
	background: var(--hud-bg-solid);
	border: 2px solid var(--hud-border);
	color: var(--sky-pink);
	font: 400 0.875rem/1 var(--pixel);
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.2s, transform 0.2s;
}
.chat-ping.show { opacity: 1; transform: none; }

.clipboard {
	margin-top: 12px;
	padding: 10px 12px;
	background: rgba(0, 0, 0, 0.35);
	border: 2px dashed rgba(85, 205, 252, 0.35);
}
.clipboard-label { margin: 0 0 4px; color: var(--sky); font-size: 0.8125rem; }
.clipboard-text { margin: 0; font: 400 0.9375rem/1.4 var(--pixel); color: var(--hud-muted); overflow-wrap: anywhere; }
.clipboard-text.full { color: #fff; }

@media (max-width: 720px) {
	.chat-log { font-size: 13.5px; line-height: 17px; }
	.chat-log li .head { width: 14px; height: 14px; margin-top: 1px; }
	.chat-screen { height: 280px; padding: 8px; }
}

/* ---------- ultrasequencer */

.seq-panel { width: max-content; max-width: 100%; }
.seq-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.seq-round { margin: 0; color: var(--ink-muted); font-size: 0.8125rem; }

.seq-grid {
	display: grid;
	grid-template-columns: repeat(9, calc(18 * var(--s)));
}
.seq-grid .slot { cursor: pointer; }
.seq-grid .slot.border { cursor: default; }
.seq-grid .slot[disabled], .seq-grid .slot[aria-disabled="true"] { cursor: default; }

.seq-num {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: grid;
	place-items: center;
	color: #fff;
	font: 400 calc(8 * var(--s)) / 1 var(--pixel);
	text-shadow: var(--s) var(--s) 0 #3F3F3F;
	pointer-events: none;
}
.seq-hl {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: rgba(0, 255, 0, 0.33);
	box-shadow: inset 0 0 0 var(--s) #00FF00;
	pointer-events: none;
}
.seq-hl.wrong { background: rgba(255, 60, 60, 0.38); box-shadow: inset 0 0 0 var(--s) #FF3C3C; }

.seq-msg { margin: 10px 0 0; min-height: 3em; color: var(--muted); font-size: 0.9375rem; }
.seq-msg b { color: var(--sky); font-weight: 400; font-family: var(--pixel); }

/* ---------- fancy bars */

.bars-screen {
	position: relative;
	height: 260px;
	overflow: hidden;
	background: #10131C url("../img/warpmap/background.png") center 70% / cover;
	image-rendering: pixelated;
	border: 2px solid #22283A;
}
.bars-screen::before { content: ""; position: absolute; inset: 0; background: rgba(4, 6, 12, 0.45); }

.bars-actionbar {
	position: absolute;
	left: 0; right: 0;
	bottom: 128px;
	margin: 0;
	text-align: center;
	font: 400 18px/1 var(--pixel);
	text-shadow: 2px 2px 0 #3F3F3F;
	white-space: nowrap;
}

.bars-rows {
	position: absolute;
	left: 50%;
	bottom: 58px;
	transform: translateX(-50%);
	width: 372px;
	display: grid;
	gap: 8px;
}

.bars-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bars-row.single { grid-template-columns: 1fr; }

.bar {
	position: relative;
	display: flex;
	align-items: center;
	gap: 5px;
	height: 18px;
}
.bar-icon { flex: none; width: 18px; height: 18px; image-rendering: pixelated; }
.bar-track {
	position: relative;
	flex: 1;
	height: 14px;
	background: #1E1F24;
	box-shadow: 0 0 0 2px #000;
	overflow: hidden;
}
.bar-fill, .bar-over { position: absolute; top: 0; bottom: 0; left: 0; transition: width 0.35s ease-out; }
.bar-over { opacity: 0.95; }
.bar-text {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 400 13.5px/1 var(--pixel);
	color: #fff;
	text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 2px 2px 0 #000;
	white-space: nowrap;
}

.bars-side {
	position: absolute;
	left: calc(50% + 190px);
	bottom: 12px;
	display: grid;
	gap: 6px;
	width: 92px;
}

.bars-hotbar {
	position: absolute;
	left: 50%;
	bottom: 8px;
	transform: translateX(-50%);
	display: flex;
}
.bars-hotbar span {
	width: 40px; height: 40px;
	background: rgba(0, 0, 0, 0.5);
	border: 2px solid rgba(255, 255, 255, 0.2);
	margin-left: -2px;
}
.bars-hotbar span.sel { border-color: #fff; position: relative; z-index: 1; }

.bars-screen.off .bars-rows, .bars-screen.off .bars-side { display: none; }

@media (max-width: 720px) {
	.bars-screen { height: 230px; }
	.bars-hotbar span { width: 30px; height: 30px; }
	.bars-rows { width: 300px; bottom: 46px; gap: 6px; }
	.bars-actionbar { font-size: 11px; bottom: 108px; }
	.bars-side { left: auto; right: 8px; bottom: auto; top: 10px; }
	.bar-text { font-size: 11px; }
}

/* ---------------------------------------------------------------- feature catalogue */

.catalog-tools {
	display: grid;
	gap: 12px;
	margin-bottom: 28px;
}
.catalog-search { max-width: 420px; }
.catalog-search span { color: var(--ink-muted); }
.catalog-count { margin: 0; font-size: 0.8125rem; color: var(--ink-muted); }

@media (max-width: 720px) {
	.catalog-areas { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
	.catalog-areas .chip { flex: none; }
}

.area { margin-bottom: 36px; }
.area[hidden] { display: none; }

.area-title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
	font-size: 27px;
	color: #fff;
}
.area-title img { width: 40px; height: 40px; }

.feats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.feat {
	display: flex;
	flex-direction: column;
	padding: 12px 14px;
	background: var(--hud-bg-solid);
	border: 2px solid var(--hud-border);
}
.feat[hidden] { display: none; }
.feat h4 { margin: 0 0 6px; font: 400 18px/1.3 var(--pixel); color: var(--sky); }
.feat p { margin: 0 0 10px; font-size: 0.9375rem; line-height: 1.5; color: #D6DDE8; }
.feat .src {
	margin-top: auto;
	align-self: flex-start;
	padding: 2px 6px;
	background: rgba(247, 168, 184, 0.1);
	border: 1px solid rgba(247, 168, 184, 0.3);
	color: var(--sky-pink);
	font: 400 0.75rem/1.4 var(--pixel);
}
.feat mark { background: rgba(247, 168, 184, 0.35); color: #fff; }

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

/* ---------------------------------------------------------------- fair play */

.fair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fair-card h3 { margin: 6px 0 12px; font-size: 1.25rem; color: var(--ink); }
.fair-card h3 + p, .fair-card p { margin: 0 0 14px; }
.fair-card .crosses li::before { color: var(--pink); }
.fair-card .crosses li { margin-bottom: 10px; }
.fair-foot { max-width: 760px; margin: 24px 0 0; color: var(--muted); font-size: 0.9375rem; }

@media (max-width: 860px) { .fair-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- install */

.steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}
.step { padding-top: 6px; }
.step h3 { margin: 4px 0 8px; font-size: 1.0625rem; color: var(--ink); }
.step p { margin: 0 0 6px; font-size: 0.9375rem; line-height: 1.55; }
.step-n {
	display: inline-grid;
	place-items: center;
	width: 36px; height: 36px;
	background: var(--blue);
	color: #fff;
	font-size: 1.125rem;
	box-shadow: inset 2px 2px 0 #5B9BD0, inset -2px -2px 0 #124770;
}
.install-cta { margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- faq */

.faq-list { display: grid; gap: 12px; max-width: 860px; }
.qa summary {
	cursor: pointer;
	padding: 6px 4px;
	font-size: 1rem;
	color: var(--ink);
	list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::before { content: "+ "; color: var(--blue); }
.qa[open] summary::before { content: "− "; }
.qa p { margin: 4px 4px 10px; }

/* ---------------------------------------------------------------- thanks + footer */

.thanks { padding: 40px 0 48px; }
.thanks-title { font-size: 1.125rem !important; color: var(--muted) !important; text-shadow: none !important; margin-bottom: 8px !important; }
.thanks-text { max-width: 900px; margin: 0; font-size: 0.875rem; line-height: 1.75; color: var(--muted); }
.thanks-text a { color: #C7D3E3; }
.thanks-text a:hover { color: var(--sky); }

.footer {
	position: relative;
	padding: 120px 0 28px;
	background: #2A2E5A url("../img/warpmap/background.png") center bottom / calc(384px * 4) calc(216px * 4) repeat-x;
	image-rendering: pixelated;
	color: #2B2340;
}
.footer::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, var(--night) 0%, rgba(14, 19, 34, 0) 45%);
	pointer-events: none;
}
.footer-inner {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 14px 32px;
	align-items: center;
	padding: 18px 20px;
	background: rgba(9, 15, 24, 0.86);
	border: 2px solid var(--hud-border);
	color: var(--hud-text);
}
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand p { margin: 0; font-size: 0.875rem; color: var(--hud-muted); line-height: 1.5; }
.footer-brand .px { font-size: 1rem; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 18px; margin: 0; padding: 0; list-style: none; font-family: var(--pixel); }
.footer-links a { display: inline-block; padding: 8px 0; color: var(--hud-text); text-decoration: none; }
.footer-links a:hover { color: var(--sky); }
.footer-legal { grid-column: 1 / -1; margin: 0; font-size: 0.8125rem; color: var(--hud-muted); }

@media (max-width: 720px) {
	.footer { background-size: calc(384px * 2.5) calc(216px * 2.5); padding-top: 72px; }
	.footer-inner { grid-template-columns: 1fr; }
	.footer-links { justify-content: flex-start; }
}

/* ---------------------------------------------------------------- 404 */

.notfound { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 60px 16px; }
.notfound .panel { max-width: 520px; }
.notfound h1 { margin: 6px 0 10px; font-size: 1.75rem; }