@font-face { font-family: 'profane'; src: url(../font/HKGrotesk-SemiBold.woff2) format('woff2'); size-adjust: 100%; font-weight: normal; }
@font-face { font-family: 'picturesque'; src: url(../font/Eczar-Regular.woff2) format('woff2'); size-adjust: 100%; font-weight: normal; }
@font-face { font-family: 'picturesque-bold'; src: url(../font/Eczar-Medium.woff2) format('woff2'); size-adjust: 100%; font-weight: normal; }
@font-face { font-family: 'journal-quote'; src: url(../font/Caveat-Regular.woff2) format('woff2'); size-adjust: 100%; font-weight: normal; }
@font-face { font-family: 'journal-initial'; src: url(../font/VampyresGarden.woff2) format('woff2'); size-adjust: 100%; font-weight: normal; }



:root {

	/* META: FIXED Z-INDEX DEFINITIONS IN UTILITY VARS WHICH COMMAND THE VARS FOR THE ACTUAL SELECTORS */

	--z-sub: calc( var(--z) * -1 );
		--z-tile-img: var(--z-sub); /* Otherwise, the img would cover the inset box-shadow (Scan-Papierrand-Übertünchung) of its enclosing .tile! */

	--z: 1;
		--z-pin: var(--z);
		--z-qi: var(--z);
		--z-map-buttons: var(--z);

	--z-plus-1: calc( var(--z) + 1 );
		--z-poi-hovered: var(--z-plus-1);
		--z-encounter-gui: var(--z-plus-1);

	--z-plus-2: calc( var(--z) + 2 );
		--z-card: var(--z-plus-2);
		--z-minimap-tilecontainer: var(--z-plus-2);

	--z-plus-3: calc( var(--z) + 3 );
		--z-card-queued: var(--z-plus-3);
		--z-minimap: var(--z-plus-3);

	--z-plus-4: calc( var(--z) + 4 );
		--z-nav: var(--z-plus-4);

	--z-plus-5: calc( var(--z) + 5 );
		--z-lightbox: var(--z-plus-5);

	--z-plus-6: calc( var(--z) + 6 );
		--z-poi-poi: var(--z-plus-6);

	--z-plus-7: calc( var(--z) + 7 );
		--z-poi-poi-focus: var(--z-plus-7);
		--z-tooltip: var(--z-plus-7);


	/* TODO: At least TRY to, say, double of the current amount of default-length and see how flexible the interface really is :D */
	/* CONSIDER: Use var(--default-length) EVEN MORE, replacing stupidly arbitrary literal values */
	--default-length: 1rem;

	--default-headline-size: 1.7em;

	--dark-gui-bg: rgba(31, 31, 31, .75);
	--dark-gui-bg-hover: rgba(31, 31, 31, 1);
	--default-shadow: 0 1px 4px rgba(0, 0, 0, .667);
	--grey: #808080;
	--default-text-underline-offset: .1875em;
	--pin-img-icon-width: 1.2em;
	--map-btn-diameter: calc( var(--default-length) * 3 );

	/* CONSIDER: Convert more colour values to hsl, which is best for controlling it via PHP */
	--pin-color-main: hsl(11, 100%, 50%);
	--pin-size: 24px;

	--lightbox-and-modal-background: rgba(0, 0, 0, .75);

	--journal-page-width: 44em; /* Why this seemingly arbitrary value? Because it goes well with the journal font 'Eczar-Regular' and its size for a paragraph */
	--journal-page-maxheight: calc( 100vh - ( var(--default-length) * 2 ) );
	--journal-content-padding: calc( var(--default-length) * 3 );
	--journal-content-opacity: .9; /* Subtle fluff */
	--journal-sidebar-width: calc( var(--journal-page-width) * .5 );
	--journal-paragraph-font-size: 1.333em;

	--poi-poi-default-length: calc( var(--default-length) * 1.05 );

	--protagonist-bg: #fff;
	--protagonist-friendly-bg: darkgreen;
	--protagonist-hostile-bg: darkred;
	--protagonist-colmix: 25%;

	--helper-color: #f00;
}



/* GLOBAL ELEMENT TYPE DEFAULTS */

* {
	text-decoration: inherit;
	line-height: 1.4;
	/* META: Prevent »scroll up-bubbling« from e.g. the nav sidebar to the world map */
	overscroll-behavior: none;
	font-variant-emoji: text; /* 2025-05-01 : In Firefox, it DOESN'T even work with > about:config > layout.css.font-variant-emoji.enabled = true :( */
}

html {
	scrollbar-width: none; /* Hide world map scrollbars - Baseline 2024 */
}

body {
	font: 400 100% profane;

	/* META: :has and :target combined in this way is kinda powerful
	/* If a lightbox is open, prevent unwanted world map scrolling when wheeling over the lightbox background */
	&:has(.lightbox:target) {
		overflow: hidden;
	}
}

button, input {
	font-family: picturesque-bold;
}
button {
	user-select: none;

	&:not([disabled]) {
		cursor: pointer;
	}
}



#canvas {
	display: grid;
	cursor: grab;
	user-select: none;

	&.crosshair-cursor {
		cursor: crosshair;
	}
}



.tile {
	position: relative;

	&.mono > img:not(.colour) {
		filter: saturate(0);
	}

	> img {
		position: absolute;
		width: 100%;
		pointer-events: none;
		z-index: var(--z-tile-img);

		&:not(:first-of-type) {
			mix-blend-mode: multiply;
		}
	}
}

/* CONSIDER: ON HOLD until ALL tiles have overlays that colour the whole ground (and not just bodies of water) */
/* Display coloured tiles _ABOVE_ the tile borders (the white inset shadows) - the colour overlays should be and can easily be made seamless */
/*
.tile > img.colour {
	z-index: calc( var(--z) );
}
.tile.mono img.colour {
	display: none;
}
*/



/* MULTI-PURPOSE CLASS FOR DIVERSE HASH CONTENT PAGES */

.generic-lightbox-content {
	box-sizing: border-box;
	max-height: calc( 100vh - 2 * var(--default-length) );
	width: 61em; /* 61em matches the width of paper.webp */
	overflow: auto;
	scrollbar-gutter: stable;
    scrollbar-color: #fff transparent;
	padding: var(--journal-content-padding);
	text-align: left;
	font-family: picturesque;
	cursor: initial;
	background-image: url(../img/paper.webp);
	background-attachment: local;
}



#minimap,
#minimap-tilecontainer {
	position: fixed;
	bottom: var(--default-length);
	right: var(--default-length);
}

#minimap {
	z-index: var(--z-minimap);
	box-shadow: var(--default-shadow);
	cursor: crosshair;
}

#minimap-tilecontainer {
	display: grid;
	z-index: var(--z-minimap-tilecontainer);
	background: #fff;
	filter: saturate(0);
	user-select: none;
}

#minimap-viewport {
	position: relative;
	box-shadow: inset -1px -1px 0 0 #000, inset 1px 1px 0 0 #000;
}



.poi {
	position: absolute;
	user-select: none;
	margin-left: calc( var(--pin-size) * -.5 );
	margin-top: calc( var(--pin-size) * -1 );

	&.town .pin > svg {
		fill: var(--pin-color-main);
	}

	&.site .pin > svg {
		fill: orange;
	}
}

.pin {
	position: relative;
	z-index: var(--z-pin);
	cursor: pointer;
	line-height: 0;

	> svg {
		width: var(--pin-size);
		height: var(--pin-size);
		filter: drop-shadow(0 0 1px #000);
		transition: fill .5s;
	}

	h2 svg {
		width: var(--pin-img-icon-width);
		height: calc( var(--pin-img-icon-width) * .75 );
		margin: 0 0 -.1lh .375em;
		opacity: .5;
	}
}

@keyframes jumpy {
	0% { transform: translateY(0%); }
	100% { transform: translateY(-25%); fill: #000; }
}
.jumpy {
	animation: jumpy .5s infinite alternate;
}



.qi {
	--gap-length: .382em;
	--bg-colour: whitesmoke;

	position: absolute;
	left: calc( var(--pin-size) * .5 );
	padding: calc( var(--default-length) * .25 );
	background: var(--bg-colour);
	box-shadow: var(--default-shadow);
	display: grid;
	grid-template-areas:
		'header header'
	 	'left right';
	z-index: var(--z-qi);

	h2 {
		grid-area: header;
		line-height: 1;
		font-family: picturesque-bold;
		white-space: nowrap;

	}
	&:has(ul:not(.none)) h2 {
		margin-bottom: var(--gap-length);
	}

	ul {
		font: .75em picturesque;
		min-width: 11em;

		li {
			margin-bottom: calc( var(--gap-length) * .5 );
			line-height: 1.181;

			&:not(:first-of-type) {
				border-top: 1px dotted color-mix( in oklab, var(--bg-colour), #000 25% );
				padding-top: calc( var(--gap-length) * .5 );
			}
			&:last-of-type {
				margin-bottom: unset;
			}
		}
	}

	.thumbnail {
		margin: 0 var(--gap-length) 0 0;
	}

	.img-count-bubble {
		position: absolute;
		width: var(--default-length);
		height: var(--default-length);
		border-radius: var(--default-length);
		font-size: .75em;
		background: #000;
		color: #fff;
		text-align: center;
		margin: calc( var(--default-length) * .25 ) 0 0 calc( var(--default-length) * .25 );
	}
}


.thumbnail {
	float: right;
	clear: right;
	height: 3.82em;
	border: 1px dotted var(--grey);
	margin-bottom: .382em;
	cursor: zoom-in;
}

.card {
	position: fixed;
	top: .618rem;
	left: .618rem;
	z-index: var(--z-card);
	box-sizing: border-box;
	width: 513px; height: 363px; 	padding: 2rem 1.618rem 1.618rem 1.618rem;
	background: url(../img/card.avif);
	transition: top .25s, left .25s;

	&.queued {
		z-index: var(--z-card-queued);
		top: calc( var(--default-length ) * 1.5 ) !important;
		left: calc( var(--default-length ) * 1.5 ) !important;
	}

	a {
		&:any-link {
			color: unset;
		}
		&[data-scroll]::after {
	content: '    🔍\FE0E ';
}
	}

	h2 {
		font: var(--default-headline-size) picturesque-bold;
		display: inline-block;
		margin-bottom: .25em;
	}

	ul {
		font-family: picturesque;

		ul {
			text-indent: -1.125em;
			font-size: .75em;
			padding: 0 0 0 var(--default-length);

			li::before {
				content: '  ';
				border-left: 1px dotted var(--grey);
			}
		}
	}

	.close {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 48px;
		height: 48px;
		cursor: pointer;
	}

	.x-close {
		float: right;
		cursor: pointer;

		&::before {
	content: '\2573\FE0E ';
}

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



/* DIALOGS */

dialog {
	position: fixed;
	margin: unset;
	padding: unset;
	border: unset;

	&[open].vertical {
		display: grid;
	}
}



/* COMMON FOR BOTH MODAL DIALOG BACKDROPS AND LIGHTBOX BACKGROUNDS */

::backdrop, .lightbox {
	background: var(--lightbox-and-modal-background);
}



/* LIGHTBOXES */

.lightbox {
	display: none;
	box-sizing: border-box;
	position: fixed;
	z-index: var(--z-lightbox);
	width: 100vw;
	height: 100vh;
	text-align: center;
	top: 0;
	left: 0;
	padding: var(--default-length);
	cursor: pointer;

	&:target {
		display: block;
	}

	> * {
		margin: 0 auto;
	}

	:is( h2, h3, h4 ) {
		font-family: picturesque-bold;
		line-height: 1;
	}
	h2 {
		font-size: 2.75em;
	}
	h3 {
		font-size: var(--default-headline-size);
	}
	h4 {
		font-size: 1.5em;
	}

	.thumbnail-box {
		position: fixed;
		right: var(--default-length);
		top: var(--default-length);
	}
}


#journal-content,
#journal-sidebar {
	max-width: calc( 100vw - ( var(--default-length) * 2 ) );
	max-height: calc( 100vh - ( var(--default-length) * 2 ) );
}

.poi-image,
#journal-content,
#journal-sidebar {
	box-shadow: var(--default-shadow);
	cursor: initial;
}

.poi-image {
	position: relative;
	background-size: contain, 100%;
	background-blend-mode: multiply;
	user-select: none;
}



/* POI-POI PINS & LEGEND */

.poi-image > i {
	width: var(--poi-poi-default-length);
	height: var(--poi-poi-default-length);
	border-radius: var(--poi-poi-default-length);
	position: absolute;
	margin-top: calc( var(--poi-poi-default-length) * -.5 );
	margin-left: calc( var(--poi-poi-default-length) * -.5 );
	background-color: var(--pin-color-main);
	color: #fff;
	z-index: var(--z-poi-poi);
	line-height: .9; /* Vertically center text (in the computed font) within the pin */

	&::before {
		content: attr(data-number);
		font: calc( var(--poi-poi-default-length) * .75 ) picturesque-bold;
		filter: drop-shadow( var(--default-shadow) );
		line-height: inherit;
	}

	&.new {
		background-color: #000;
		filter: drop-shadow( var(--default-shadow) );
		cursor: pointer;
	}
}

.poi-image > :is( i:hover, i.open ) {
	width: max-content;
	z-index: var(--z-poi-poi-focus);
	filter: drop-shadow( var(--default-shadow) );

	&::before {
		font-size: var(--poi-poi-default-length);
		content: '\2a00\FE0E  ' attr(data-name);
		padding: 0 calc( var(--poi-poi-default-length) * .333 ) 0 0;
	}
}


.legend {
	position: fixed;
	top: calc( var(--default-length) * 3 );
	left: var(--default-length);
	text-align: left;
	font: calc( var(--default-length) * .8125 ) profane;
	color: #fff;
	filter: drop-shadow( var(--default-shadow) );
	cursor: initial;

	ul {
		max-height: calc( 100vh - (3 * var(--default-length)) ); /* CONSIDER: Proper calculation instead of this approximation for simplicity's sake */
		overflow: auto;
		scrollbar-width: none; /* Hide scrollbar - Baseline 2024 */
	}

	li {
		display: table;
		background-color: #000;
		padding: 0 .333em;
		cursor: pointer;

		&::before {
			content: attr(data-number) '. ';
		}

		&:hover {
			background-color: #fff;
			color: #000;
		}

		&.new {
			background-color: #fff;
			color: #000;
			font-weight: bold;

			&:hover::before {
				content: attr(data-number) '. \270e\FE0E  ';
			}
		}

		&[data-tips] {
			&::after {
				content: ' 📜\FE0E ';
				transform: translateX(.5em);
			}

			&:hover::after {
				display: none;
			}
		}
	}
}



/* POI-POI & LEGEND CONTROL (one set of controls for all lightboxes!) */

#poi-poi-controls {
	position: fixed;
	left: var(--default-length);
	top: var(--default-length);
	display: flex;
	line-height: 0;
	z-index: var(--z-lightbox);
}

#legend-search {
	width: calc( var(--default-length) * 5 );

	&.no-results {
		background: #f00;
		color: #fff;
	}
}

#legend-toggle {
	&[data-state="0"]::before {
	content: '\2770\FE0E   ';
}
	&[data-state="1"]::before {
	content: '\2771\FE0E   ';
}
}

#poi-poi-toggle {
	&[data-state="0"]::before {
	content: '\29be\FE0E \fe0e\FE0E ';
}
	&[data-state="1"]::before {
	content: '\29bf\FE0E ';
}
}

#poi-poi-helper-add::before {
	content: '\2795\FE0E ';
}
#poi-poi-helper-copy::before {
	content: '✓\FE0E ';
}
 /* CONSIDER: Redo $s['poiPoiSave'] for copy-to-clipboard */

#legend-search-clear::before {
	content: '\2573\FE0E ';
}



/* JOURNAL AKA TAGEBUCH AKA CHRONIK */

#journal-container {
	display: grid; /* flex seems to work identically; one of these is required for max-height to work */
	width: var(--journal-page-width);
	height: calc( var(--journal-page-width) * 1.414285 );
	max-height: var(--journal-page-maxheight);

	a:any-link {
		color: unset;
	}

	:is( h2, h3 ),
	[data-day]:not( [data-day="0"] ) h4 {
		text-align: center;
	}
}

#journal-background {
	position: absolute; /* position: fixed seems to work identically */
	width: inherit;
	height: inherit;
	max-height: inherit;
	background-image: url(../img/paper.webp);
	filter: sepia(6.667%);

	&.flipX {
		transform: scaleX(-1);
	}
	&.flipY {
		transform: scaleY(-1);
	}
	&.flipX.flipY {
		transform: scale(-1, -1);
	}
}

#journal-sidebar {
	display: grid;
	align-content: start;
	position: absolute;
	box-sizing: border-box;
	width: var(--journal-sidebar-width);
	height: inherit;
	margin-left: calc( ( var(--journal-page-width) * -.5 ) );
	padding: var(--default-length);
	user-select: none;
	background: #000;
	color: #fff;
	font-family: picturesque;

	> *:not(:last-child) {
		margin-bottom: var(--default-length);
	}

	button {
		font-size: 1.5em;
		line-height: 0;
		filter: invert(1);
	}

	.separate-above {
		border-top: 1px dotted var(--grey);
		padding-top: var(--default-length);
		line-height: 1;
	}

	.session-split > i {
		font-style: normal;
	}
}

#journal-pagination {
	display: grid;
	grid-template-columns: repeat(5, 20%);
	width: calc( var(--journal-sidebar-width) - 2 * var(--default-length) );
}
#first-page::before {
	content: '❘❮\FE0E ';
}
#previous-page::before {
	content: '❮\FE0E ';
}
#next-page::before {
	content: '❯\FE0E ';
}
#last-page::before {
	content: '❯❘\FE0E ';
}

#page {
	font-size: var(--default-headline-size);
	text-align: center;
	border: none;
	color: #fff;
	background: transparent;

	&::selection {
		color: #000;
		background: #fff;
	}
}

#journal-search-control {
	display: grid;
	grid-template-columns: calc( var(--default-length) * 2 ) auto calc( var(--default-length) * 2 );
	height: calc( var(--default-length) * 2 );
}

#journal-search {
	text-align: center;
	font-size: 1em;
}

#journal-search-clear::before {
	content: '\2573\FE0E ';
	font-size: .667em;
	line-height: 1;
}

#journal-search-results-reorder {
	&[data-tipindex="0"]::before {
	content: '🠝\FE0E ';
}
	&[data-tipindex="1"]::before {
	content: '🠟\FE0E ';
}
}

#journal-search-results, #journal-toc {
	overflow: auto;
	padding: 0 var(--scrollbar-girth) 0 calc( var(--scrollbar-girth) * 2 );
	scrollbar-gutter: stable;
	scrollbar-color: #fff transparent;
}

#journal-search-results {
	:is( h2, h3 ) {
		font-size: 1.275em !important;
		margin: 1em 0 .5em 0;
	}

	h2 {
		margin-top: 0;
		padding-top: .5em;
		border-top: 1px solid #fff;

		&:not(:first-child) {
			margin-top: 1.618em;
		}
	}

	p {
		font: .875em profane;
		color: rgba(255, 255, 255, .667);
		cursor: pointer;
		padding: .5em 0;

		&:hover {
			background: #222;
		}
	}

	b {
		hyphens: none;
		color: rgba(255, 255, 255, 1);
	}
}

/* CONSIDER: From day 1 onwards: opacity: .5 ... but opacity: unset if one is currently on a day (aka page) that is within this very chapter */
#journal-toc li {
	/* META: CSS variables can be locally scoped */
	--list-icon-margin: 1.2em;

	display: table; /* Make li items not span the whole ul width, be »inline« ... to display the tooltip right (literally) next to it */
	cursor: pointer;
	text-align: initial;
	font-family: picturesque-bold;
	line-height: 1;
	padding: .25lh 0;
	margin-left: var(--list-icon-margin);

	&::before {
		content: '⚜ ';
		margin-left: calc( var(--list-icon-margin) * -1 );
	}
}

#journal-content {
	text-align: left;
	font-family: picturesque;
	padding: var(--journal-content-padding) calc( var(--journal-content-padding) - var(--scrollbar-girth) ) var(--journal-content-padding) var(--journal-content-padding);
	overflow: auto;
	cursor: text;
	opacity: var(--journal-content-opacity);
	scrollbar-gutter: stable;
	scrollbar-color: #000 transparent;

	article {
		*::selection {
			color: #fff !important;
			background: #000 !important;
		}

		:is( h2, h3, h4 ) {
			margin-bottom: 1lh;
		}

		[data-chapter] > span.faded {
			line-height: 0;
		}

		:is( b, strong ) {
			font-family: picturesque-bold;
			font-weight: unset;
			/*line-height: 1;*/
		}

		s {
			text-decoration: line-through;
		}

		img {
			display: block;
			margin: 0 auto;
			max-width: 100%;
			cursor: pointer;
		}

		.highlight {
			border-bottom: 1px dotted #000;
			line-height: 0;
			filter: drop-shadow(0 1px 1px #000);
		}

		.ep + [data-chapter] {
			margin-top: 2lh;
		}

		> :is( p, ul ) {
			display: flow-root;
			font-size: var(--journal-paragraph-font-size);
			hyphens: auto;
			line-height: 1.37; /* This seemingly arbitrary value goes well with the font 'Eczar-Regular' */
		}

		> ul,
		:is( p, blockquote, pre, img ) {
			margin-bottom: 1lh;
		}

		> ul {
			/* META: String value for list-style-type instead of circle, dot or whatnot, since browsers might produce DIFFERENT PADDING between icon and text! */
			list-style-type: '• '; /* en space (U+2002) ... slightly wider than a normal space */
			padding-left: 1em;

			ul {
				list-style-type: '- '; /* en space (U+2002) ... slightly wider than a normal space */
				padding-left: 1em;
			}
		}

		> p:not(:first-of-type)[data-session] {
			contain: content; /* Necessary for the ::before with position: fixed (see below), which fixes it TO THIS SELECTOR AND NOT TO THE VIEWPORT */
			margin-top: 1.5lh;
			padding-top: 1lh;
			border-top: 1px dotted var(--grey);

			&::before {
				position: fixed;
				margin-top: -1lh;
				transform: scale(.618033);
				transform-origin: left top;
				color: var(--grey);
				/* META: attr() is kind of amazing and should be looked into some more! */
				content: 'Runde ' attr(data-session);
			}
		}

		> blockquote > p {
			text-align: center;
			margin: unset;
			font: calc( var(--journal-paragraph-font-size) * 1.2 ) journal-quote;
			hyphens: none;
			color: midnightblue; /* Mimicing ink */

			&:empty {
				height: .5lh;
			}
		}

		a {
			text-decoration: underline 1px dotted ;
			text-underline-offset: var(--default-text-underline-offset);

			&:hover {
				text-decoration: underline solid;
			}

			/* META: Styling links as follows is some of the most ingenious CSS ever !!! */
			&[href^='http://prd.5footstep.de']::after {
				content: url(../img/5footstep_favicon.png);
				position: relative;
				top: var(--default-text-underline-offset);
				left: var(--default-text-underline-offset);
				margin-right: var(--default-text-underline-offset);
				opacity: var(--journal-content-opacity);
			}

			&[href^='https://drive.google.com']::after {
	content: '  🗀\FE0E ';
}
		}

		pre {
			tab-size: 4;
			font-family: monospace;
		}

		&[data-day="0"] {
			> ul:not(:first-of-type) {
				font-size: 1em !important;
			}

			> :is( ul:last-of-type, h4:first-of-type + ul ) {
				margin-bottom: 2lh;
			}
		}

		/* META: ::first-letter is perfect for initials */
		&[data-day="0"] > p::first-letter,
		> p:first-of-type::first-letter {
			font-family: journal-initial;
			float: left;
			font-size: 4em;
			line-height: 1;
			margin: 0 .5rem 0 -.2rem;
			text-transform: lowercase;
		}
	}
}



/* ENCOUNTER LIGHTBOX */

#encounter > *:not(textarea) {
	user-select: none;
	position: fixed;
}

#encounter-turn {
	font-family: picturesque-bold;
	font-size: calc( var(--default-length) * 2 );
	color: #fff;
	bottom: var(--default-length);
	filter: drop-shadow(var(--default-shadow));

	&::after {
		content: ' ' attr(data-turn);
	}
}

#encounter-button-bar {
	right: var(--default-length);
	bottom: var(--default-length);

	button {
		font-size: calc( var(--default-length) * 1.5 );
	}
}



/* ENCOUNTER PROTAGONISTS */

#protagonists {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;

	.protagonist {
		/* CONSIDER: Abolish arbitrariness */
		width: 13em;
		padding: 0 calc( var(--default-length) * .5 ) calc( var(--default-length) * .5 ) calc( var(--default-length) * .5 );
		background-color: var(--protagonist-bg);
		box-shadow: var(--default-shadow);

		/* META: Kinda next-level shit (selector- and colour-tech-wise) :D */
		&.friendly:not(.done):is( :first-of-type, .done + * ) {
			background: color-mix( in oklab, var(--protagonist-bg), var(--protagonist-friendly-bg) var(--protagonist-colmix) );
		}
		&.hostile:not(.done):is( :first-of-type, .done + * ) {
			background: color-mix( in oklab, var(--protagonist-bg), var(--protagonist-hostile-bg) var(--protagonist-colmix) );
		}

		&.done:not( :hover, .peeked ) {
			filter: saturate(0);
			opacity: .25;
		}

		/* CONSIDER: This would be SO AMAZING if #encounter wouldn't close after clicking the cancel or save button :( */
		/*&:has(textarea:focus) {
			transform-origin: top center;
			transform: scale(1.5);
		}*/

		button {
			padding: 0;
			line-height: 1;
			font-size: calc( var(--default-length) * 1.5 );
			width: 1.125em;
			height: 1.125em;
			box-shadow: var(--default-shadow);

			&[name="close"]::before {
	content: '🞨\FE0E ';
}
			&[name="save"]::before {
	content: '🖫\FE0E ';
}
		}

		svg {
			vertical-align: top;
			margin-left: .333em;
			width: 1lh;
			height: 1lh;
			fill: #000;
		}

		> :is( h1, h2, h3, h4, h5, h6 ) {
			line-height: 1.333;
		}
		> :not( h1, h2, h3, h4, h5, h6 ) {
			/* CONSIDER: Abolish arbitrariness (to be fair, 125% is also the value of tt.effects.font125Tooltip) ... */
			font-size: 125%;
		}

		ul:hover::after {
			content: '✎⋯';
			position: relative;
			font-size: 1.5em;
			line-height: 1;
			position: relative;
			top: .25em;
		}

		:is( .buff, buff ) {
			color: darkgreen;
		}
		:is( .nerf, nerf ) {
			color: darkred;
		}

		ul {
			li {
				i {
					font-style: normal;
					font-size: .8em;
				}

				.remaining-turns {
					font-weight: bold;
					letter-spacing: .25em;
				}
			}

			hr {
				margin-bottom: 0;
			}
		}

		textarea {
			width: inherit;
			font-size: .88em;
			height: 7em; /* Provides room for 5 lines */
			background: #000;
			color: #fff;
			border: none;
			font-weight: bold;
		}
	}
}



/* Map + radius helpers + canvas */

#encounter-map {
	bottom: calc( var(--default-length) * 5 ); /* semi-arbitrary, just to make room for the buttons */
	background-size: contain, 100%;
    background-blend-mode: multiply;
	cursor: initial;
}

[id^="encounter-radius-"] {
	box-sizing: border-box;
	position: absolute;
	border: 1px dashed var(--helper-color);
}
#encounter-radius-helper {
	border-width: 2px;
}

#encounter-aoe-helper {
	box-sizing: border-box;
	position: fixed;
	border: 2px dotted var(--helper-color);

	&::after {
		color: var(--helper-color);
		font-size: .75rem;
		position: relative;
		top: -2em;
	}

	/* TODO: Inject data-attr names and German translation of the aoetype from SpellDict.json :O */
	&[data-aoetype="emanation"]::after {
		content: 'Ausbreitung - Radius ' attr( data-aoelength ) 'm';
	}
}

canvas {
	cursor: crosshair;
}



/* GLOBAL BUTTONS */

[data-dialog="encounter-actions"]::before {
	content: '🏃\FE0E   ';
}
#encounter-undo::before {
	content: '⮌\FE0E   ';
}
#encounter-next::before {
	content: '🖫\FE0E   ';
}



/* Protagonist's pins */

#encounter i.pin {
	margin: calc( var(--default-length) * -.5 ) 0 0 calc( var(--default-length) * -.5 );
	position: absolute; /* absolute needed if child element of the encounter map div */
	width: var(--default-length);
	height: var(--default-length);
	border-radius: var(--default-length);
	color: #fff;
	line-height: 1.125;
	font-style: normal;
	font-size: calc( var(--default-length) * .875);
	box-shadow: var(--default-shadow);
	transform: scale(1.125);

	&.friendly {
		background: var(--protagonist-friendly-bg);

		&.done {
			color: var(--protagonist-friendly-bg);
		}
	}

	&.hostile {
		background: var(--protagonist-hostile-bg);

		&.done {
			color: var(--protagonist-hostile-bg);
		}
	}

	&.done {
		background: whitesmoke;
	}
}



/* META: The pantheon table CSS (particularly revolving around .matrix) is quite an achievement! */
/* PANTHEON */

#pantheon-content {
	h3 {
		margin-top: 1lh;
	}

	ul {
		list-style-type: disc;
		padding-left: 1.5em;
	}

	h3 + *,
	ul {
		margin-top: .5em;
	}

	p {
		&:not(.resource) {
			opacity: .667;
			font-size: smaller;
		}

		&.resource {
			&::before {
				content: '➔ ';
			}
		}

		a {
			color: #000;
			text-decoration: underline dotted 1px;
			text-underline-offset: var(--default-text-underline-offset);

			&:hover {
				text-decoration: underline;
			}
		}
	}
}

#races-filter {
	font-family: picturesque-bold;
	font-size: unset;
	margin-bottom: 1lh;
}

#races-filter-clear::before {
	content: '\2573\FE0E ';
}

.matrix {
	display: grid;
	grid-template-columns: repeat( 4, auto );
	user-select: none;
	margin-bottom: var(--journal-content-padding);

	span {
		&:empty {
			border: unset;
		}

		&.bar {
			align-self: center;
			justify-self: center;
			border: unset;
			font-family: picturesque-bold;
			opacity: .333;
		}
	}

	> span {
		border-bottom: 1px solid #000;
		padding: .5em;

		&:nth-last-child(-n+4) {
			border: none;
			padding-bottom: unset;
		}

		&:nth-child(2n):not(:nth-child(4n)) {
			padding-left: unset;
		}

		&:nth-child(4n) {
			padding-right: unset;
		}

		&:is( :nth-child(5), :nth-child(6), :nth-child(7), :nth-child(8) ) {
			padding-top: unset;
		}

		> span {
			display: block;
			cursor: pointer;

			&:hover {
				text-decoration: underline;
			}
		}

		> i,
		> span > i {
			opacity: 67%;
			font-size: smaller;
			font-style: normal;

			&::before {
				content: ' - ';
			}
		}
	}
}



/* NAVIGATION SIDEBAR */

#nav {
	position: fixed;
	top: var(--default-length);
	right: calc( var(--default-length) - var(--scrollbar-girth) );
	user-select: none;
	overflow-x: hidden;
	max-height: calc( 100vh - ( var(--default-length) * 2 ) );
	z-index: var(--z-nav);
	scrollbar-gutter: stable;
	scrollbar-color: var(--dark-gui-bg) transparent;
}

#nav-content {
	padding: 0 var(--default-length) var(--default-length) var(--default-length);
	text-align: right;
	color: white;
	background-color: var(--lightbox-and-modal-background);
	white-space: nowrap; /* necessary for when #nav overflows (so that there's no linebreak between #nav-close and #types */

	ul {
		margin: 1em .309em 0 0;
	}

	li {
		margin-right: -.382rem;

		span {
			cursor: pointer;

			svg {
				vertical-align: middle;
				fill: var(--grey);
				pointer-events: none;
				width: 24px;
				height: 24px;
				filter: drop-shadow(-1px -1px 2px #000);
			}
		}
	}
}

#nav-right {
	display: inline-block;
	padding-top: var(--default-length);
	padding-right: var(--default-length);

	a {
		color: #fff;
		cursor: pointer;
	}

	:not(li) > a {
		&:hover {
			color: #fff;
		}

		&:not(:last-of-type)::after {
			content: ' / ';
			color: var(--grey);
		}

		&:not(.lit) {
			color: var(--grey);
		}
	}

	ul :is( a:hover, a:active ) {
		border-bottom: 1px dotted #fff;
	}

	[data-religious] {
		opacity: .667;
		margin: 0 !important;

		&::before {
			content: ' – ';
		}
	}

	.navlink span {
		margin-left: .5em;
	}
}

#types {
	font: calc( var(--default-length) * 2 ) picturesque-bold;
	margin-bottom: var(--default-length);
}

#nav-search-input,
#nav-search-results-label {
	font-family: picturesque-bold;
	font-size: inherit;
}

#nav-search-input {
	max-width: calc( var(--default-length) * 6 );
}

#nav-search-clear::before {
	content: '\2573\FE0E ';
}

#nav-close {
	float: left;
	position: sticky;
	top: .875rem;
	margin-right: calc( var(--default-length) * 1.5 );
	font-size: 2rem;
	cursor: pointer;
}
#nav-close::before {
	content: '\2573\FE0E ';
}



/* MAP BUTTONS */

.map-btn {
	background-color: var(--dark-gui-bg);
	border-radius: 50%;
	width: var(--map-btn-diameter);
	height: var(--map-btn-diameter);
	user-select: none;
	border: 0;
	display: flex;
	align-items: center;
	justify-content: center;

	&:hover {
		background-color: var(--dark-gui-bg-hover);
	}

	img {
		max-width: 66.667%;
		max-height: 66.667%;
	}

	span {
		color: #fff;
		font-size: 1.75rem;
	}
}

#map-buttons {
	position: fixed;
	bottom: 0;
	padding-bottom: calc( var(--map-btn-diameter) * .333 );
	width: 100vw;
	display: flex;
	justify-content: center;
	z-index: var(--z);
	/* META: Move map-btn container 'off-viewport', which enables clicking the space left/right of the buttons (typically to grab & drag the map) */
	margin-bottom: calc( var(--map-btn-diameter) * -1 );

	.map-btn {
		/* META: Move the map-buttons upwards - see corresponding hack in #map-buttons - this is a SPLEDID example of the benefits of negative margins! */
		margin-top: calc( var(--map-btn-diameter) * -2 );
	}

	> *:not(:last-child) {
		margin-right: calc( var(--map-btn-diameter) * .125);
	}
}

.map-btn:not(#mouse-pos) span,
.map-btn :is( svg, img ) {
	filter: drop-shadow( var(--default-shadow) );
}

#journal-open img {
	filter: contrast(2) invert(1);
}

#pantheon-open img {
	filter: invert(1);
}

#pin-mode-cycle {
	&[data-tipindex="2"] svg {
		transform: rotate(0deg);
	}
	&[data-tipindex="1"] svg {
		transform: rotate(-45deg);
	}
	svg {
		fill: #fff;
		width: 1.5rem;
		transform: rotate(45deg);
	}
}

#mouse-pos {
	display: unset; /* unsetting flex (inherited from #map-buttons) to enable linebreaks */
	text-align: center;
	line-height: 1;
	cursor: pointer;

	span {
		font: .8125rem picturesque-bold;
		position: relative;
		top: .5em;
	}

	[id^="tile"]::after {
		content: '.';
		padding: 0 .1em;
		font-weight: bold;
	}
}

#offset-x::after {
	content: '\A';
	white-space: break-spaces;
}

#tile-contrast-slider {
	position: absolute;
	left: 0;
	transform: rotate(270deg);
	filter: saturate(0);
}



/* TOOLTIP */

#tooltip {
	position: fixed;
	background: var(--dark-gui-bg-hover);
	color: #fff;
	border-radius: .5em;
	font: 1em picturesque-bold;
	line-height: 1.2;
	padding: .089em .5em .167em .5em;
	z-index: var(--z-tooltip);
	box-shadow: var(--default-shadow);
	text-align: center;
	pointer-events: none !important; /* prevents tooltip flickering when hovering over it (see lightbox images) */

	hr {
		border: none;
		border-top: 1px dashed var(--grey);
	}

	.warning {
		background-color: #f00;
	}

	:is( buff, nerf ) {
		text-decoration: underline;
		text-underline-offset: .125lh;
		text-decoration-thickness: .125lh;
	}
	buff {
		color: #0f0;
	}
	nerf {
		color: #f00;
	}
}



/* HELP LIGHTBOX */

#help-content {
	> p {
		margin-left: .375em;

		&:not(:last-of-type) {
			margin-bottom: 1lh;
		}

		> sub {
			font-size: .667em;
			vertical-align: text-bottom;
			opacity: .5;
		}
	}

	> * > i {
		display: inline-block;
		margin-right: var(--default-length);
		padding: var(--default-length) calc( var(--default-length) * .333 );
		border-radius: .333em;
		border: 1px solid #000;
		font-style: normal;
		line-height: 0;
		width: 1.333rem;
		text-align: center;
		background: #000;
		color: #fff;
		font-weight: bold;
		font-family: profane;
		box-shadow: var(--default-shadow);
		transform: scale(1.333);

		&:first-of-type {
			margin-right: 1em;
		}

		&:empty {
			visibility: hidden;
			vertical-align: bottom;
		}

		&.white {
			color: #000;
			background-color: #fff;
			border-color: #fff;
		}

		> sub {
			font-size: .667em;
			line-height: revert;
			vertical-align: bottom;
		}
	}

	h2 {
		display: inline;
		vertical-align: top;
	}

	hr {
		visibility: hidden;
		margin-bottom: 1.5em;
	}

	ul li:not(:last-of-type) {
		margin-bottom: 1lh;
	}

	#chromium-smooth-scroll-help span {
		font-family: monospace;
		vertical-align: bottom;
		margin-right: .5em;
	}
}



/* SPELLBOOK LIGHTBOX */

#spellbook-content button:not( :is( form button ) ) {
	margin: 1lh 0;
}

.spellbook-entry {
	padding: var(--default-length) 0;

	ul li {
		padding: .125em;

		/*&:nth-of-type(even) {
			background: rgba(0, 0, 0, .03625);
		}*/
	}
}

#spell-form {
	:is( label:has(*), select, input[type="checkbox"] ) {
		cursor: pointer;
	}

	:is( input, select ) {
		margin: 0 1em 0 .333em;
	}

	select[multiple] {
		vertical-align: text-top;
		scrollbar-color: auto; /* Visibility of the scrollbar has to be enforced, even if overflowing vertically, it seems :| */
	}

	label {
		user-select: none;
		white-space: nowrap;

		/* Clumsy Hack to undo stuff: */
		&:first-of-type select {
			margin-left: unset;
		}
		&:last-of-type :is( input, select ) {
			margin-right: unset;
		}
	}

	[data-prop]::before {
		content: attr(data-name);
		display: block;
		margin-top: 1lh;
		font-weight: bold;
	}

	:invalid:not([disabled]) {
		background: yellow;
	}

	button[data-action] {
		float: inline-end;
		font-weight: bold;

		&[disabled] {
			display: none;
		}
	}

	.attract {
		margin-right: .333em;
	}
}



#birdseye-caption {
	position: fixed;
	left: var(--default-length);
	top: var(--default-length);
	user-select: none;

	h2 {
		font-family: picturesque-bold;
		font-size: 2em;
	}
}



/* SINGLE-PURPOSE TOGGLES */

.none {
	display: none !important;
}

.hidden {
	visibility: hidden;
}

.faded {
	opacity: .5;
}

.transparent {
	opacity: 0;
	pointer-events: none;
}

.z-poi-hovered {
	z-index: var(--z-poi-hovered);
}

.inline {
	display: inline;
}

.active svg {
	fill: white !important;
}