/*
	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.
*/

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

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 1rem;
}

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

i { font-style: italic; }
b { font-weight: bold; }

h1 { font-size: 2rem; font-weight: bold; }
h2 { font-size: 1.7rem; font-weight: bold; }
h3 { font-size: 1.4rem; font-weight: bold; }
h4 { font-size: 1.1rem; font-weight: bold; }

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 {
		padding: 0.5rem;
	}

	& > 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;
	}

	& > main {
		grid-column: 2;
		padding: 0.5rem;
	}

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

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 {
	background-color: #eeeeee;
	background-image: url("/assets/images/overlay.png");
	background-repeat: repeat;
	border: 1px solid #aaa;
	font-weight: bold;
	padding: 5px;
	margin-bottom: 0.1rem;
}

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;
		}
	}
}

button.btn {
	font-family: inherit;
	font-size: 1rem;
	appearance: none;
	outline: none;
	background-color: #808080;
	background-image: url("/assets/images/overlay.png");
	border: 1px solid #808080;
	padding: 0.5rem 1rem;
	cursor: pointer;
	color: white;
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
	text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);

	&:hover {
		background-color: #909090;
	}
}

form.standard {
	& > div.row {
		display: flex;
		flex-direction: column;
		margin-bottom: 1.5rem;

		label {
			font-weight: bold;
		}
	}

	span.help {
		font-size: 0.8em;
		color: #555;
	}

	& > div.actions {
		margin-top: 1rem;
	}

	input.text {
		appearance: none;
		outline: none;
		border: 1px solid transparent;
		padding: 0.25rem 0.25rem;
		background-color: rgba(0, 0, 0, 0.4);
		color: white;

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

		&:focus {
			background-color: rgba(0, 0, 0, 0.6);
			border-color: black;
		}
	}
}

.mb-1 {
	margin-bottom: 1rem;
}

.mb-05 {
	margin-bottom: 0.5rem;
}

div.town {
	& > section:not(:last-child) {
		margin-bottom: 2rem;
	}

	& > section.split {
		width: 100%;
		display: flex;
		gap: 1rem;

		& > section {
			width: 100%;
		}
	}
}

button.img-button {
	appearance: none;
	border: none;
	outline: none;
	background: none;
	cursor: pointer;
}

div#statbars {
	display: flex;
	justify-content: space-around;
	margin: 1rem 0;

	& > div.stat {
		display: flex;
		flex-direction: column;
		align-items: center;

		& > div.container {
			display: flex;
			align-items: flex-end;
			background-color: rgba(0, 0, 0, 0.6);
			width: 16px;
			height: 160px;
			border: 1px solid rgba(0, 0, 0, 0.6);

			& > div.bar {
				width: 100%;
				height: 100%;
				background-color: white;
			}
			
			&#hp {
				& > div.bar {
					background: #56ab2f;
					background: linear-gradient(to left, #a8e063, #56ab2f);
				}

				&.warning > div.bar {
					background: #F2994A;
					background: linear-gradient(to left, #F2C94C, #F2994A);
				}

				&.danger > div.bar {
					background: #cb2d3e;
					background: linear-gradient(to left, #ef473a, #cb2d3e);
				}
			}

			&#mp > div.bar {
				background: #00c6ff;
				background: linear-gradient(to right, #0072ff, #00c6ff);
			}

			&#tp > div.bar {
				background: #757f9a;
				background: linear-gradient(to right, #757f9a, #d7dde8);
			}
		}
	}
}

.inline-block {
	display: inline-block;
}