.litm.litm--character {
	background: url("../../assets/media/character-bg.webp") no-repeat left / cover;
	overflow: visible;
	z-index: unset;
	border-radius: 0px;

	&:not(.minimized) {
		width: 15.625rem !important;
		height: 21.875rem !important;

		& .window-header {
			& > * {
				transition: scale 0.15s;

				&.close {
					font-size: var(--font-size-18);
				}

				&:hover {
					scale: 1.2;
				}
			}
		}

		& .window-title {
			display: none;
		}
	}

	& .window-header {
		border: none;
		font-family: var(--litm-font-text);
		justify-content: space-between;

		&::before {
			content: "";
			position: absolute;
			background: url(../../assets/media/top-frame-branches.webp) no-repeat
				center / contain;
			height: 55%;
			width: 167%;
			z-index: 1;
			pointer-events: none;
			top: 1.25rem;
			left: -3.125rem;
			rotate: 15deg;
			z-index: -1;
		}
	}

	& .window-content {
		background: transparent;
		overflow: visible;
	}

	& form {
		&::before {
			content: "";
			position: absolute;
			background: url(../../assets/media/single-flower.webp) no-repeat center /
				contain;
			height: 40%;
			width: 40%;
			z-index: 1;
			pointer-events: none;
			bottom: 5.75rem;
			right: 0px;
			rotate: 40deg;
		}

		&::after {
			content: "";
			position: absolute;
			background: url(../../assets/media/necklace.webp) no-repeat center /
				contain;
			height: 35%;
			width: 50%;
			z-index: 1;
			pointer-events: none;
			top: -1.65rem;
			left: 23rem;
			rotate: -15deg;
		}
	}

	& .avatar {
		position: absolute;
		left: -14.0625rem;
		top: -4rem;
		border: none;
		z-index: 0;
	}

	& #name {
		position: absolute;
		top: -3.75rem;
		left: -0.625rem;
		font-family: var(--litm-font-heading);
		font-weight: 800;
		font-size: var(--font-size-32);
		height: auto;
		width: 32.5rem;
		background-color: transparent;
		border: none;
		color: var(--litm-color-primary-bg);
		text-shadow: 0 0 6px var(--litm-color), 0 0 12px var(--litm-color-dark-bg);
		transition: background-color 0.15s;

		&:focus {
			box-shadow: none;
			background-color: rgb(0, 0, 0, 0.1);
		}
	}

	& .nav {
		height: 7.5rem;
		max-width: 13.75rem;
		display: flex;
		justify-content: center;
		margin-block: var(--litm-space-3) var(--litm-space-2);
		gap: var(--litm-space-3);

		& > div {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: var(--litm-space-2);

			& span {
				font-family: var(--litm-font-accent);
				color: var(--litm-color-primary-bg);
				font-size: var(--font-size-20);
				text-shadow: 4px 3px 3px rgb(0, 0, 0, 0.2);
			}

			& button {
				border: none;
				width: auto;
				height: 3.75rem;
				background: transparent;
				font-size: 3.25rem;
				color: var(--litm-color-accent);
				text-shadow: 0px 0px 4px var(--litm-color-dark-bg);
				transition: scale 0.15s;

				&:hover,
				&:focus,
				&:active {
					box-shadow: none;
				}

				& img {
					border: none;
					width: 3.75rem;
					filter: drop-shadow(0 0 3px rgb(0, 0, 0, 0.6));

					&[alt="Dice"] {
						width: 5rem;
					}
				}

				&:hover {
					text-shadow: 0 0 4px var(--litm-color-primary-bg);
					scale: 1.1;
				}
			}
		}
	}

	& #note {
		position: absolute;
		top: 50px;
		left: 70px;
		background: url("../../assets/media/character-bg.webp") no-repeat left /
			contain;
		color: var(--litm-color-primary-bg);
		box-shadow: none;
		filter: drop-shadow(0 0 6px var(--litm-color-primary));
		padding: var(--litm-space-3);
		display: none;
		flex-direction: column;
		height: 22.5625rem;
		width: 31.25rem;
		max-width: unset;
		font-family: var(--litm-font-text);
		z-index: 3;

		&::before {
			content: "";
			position: absolute;
			background: url(../../assets/media/bottom-branch.webp) no-repeat center /
				contain;
			height: 46%;
			width: 55%;
			z-index: 1;
			pointer-events: none;
			bottom: -60px;
			right: -70px;
		}

		&::after {
			content: "";
			position: absolute;
			background: url(../../assets/media/feather.webp) no-repeat center /
				contain;
			height: 45%;
			width: 35%;
			z-index: 1;
			pointer-events: none;
			top: -80px;
			left: 45px;
		}

		&[style*="display: block"] {
			display: flex !important;
		}

		& .litm--character-note-wrapper {
			margin-block-end: var(--litm-space-2);
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-inline: var(--litm-space-1);
			flex: none;

			& button {
				border: none;
				background: none;
				width: auto;
				color: var(--litm-color-primary-bg);

				&:hover,
				&:focus,
				&:active {
					box-shadow: none;
					text-shadow: 0 0 4px rgb(0, 0, 0, 0.5);
				}
			}
		}

		& .editor {
			padding-inline: var(--litm-space-2);
		}

		& [role="application"] {
			height: 100% !important;
		}
	}

	& .litm--character-backpack {
		position: absolute;
		right: -14.75rem;
		width: 18.75rem;
		height: 18.75rem;
		top: -2rem;
		pointer-events: none;

		& .litm--backpack-bg-frame,
		& .litm--backpack-bg {
			transform: translate(-5px, -15px) scale(0.8) rotate(10deg);
		}

		& .litm--backpack-bg-frame {
			width: 15.625rem;
		}

		& .litm--backpack-bg {
			height: 97%;
			width: 15rem;
			pointer-events: all;
			overflow: visible;

			& .taglist {
				height: 13.125rem;
			}
		}

		& #context-menu {
			pointer-events: all;
		}
	}

	& .litm--character-themes {
		position: relative;
		z-index: 2;
	}

	& .litm--character-theme {
		isolation: isolate;
		position: absolute;
		top: 0px;
		left: -14.0625rem;
		width: 18.75rem;
		translate: -20% -18%;
		rotate: 1deg;
		scale: 0.71;
		transition: scale 0.13s;

		&:hover,
		&.hovered {
			scale: 0.85;
			z-index: 3;
		}

		&:first-child::before {
			content: "";
			position: absolute;
			background: url(../../assets/media/middle-branches.webp) no-repeat center
				/ contain;
			height: 55%;
			width: 55%;
			z-index: 3;
			pointer-events: none;
			bottom: -5rem;
			left: -3.9375rem;
			rotate: 115deg;
		}

		&:nth-child(2) {
			top: 1rem;
			left: -1.375rem;
			rotate: -1deg;

			&::before {
				content: "";
				position: absolute;
				background: url(../../assets/media/raven.webp) no-repeat center /
					contain;
				height: 55%;
				width: 55%;
				z-index: 3;
				pointer-events: none;
				bottom: -9.375rem;
				left: -5rem;
				rotate: -10deg;
				transform: scale(-0.6, 0.6);
			}
		}

		&:nth-child(3) {
			top: 3.75rem;
			left: 11rem;
			rotate: 0deg;

			&::before {
				content: "";
				position: absolute;
				background: url(../../assets/media/flowers-top.webp) no-repeat center /
					contain;
				height: 55%;
				width: 55%;
				z-index: 3;
				pointer-events: none;
				top: 17.5rem;
				left: -5.625rem;
				rotate: 10deg;
			}
		}

		&:nth-child(4) {
			top: 3.9375rem;
			left: 23.75rem;
			rotate: -3deg;

			&::before {
				content: "";
				position: absolute;
				background: url(../../assets/media/bottom-frame-branches.webp) no-repeat
					center / contain;
				height: 55%;
				width: 120%;
				z-index: 0;
				pointer-events: none;
				top: -7.8125rem;
				left: -1.875rem;
				rotate: 0deg;
			}
		}

		& .litm--theme-background {
			overflow: visible;
		}

		& .litm--theme-top {
			padding-block-start: 8px;

			& .litm--theme-top-bg {
				margin: 0px 13px 0px 6px;
				display: flex;
				flex-direction: column;

				& .litm--theme-tag .tag--name {
					min-height: var(--font-size-28);
				}
			}

			& .litm--theme-meta {
				padding-block: 6px 12px;
			}
		}

		& .litm--theme-title,
		& .litm--weakness {
			width: auto;
			padding: 0px;
			position: relative;
		}
	}

	& .litm--character-story-tags {
		position: absolute;
		margin: 0px;
		padding: 0px;
		list-style: none;
		top: 0.625rem;
		right: -21.875rem;
		rotate: 30deg;
		pointer-events: none;
		display: grid;
		grid-template-areas: "centered";
		place-items: center;
		z-index: -1;
		isolation: isolate;
		box-shadow: none;
		width: 13.75rem;

		&:hover,
		&:focus-within,
		&.focused,
		&.hovered {
			display: flex;
			flex-direction: column;
			pointer-events: all;
			top: -3.75rem;
			z-index: 2;
			rotate: 0deg;

			& .litm--story-tag {
				display: relative;
				margin-block-end: -0.9375rem;
				scale: 1;
				transform: rotate(5deg);

				&:nth-child(1) {
					margin-block-end: -40px;
				}

				&:nth-child(2) {
					margin-block-end: -40px;
				}

				&:nth-child(3) {
					margin-block-end: 0px;
					transform: rotate(15deg);
				}
			}
		}

		& .litm--story-tag {
			width: 13.75rem;
			grid-area: centered;
			pointer-events: all;
			display: grid;
			grid-template-areas: "centered";
			place-items: center;
			list-style: none;
			scale: 0.6;
			transition: scale 0.13s, rotate 0.13s, top 0.13s;
			transform-origin: left;
			transform: rotate(10deg);

			&:nth-child(1) {
				transform: rotate(-20deg);
			}

			&:nth-child(2) {
				transform: rotate(-5deg);
			}

			& > * {
				grid-area: centered;
			}

			& > div {
				width: 55%;
				margin-top: 14px;
			}

			& input[type="text"] {
				background: none;
				border: none;
				margin-inline-start: 12px;
				font-family: var(--litm-font-accent);
				color: var(--litm-color);

				&:focus {
					box-shadow: none;
					background-color: rgb(0, 0, 0, 0.1);
				}
			}

			& button {
				background: none;
				border: none;
				margin: 0px;
				padding: 0px;
				position: relative;
				font-family: var(--litm-font-accent);
				color: var(--litm-color);

				& span {
					position: absolute;
					top: 2rem;
					width: 55%;
					left: 2.5rem;
				}
			}

			& .litm--story-tag-values {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				margin-block-start: 9px;
				margin-inline-start: -8px;
				gap: 8.2px;
				rotate: -1deg;

				& .litm--story-tag-value {
					position: relative;

					& label {
						position: absolute;
						left: 3px;
						top: -7px;
						font-family: var(--litm-font-primary);
						color: color-mix(in hsl, var(--litm-color) 70%, transparent);
						font-size: var(--font-size-14);
					}
				}

				& input[type="checkbox"] {
					margin: 0px;
					appearance: none;
					width: 0.8em;
					height: 1.2em;
					color: var(--litm-color);
					font-size: var(--font-size-20);
					cursor: pointer;

					&:checked::before {
						content: "✓";
					}
				}
			}
		}
	}

	& .litm--theme-tag-button {
		position: relative;
		display: flex;
		align-items: center;
		width: 100%;
		gap: var(--litm-space-3);
		color: var(--litm-color);
		line-height: 135%;
		padding: 0px;
		cursor: auto;
		opacity: 0.5;

		&[data-click="select"] {
			cursor: pointer;
			opacity: 1;
		}
	}

	& [data-selected] {
		&.burned > .litm--burn {
			background-image: url("../../assets/media/burn-c.svg");
		}
	}

	& [data-selected]::before {
		content: "";
		position: absolute;
		width: 80%;
		height: calc(5px + 100%);
		background: url(../../assets/media/brush.svg) no-repeat center;
		background-blend-mode: color;
		background-size: contain;
		opacity: 0.8;
		top: -5px;
		left: 50%;
		transform: translateX(-50%);
	}

	#context-menu {
		cursor: pointer;
	}
}
