@font-face {
	font-family: "Nexa Rust Sans";
	src: url("/fonts/Nexa-Rust-Sans-Black.woff2") format("woff2");
	font-style: normal;
	font-weight: 900;
	font-display: swap;
}

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

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	color: #fff;
	font-family: "Minecraft", monospace;
	letter-spacing: 2px;
	background-image:
		linear-gradient(
			90deg,
			rgba(0, 0, 0, 0.65) 0%,
			rgba(0, 0, 0, 0.25) 38%,
			transparent 70%
		),
		url("/images/bg.jpg");

	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.hidden {
	display: none;
}

/* =========================================
	HEADER
	========================================= */

.site-header {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 10;
}

/* =========================================
	MAIN CONTENT
	========================================= */

main {
	display: flex;
	align-items: center;
	min-height: 100vh;
	min-height: 100dvh;
	padding: 5%;
}

.content {
	width: 100%;
	max-width: min(700px, 50vw);
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Nexa Rust Sans", Impact, sans-serif;
	letter-spacing: normal;
}

h1 {
	margin: 0 0 40px;
	font-size: clamp(40px, 5vw, 80px);
	font-weight: 900;
	line-height: 1.15;
	user-select: none;
	cursor: default;

	text-shadow:
		1px 1px 0 #292929,
		2px 2px 0 #292929,
		3px 3px 0 #292929,
		4px 4px 0 #292929,
		5px 5px 0 #292929,
		6px 6px 0 #292929,
		7px 7px 0 #292929,
		8px 8px 0 #292929;
}


/* =========================================
	MINECRAFT BUTTONS
	========================================= */

.minecraft-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 58px;
	padding: 14px 28px;

	background: #777;
	border: 2px solid #000;
	box-shadow:
		inset 2px 2px #bcbcbc,
		inset -2px -2px #383838;

	color: #fff;
	font-family: "Minecraft", monospace;
	font-size: 22px;
	text-decoration: none;
	text-align: center;
	text-shadow: 2px 2px #333;

	cursor: pointer;
	transition: background 0.1s;
}

.minecraft-button:hover,
.minecraft-button:focus-visible {
	background: #8999bf;
	box-shadow:
		inset 2px 2px #cbd5f0,
		inset -2px -2px #3b4663;
}

.minecraft-button:active {
	background: #555;
	box-shadow:
		inset 2px 2px #292929,
		inset -2px -2px #999;
}

/* =========================================
	GREEN ADMIN LOGIN BUTTON
	========================================= */

.minecraft-button.login-button {
	min-height: 38px;
	padding: 7px 16px 3px 16px;
	width: auto;

	background: #3c8527;
	box-shadow:
		inset 2px 2px #72c451,
		inset -2px -2px #225019;

	font-size: 15px;
	text-shadow: 2px 2px #214a16;
}

.minecraft-button.login-button:hover,
.minecraft-button.login-button:focus-visible {
	background: #4fae35;
	box-shadow:
		inset 2px 2px #91da71,
		inset -2px -2px #2c6920;
}

.minecraft-button.login-button:active {
	background: #28601e;
	box-shadow:
		inset 2px 2px #1b4014,
		inset -2px -2px #65ad4c;
}

/* =========================================
	CONNECTION DETAILS DIALOG
	========================================= */

.connection-dialog {
	width: min(650px, calc(100% - 32px));
	max-height: calc(100dvh - 32px);
	overflow-y: auto;
	margin: auto;
	padding: 0;
	color: #fff;
	background: #292929;
	border: 3px solid #000;
	box-shadow:
		inset 3px 3px #595959,
		inset -3px -3px #171717,
		0 8px 32px rgba(0, 0, 0, 0.6);
	font-family: "Minecraft", monospace;
}

.connection-dialog::backdrop {
	background: rgba(0, 0, 0, 0.75);
}

.dialog-content {
	padding: 28px;
}

.dialog-content h2 {
	margin: 0 0 24px;
	font-size: 30px;
	text-align: center;
	text-shadow: 3px 3px #111;
}

.dialog-close {
	width: 100%;
	margin-top: 24px;
}

/* =========================================
	SERVER LIST INSIDE DIALOG
	========================================= */

.server-list {
	display: grid;
	gap: 16px;
}

.server-card {
	padding: 20px;
	background: #343434;
	border: 2px solid #111;
	box-shadow: inset 2px 2px #555, inset -2px -2px #1b1b1b;
}

.server-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px 18px;
	margin-bottom: 18px;
}

.server-name {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-size: 21px;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.server-name-label {
	font-family: "Minecraft", monospace;
	letter-spacing: 2px;
	color: #bdbdbd;
}
.server-name-value {
	font-family: "Nexa Rust Sans", Impact, sans-serif;
}

.server-name-edition {
	color: #c0c0c0;
	font-size: 0.82em;
	white-space: nowrap;
	font-family: "Minecraft", monospace;
	letter-spacing: 2px;
}

.server-status {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	flex-shrink: 0;
	white-space: nowrap;
	font-size: 15px;
}

.server-status::before {
	content: "";
	width: 10px;
	height: 10px;
	background: #9c9c9c;
	border: 1px solid #000;
}

.server-status[data-status="running"]::before { background: #6ec84a; }
.server-status[data-status="stopped"]::before { background: #d65a4a; }
.server-status[data-status="starting"]::before { background: #e8bd45; }

.server-connection-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(100px, 28%);
	gap: 16px;
}

.server-connection-field {
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
}

.connection-label {
	display: block;
	margin-bottom: 8px;
	color: #aaa;
	font-size: 14px;
}

.connection-value {
	display: block;
	min-height: 48px;
	padding: 12px;
	background: #171717;
	border: 2px solid #111;
	box-shadow: inset 2px 2px #080808;
	font-family: "Courier New", monospace;
	font-size: 18px;
	overflow-wrap: anywhere;
	user-select: all;
}

.server-message {
	color: #ddd;
	font-size: 16px;
	line-height: 1.5;
	margin: 8px 0;
}

.server-updated {
	margin: 14px 0 0;
	color: #d0d0d0;
	font-size: 13px;
	line-height: 1.5;
}

/* =========================================
    SERVER METADATA
    ========================================= */

.server-motd {
    margin: 0 0 16px;
    color: #e0e0e0;
    font-size: 15px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.server-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 14px;
    color: #e0e0e0;
    font-size: 13px;
    line-height: 1.5;
}

.server-meta-item {
    overflow-wrap: anywhere;
}

.server-meta-label {
    color: #aaa;
}

/* =========================================
	MOBILE
	========================================= */

@media (max-width: 700px) {
	body { background-position: 62% center; }
	.site-header { top: 12px; right: 12px; }

	main {
		align-items: flex-end;
		padding: 32px 24px 12vh;
	}

	.content { max-width: 100%; }
	h1 { font-size: clamp(36px, 9vw, 60px); }

	.minecraft-button {
		width: 100%;
		max-width: 360px;
		font-size: 18px;
	}

	.minecraft-button.login-button {
		width: auto;
		min-height: 36px;
		padding: 6px 12px;
		font-size: 14px;
	}

	.dialog-content { padding: 20px; }
	.dialog-content h2 { font-size: 24px; }
	.server-card { padding: 14px; }
	.server-name { font-size: 18px; }
	.server-status { font-size: 13px; }
	.server-connection-grid { grid-template-columns: minmax(0, 1fr) minmax(85px, 29%); gap: 10px; }
	.connection-value { font-size: 15px; }
	.dialog-close { max-width: none; }
}

@media (max-width: 420px) {
	.server-card-header { align-items: flex-start; flex-wrap: wrap; }
	.server-name { flex-basis: 100%; }
	.connection-value { padding: 10px 8px; font-size: 13px; }
	.connection-label { font-size: 12px; }
}