:root {
	--main-font: BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--header-font: "Montserrat", Helvetica, Arial, sans-serif;
	--title-font: "Garamond", serif;

	--font-size: 14px;
	--line-height: 1.6em;

	--text-color: #ACABAB;
	--strong-text-color: #EEE;

	--background-color: #192837;
	--strong-background-color: #14212D;
	--top-tier-background-color: #19384A;
	--highlighted-background-color: 0 96 223; /* #0060DF */

	--border-color: #777;
	--strong-border-color: #007BFF;

	--button-color: #DDD;
	--button-background-color: #0C448B;
	--button-faded-background-color: #0D3460;
	--button-hover-background-color: #115FC2;
	--button-eye-background-color: #0060DF;

	--rarity-uncommon  : 1 189 57; /* 01bd39 */
	--rarity-rare      : 1 191 255; /* 01bfff */
	--rarity-very-rare : 209 1 123; /* d1017b */
	--rarity-legendary : 183 134 29; /* b7861d */
	--rarity-story     : 255 160 55; /* ffa037 */

	--progress-some-color: orange;
	--progress-all-color: green;
}

.light-mode {

}

body {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 1em 20vh;
	min-height: 100vh;

	color: var(--text-color);
	font-family: var(--main-font);
	background: var(--background-color);

	font-size: var(--font-size);
	line-height: var(--line-height);
}

#app-main {
	display: flex;
	flex-direction: column;
	align-items: center;
}

a {
	color: inherit;
	text-decoration: underline dotted;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--border-color);
	cursor: pointer;
}

a:hover {
	text-decoration: underline;
}

h1 {
	color: var(--strong-text-color);
	font-family: var(--title-font);
}

h2, h3, h4 {
	color: var(--strong-text-color);
	font-family: var(--header-font);
}

input[type="checkbox"] {
	transform: scale(1.2);
}

.coordinates {
	font-family: "Linux Libertine", "Times New Roman", serif;
	text-shadow: 1px 1px 2px #000,-1px -1px 2px #000;
	color: #AB9F89;
	background: #34323285;
	border-radius: 5px;
	padding: 3px 5px;
	box-shadow: 1px 1px 5px #00000030;
	white-space: nowrap;
}

#back-to-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 1000;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.2s ease-in-out;
}

.progress {
	padding: 0 2px;
	margin: 1px;
	margin-left: 8px;
	border: 1px solid var(--border-color);
	border-radius: 5px;
	color: inherit;
}

.progress.started {
	border: 1px solid var(--progress-some-color);
}

.progress.completed {
	border: 1px solid var(--progress-all-color);
}

.highlighted {
	background-color: rgba(var(--highlighted-background-color) / 0.7);
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	 -khtml-user-select: none; /* Konqueror HTML */
	   -moz-user-select: none; /* Old versions of Firefox */
	    -ms-user-select: none; /* Internet Explorer/Edge */
	        user-select: none; /* Non-prefixed version, currently
	                              supported by Chrome, Edge, Opera and Firefox */
}

.header {
	color: var(--strong-text-color);
	background-color: var(--strong-background-color);

	height: 50px;
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	padding: 0 10px;
	box-sizing: border-box;

	.progress {
		padding: 0 5px;
	}
}

.meta-container > .header {
	background-color: transparent;

	.header-component {
		min-width: 60px;
	}

	> .header-component:nth-of-type(1) {
		text-align: right;
	}
}

.container > .header {
	.header-component:nth-of-type(3) {
		flex-grow: 1;
		text-align: right;
	}
}

button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	font-size: 16px;
	white-space: nowrap;

	color: var(--strong-text-color);
	background-color: var(--button-background-color);

	border: none;
	border-radius: 5px;
	cursor: pointer;

	line-height: 1;
	height: 30px;
	padding: 0 10px;
}

button:hover {
	background-color: var(--button-hover-background-color);
	box-shadow: 0 0 5px rgba(var(--highlighted-background-color) / 0.5);
}

button.tall {
	height: 50px;
}

.toggle-button {
	background-color: var(--button-faded-background-color);
	border: 1px solid var(--border-color);
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	gap: 5px;
}

.toggle-button:hover {
	background-color: var(--button-faded-background-color);
	border: 1px solid var(--strong-border-color);
	box-shadow: 0 0 5px rgba(var(--highlighted-background-color) / 0.5);
}

.toggle-button.off {
	background-color: var(--strong-background-color);
}

.toggle-button.off:hover {
	background-color: var(--strong-background-color);
}

.eye {
	background-color: var(--button-background-color);
	font-size: 16px;
	line-height: 21px;
	border-radius: 50%;
	padding: 0 1px 1px;
	cursor: pointer;

	display: inline-block;
	box-sizing: border-box;

}

.eye:hover {
	background-color: var(--button-hover-background-color);
	box-shadow: 0 0 5px rgba(var(--highlighted-background-color) / 0.5);
}

.toggle-button .eye {
	background-color: var(--button-eye-background-color);
}

.toggle-button .eye:hover {
	box-shadow: none;
}

.eye.off {
	background-color: transparent;
}

.eye.off:hover {
	box-shadow: none;
}

/*
.image-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
*/

.custom-select {
	position: relative;
	display: inline-block;

	label {
		margin-right: 5px;
	}

	select {
		/* Remove default browser appearance */
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;

		display: inline-block;
		border: 1px solid var(--border-color);
		border-radius: 5px;
		padding-left: 8px;
		background-color: var(--strong-background-color);
		color: var(--strong-text-color);
		line-height: 2em;
		cursor: pointer;
		width: 150px;
		box-sizing: border-box;
		transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
	}

	select:hover {
		outline: none;
		border-color: var(--strong-border-color);
		box-shadow: 0 0 5px rgba(var(--highlighted-background-color) / 0.5);
	}

	select:focus {
		outline: none;
		border-color: var(--strong-border-color);
		box-shadow: 0 0 5px rgba(var(--highlighted-background-color) / 0.5);
	}

	/* Hide the default arrow in Internet Explorer/Edge */
	select::-ms-expand {
		display: none;
	}
}

.custom-select::after {
	content: "▼";
	position: absolute;
	top: 50%;
	right: 15px;
	transform: translateY(-50%);
	font-size: 10px;
	pointer-events: none;
}

.search-input-wrapper {
    display: flex;
	flex-direction: row;

	.search-input {
		margin-right: 5px;
		padding: 6px 10px;
		font-size: 1.15em;
		border: 1px solid var(--border-color);
		border-radius: 5px;
		color: var(--strong-text-color);
		background-color: var(--strong-background-color);
		width: 300px;
		box-sizing: border-box; /* Ensure padding doesn't affect width */
		transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
	}

	.search-input::placeholder {
		color: #999;
		opacity: 0.8;
	}

	.search-input:focus {
		outline: none;
		border-color: var(--strong-border-color);
		box-shadow: 0 0 5px rgba(var(--highlighted-background-color) / 0.5);
	}

	.search-input:focus::placeholder {
		color: transparent;
	}

	.search-input:not(:placeholder-shown) {
		background-color: var(--button-faded-background-color);
	}

	.clear-button {
		display: none;
		height: auto;
	}

	.search-input:not(:placeholder-shown) + .clear-button {
		display: inline-block;
	}
}













#site-header {
	justify-content: space-between;

	#link-section {
		height: 100%;
		display: flex;
		flex-direction: row;

		a {
			height: 100%;

			button {
				width: 40px;
				height: 100%;
			}

			img {
				opacity: 0.9;
			}
		}
	}

	#profile-section {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 10px;
	}
}

#TOC {
    line-height: 1.2em;
	display: flex;
	flex-direction: column;
	align-items: center;

	.acts {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.act {
		margin: 0 16px;
	}

	.act .title {
		text-align: center;
	}

	.progress-header {
		display: flex;
		justify-content: space-between;
		gap: 10px;
	}

	.progress-header.inactive {
		opacity: 0.5;
	}
}

#options {
	margin-top: 16px;

	fieldset {
		border: none;
	}

	fieldset > .content {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		padding-top: 5px;
		gap: 5px;
	}

	.filter {
		position: relative;

		.subfilters {
			overflow: hidden;
			max-height: 0;
			transition: max-height 0.2s ease-out;
			position: absolute;
			z-index: 1000;
		}

		.subfilters > * {
			width: 100%;
		}

		.subfilters .arrow {
			display: inline-block;
			margin-left: 10px;
			text-align: center;
		}
	}

	.faded {
		opacity: 0.5;
	}
}

#checklist {
	width: 100%;
	min-height: 50vh;

	.header {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 0.5em 0;
		color: var(--strong-text-color);
		opacity: 0.5;

		.progress-header {
			display: flex;
			flex-direction: row;
			padding-left: 8px;
		}

		.title {
			font-size: 2em;
		}
	}

	.expanded > .header {
		opacity: 1;
	}

	.meta-container > .header {
		justify-content: center;
	}

	.content {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		transition: max-height 0.3s ease-out;

		.tip {
			border: 1px solid var(--border-color);
			border-radius: 5px;
			padding: 8px;
			text-align: center;
			margin: 0 auto 8px;
			max-width: 60%;
		}
	}
}

.entry {
	display: flex;
	flex-direction: row;
	padding: 3px 5px 0;
	gap: 5px;
	margin-left: 50px;

	.sprite {
		display: inline-block;
		overflow: hidden;
	}

	.checkbox, .title, .desc {
		margin-top: 12px;
	}

	.title {
		width: 120px;
		flex-grow: 0;
		flex-shrink: 0;
	}
}

.entry.hide-image {
	padding-top: 8px;
	padding-bottom: 8px;

	.checkbox, .title, .desc {
		margin-top: 0;
	}

	.entry-img {
		display: none;
	}
}

.entry.indented {
	margin-left: 100px;
}

.entry.top-tier {
	background: var(--top-tier-background-color);
}

.entry.completed {
	opacity: 0.5;
	text-decoration: line-through;
	background: none;
}

.entry.uncommon {
	.sprite-background {
		background-image: linear-gradient(to bottom, rgba(var(--rarity-uncommon) / 0.2), rgba(var(--rarity-uncommon) / 0.0));
	}
	.title a {
		color: rgb(var(--rarity-uncommon));
	}
}

.entry.rare {
	.sprite-background {
		background-image: linear-gradient(to bottom, rgba(var(--rarity-rare) / 0.2), rgba(var(--rarity-rare) / 0.0));
	}
	.title a {
		color: rgb(var(--rarity-rare));
	}
}

.entry.very-rare {
	.sprite-background {
		background-image: linear-gradient(to bottom, rgba(var(--rarity-very-rare) / 0.2), rgba(var(--rarity-very-rare) / 0.0));
	}
	.title a {
		color: rgb(var(--rarity-very-rare));
	}
}

.entry.legendary {
	.sprite-background {
		background-image: linear-gradient(to bottom, rgba(var(--rarity-legendary) / 0.2), rgba(var(--rarity-legendary) / 0.0));
	}
	.title a {
		color: rgb(var(--rarity-legendary));
	}
}

.entry.story {
	.sprite-background {
		background-image: linear-gradient(to bottom, rgba(var(--rarity-story) / 0.2), rgba(var(--rarity-story) / 0.0));
	}
	.title a {
		color: rgb(var(--rarity-story));
	}
}

@media (max-width : 768px) {
	#checklist {
		.content {
			.tip {
				max-width: 100%;
			}
		}
	}

	.entry {
		margin-left: 0;

		.title {
			width: 100px;
		}
	}

	.entry.indented {
		margin-left: 50px;
	}
}