:root {
	--background: #212121;
	--card_background: #313131;
	--menu_background: #414141;
	--tooltip_background: #515151;
	--dialog_background: #3F3F3F;
	--foreground: white;
	--forms: #515151;
	--red: #ffa1a7;
	--blue: #9ccdf9;
	--green: #7de384;
	--purple: #bd93ff;
	--faded: #ccc;
	--links: lightblue;
	--ahover: #e07b7b;
	--default_margin_padding: .5em;
	--table_padding: .25em .5em;
}

html {
	scrollbar-gutter: stable;
}

body {
	background: var(--background);
	color: var(--foreground);
	font-family: sans-serif;
	margin: 0 auto;
	max-width: 1024px;
	-webkit-max-logical-width: -webkit-fit-content;
}
a {
	color: var(--links);
}
a:hover {
	color: var(--ahover);
}
.card {
	background: var(--card_background);
	border-radius: 5px;
	padding: var(--default_margin_padding);
	margin: var(--default_margin_padding);
}
h1 {
	text-align: center;
	margin-top: 0;
	padding-top: 0;
}
h3 {
	padding-top: 0;
	margin-top: var(--default_margin_padding);
}
.red { color: var(--red); }
.blue { color: var(--blue); }
.green { color: var(--green); }
.purple { color: var(--purple); }
.faded { color: var(--faded); }
.center { text-align:center; }
.bold { font-weight: bold; }
.italic { font-style: italic; }
.nodeco { text-decoration: none; }

/* XXX SENTINEL STUFF STARTS HERE */

h2 {
	padding-top: 0;
	margin-top: 0;
}
main {
	max-width: 1024px;
	display: grid;
	margin: 0 auto;
}
header, footer {
	/* align with the main container */
	max-width: calc(1024px - var(--default_margin_padding) * 4);
}
header {
	grid-area: header;
}
footer {
	grid-area: footer;
}

table {
	border-collapse: collapse;
	margin: .5em auto;
	background: var(--background);
	border-radius: 4px;
	min-width: 16em;
}

td {
	border-bottom: 2px solid var(--card_background);
	padding: .5em;
}
td:first-child {
	padding-right: 2em;
}
tr:last-child td {
	border-bottom: none;
}

h2 > a {
	color: white;
	text-decoration: none;
}

h2 > a:before {
	content: '';
	display:inline-block;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%237d3132' d='M480 96C515.3 96 544 124.7 544 160L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 160C96 124.7 124.7 96 160 96L480 96zM264 224C254.3 224 245.5 229.8 241.8 238.8C238.1 247.8 240.1 258.1 247 265L282 300L215 367C205.6 376.4 205.6 391.6 215 400.9L239 424.9C248.4 434.3 263.6 434.3 272.9 424.9L339.9 357.9L374.9 392.9C381.8 399.8 392.1 401.8 401.1 398.1C410.1 394.4 416 385.7 416 376L416 248C416 234.7 405.3 224 392 224L264 224z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-color: #fdd;
	width: 2ex;
	height: 2ex;
	border-radius: 50%;
	vertical-align: text-bottom;
	margin-right: .25em;
}

.inline-icon {
	margin-right: 1em;
}
.wz-icon {
	height: 1.5em;
	width: 1.5em;
}
.lang {
	color: var(--links);
}
.flag {
	height: 1.5em;
	border-radius: 4px;
	vertical-align: bottom;
}

#cort {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--dialog_background);
	min-height: 3em;
}
#cort > img {
	visibility: hidden;
	height: 2.5em;
	width: 2.5em;
}

#bz {
	grid-area: bz;
	min-height: 4.5em;
}
#bz-on[data-status="on"] {
	color: var(--green);
}
#bz-on[data-status="off"] {
	color: var(--red);
}
#bz-current {
	font-size: small;
}

#boss {
	grid-area: boss;
	min-width: 20em;
}
#boss-icon img {
	height: 2ex;
	filter: drop-shadow(0 0 .2em #888);
	vertical-align: bottom;
}

#map {
	grid-area: map;
}

#map-map {
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}

#gems {
	grid-area: gems;
}
#gems td {
	height: 2em;
}

#wishes {
	grid-area: wishes;
}

#stolengems {
	grid-area: stolengems;
}

#footer {
	text-align: center;
	background-color: var(--dialog_background);
	min-height: 3em;
}

#language {
	margin: 0 auto;
	display: flex;
	justify-content: space-evenly;
	max-width: 200px;
	gap: 1em;
}


@media (min-width: 951px) {
	main {
		grid-template-areas:
		"header header"
		"bz boss"
		"map gems"
		"map wishes"
		"map stolengems"
		"footer footer";
	}
	#map-map {
		height: 500px;
		width: 500px;
	}
}

@media (max-width: 950px) {
	main {
		grid-template-areas:
			"header"
			"bz"
			"boss"
			"map"
			"gems"
			"wishes"
			"stolengems"
			"footer";
		grid-template-columns: 1fr;
	}
	#map-map {
		width: 300px;
		height: 300px;
	}
	#bz {
		min-height: 4.5em;
	}
}

@media (max-width: 512px) {
	#cort, #boss, #bz {
		min-height: 4.5em;
	}
	#map-map {
		width: 75vw;
	}
}