/*
	In general, we don't want to stray too far from the original appearance.
	We'll optimize the layout for modern CSS and use better styles and fonts
	for legibility and design, but keep the soul of the original project.
*/

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	color: #222;
	font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
	font-size: 16px;
}

body {
	padding: 1rem;
	background-image: url("/assets/images/backgrounds/snowstorm.jpg");
}

div#container {
	width: 90vw;
	display: flex;
	flex-direction: column;
	margin: 0px auto;
}

header {
	width: 100%;
	display: flex;
	justify-content: space-between;

	nav {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
}

section#game {
	display: grid;
	grid-template-columns: 180px 1fr 180px;
	margin: 1rem 0;
	border-top: 2px solid #000;

	& > aside > section:not(:last-child) {
		margin-bottom: 1rem;
	}

	& > aside > section {
		display: flex;
		flex-direction: column;
	}

	& > aside#left {
		grid-column: 1;
		border-right: 2px solid #000;
		padding: 3px;
	}

	& > main {
		grid-column: 2;
		padding: 3px;
	}

	& > aside#right {
		grid-column: 3;
		border-left: 2px solid #000;
		padding: 3px;
	}
}

a {
	color: #663300;
	text-decoration: none;
	font-weight: bold;

	&:hover {
		color: #330000;
	}
}

.small {
	font-size: 0.75rem;
}

.highlight {
	color: red;
}

.light {
	color: #999999;
}

div.title {
	border: solid 1px black;
	background-color: #eeeeee;
	font-weight: bold;
	padding: 5px;
	margin: 3px;
}

footer {
	display: flex;
	justify-content: center;
	font-size: 0.75rem;
	padding: 0.5rem 0;

	& > div {
		flex: 0 0 25%;
		text-align: center;
	}
}

ul.unstyled {
	list-style: none;
}

form#move-compass {
	width: 128px;
	height: 128px;
	display: flex;
	flex-direction: column;
	background-image: url('/assets/images/compass.webp');
	margin: 0.5rem auto;

	& > div.mid {
		display: flex;
	}

	button {
		background-color: transparent;
		border: none;
		color: transparent; /* Hide the text */
		background-size: cover; /* Ensure the background image fills the button */
		cursor: pointer;

		&:hover {
			background-color: rgba(225, 16, 16, 0.5);
		}

		&#north {
			width: 128px;
			height: 40px;
		}

		&#west {
			width: 63px;
			height: 50px;
		}

		&#east {
			width: 63px;
			height: 50px;
		}

		&#south {
			width: 128px;
			height: 38px;
		}
	}
}