:root {
	/* --- Theme Variables --- */
	--font-pixel: "Minecraftia", sans-serif;
	--font-mono: "Courier New", Courier, monospace;

	/* Colors */
	--color-bg: #333;
	--text-color: white;
	--text-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.8);
	--ui-bg: rgba(0, 0, 0, 0.5);
	--ui-border: #555;
	--ui-border-dark: #333;
	--ui-border-active: #fff;
	--ui-hover-bg: rgba(255, 255, 255, 0.1);
	--menu-overlay-bg: rgba(0, 0, 0, 0.75);
	--inventory-bg: rgba(20, 20, 20, 0.8);

	/* Minecraft Button Style */
	--mc-button-bg: #707070;
	--mc-button-bg-hover: #828282;
	--mc-button-border-light: #c6c6c6;
	--mc-button-border-dark: #5a5a5a;
	--mc-button-border-light-hover: #d8d8d8;
	--mc-button-border-dark-hover: #6c6c6c;
	--mc-button-shadow: inset 0 0 0 0.125rem #2d2d2d;
	--mc-button-shadow-active: inset 0 0 0 0.125rem #000;

	/* Sizes */
	--slot-size: 3.125rem;
	--hotbar-slot-border: 0.1875rem;
	--inventory-slot-border: 0.125rem;
	--slot-gap: 0.25rem;
}

* {
	box-sizing: border-box;
	font-family: var(--font-pixel);
}

@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: var(--color-bg);
	color: var(--text-color);
}

/* 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: var(--text-shadow);
}

.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: var(--slot-gap);
	pointer-events: auto; /* Hotbar is interactive */
}

.hotbar .slot {
	width: var(--slot-size);
	height: var(--slot-size);
	background-color: var(--ui-bg);
	border: var(--hotbar-slot-border) solid var(--ui-border);
	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: var(--ui-hover-bg);
}

.hotbar .slot.active {
	border-color: var(--ui-border-active);
	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: calc(
		9 * (var(--slot-size) + 2 * var(--hotbar-slot-border)) + 8 *
			var(--slot-gap)
	); /* 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: var(--font-mono);
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--text-color);
	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: var(--menu-overlay-bg);
	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,
		calc(var(--slot-size) + 2 * var(--inventory-slot-border))
	);
	grid-gap: var(--slot-gap);
	background-color: var(--inventory-bg);
	padding: 0.625rem;
	border: var(--hotbar-slot-border) solid var(--ui-border);
}

.inventory-slot {
	width: var(--slot-size);
	height: var(--slot-size);
	background-color: var(--ui-bg);
	border: var(--inventory-slot-border) solid var(--ui-border-dark);
	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: var(--ui-hover-bg);
	border-color: #666;
}

/* --- Crafting UI (within a menu-overlay) --- */
.crafting-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	background-color: var(--inventory-bg);
	padding: 0.625rem;
	border: var(--hotbar-slot-border) solid var(--ui-border);
}

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

.crafting-grid {
	display: grid;
	grid-template-columns: repeat(
		3,
		calc(var(--slot-size) + 2 * var(--inventory-slot-border))
	);
	grid-gap: var(--slot-gap);
}

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

.output-slot {
	width: var(--slot-size);
	height: var(--slot-size);
	background-color: var(--ui-bg);
	border: var(--inventory-slot-border) solid var(--ui-border-dark);
	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: var(--mc-button-bg);
	border: 0.125rem solid;
	border-color: var(--mc-button-border-light) var(--mc-button-border-dark)
		var(--mc-button-border-dark) var(--mc-button-border-light);
	color: var(--text-color);
	cursor: pointer;
	text-shadow: 0.125rem 0.125rem 0.125rem rgba(0, 0, 0, 0.5);
	box-shadow: var(--mc-button-shadow);
}

.pause-menu-content button:hover {
	background-color: var(--mc-button-bg-hover);
	border-color: var(--mc-button-border-light-hover)
		var(--mc-button-border-dark-hover) var(--mc-button-border-dark-hover)
		var(--mc-button-border-light-hover);
}

.pause-menu-content button:active {
	border-color: var(--mc-button-border-dark) var(--mc-button-border-light)
		var(--mc-button-border-light) var(--mc-button-border-dark);
	box-shadow: var(--mc-button-shadow-active);
}

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