/*
 * mcserverproject.com: Wer nach unten scrollt, gräbt sich durch die Welt. Oben Oberfläche mit Nachthimmel
 * (Landschaft per Canvas aus einem Seed, site.js), darunter Erde, Stein, Tiefenschiefer, Grundgestein.
 * Texturen in img/ sind selbst gezeichnet. Schrift: nur Monocraft (Nachbau der Minecraft-Schrift, SIL OFL).
 */
@font-face {
	font-family: 'Monocraft';
	src:
		local('Monocraft'),
		url('fonts/Monocraft.ttf') format('truetype');
	font-display: swap;
}

:root {
	color-scheme: dark;
	--font: 'Monocraft', ui-monospace, monospace;
	--night: #0b1026;
	--text: #f1eee8;
	--soft: #c9cce0;
	--grass: #6abf45;
	--grass-dark: #3f7d2a;
	--grass-light: #8bd965;
	--block: 32px;
	/* Ecken in Pixeln abgeschnitten, wie bei Pixel-Art üblich */
	--notch: polygon(
		4px 0,
		calc(100% - 4px) 0,
		100% 4px,
		100% calc(100% - 4px),
		calc(100% - 4px) 100%,
		4px 100%,
		0 calc(100% - 4px),
		0 4px
	);
}

* {
	box-sizing: border-box;
}

html {
	background: var(--night);
}

body {
	margin: 0;
	color: var(--text);
	font: 16px/1.6 var(--font);
	text-shadow: 2px 2px 0 rgb(0 0 0 / 0.45);
}

h1,
h2,
h3,
p,
ol,
ul,
dl,
dd {
	margin: 0;
}

h1,
h2,
h3 {
	font-weight: normal;
	line-height: 1.15;
	color: #fff;
}

a {
	color: inherit;
}

code {
	font-family: var(--font);
}

:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

[hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------- Kopf */

.top {
	position: absolute;
	inset: 0 0 auto;
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 24px;
	max-width: 72rem;
	margin: 0 auto;
	padding: 20px 16px;
}

.wordmark {
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
}
.wordmark span {
	color: var(--grass-light);
}

.top-links {
	display: flex;
	gap: 20px;
	margin-left: auto;
}
.top-links a {
	color: var(--soft);
	text-decoration: none;
}
.top-links a:hover {
	color: #fff;
}

.lang {
	display: flex;
}
.lang button {
	font: inherit;
	text-shadow: inherit;
	color: var(--soft);
	background: none;
	border: 0;
	padding: 4px 6px;
	cursor: pointer;
}
.lang button[aria-pressed='true'] {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 4px;
}

@media (max-width: 640px) {
	.top-links {
		display: none;
	}
	.lang {
		margin-left: auto;
	}
	.address {
		display: flex;
		flex-wrap: wrap;
	}
	.address code {
		font-size: 16px;
		white-space: nowrap;
	}
	.copy {
		flex: 1 0 auto;
		padding: 8px 16px;
	}
}

/* ---------------------------------------------------------------- Oberfläche */

.surface {
	position: relative;
	min-height: max(680px, 94svh);
	background: linear-gradient(#060a1c, #16204a 70%, #26325f);
	overflow: hidden;
}

.world {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	image-rendering: pixelated;
}

.surface-inner {
	position: relative;
	max-width: 72rem;
	margin: 0 auto;
	padding: 140px 16px 240px;
}

.kicker {
	color: var(--grass-light);
	font-size: 14px;
	letter-spacing: 0.08em;
}

h1 {
	margin-top: 16px;
	max-width: 18ch;
	font-size: clamp(32px, 6vw, 64px);
	text-shadow: 4px 4px 0 rgb(0 0 0 / 0.5);
}

.lead {
	margin-top: 20px;
	max-width: 44ch;
	color: var(--soft);
	font-size: 18px;
}

.address {
	margin-top: 32px;
	display: inline-flex;
	align-items: stretch;
	max-width: 100%;
	background: rgb(0 0 0 / 0.5);
	clip-path: var(--notch);
}
.address code {
	padding: 10px 16px;
	font-size: 20px;
	color: #fff;
	overflow-wrap: anywhere;
}
.copy {
	font: inherit;
	text-shadow: inherit;
	color: var(--text);
	background: rgb(255 255 255 / 0.12);
	border: 0;
	padding: 0 16px;
	cursor: pointer;
}
.copy:hover {
	background: rgb(255 255 255 / 0.22);
}

.live {
	margin-top: 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--soft);
}
.live-heads {
	display: flex;
}
.live-heads img {
	width: 24px;
	height: 24px;
	image-rendering: pixelated;
	outline: 2px solid var(--night);
}
.live-heads img + img {
	margin-left: -4px;
}
.live strong {
	color: var(--grass-light);
	font-weight: normal;
}
.live.offline strong {
	color: #ff6b5e;
}

.actions {
	margin-top: 32px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 8px 24px 12px;
	text-decoration: none;
	clip-path: var(--notch);
	transition: filter 120ms;
}
.btn:hover {
	filter: brightness(1.12);
}
.btn:active {
	transform: translateY(2px);
}
.btn-grass {
	color: #10200a;
	text-shadow: none;
	background: var(--grass);
	box-shadow:
		inset 0 4px 0 var(--grass-light),
		inset 0 -4px 0 var(--grass-dark);
}
.btn-outline {
	color: #fff;
	background: rgb(0 0 0 / 0.35);
	box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.55);
}

.seed {
	position: absolute;
	right: 16px;
	bottom: 12px;
	font-size: 12px;
	color: rgb(255 255 255 / 0.65);
}

/* ---------------------------------------------------------------- Schichten */

.layer {
	position: relative;
	image-rendering: pixelated;
	background-repeat: repeat;
	background-size: 512px 512px;
}
.dirt {
	background-image: linear-gradient(rgb(20 10 4 / 0.62), rgb(20 10 4 / 0.62)), url('img/dirt.png');
}
.stone {
	background-image: linear-gradient(rgb(0 0 0 / 0.58), rgb(0 0 0 / 0.58)), url('img/stone.png');
}
.deepslate {
	background-image: linear-gradient(rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.5)), url('img/deepslate.png');
}
.bedrock {
	background-image: linear-gradient(rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.55)), url('img/bedrock.png');
}

/* Übergang zur nächsten Schicht: Blockkante statt gerader Linie */
.stone::before,
.deepslate::before,
.bedrock::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: calc(-1 * var(--block));
	height: var(--block);
	background: inherit;
	background-position: 0 var(--block);
	clip-path: var(--edge);
}
.stone {
	--edge: polygon(0 100%, 0 0, 9% 0, 9% 100%, 21% 100%, 21% 0, 26% 0, 26% 100%, 47% 100%, 47% 0, 61% 0, 61% 100%, 78% 100%, 78% 0, 83% 0, 83% 100%, 100% 100%);
}
.deepslate {
	--edge: polygon(0 100%, 0 0, 4% 0, 4% 100%, 17% 100%, 17% 0, 33% 0, 33% 100%, 39% 100%, 39% 0, 52% 0, 52% 100%, 70% 100%, 70% 0, 91% 0, 91% 100%, 100% 100%);
}
.bedrock {
	--edge: polygon(0 100%, 0 0, 12% 0, 12% 100%, 15% 100%, 15% 0, 29% 0, 29% 100%, 44% 100%, 44% 0, 49% 0, 49% 100%, 66% 100%, 66% 0, 74% 0, 74% 100%, 95% 100%, 95% 0, 100% 0, 100% 100%);
}

.layer-inner {
	max-width: 72rem;
	margin: 0 auto;
	padding: 88px 16px 104px;
}

.depth {
	font-size: 14px;
	color: rgb(255 255 255 / 0.55);
}
.depth span:first-child {
	color: #fff;
	margin-right: 8px;
}

h2 {
	margin-top: 12px;
	font-size: clamp(28px, 4.5vw, 44px);
	text-shadow: 3px 3px 0 rgb(0 0 0 / 0.5);
}

.meta {
	margin-top: 12px;
	color: var(--soft);
}

.facts {
	margin-top: 40px;
	display: grid;
	gap: 32px 48px;
}
@media (min-width: 760px) {
	.facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.facts dt {
	color: var(--grass-light);
	font-size: 20px;
}
.facts dd {
	margin-top: 6px;
	color: #e8e2da;
	max-width: 46ch;
}

.heads {
	list-style: none;
	padding: 0;
	margin-top: 32px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 24px 16px;
}
.heads + .meta {
	margin-top: 32px;
}
.heads li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	font-size: 14px;
	overflow-wrap: anywhere;
}
.heads img {
	width: 64px;
	height: 64px;
	image-rendering: pixelated;
	box-shadow: 4px 4px 0 rgb(0 0 0 / 0.45);
}

.portals {
	margin-top: 40px;
	display: grid;
	gap: 16px;
}
@media (min-width: 860px) {
	.portals {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.portal {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 28px 24px;
	background: rgb(0 0 0 / 0.5);
	box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.12);
	clip-path: var(--notch);
}
.portal h3 {
	font-size: 24px;
}
.portal p,
.portal ol {
	color: #dedde6;
}
.portal ol {
	padding-left: 3ch;
	display: grid;
	gap: 8px;
}
.portal .btn {
	margin-top: auto;
	align-self: flex-start;
}
.addr {
	color: #fff;
	background: rgb(255 255 255 / 0.1);
	padding: 0 6px;
	overflow-wrap: anywhere;
}

.more {
	margin-top: 32px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
}
.more a {
	color: #8ff0e2;
	text-underline-offset: 4px;
}
.more a:hover {
	color: #fff;
}

.bottom {
	margin-top: 12px;
	font-size: clamp(22px, 3vw, 32px);
	color: #fff;
}
.fine {
	margin-top: 16px;
	font-size: 12px;
	color: rgb(255 255 255 / 0.6);
	max-width: 70ch;
}
.bedrock .layer-inner {
	padding-bottom: 64px;
}

/* F3-Anzeige: Höhe beim Scrollen */
.hud {
	position: fixed;
	left: 12px;
	bottom: 12px;
	z-index: 20;
	margin: 0;
	padding: 2px 6px;
	font-size: 14px;
	color: #e0e0e0;
	background: rgb(80 80 80 / 0.55);
	text-shadow: 2px 2px 0 #383838;
	pointer-events: none;
}
@media (max-width: 640px) {
	.hud {
		display: none;
	}
}