/*==================================================
# If you're reading this, I'm so sorry.
# No attempt at a managable codebase was made.
# Continue at your own risk.
==================================================*/

body {
	display: grid;
	place-content: center;
	background-color: black;
	--b: #252538;
	--w: #9595a1;
	overflow: hidden;
	font-family: "VT323", monospace, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
}

main {
	background-color: var(--b);
	color: var(--w);
	position: relative;
}

strong {
	font-weight: 700;
}

.workers-wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	position: absolute;
	height: 100%;
	padding-block: 1rem;
	left: 1rem;
	bottom: 0;
	z-index: 1;

	.worker {
		display: grid;
		grid-template-columns: 1fr 2fr;
		color: var(--b);
		background-color: var(--w);
		padding: 0.5rem 0.4rem;
        gap: 0.4rem;
		width: 13rem;
		position: relative;

		&:before {
			content: var(--name);
			font-weight: 700;
		}

		&.arrested {
			opacity: 0.25;
			pointer-events: none;

			.police-warning {
				display: grid;
				position: absolute;
				inset: 0;
				z-index: 122;
				mix-blend-mode: hard-light;
				place-content: center;
				font-weight: 900;
				color: #10101f;
				font-size: 1.9rem;
			}

			.action-selector button {
				opacity: 0.4;
			}
		}

		&.inquisitor-mode {
			opacity: 0.2;
			pointer-events: none;
		}

		&.dont-investigate {
			opacity: 0.5;
			pointer-events: none;
		}

		.mole-warning {
			display: none;
		}

		.police-warning {
			display: none;
		}

		&.static{
			.avatar {
				background-image: none !important;

				video {
					display: inline-block !important;
					height: 100%;
					width: 100%;
					position: relative;
					z-index: 3;
				}
			}
		}

		&.found-mole {
			opacity: 0.5;
			pointer-events: none;

			.mole-warning {
				display: grid;
				position: absolute;
				inset: 0;
				background: #33000059;
				z-index: 122;
				mix-blend-mode: hard-light;
				place-content: center;
				font-weight: 900;
				color: #551c1c;
				font-size: 1.9rem;
			}

			.action-selector button {
				opacity: 0.4;
			}
		}

		&.investigation-mode:not(.no-secrets) {
			cursor: pointer;
			transition: scale .2s;

			&:hover {
				scale: 1.05;
			}

			.action-selector,
			.current-action {
				opacity: 0.25;
				pointer-events: none;
			}
		}

		.worker-info {
			min-width: 5rem;
			font-size: 0.6rem;

			.avatar-wrap {
				animation: blue-me 5ms infinite;
				position: relative;
				width: 100%;
				aspect-ratio: 1;
			}

			.avatar {
				position: relative;
				width: 100%;
				aspect-ratio: 1;
				background-size: 120%;
				background-position: 50% 50%;
				animation: camera 7s infinite cubic-bezier(0.64, 0.57, 0.67, 1.53);
				animation-delay: var(--r);
				transition: 1s;

				video {
					width: 100%;
					display: none;
				}
			}

			.police-indicator {
				display: flex;
				justify-content: space-evenly;
				margin-top: 0.5rem;
			}

			.cuffs-off {
				opacity: 0.35;
				filter: grayscale(1);
			}

			.cuffs {
				width: 1.4rem;
				aspect-ratio: 1;
				display: block;
				background-size: contain;
				background-repeat: no-repeat;
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='Layer 1' viewBox='0 0 64 80' fill='%23581f1f'%3E%3Cpath d='M62 39.51a6.67 6.67 0 0 1-4.71 1.93c.17.33.34.67.48 1A11.67 11.67 0 0 1 48 58.58a11.45 11.45 0 0 1-2.81-.11 5.71 5.71 0 0 1-.52 3 5.83 5.83 0 0 1-1.38 1.86 17 17 0 0 0 5.13.37A16.74 16.74 0 0 0 62 39.51Z'/%3E%3Cpath d='M62.09 33a2.36 2.36 0 0 0-1.36-2.87l-11.61-4.82a2.33 2.33 0 0 0-3 1l-2 3.31a17.51 17.51 0 0 0-6.57 32.09 2.85 2.85 0 0 0 .55.28 3.36 3.36 0 0 0 2.21.13 3.23 3.23 0 0 0 2-1.77 3.3 3.3 0 0 0-1.23-4.2 10.91 10.91 0 0 1 10-19.33l4.46 1.83a4.34 4.34 0 0 0 5.81-2.83Zm-13.9-3.51a1.24 1.24 0 1 1 1.61-.68 1.23 1.23 0 0 1-1.61.64Zm10.51 4.25a1.24 1.24 0 1 1 1.62-.68 1.24 1.24 0 0 1-1.62.68ZM33.8 22.65a6.64 6.64 0 0 1-2.21-.31A6.8 6.8 0 0 1 29 20.83c-.1.36-.21.72-.34 1.07a11.66 11.66 0 0 1-18.19 5 11.08 11.08 0 0 1-2-2 5.66 5.66 0 0 1-2.4 1.81 5.89 5.89 0 0 1-2.28.41 16.22 16.22 0 0 0 3.54 3.78 16.74 16.74 0 0 0 26.47-8.25Z'/%3E%3Cpath d='M38.36 18a2.36 2.36 0 0 0 1-3l-5.2-11.51a2.32 2.32 0 0 0-2.86-1.26l-3.72 1.05A17.51 17.51 0 0 0 .81 22.14a3.72 3.72 0 0 0 .2.59 3.39 3.39 0 0 0 1.53 1.6 3.26 3.26 0 0 0 2.7.12 3.32 3.32 0 0 0 2-3.91 10.91 10.91 0 0 1 20.5-7.25l2 4.4a4.32 4.32 0 0 0 2.6 2.31 4.37 4.37 0 0 0 3.55-.4ZM30.64 5.87a1.24 1.24 0 1 1 2.26-1 1.24 1.24 0 0 1-2.26 1Zm4.72 10.32a1.24 1.24 0 0 1 2.25-1A1.22 1.22 0 0 1 37 16.8a1.24 1.24 0 0 1-1.64-.61ZM63.44 14.76a7.09 7.09 0 0 0-7-7.08 7.09 7.09 0 0 0-7.08-7 7 7 0 0 0-4.64 1.75 7.05 7.05 0 0 0-9-.24l.16.27.13.27 1.34 2.97a3.42 3.42 0 0 1 5.33-.18 7 7 0 0 0 0 4.54 3.4 3.4 0 0 1-2.59 1.19h-.23l1.3 2.87a5 5 0 0 1 .22.65 7.11 7.11 0 0 0 3.36-1.63 7 7 0 0 0 4.54 1.75A7 7 0 0 0 51 19.41a7 7 0 0 0-1.71 3.88 4.5 4.5 0 0 1 .49.14l.14.06 3 1.24a3.73 3.73 0 0 1-.07-.68 3.47 3.47 0 0 1 1.19-2.59 7 7 0 0 0 4.55 0 3.44 3.44 0 0 1-.34 5.46l3.2 1.32c.14.06.27.14.41.21a7 7 0 0 0-.21-9 7.09 7.09 0 0 0 1.79-4.69Zm-3.62 0a3.43 3.43 0 0 1-1.19 2.59 7 7 0 0 0-4.55 0 3.43 3.43 0 0 1-1.19-2.59 3.39 3.39 0 0 1 .14-.91 7.24 7.24 0 0 0 2.42-2.41 3.38 3.38 0 0 1 .9-.14 3.47 3.47 0 0 1 3.47 3.46Zm-13-4.7a7 7 0 0 0 0-4.54 3.45 3.45 0 0 1 6.06 2.27 3.39 3.39 0 0 1-.14.91 7.18 7.18 0 0 0-2.42 2.42 3.39 3.39 0 0 1-.91.13 3.43 3.43 0 0 1-2.62-1.19Z'/%3E%3C/svg%3E");
			}
		}

		.worker-card {
			display: flex;
			align-items: center;
			font-size: 0.6rem;
			grid-column: span 2;
			justify-content: space-around;
			height: 3.7rem;

			.secret {
				height: 100%;
				aspect-ratio: 1;
				position: relative;
				border: 0.1rem solid;
				overflow: hidden;

				.secret-screen {
					height: 100%;
				}

				.pixelGrid {
					display: none;
				}

				&.unknown {
					.secret-screen {
						display: none;
					}

					.pixelGrid {
						display: block;
					}

					.pixelGrid,
					.screen-bottom {
						opacity: 0.4;
					}
				}

				&.decoding {
					.secret-screen {
						display: none;
					}

					.pixelGrid {
						display: block;
					}
				}

				&.decoded {
					.secret-txt {
						color: #a6e1a6;
					}
				}

				&.mole {
					.secret-screen {
						filter: hue-rotate(88deg);
					}

					.secret-txt {
						color: red;
					}
				}
			}
		}

		button {
			background-color: var(--b);
			color: var(--w);
			padding: 0.15rem 1rem;
		}

		.action-selector {
			display: none;
			gap: 0.25rem;

			p {
				font-size: 0.6rem;
				line-height: 0.1;
				position: relative;
				top: -0.1rem;
			}

			button {
				background-color: var(--b);
				color: var(--w);
				font-size: 0.6rem;
				padding: 0.25rem 0.25rem;

				&[disabled] {
					opacity: 0.25;
				}

				span.action-supplies {
					pointer-events: none;
				}
			}
		}

		&:has(.current-action:empty) .action-selector {
			display: flex;
			flex-direction: column;
		}

		.current-action {
			display: grid;
			gap: 1rem;
			font-size: 0.65rem;
			text-wrap: balance;

			&:empty {
				display: none;
			}
		}
	}
}

.zoom {
	animation-name: zoom !important;
	animation-duration: 1.75s !important;
	animation-play-state: running;
	animation-delay: 0s !important;
	animation-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
	transition: 0s !important;
}

@keyframes zoom {
	0% {
		background-size: 120%;
		filter: blur(0.05rem);
	}

	25% {
		background-size: 100%;
		filter: blur(0.02rem);
	}

	50% {
		background-size: 120%;
		background-position: var(--a) var(--b);
		filter: blur(0.05rem);
	}

	75% {
		background-size: 115%;
		filter: blur(0.02rem);
	}

	76%, 100% {
		/* background-position: 50% 50%; */
		background-size: 120%;
		filter: blur(0);
	}
}

@keyframes camera {
	0% {
		background-position: 47% 50%;
	}

	10% {
		background-position: 55% 56%;
		filter: blur(0.02rem);
	}

	13% {
		background-position: 54% 54%;
		filter: blur(0.04rem);
	}

	17% {
		background-position: 52% 52%;
		filter: blur(0.02rem);
	}

	20% {
		background-position: 48% 50%;
		filter: blur(0rem);
	}

	30% {
		background-position: 51% 56%;
	}

	40% {
		background-position: 53% 50%;
	}

	50% {
		background-position: 53% 47%;
	}

	60% {
		background-position: 50% 50%;
	}

	70% {
		background-position: 51% 53%;
		filter: blur(0.02rem);
	}

	73% {
		background-position: 50% 52%;
		filter: blur(0.04rem);
	}

	77% {
		background-position: 49% 51%;
		filter: blur(0.02rem);
	}

	80% {
		background-position: 47% 50%;
		filter: blur(0rem);
	}

	90% {
		background-position: 49% 52%;
	}

	100% {
		background-position: 48% 50%;
	}
}

.game-info {
	position: absolute;
	inset: 1rem 1rem auto auto;
	background-color: var(--w);
	color: var(--b);
	padding: 0.25rem;
	font-size: 0.7rem;
	width: 10rem;

	&.window::before {
		content: "Info";
	}
}

#nextTurn {
	position: absolute;
	inset: auto 1rem 1rem auto;
	background-color: var(--w);
	color: var(--b);
	padding: 0.5rem;
	width: 10rem;
	height: 4rem;
	font-size: 1.5rem;

	&[disabled] {
		opacity: 0.5;
		cursor: default;
	}
}

.modal {
	transition: .2s;
	background-color: var(--w);
	color: var(--b);
	position: absolute;
	z-index: 3;
	width: 50rem;
	height: 30rem;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border: none;

	&::backdrop {
		background-color: var(--b);
		opacity: 0.95;
	}
}

section.map {
	position: absolute;
	top: 1rem;
	left: 29.5rem;
	width: 38rem;
	aspect-ratio: 1.2 / 1;

	&:before {
		content: "Map";
	}

	&.overlay-on {
		.area-content {
			scale: 1.15;

			&:hover {
				scale: 1.2;
				cursor: pointer;
			}
		}

		.area ul {
			top: 6.3rem;
		}

		.area:has(.area-content:hover) ul {
			top: 6.2rem;
			gap: 0.3rem;
		}
	}

	img {
		object-fit: cover;
		width: 100%;
		height: 100%;
	}

	.areas {
		z-index: 1;
		position: absolute;
		inset: 0;
	}

	.area {
		position: absolute;
		min-width: 11rem;

		.area-content {
			background-color: var(--w);
			color: var(--b);
			border-radius: 0.2rem;
			padding: 0.25rem 1rem;
			font-size: 0.65rem;
			box-shadow: 0 0.25rem 0.25rem var(--b);
			transition: scale .25s;
		}

		&[data-area="upper"] {
			bottom: 70%;
			right: 18%;
		}

		&[data-area="middle"] {
			bottom: 29%;
			right: 9%;
		}

		&[data-area="lower"] {
			bottom: 79%;
			right: 65%;
		}

		.area-name {
			font-weight: 700;
			font-size: 0.75rem;
		}

		.area-eco {
			font-size: 0.65rem;
		}

		ul {
			position: absolute;
			display: flex;
			flex-wrap: wrap;
			top: 5.85rem;
			gap: 0.4rem;
			left: 0;
			list-style: none;
			font-size: 0.65rem;
			transition: top .25s, gap .25s;
			width: 120%;
		}
	}
}

.map-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	display: none;

	&::before,
	&::after {
		content: "";
		position: absolute;
		height: 100%;
		background: #252538e8;
		z-index: 1;
		pointer-events: all;
	}

	&::before {
		width: 100%;
        inset: 0;
        clip-path: polygon(0% 0%, 0% 100%, 36% 100%, 36% 0%, 85% 0%, 85% 74%, 25% 74%, 25% 100%, 100% 100%, 100% 0%);
	}
}

.workers-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	display: none;

	&::after {
		content: "";
		position: absolute;
		height: 100%;
		background: #252538e8;
		z-index: 1;
		pointer-events: all;
		width: 51rem;
		inset: 0 0 0 auto;
	}
}

.report-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	display: none;

	&::after {
		content: "";
		position: absolute;
		height: 100%;
		background: #252538e8;
		z-index: 1;
		pointer-events: all;
		inset: 0;
	}
}

.app-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	inset: 0;
	z-index: 1;
	pointer-events: none;

	&::after {
		content: "";
		position: absolute;
		height: 100%;
		background: #252538;
		z-index: 1;
		pointer-events: all;
		inset: 0;
	}
}

#report[open] {
	display: flex;
	flex-direction: column;
	padding: 1rem;
	&::before{
		content: "Daily Report";
	}

	.report-title {
		font-weight: 700;
		text-transform: uppercase;
		text-align: center;
		font-size: 2.2rem;
	}

	.report-content {
		flex: 1;
		padding-block: 1rem;
		display: flex;
		flex-direction: column;
		gap: 1rem;

		p {
			text-align: center;
			text-wrap: balance;
		}
	}

	button {
		background-color: var(--b);
		color: var(--w);
		padding: 0 0.5rem;
		margin-left: auto;
		display: block;
	}
}

.pill {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background-color: #3b3b6b;
	border-radius: 99rem;
	color: var(--w);
	padding: 0.15rem 0.5rem 0.15rem 0.15rem;
	text-align: left;
	border: 0.06rem solid var(--w);
	width: fit-content;

	.pill-img {
		background-color: var(--w);
		width: 0.85rem;
		aspect-ratio: 1;
		border-radius: 100%;

		img {
			border-radius: 100%;
			object-fit: contain;
			width: 100%;
			aspect-ratio: 1;
			filter: contrast(0.9) brightness(1.2);
		}
	}
}

.printer {
	position: absolute;
	inset: auto auto 1rem 42.5rem;
	background-color: var(--w);
	color: var(--b);
	padding: 0.25rem;
	font-size: 0.7rem;
	width: 25rem;
	height: 10rem;
	display: flex;

	&.window:before {
		content: "Propaganda Print Shop";
	}

	&:has(.print-members:empty) .print-supplies {
		display: none;
	}


	.print-members {
		display: flex;
		gap: 0.3rem;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: flex-start;
		align-content: flex-start;
		width: 70%;

		.pill {
			font-size: 0.7rem;
		}
	}

	.print-supplies {
		display: flex;
		flex: 1;
		justify-content: center;
		padding: 0.3rem;
		border: 0.06rem dotted;
		background: #25253824;
		position: relative;
		box-shadow: inset 0 0 0.4rem #25253842;

		img {
			box-shadow: 0.1rem 0.2rem 0.4rem #1e1e2d87;
			animation: blue-me2 5ms infinite;
			position: relative;
		}
	}

	.print-supplies::before {
		content: "";
		position: absolute;
		width: 100%;
		height: 2%;
		background-color: #d2d2e7;
		border-radius: 0.2rem;
		z-index: 5;
		top: 32%;
		filter: blur(0.075rem);
		box-shadow: 0 0 0.4rem #d2d2e7, 0 0 0.1rem #d2d2e7, 0 0 1rem #d2d2e7;
		opacity: 0.4;
		animation: scanner 5s infinite alternate-reverse;
	}
}

@keyframes scanner {
	0% {
		top: 0;
	}

	100% {
		top: 98%;
	}
}

@keyframes blue-me2 {
	28%, 33%, 35% {
		background-color: #d2d2e7;
	}

	30% {
		background-color: rgba(#d2d2e7, 0.95);
		opacity: 0.95;
	}

	34% {
		background-color: rgba(#d2d2e7, 0.9);
		opacity: 0.9;
	}
}

.intel {
	position: absolute;
	background-color: var(--w);
	color: var(--b);
	font-size: 0.7rem;
	width: 11.5rem;
	height: 10rem;
	display: flex;
	flex-direction: column;
	inset: auto auto 1rem 29.5rem;
	padding: 0.25rem;
	gap: 0.3rem;

	&.window:before {
		content: "Intel Hub";
	}

	.pill {
		font-size: 0.6rem;
	}

	pre {
		max-width: 100%;
		text-wrap: wrap;
		font-size: 0.5rem;
		overflow: auto;
		border: 0.06rem dotted;
		padding: 0.2rem;
		box-shadow: inset 0 0 1rem #25253888;
		position: relative;
		color: #00000069;
		text-shadow: 0 0 0.3rem #000000b0;
		background-color: #25253824;
		border-radius: 0.2rem;
		height: 100%;

		&:empty {
			display: none;
		}

		&::-webkit-scrollbar-track {
			background-color: transparent;
		}

		&::-webkit-scrollbar {
			width: 0;
			background-color: transparent;
		}

		&::-webkit-scrollbar-thumb {
			background-color: transparent;
		}
	}
}

.log {
	position: absolute;
	inset: 11rem 1rem auto auto;
	background-color: var(--w);
	color: var(--b);
	font-size: 0.6rem;
	width: 10rem;
	max-height: 28rem;
	min-height: 10rem;
	display: flex;

	&.window:before {
		content: "Log";
	}

	.log-content {
		overflow: auto;
		width: 100%;
		scrollbar-color: #4a4a5a transparent;
		scrollbar-width: thin;

		&::-webkit-scrollbar-track {
			background-color: transparent;
		}

		&::-webkit-scrollbar {
			width: 0.25rem;
			background-color: transparent;
		}

		&::-webkit-scrollbar-thumb {
			background-color: #4a4a5a;
			border-radius: 99rem;
		}

		p {
			border-bottom: 1px dotted var(--b);

			&:not(.log-event-day) {
				padding: 0.2rem;

				u{
					text-wrap: nowrap;
				}
			}

			&.log-event-day {
				text-align: center;
				background: #787886;
				position: sticky;
				top: 0;
			}
		}
	}
}

.window {
	--height: 1.2rem;

	border-radius: 0.2rem;
	border-top: var(--height) solid #6e6e7d;
}

.window:before,
.window:after {
	content: "";
	position: absolute;
	z-index: 1;
	font-size: 0.85rem;
	color: var(--b);
}

.window:before {
	top: -1.25rem;
	left: 0.35rem;
	content: "Window";
	width: auto;
	font-weight: 700;
}

.window:after {
	top: -0.9rem;
	right: 0.35rem;
	background-color: var(--b);
	width: 0.65rem;
	aspect-ratio: 1;
	box-shadow: -1rem 0 0, -2rem 0 0;
	opacity: 0.5;
}

.pixelGrid {
	position: absolute;
	z-index: 0;
	inset: -0.3rem;
}

.pixelGrid canvas {
	width: 100%;
	image-rendering: pixelated;
	filter: blur(0.075rem);
}


.secret-screen {
	width: 100%;
	background: #252538e8;
	overflow: hidden;
	animation: blue-me 5ms infinite;
	animation-delay: var(--r, initial);
	background-image: url(./img/map.png);
	background-size: var(--z);
	background-position: var(--p, initial);
	background-repeat: no-repeat;
	transform: rotate(calc(var(--d, initial)* 90deg));
}

.secret-txt {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	filter: blur(0.03rem);
	text-shadow: 0.01rem 0.03rem green, -0.01rem -0.03rem red;
	font-weight: 700;
	font-size: 0.75rem;
	z-index: 1;
}

.screen-bottom {
	position: absolute;
	inset: auto 0 0 0;
	height: 100%;
	pointer-events: none;
	z-index: 1;
}

.line {
	width: 100%;
	height: 0.03rem;
	position: absolute;
	bottom: 0;
	opacity: 0;
	animation: appear 1s var(--r, initial) infinite,
		big-jump 5ms var(--r, initial) infinite;

	.white {
		background: white;
		position: relative;
		top: 0;
		left: 0;
		height: 0.04rem;
	}

	.red {
		background: red;
		position: relative;
		top: 0;
		left: 0;
		height: 0.01rem;
	}

	.green {
		background: green;
		position: relative;
		top: 0;
		left: 0;
		height: 0.01rem;
	}
}

@keyframes blue-me {
	28%, 33%, 35% {
		background-color: #252538;
	}

	30% {
		background-color: rgba(#252538, 0.95);
		opacity: 0.95;
	}

	34% {
		background-color: rgba(#252538, 0.9);
		opacity: 0.9;
	}
}

@keyframes appear {
	0% {
		filter: blur(0.09rem);
		opacity: 0.35;
	}

	50% {
		filter: blur(0.05rem);
		opacity: 0.35;
	}

	100% {
		filter: blur(0.07rem);
		opacity: 0.35;
	}
}

@keyframes big-jump {
	0%, 12%, 54%, 56%, 86%, 88% {
		bottom: 0;
	}

	10% {
		bottom: 50%;
	}

	55% {
		bottom: 30%;
	}

	87% {
		bottom: 60%;
	}
}

@keyframes scanline {
	0% {
		transform: translate3d(0, 200000%, 0);
	}
}

@keyframes scanlines {
	0% {
		background-position: 0 50%;
	}
}

main>.scanlines {
	opacity: 0.65;
}

.avatar.scanlines::before {
	background: rgba(0, 0, 0, 0.5);
	animation: scanline 6s linear infinite;
	animation-delay: calc(var(--r) * 1000);
}

.scanlines {
	position: absolute;
	overflow: hidden;
	inset: 0;
	z-index: 4;
	pointer-events: none;
}

.scanlines:before, .scanlines:after {
	display: block;
	pointer-events: none;
	content: "";
	position: absolute;
}

.scanlines:before {
	width: 100%;
	height: 0.2rem;
	z-index: 2147483649;
	background: rgba(0, 0, 0, 0.5);
	animation: scanline 6s linear infinite;
	animation-delay: calc(var(--r) * 100);
}

.scanlines:after {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2147483648;
	background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.3) 51%);
	background-size: 100% 0.15rem;
	animation: scanlines 1s steps(60) infinite;
	animation-delay: calc(var(--r) * 100);
}

main.mole-found button[data-action="investigate"] {
	pointer-events: none;
	opacity: 0.2;
}

.progress-wrap{
	position: relative;
	&::before {
		content: "";
		width: 0.06rem;
		height: 60%;
		background: #3b3b6b;
		position: absolute;
		inset: 0.1rem 0 0 0;
		margin: auto;
		filter: invert(1);
		mix-blend-mode: difference;
		z-index: 1;
	}
}

progress[value] {
	--color: var(--b);
	--background: #6e6e7d;

	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
	width: 100%;
	margin: 0;
	border-radius: 0;
	background: var(--background);
	height: 0.4rem;
	vertical-align: middle;
	position: relative;
}

progress[value]::-webkit-progress-bar {
	border-radius: 0;
	background: var(--background);
}

progress[value]::-webkit-progress-value {
	border-radius: 0;
	background: var(--color);
}

progress[value]::-moz-progress-bar {
	border-radius: 0;
	background: var(--color);
}

.ana::before,
.capi::before {
	content: "";
	width: 0.75em;
	aspect-ratio: 1;
	background-color: pink;
	display: inline-block;
}

.ana::before {
	background-color: var(--b);
}

.capi::before {
	background-color: #6e6e7d;
}

.progress-legend {
	font-size: 0.6rem;
}

hr {
	border-color: var(--b);
	margin-block: 0.25rem;
	border-style: dashed;
}

i {
	font-style: italic;
}

span.days-left {
	font-size: 0.75em;
	font-style: italic;
}

.glitch {
	position: relative;
	overflow: hidden;
}

.glitch::before, .glitch::after,
.glitch .channel {
	background: inherit;
	/*background-size: cover;*/
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.glitch::before {
	animation: glitch-before 3s linear infinite alternate both;
	content: "";
}

@keyframes glitch-before {
	0% {
		clip-path: polygon(0% 68.7347161269%, 100% 68.7347161269%, 100% 75.2233675303%, 0% 75.2233675303%);
		transform: translate(0.2895257119%, -0.4856291883%);
	}

	2% {
		clip-path: polygon(0% 46.9602550175%, 100% 46.9602550175%, 100% 48.8847970273%, 0% 48.8847970273%);
		transform: translate(0.164425116%, -0.3852313135%);
	}

	4% {
		clip-path: polygon(0% 73.0206332546%, 100% 73.0206332546%, 100% 82.1679409936%, 0% 82.1679409936%);
		transform: translate(5.4760589569%, 0.4275921422%);
	}

	6% {
		clip-path: polygon(0% 48.9697197019%, 100% 48.9697197019%, 100% 55.2834750325%, 0% 55.2834750325%);
		transform: translate(-2.4765772507%, 0.0077579387%);
	}

	8% {
		clip-path: polygon(0% 77.6141598105%, 100% 77.6141598105%, 100% 79.1118826651%, 0% 79.1118826651%);
		transform: translate(4.8824579488%, -0.4710811641%);
	}

	10% {
		clip-path: polygon(0% 14.5696780754%, 100% 14.5696780754%, 100% 17.5381724571%, 0% 17.5381724571%);
		transform: translate(6.3470897303%, 0.1077927695%);
	}

	12% {
		clip-path: polygon(0% 47.94055898%, 100% 47.94055898%, 100% 49.5152437343%, 0% 49.5152437343%);
		transform: translate(6.6893967614%, -0.1513761718%);
	}

	14% {
		clip-path: polygon(0% 85.019870267%, 100% 85.019870267%, 100% 89.8593449398%, 0% 89.8593449398%);
		transform: translate(5.7013669599%, -0.3666754271%);
	}

	16% {
		clip-path: polygon(0% 56.1813826746%, 100% 56.1813826746%, 100% 61.1156949447%, 0% 61.1156949447%);
		transform: translate(-3.6316228676%, -0.1123947756%);
	}

	18% {
		clip-path: polygon(0% 45.4714320779%, 100% 45.4714320779%, 100% 47.6654729577%, 0% 47.6654729577%);
		transform: translate(-1.5618671802%, 0.3313512291%);
	}

	20%, 100% {
		clip-path: none;
		transform: none;
	}
}

.glitch::after {
	animation: glitch-after 3s linear infinite alternate both;
	content: "";
}

@keyframes glitch-after {
	0% {
		clip-path: polygon(0% 79.7448365546%, 100% 79.7448365546%, 100% 85.2630492366%, 0% 85.2630492366%);
		transform: translate(4.642943681%, -0.3861713%);
	}

	2% {
		clip-path: polygon(0% 24.5692338366%, 100% 24.5692338366%, 100% 25.6957111033%, 0% 25.6957111033%);
		transform: translate(-1.8792931469%, 0.1704692588%);
	}

	4% {
		clip-path: polygon(0% 11.0235339301%, 100% 11.0235339301%, 100% 13.908526595%, 0% 13.908526595%);
		transform: translate(2.3160144075%, 0.1992961334%);
	}

	6% {
		clip-path: polygon(0% 23.6365413606%, 100% 23.6365413606%, 100% 24.7774044915%, 0% 24.7774044915%);
		transform: translate(3.8694915386%, 0.412398495%);
	}

	8% {
		clip-path: polygon(0% 15.6227889304%, 100% 15.6227889304%, 100% 21.4596500267%, 0% 21.4596500267%);
		transform: translate(-7.8034827206%, -0.0858986523%);
	}

	10% {
		clip-path: polygon(0% 12.2891875096%, 100% 12.2891875096%, 100% 21.7987098968%, 0% 21.7987098968%);
		transform: translate(-7.544548335%, 0.178590816%);
	}

	12% {
		clip-path: polygon(0% 24.041700825%, 100% 24.041700825%, 100% 29.8070511524%, 0% 29.8070511524%);
		transform: translate(2.5762527797%, -0.1623564396%);
	}

	14% {
		clip-path: polygon(0% 30.2922427162%, 100% 30.2922427162%, 100% 38.9300751944%, 0% 38.9300751944%);
		transform: translate(4.9613728527%, -0.1281432765%);
	}

	16% {
		clip-path: polygon(0% 64.9153178216%, 100% 64.9153178216%, 100% 70.8284353268%, 0% 70.8284353268%);
		transform: translate(7.6208034347%, 0.081362355%);
	}

	18% {
		clip-path: polygon(0% 1.7210814024%, 100% 1.7210814024%, 100% 4.3981773799%, 0% 4.3981773799%);
		transform: translate(-5.8042907086%, -0.4166841387%);
	}

	20%, 100% {
		clip-path: none;
		transform: none;
	}
}

.glitch .channel {
	mix-blend-mode: screen;
}

.glitch .channel::before {
	bottom: 0;
	content: "";
	display: block;
	mix-blend-mode: multiply;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
}

.glitch .r {
	animation: rgb-shift-r 3s steps(1, jump-end) infinite alternate both;
}

@keyframes rgb-shift-r {
	0% {
		transform: translate(1.348346143%, -0.0763432375%);
	}

	2% {
		transform: translate(-0.4750314436%, -0.1867864887%);
	}

	4% {
		transform: translate(1.8890656406%, -0.3841572155%);
	}

	6% {
		transform: translate(1.6162843745%, -0.4978075054%);
	}

	8% {
		transform: translate(-1.3985105725%, 0.051356634%);
	}

	10% {
		transform: translate(1.7972823835%, -0.2266728599%);
	}

	12% {
		transform: translate(0.5591969885%, -0.1358145797%);
	}

	14% {
		transform: translate(-0.1309516254%, 0.0158820966%);
	}

	16% {
		transform: translate(-1.4594884792%, -0.4182931546%);
	}

	18% {
		transform: translate(1.3889221821%, -0.0164883473%);
	}

	20%, 100% {
		transform: none;
	}
}

.glitch .r::before {
	background: #f00;
}

.glitch .g {
	animation: rgb-shift-g 3s steps(1, jump-end) infinite alternate both;
}

@keyframes rgb-shift-g {
	0% {
		transform: translate(-0.9708503867%, -0.0073849274%);
	}

	2% {
		transform: translate(0.0938309315%, 0.4346076359%);
	}

	4% {
		transform: translate(0.261592377%, -0.0840265651%);
	}

	6% {
		transform: translate(-1.441282345%, 0.2678105297%);
	}

	8% {
		transform: translate(0.3618108936%, -0.00952492%);
	}

	10% {
		transform: translate(-0.8420245038%, 0.2418825079%);
	}

	12% {
		transform: translate(1.6801968151%, -0.0880348389%);
	}

	14% {
		transform: translate(-0.5504861507%, -0.4890151958%);
	}

	16% {
		transform: translate(-0.5634345897%, -0.0256291477%);
	}

	18% {
		transform: translate(1.4564805025%, 0.2091924035%);
	}

	20%, 100% {
		transform: none;
	}
}

.glitch .g::before {
	background: #0f0;
}

.glitch .b {
	animation: rgb-shift-b 3s steps(1, jump-end) infinite alternate both;
}

@keyframes rgb-shift-b {
	0% {
		transform: translate(-0.1292112653%, 0.3874108509%);
	}

	2% {
		transform: translate(0.7990279937%, 0.3723072481%);
	}

	4% {
		transform: translate(-0.8603386197%, -0.4861158635%);
	}

	6% {
		transform: translate(-1.8183816655%, -0.2054466887%);
	}

	8% {
		transform: translate(-0.0923642014%, -0.1181631905%);
	}

	10% {
		transform: translate(1.57296276%, 0.1312422924%);
	}

	12% {
		transform: translate(-1.9321397818%, -0.0342757423%);
	}

	14% {
		transform: translate(-1.2279928885%, -0.3779071155%);
	}

	16% {
		transform: translate(0.3859199111%, 0.1159155492%);
	}

	18% {
		transform: translate(0.8765276615%, 0.1139757301%);
	}

	20%, 100% {
		transform: none;
	}
}

.glitch .b::before {
	background: #00f;
}

#start[open] {
	padding: 1rem;

	&::before {
		content: "Log in";
		content: var(--window, "Log in");
		font-weight: 700;
	}

	.start1 {
		max-width: 20%;
		margin-inline: auto;
		text-align: center;
		display: grid;
		gap: 1rem;
		padding-top: 21%;
	}

	input {
		border: 0.1rem solid;
		display: block;
		width: 100%;
		padding: 0.15rem 0.25rem;

		&::placeholder {
			opacity: 0.5;
		}
	}

	button {
		background-color: var(--b);
		color: var(--w);
		padding: 0.25rem 1rem;
		margin-bottom: 2rem !important;

		&[disabled] {
			opacity: 0.5;
			cursor: default;
		}
	}

	.start2 {
		display: none;
		gap: 1rem;
		text-align: center;
		overflow: auto;
		height: 100%;
		padding: 0 6rem;

		p {
			text-wrap: balance;
		}

		img {
			max-width: 70%;
			margin: auto;
		}

		button {
			margin: auto;
		}
	}
}

#win[open],
#lose[open] {
	height: 34rem;
	padding: 1rem;
	&::before {
		font-weight: 700;
	}

	.endContent {
		padding: 0 6rem 2rem;
		display: grid;
		margin-inline: auto;
		text-align: center;
		gap: 1rem;
		overflow: auto;
		height: 100%;

		button{
			background-color: var(--b);
			color: var(--w);
			margin: auto;
			padding: 0.25rem 1rem;
		}
	}

	p {
		text-wrap: balance;
	}
}

#win[open]{
	&::before {
		content: "Messages";
	}
}

#lose[open]{
	&::before {
		content: "Messages";
	}
}

.mail-header {
	text-align: left;
	padding: 0.5rem 1rem;
	border-block: 0.1rem dashed;
	margin-bottom: 1rem;
}

.endContent,
.start2{
	scrollbar-color: #4a4a5a transparent;
	scrollbar-width: thin;
	&::-webkit-scrollbar-track {
		background-color: transparent;
	}

	&::-webkit-scrollbar {
		width: 0.25rem;
		background-color: transparent;
	}

	&::-webkit-scrollbar-thumb {
		background-color: #4a4a5a;
		border-radius: 99rem;
	}
}

main{
	display: none;
}
.browser-support {
	color: white;
	font-size: 26px !important;
	padding: 30px;
	text-align: center;
}

@supports selector(&) {
	main{
		display: block;
	}
	.browser-support {
		display: none;
	}
}