/* Palette, type and browser surfaces: the colours of the mod's own in-game screens. */

@font-face {
	font-family: "Monocraft";
	src: url("../assets/fonts/monocraft.woff2") format("woff2");
	font-display: swap;
}

:root {
	--ground: #0b0b0b;
	--panel: rgb(16 16 16 / 0.86);
	--panel-solid: #101010;
	--panel-raised: #1a1a1a;
	--line: #2a2a2a;
	--text: #e5e5e5;
	--muted: #9ca3af;
	--white: #ffffff;
	--green: #1ad76f;
	--green-deep: #0e3d22;
	--warn: #fbbf24;

	--pixel: "Monocraft", ui-monospace, monospace;
	--sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--gap: 1.25rem;
	--radius: 0;
	--page: 72rem;
	color-scheme: dark;
}

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: 5rem;
	scrollbar-color: #3a3a3a var(--ground);
}

body {
	margin: 0;
	min-height: 100vh;
	background: var(--ground);
	color: var(--text);
	font: 1rem/1.6 var(--sans);
	-webkit-text-size-adjust: 100%;
}

/* The blurred world behind every in-game screen. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(rgb(11 11 11 / 0.55), rgb(11 11 11 / 0.82) 60%, var(--ground)),
		url("../assets/img/backdrop.webp") center / cover no-repeat;
}

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

.pixel {
	image-rendering: pixelated;
}

h1,
h2,
h3 {
	font-family: var(--pixel);
	font-weight: 400;
	line-height: 1.25;
	margin: 0;
	text-wrap: balance;
	letter-spacing: 0;
}

p {
	margin: 0;
}

a {
	color: var(--green);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

a:hover {
	color: var(--white);
}

code,
kbd {
	font-family: var(--pixel);
	font-size: 0.875em;
	background: var(--panel-raised);
	border: 1px solid var(--line);
	padding: 0.05em 0.4em;
	color: var(--white);
}

kbd {
	box-shadow: inset 0 -2px 0 #000;
}

::selection {
	background: var(--green);
	color: #04170c;
}

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

input,
textarea {
	caret-color: var(--green);
}

::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}

::-webkit-scrollbar-track {
	background: var(--ground);
}

::-webkit-scrollbar-thumb {
	background: #3a3a3a;
	border: 3px solid var(--ground);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip {
	position: absolute;
	left: 1rem;
	top: -3rem;
	z-index: 10;
	padding: 0.5rem 1rem;
	background: var(--panel-solid);
	font-family: var(--pixel);
}

.skip:focus {
	top: 1rem;
}

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

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}