* {
	box-sizing: border-box;
	font-family: "Minecraftia", sans-serif; /* A more thematic font */
}

@font-face {
	font-family: "Minecraftia";
	src: url("https://misuse.org/tmp/minecraftia.ttf") format("truetype");
}

html {
	font-size: 16px; /* Base for rem units, allows UI scaling */
}

html,
body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #333;
	color: white;
}

/* The canvas where the game is rendered */
#game-canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: block;
	cursor: crosshair;
}

/* --- UI Overlay --- */
.ui-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none; /* Allows clicks to pass through to the canvas */
	text-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.8);
}

.crosshair {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 1.5rem;
	font-weight: bold;
}

.hotbar {
	position: absolute;
	bottom: 1.25rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 0.25rem;
	pointer-events: auto; /* Hotbar is interactive */
}

.hotbar .slot {
	width: 3.125rem;
	height: 3.125rem;
	background-color: rgba(0, 0, 0, 0.5);
	border: 0.1875rem solid #555;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.25rem;
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
	transition:
		transform 0.1s ease-in-out,
		border-color 0.1s ease-in-out,
		background-color 0.1s ease-in-out;
}

.hotbar .slot:not(.active):hover {
	background-color: rgba(255, 255, 255, 0.1);
}

.hotbar .slot.active {
	border-color: #fff;
	transform: scale(1.1);
}

/* --- HUD Stats (Health, Hunger, etc.) --- */
.hud-container {
	position: absolute;
	bottom: 5rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	justify-content: space-between;
	width: 33.5rem; /* Matches the calculated width of the hotbar */
	pointer-events: none;
}

.stat-bar {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.125rem;
}

.stat-bar.hunger {
	flex-direction: row-reverse;
}

.stat-bar .icon {
	width: 1.125rem;
	height: 1.125rem;
	background-size: contain;
	background-repeat: no-repeat;
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
}

.health .icon {
	background-image: linear-gradient(to top right, #c00 45%, #f33 50%, #c00 55%);
}

.hunger .icon {
	background-image: linear-gradient(
		to top right,
		#8b4513 45%,
		#d2691e 50%,
		#8b4513 55%
	);
}

.armor .icon {
	background-image: linear-gradient(
		to top right,
		#6c757d 45%,
		#adb5bd 50%,
		#6c757d 55%
	);
}

/* --- Debug Overlay --- */
.debug-overlay {
	position: fixed;
	top: 0.625rem;
	left: 0.625rem;
	background-color: rgba(0, 0, 0, 0.6);
	padding: 0.625rem;
	font-family: "Courier New", Courier, monospace;
	font-size: 0.875rem;
	line-height: 1.5;
	color: #fff;
	text-shadow: none;
	pointer-events: none;
	white-space: pre;
}

/* --- Full Screen Menus (Inventory, Pause) --- */
.menu-overlay,
.inventory-screen {
	display: flex; /* Use 'flex' to show, 'none' to hide (managed by .hidden class) */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.75);
	justify-content: center;
	align-items: center;
	pointer-events: auto; /* Menus are interactive */
	flex-direction: column;
}

.menu-overlay h2,
.inventory-screen h2 {
	text-align: center;
	font-size: 2em;
	margin-bottom: 1.25rem;
}

.inventory-grid {
	display: grid;
	grid-template-columns: repeat(9, 3.375rem);
	grid-gap: 0.25rem;
	background-color: rgba(20, 20, 20, 0.8);
	padding: 0.625rem;
	border: 0.1875rem solid #555;
}

.inventory-slot {
	width: 3.125rem;
	height: 3.125rem;
	background-color: rgba(0, 0, 0, 0.5);
	border: 0.125rem solid #333;
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
	cursor: pointer;
	transition:
		border-color 0.1s ease-in-out,
		background-color 0.1s ease-in-out;
}

.inventory-slot:hover {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: #666;
}

/* --- Crafting UI (within a menu-overlay) --- */
.crafting-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	background-color: rgba(20, 20, 20, 0.8);
	padding: 0.625rem;
	border: 0.1875rem solid #555;
}

.crafting-interface {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.crafting-grid {
	display: grid;
	grid-template-columns: repeat(3, 3.375rem);
	grid-gap: 0.25rem;
}

.crafting-arrow {
	font-size: 2.5em;
	color: #888;
}

.output-slot {
	width: 3.125rem;
	height: 3.125rem;
	background-color: rgba(0, 0, 0, 0.5);
	border: 0.125rem solid #333;
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
}

.pause-menu-content {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	width: 15.625rem;
}

.pause-menu-content button {
	padding: 0.625rem;
	font-size: 1rem;
	background-color: #707070;
	border: 0.125rem solid;
	border-color: #c6c6c6 #5a5a5a #5a5a5a #c6c6c6;
	color: white;
	cursor: pointer;
	text-shadow: 0.125rem 0.125rem 0.125rem rgba(0, 0, 0, 0.5);
	box-shadow: inset 0 0 0 0.125rem #2d2d2d;
}

.pause-menu-content button:hover {
	background-color: #828282;
	border-color: #d8d8d8 #6c6c6c #6c6c6c #d8d8d8;
}

.pause-menu-content button:active {
	border-color: #5a5a5a #c6c6c6 #c6c6c6 #5a5a5a;
	box-shadow: inset 0 0 0 0.125rem #000;
}

/* Utility class to hide elements */
.hidden {
	display: none !important;
}