/** Mise en page */
/*p {
	text-indent: 1.5em each-line;
	text-align: justify;
}*/

.separator {
	text-align: center;
	margin: 1.5em 1.5em 1em 1.5em;
}

.analysis {
	border: 1px solid;
	border-radius: 10px;
	padding: 5px 10px;
	margin: 1em 1.5em;
	box-sizing: content-box;
}

.warning {
	border: 1px solid orange;
	border-radius: 10px;
	padding: 5px 10px;
	margin: 1em 1.5em;
	box-sizing: content-box;
}

.analysis p {
	text-indent: 0;
}

figure {
	margin-left: 0;
	margin-right: 0;
}

figcaption {
	text-align: center;
}

h2 {
	background: linear-gradient(90deg, transparent, #efe, transparent) !important;
}

button {
	cursor: pointer;

	&:hover {
		box-shadow: 0 0 3px 2px #fff;
	}
}

/** Home */
#home {
	.description {
		padding: 10px;
	}

	.book {
		display: inline-block;
		width: calc(33.33% - 20px);
		padding: 10px;
		vertical-align: top;
		text-align: center;

		h3 {
			margin: 5px 0;
		}

		img {
			max-width: 100%;
		}

		@media (max-width: 1000px) {
			width: calc(50% - 20px);
		}

		@media (max-width: 600px) {
			width: calc(100% - 20px);
		}
	}
}

/** Type filters */
.type-filters {
	text-align: center;
	margin-bottom: 20px;

	button {
		border-radius: 7px;
		border: none;
		margin: 5px;
		padding: 7px;
		font-size: 1.1em;
		vertical-align: middle;

		&.type {
			background: linear-gradient(0deg, #787, #454);
			color: #696;
			padding: 5px;

			img {
				display: block;
				height: 25px;
				width: 25px;
			}

			&.active {
				background: linear-gradient(0deg, #aba, #787);
				color: #cec;
			}

			&:hover {
				color: #dfd;
			}
		}

		&:not(.type) {
			background: linear-gradient(0deg, #666, #000);
			color: #aaa;

			&:hover {
				color: #ddd;
			}
		}
	}
}

/** Characters */
#character {
	.character {
		padding: 0;
		margin-bottom: 20px;

		> *:last-child {
			margin-bottom: 0;
		}

		h3 {
			margin: 0 0 15px 0;
			padding: 5px 15px;
			text-align: center;
			background: linear-gradient(90deg, transparent, #aba, transparent);
		}

		.aliases small {
			margin-right: 5px;
		}

		.contents {
			display: flex;
			align-items: flex-start;
			column-gap: 25px;

			> div:first-child {
				flex: 1;
			}

			> div:last-child {
				flex: 1.5;
			}
		}

		dl.properties, dl.links {
			margin-top: 0;

			> dt {
				float: left;
				clear: left;
				width: 100px;
				text-align: right;
				font-weight: bold;
			}

			> dt::after {
				content: " :";
			}

			> dd {
				margin: 0 0 0 110px;
				padding: 0 0 8px 0;
			}
		}

		div.description,
		div.biography {
			padding: 0 15px 25px 15px;
			text-align: justify;

			br {
				margin-bottom: 8px;
			}
		}

		ul.skills,
		ul.spells,
		ul.stuff {
			padding: 0 15px 25px 15px;
			margin: 0;
			overflow-wrap: break-word;

			> li {
				display: inline;
				margin-right: 25px;
				white-space: nowrap;

				> .type,
				> .level {
					font-weight: bold;
				}

				> .level::before {
					content: " ";
				}

				> .variant::before {
					content: " (";
				}

				> .variant::after {
					content: ")";
				}

				> .extra::before {
					content: " - ";
				}
			}
		}

		> *:last-child {
			padding-bottom: 15px !important;
		}
	}
}

#characters {


	.characters {
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
		max-width: 100%;
		padding: -10px;
		margin-bottom: 20px;
	}

	.character {
		padding: 10px;
		width: 50%;
		box-sizing: border-box;
		text-decoration: none;
		opacity: 0.8;

		&:hover {
			opacity: 1;
			transition: opacity 500ms;
		}

		> div {
			border: 1px solid #1a1a1a;
			border-radius: 10px;
			box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.5);
			background: linear-gradient(0deg, #bcb, #9a9);
			padding: 0;

			h3 {
				margin-top: 0;
				text-align: center;
				border-radius: 10px 10px 0 0;

				padding: 15px;
				background: linear-gradient(90deg, #676, #010, #676);
				color: #ada;

				small {
					font-weight: normal;
				}
			}

			.aliases small {
				margin-right: 5px;
			}

			.contents {
				text-align: center;
				padding-bottom: 15px;
				color: black;
			}
		}
	}
}


/** Lexiques */
#lexicon {
	h3 {
		text-align: center;
		background: linear-gradient(90deg, transparent, #aba, transparent) !important;
	}
}

dl.lexicon {
	dt {
		margin: 15px 0 5px 0;
		font-size: 1.1em;

		.term {
			font-weight: bold;
		}

		&.skill .term,
		&.sylem .term,
		&.spell .term {
			font-style: italic;
		}

		.word-meta {
			display: inline;
			padding: 0;
			margin-left: 0.5em;

			&::before {
				content: "(";
			}

			&::after {
				content: ")";
			}

			li {
				display: inline;
			}

			li + li::before {
				content: " | ";
			}

			.type img {
				height: 17px;
				width: 17px;
				vertical-align: middle;
				margin-left: 1px;
			}
		}
	}

	dt::after {
		content: " :";
	}

	dd {
		text-align: justify;
		margin-bottom: 8px;
		position: relative;

		br {
			margin-bottom: 8px;
		}

		span.def-index {
			font-weight: bold;
			opacity: 0.8;
			position: absolute;
			left: -25px;

			&::after {
				padding-left: 5px;
				content: ":";
			}
		}

		&.incantation {
			padding-left: 25px;

			dfn {
				display: block;
			}
		}
	}
}

/** Timeline */
#timeline {
	.timeline-container {
		position: relative;
		display: flow-root;

		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: calc(50% - 2px);
			height: 100%;
			width: 4px;
			background: linear-gradient(0deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
		}

		h3 {
			position: relative;
			z-index: 10;
			margin-left: auto;
			margin-right: auto;
			text-align: center;
			background: linear-gradient(90deg, transparent, #aba, transparent) !important;

			&::before,
			&::after {
				display: block;
				content: "";
				height: 2px;
				background: linear-gradient(90deg, transparent 15%, #000, transparent 85%) !important;
			}
		}

		.timeline-events {
			list-style: none;
			padding: 0;

			li {
				margin: 20px 0;

				--event-day-background: linear-gradient(0deg, #ccc, #fff 50%);

				&.season {
					--event-day-background: linear-gradient(0deg, #ada, #efe 50%);
				}

				&.tome {
					--event-day-background: linear-gradient(0deg, #fb7, #ffd 50%);
				}

				.event-day {
					position: relative;
					z-index: 10;
					margin-left: auto;
					margin-right: auto;
					width: 80px;

					white-space: nowrap;
					text-align: center;
					border: 2px solid #000;
					border-radius: 15px;
					background: var(--event-day-background);
					box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);

					&.unknown {
						height: 23px;
						width: 23px;
					}
				}

				.event-panel {
					position: relative;
					box-sizing: border-box;
					width: calc(50% - 60px);
					margin-top: -30px;
					margin-bottom: 20px;
					padding: 0;
					display: inline-block;
					z-index: 1;

					& > div {
						padding: 10px;
					}

					.event-description {
						--event-description-background-color: #ddd;

						&.season {
							--event-description-background-color: #dfd;
						}

						&.tome {
							--event-description-background-color: #fea;
						}

						&:not(:first-child) {
							border-top: 1px rgba(0, 0, 0, 0.5) dashed;
							padding-top: 8px;
						}

						.event-icon {
							height: 25px;
							width: 25px;
						}
					}

					&::after {
						top: 16px;
						border: solid 10px rgba(0, 0, 0, 0);
						content: " ";
						display: block;
						height: 0;
						width: 0;
						position: absolute;
						pointer-events: none;
						margin-top: -10px;
						z-index: 100;
					}
				}

				&:nth-of-type(2n) {
					clear: right;

					.event-panel {
						float: right;
						box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);

						.event-description {
							background: linear-gradient(270deg, var(--event-description-background-color), #fff);

							&:has(.event-icon) > div {
								padding-left: 35px;
							}

							.event-icon {
								float: left;
							}
						}

						&::after {
							right: 100%;
							border-right-color: #fff;
						}
					}
				}

				&:nth-of-type(2n+1) {
					clear: left;

					.event-panel {
						float: left;
						box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.5);

						.event-description {
							background: linear-gradient(90deg, var(--event-description-background-color), #fff);

							&:has(.event-icon) > div {
								padding-right: 35px;
							}

							.event-icon {
								float: right;
							}
						}

						&::after {
							left: 100%;
							border-left-color: #fff;
						}
					}
				}

				&:last-child {
					&::after {
						content: "";
						clear: both;
						display: block;
					}

					.event-panel {
						margin-bottom: 0;
					}
				}
			}
		}
	}
}

/** Maps */
#maps {
	.map {
		display: inline-block;
		width: calc(50% - 20px);
		padding: 10px;
		vertical-align: top;
		text-align: center;

		h3 {
			margin: 5px 0;
		}

		button.thumbnail {
			display: block;
			padding: 0;
			border: 2px solid #000;
			border-radius: 0;
			cursor: pointer;
			background: url('/app/img/textures/ground-grey-256.jpg');

			img {
				display: block;
				max-width: 100%;
			}

			opacity: 0.8;
			transition: all 500ms;

			&:hover {
				border: 2px solid #999;
				opacity: 1;
				transition: all 500ms;
			}
		}

		dialog {
			padding: 0;
			overflow: auto;
			max-height: 100%;
			max-width: 100%;
			background: linear-gradient(0deg, #bbb, #eee);

			&::backdrop {
				background: rgba(0, 0, 0, 0.5);
			}

			img {
				display: block;
				max-width: none;
			}

			button {
				display: block;
				padding: 0;
				border: none;
				border-radius: 0;
				cursor: pointer;
				background: url('/app/img/textures/ground-grey-1024.jpg');
			}
		}
	}
}

body {
	background: linear-gradient(0deg, #676, #010) fixed !important;
	font-family: sans-serif;
}

#app {
	#splash-screen {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
		text-align: center;
		background: linear-gradient(0deg, #676, #010) fixed !important;
		display: flex;
		align-items: center;
		align-content: center;
		justify-content: center;

		> div {
			background: linear-gradient(180deg, #efe, #787) !important;
			font-size: 1.5em;
			padding: 50px;
			text-align: center;
			border-radius: 10px;

			img {
				width: 50px;
			}
		}

		&.started {
			display: none;
		}
	}

	header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		text-align: center;
		height: 100px;

		border-bottom: 2px solid #556 !important;
		background: linear-gradient(0deg, #aba, #898) !important;
		z-index: 50;
		box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.5);
		text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);

		h1 {
			margin: 10px 0;
		}

		#main-menu {
			position: absolute;
			bottom: 0;
			width: 100%;

			a {
				display: inline-block;
				padding: 7px 10px 2px 10px;
				margin: 0 5px;
				background: linear-gradient(0deg, #676, #010);
				border-radius: 10px 10px 0 0;
				color: #ada;
				text-decoration: none;

				&:visited {
					color: #8b8;
				}

				&:hover {
					color: #cec;
				}

				img {
					width: 25px;
					vertical-align: middle;
				}
			}
		}
	}

	#content {
		margin: 100px auto 30px auto;
		min-height: calc(100vh - 165px); /* vertical margins + paddings */
		max-width: 1100px;

		background: linear-gradient(0deg, #efe, #bcb 100vh) fixed !important;
		padding: 0 35px 35px 35px;

		h2 {
			text-align: center;

			&:first-of-type {
				margin-top: 0;
			}
		}

		aside {
			padding-top: 35px;
			max-width: 250px;
			max-height: 100%;
			float: right;
			position: sticky;
			right: 0;
			top: 0;

			#reading-status-container {
				overflow: auto;

				label {
					display: block;
					margin-bottom: 8px;
				}

				select {
					width: 100%;
				}
			}

			#letters-menu {
				margin-top: 30px;
				text-align: center;

				> * {
					display: inline-block;
					margin: 5px;
				}
			}
		}

		main {
			padding-top: 35px;
		}

		aside + main {
			width: calc(100% - 275px);
		}

		a {
			color: #272;
		}

		a:visited {
			color: #494;
		}

		a:hover {
			color: #6b6;
		}
	}

	footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		text-align: center;
		height: 30px;
		border-top: 2px solid #556 !important;
		background: linear-gradient(0deg, #aba, #898) !important;
		z-index: 50;
		box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.5);
		text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);

		a {
			color: #050;
		}

		a:visited {
			color: #272;
		}

		a:hover {
			color: #494;
		}
	}
}

/** Tooltips */

/* Tooltip container */
.tooltip {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted black; /* Add dots under the hoverable text */
	cursor: pointer;

	.tooltip-content {
		visibility: hidden; /* Hidden by default */
		width: 400px;
		background: linear-gradient(0deg, #efe, #bcb) !important;
		border: 1px solid #272;
		text-align: justify;
		padding: 5px 0;
		border-radius: 6px;
		position: absolute;
		font-weight: normal;
		max-height: 170px;
		overflow-y: auto;
		box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.5);
		white-space: normal;
	}

	&.tooltip-right .tooltip-content {
		top: -5px;
		left: 105%;
	}

	&.tooltip-left .tooltip-content {
		top: -5px;
		right: 105%;
	}

	&.tooltip-top .tooltip-content {
		bottom: 100%;
		left: 65%;
		margin-left: -200px; /* Use half of the width (400/2 = 200), to center the tooltip */
	}

	&.tooltip-top-right .tooltip-content {
		bottom: 100%;
		left: 0;
		margin-left: -10px;
	}

	&.tooltip-bottom .tooltip-content {
		top: 100%;
		left: 50%;
		margin-left: -200px; /* Use half of the width (400/2 = 200), to center the tooltip */
	}

	/* Show the tooltip text on hover */

	&:hover .tooltip-content {
		visibility: visible;
		z-index: 100; /* Ensure tooltip is displayed above content */
	}
}

.tooltip-content.lexicon {
	padding: 10px;
	display: block;

	dt {
		margin-top: 0;
		text-align: center;

		&:after {
			display: none;
		}
	}

	dd {
		margin: 0;
	}
}

dialog[open] {
	animation: fadein 0.25s ease-in forwards;
}

@keyframes fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes fadeout {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@media (max-width: 800px) {
	aside {
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		position: static !important;
	}

	main {
		width: 100% !important;
	}
}

@media (max-width: 650px) {
	#main-menu span {
		display: none;
	}
}