@use 'sass:color';

$wolves_color: rgba(255, 0, 0, 0.7);
$village_color: rgba(0, 0, 255, 0.7);
$connected_color: hsl(120, 68%, 50%);
$disconnected_color: hsl(0, 68%, 50%);
$client_shadow_color: hsl(260, 55%, 61%);
$client_shadow_color_2: hsl(240, 55%, 61%);
$client_filter: drop-shadow(5px 5px 0 $client_shadow_color) drop-shadow(5px 5px 0 $client_shadow_color_2);
$village_border: color.change($village_color, $alpha: 1.0);
$wolves_border: color.change($wolves_color, $alpha: 1.0);
$intel_color: color.adjust($village_color, $hue: -30deg);
$intel_border: color.change($intel_color, $alpha: 1.0);
$defensive_color: color.adjust($village_color, $hue: -60deg);
$defensive_border: color.change($defensive_color, $alpha: 1.0);
$offensive_color: color.adjust($village_color, $hue: 30deg);
$offensive_border: color.change($offensive_color, $alpha: 1.0);
$starts_as_villager_color: color.adjust($village_color, $hue: 60deg);
$starts_as_villager_border: color.change($starts_as_villager_color, $alpha: 1.0);
$traitor_color: color.adjust($village_color, $hue: 45deg);
$traitor_border: color.change($traitor_color, $alpha: 1.0);
$drunk_color: color.adjust($village_color, $hue: 150deg);
$drunk_border: color.change($drunk_color, $alpha: 1.0);

$wolves_border_faint: color.change($wolves_border, $alpha: 0.3);
$village_border_faint: color.change($village_border, $alpha: 0.3);
$offensive_border_faint: color.change($offensive_border, $alpha: 0.3);
$defensive_border_faint: color.change($defensive_border, $alpha: 0.3);
$intel_border_faint: color.change($intel_border, $alpha: 0.3);
$starts_as_villager_border_faint: color.change($starts_as_villager_border, $alpha: 0.3);
$traitor_border_faint: color.change($traitor_border, $alpha: 0.3);
$drunk_border_faint: color.change($drunk_border, $alpha: 0.3);

$wolves_color_faint: color.change($wolves_color, $alpha: 0.1);
$village_color_faint: color.change($village_color, $alpha: 0.1);
$offensive_color_faint: color.change($offensive_color, $alpha: 0.1);
$defensive_color_faint: color.change($defensive_color, $alpha: 0.1);
$intel_color_faint: color.change($intel_color, $alpha: 0.1);
$starts_as_villager_color_faint: color.change($starts_as_villager_color, $alpha: 0.1);
$traitor_color_faint: color.change($traitor_color, $alpha: 0.1);
$drunk_color_faint: color.change($drunk_color, $alpha: 0.1);

@mixin flexbox() {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}

@mixin flex($values) {
	-webkit-box-flex: $values;
	-moz-box-flex: $values;
	-webkit-flex: $values;
	-ms-flex: $values;
	flex: $values;
}

@mixin order($val) {
	-webkit-box-ordinal-group: $val;
	-moz-box-ordinal-group: $val;
	-ms-flex-order: $val;
	-webkit-order: $val;
	order: $val;
}

.wrapper {
	@include flexbox();
}

.item {
	@include flex(1 200px);
	@include order(2);
}

html,
body {
	margin: 0;
}

body {
	min-height: 100vh;
	max-width: 100vw;
	top: 0px;
	left: 0px;
	font-family: 'Liberation Serif';

	font-size: 1.5vh;
	user-select: none;
	color: rgba(255, 255, 255, 1);
	background: black;
}

app {
	max-width: 100vw;
	width: 100vw;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	top: 0;
	left: 0;
}

.big-screen {
	align-content: center;
	align-items: center;
	justify-content: center;
	height: 100vh;
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	margin: 0;
	font-size: 2.7vw;
}

$link_color: #432054;
$link_hover_color: hsl(280, 55%, 61%);
$link_bg_color: #fff6d5;
$border_color: #432054;
$shadow_color: hsl(280, 55%, 61%);
$shadow_color_2: hsl(300, 55%, 61%);
$link_filter: drop-shadow(5px 5px 0 $shadow_color) drop-shadow(5px 5px 0 $shadow_color_2);
$link_select_filter: invert(100%);

$error_color: hsla(0, 95%, 61%, 0.7);
$error_shadow_color: hsla(340, 95%, 61%, 0.7);
$error_shadow_color_2: hsla(0, 95%, 61%, 0.7);
$error_filter: drop-shadow(5px 5px 0 $error_shadow_color) drop-shadow(5px 5px 0 $error_shadow_color_2);


nav.host-nav {
	position: sticky;
	backdrop-filter: brightness(70%);
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	padding-bottom: 10px;
	padding-top: 10px;
	padding-left: 5vw;
	padding-right: 5vw;
	gap: 10px;

}


.default-button {
	font-size: 1.3rem;
	border: 1px solid rgba(255, 255, 255, 1);
	padding: 5px;
	background-color: black;
	color: #cccccc;
	cursor: pointer;
	width: fit-content;
	text-align: center;

	&:hover {
		background-color: white;
		color: invert(#cccccc);
	}
}

.player-list,
.targets {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
	gap: 10px;
	justify-content: space-evenly;

	&>* {
		flex-grow: 1;
	}
}

.lobby-player-list {
	overflow: hidden;
	padding-bottom: 80px;
	flex-shrink: 1;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
	justify-items: center;
	justify-content: space-evenly;
}

.player {
	flex-grow: 0;
	display: flex;
	justify-content: stretch;

	margin: 0px;
	min-width: 10rem;
	max-width: 10vw;
	height: 4rem;
	text-align: center;

	justify-content: center;

	&.marked {
		filter: hue-rotate(90deg);
	}

	block-size: max-content;

	&>button {
		width: 160px;
		height: 75px;
		border: 1px solid $disconnected_color;
		background-color: color.change($disconnected_color, $alpha: 0.15);
		color: $disconnected_color;

		&:hover {
			filter: brightness(150%);
			background-color: color.change($disconnected_color, $alpha: 0.15);
			color: $disconnected_color;
		}
	}

	&.connected {
		&>button {
			background-color: color.change($connected_color, $alpha: 0.15);
			border: 1px solid $connected_color;
			color: $connected_color;

			&:hover {
				filter: brightness(150%);
			}
		}
	}


	&.dead {
		filter: grayscale(100%);
	}

	.number {
		padding-top: 3px;
		margin: 0px;

		&.not-set {
			border: 2px solid rgba(255, 0, 0, 0.3);
			background-color: rgba(255, 0, 0, 0.7);
		}
	}
}

.submenu {
	// border: 1px solid rgba(255, 255, 255, 0.7);
	padding: 10px;
	position: relative;
	// position: fixed;
	// left: 0%;

	// top: 1px;
	align-self: stretch;
	z-index: 5;

	& button {
		width: 100%;
	}

	&>span {
		font-size: 1rem;
		margin-bottom: 0;
	}
}

.click-backdrop {
	z-index: 4;
	background-color: rgba(0, 0, 0, 0.7);
	position: fixed;
	top: 0;
	left: 0;
	height: 200vh;
	width: 100vw;
	background-size: cover;
}

.player-container {
	width: 100%;
	margin-left: 10vw;
	margin-right: 10vw;
}

.start-game {
	align-self: center;
	margin-bottom: 30px;
	font-size: 2rem;
	border: 1px solid rgba(0, 255, 0, 0.7);
	background-color: black;
	color: rgba(0, 255, 0, 0.7);
	cursor: pointer;

	position: relative;
	display: inline-flex;
	justify-content: center;

	&:hover {
		background-color: rgba(0, 255, 0, 0.3);
	}

	&:disabled {
		border: 1px solid rgba(255, 0, 0, 1);
		color: rgba(255, 0, 0, 1);
		filter: none;
		background-color: rgba(255, 0, 0, 0.1);

		&:hover {
			background-color: rgba(255, 0, 0, 0.3);
			filter: none;
		}
	}
}

button {
	font-size: 1rem;
	padding-top: 2px;
	padding-bottom: 2px;

	border: none;

	outline: inherit;
	padding-left: 5px;
	padding-right: 5px;
	background-color: #000;

	&:disabled {
		background-color: rgba(128, 128, 128, 0.5);
		color: rgb(128, 128, 128);
		cursor: not-allowed;
	}

	&:disabled:hover::after {
		content: attr(reason);
		overflow-y: hidden;
		position: absolute;
		margin-top: 100px;
		min-width: 20vw;
		color: rgba(255, 0, 0, 1);
		background-color: black;
		border: 1px solid rgba(255, 0, 0, 0.3);
		padding: 3px;
		z-index: 4;
		align-self: center;
		justify-self: center;
	}
}

.host-setup {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	font-size: 1.5em;
	overflow-y: hidden;
}

.settings {
	list-style: none;

	display: flex;
	flex-direction: column;
	margin-left: 20px;
	margin-right: 20px;

	gap: 30px;

	&>p {
		text-align: center;
		margin: 0px;
		padding: 0px;
		font-size: 0.7em;
	}

	.settings-info {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 5px;
		text-align: left;
		width: fit-content;
	}
}

.wolves-intro {
	& button {
		align-self: center;
	}
}

.wolves-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
	min-height: 70vh;
	align-items: center;

	&>* {
		height: max-content;
	}

	.identity {
		font-size: 1.5rem;
	}
}

.day-char {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	// min-width: 1vw;
	align-items: center;
}

.red {
	color: red;
}

.character {
	text-align: center;
	border: 3px solid rgba(0, 0, 0, 0.4);
	// min-width: 20%;
	flex-shrink: 1;
	flex-grow: 1;

	.headline {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex-wrap: nowrap;
		overflow: hidden;
		gap: 5px;

	}

	.role {
		font-size: 1.5rem;

	}

	&.wolves {
		padding-top: 20px;
		padding-bottom: 20px;

		&>.role {
			margin: 0;
		}

		display: flex;
		flex-direction: column;
		justify-content: center;
		min-width: 15vw;
	}
}

h1,
h2,
h3,
h4,
h5 {
	text-align: center;
}

button.confirm {
	align-self: center;
	margin: 30px;
	font-size: 2rem;
}

.roles-in-setup {
	padding: 1rem;
	border: 4px solid $village_color_faint;
	background-color: color.change($village_color_faint, $alpha: 0.05);

	zoom: 120%;

	&>h3 {
		margin: 0;
		text-align: center;
		color: white;
		font-weight: normal;
	}
}

.role-list {
	list-style: none;

	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	padding: 20px;

	gap: 10px;
}

.role-card {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	min-width: 320px;
}


.role-card button {
	min-width: 25px;
	min-height: 25px;
	background-color: rgba(255, 255, 255, 0.3);
	margin: 0px;
	margin-left: 10px;
	margin-right: 10px;
	cursor: pointer;

	&:hover {
		background-color: rgba(255, 255, 255, 0.7);
	}
}

rolecard {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	width: 100%;
	text-align: center;
	// gap: 20px;
	justify-content: space-between;
}



bool_spacer {
	min-width: 25px;
	min-height: 25px;
	margin: 0px;
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 5px;
	margin-bottom: 5px;
	background-color: rgba(255, 255, 255, 0.5);
}

bool_role {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	width: 100%;
	text-align: center;
	// gap: 20px;
	justify-content: space-between;
}

.wolves {
	background-color: $wolves_color;
}

.role-card.wolves bool_role input[type="checkbox"] {
	min-width: 25px;
	min-height: 25px;
	opacity: 100%;
	accent-color: $wolves_color;
	margin: 0px;
	margin-left: 10px;
	margin-right: 10px;
}


.role-card.village bool_role input[type="checkbox"] {
	min-width: 25px;
	min-height: 25px;
	opacity: 100%;
	accent-color: $village_color;
	margin: 0px;
	margin-left: 10px;
	margin-right: 10px;
}

.error-container {
	position: fixed;
	top: 10vh;
	width: 100vw;
	display: flex;
	flex-direction: row;
	align-content: center;
}

.error-container button {
	background: transparent;
	font-size: 2rem;
	position: sticky;
	display: inline-block;

	&:hover {
		filter: invert(20%);
		font-size: 3rem;
	}
}

.error-message {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 80%;
	margin: 30px;
	text-align: center;
	// gap: 20px;
	justify-content: center;
	gap: 30px;
	background-color: $error_color;
	border: 1px solid color.change($error_color, $alpha: 1.0);
	backdrop-filter: grayscale(100%);


	padding-left: 5vw;
	padding-right: 5vw;
}


.character {
	background-color: $village_color;
	width: fit-content;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin: 10px;

	&.wolves {
		background-color: $wolves_color;
	}
}


.character.selected {
	filter: hue-rotate(30deg);
}

.character:hover {
	filter: brightness(80%);
}


client {
	list-style: none;

	// font-size: 0.7rem;
	display: flex;
	// flex-wrap: wrap;
	flex-direction: column;
	margin-left: 20px;
	margin-right: 20px;
	padding: 30px;

	gap: 30px;
	border: 2px solid black;
}

clients {
	list-style: none;

	// font-size: 0.7rem;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	font-size: 2rem;
}

.role-reveal-cards {
	list-style: none;

	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-evenly;
	color: black;
	align-items: center;
	align-content: center;

	gap: 10px;
	height: var(--role-reveal-cards-height);
}

.role-reveal-card {
	justify-content: center;
	// min-width: 5cm;
	flex-grow: 1;
	display: flex;
	align-items: center;
	align-content: center;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
	border: 1px solid $wolves_color;
	background-color: color.change($wolves_color, $alpha: 0.1);
	min-width: 100px;
	color: white;

	& p.number {
		font-size: 2rem;
	}

	& p {
		text-align: center;
	}

	&>button {
		border: 1px solid $wolves_color;
		$bg: color.change($wolves_color, $alpha: 0.2);
		background-color: $bg;

		&:hover {
			background-color: white;
			color: color.change($wolves_color, $alpha: 1.0);
		}
	}

	&.ready {
		border: 1px solid $village_color;
		background-color: color.change($village_color, $alpha: 0.2);
	}
}

.pronouns {
	font-size: 70%;
	filter: opacity(70%);
}

.row-list {
	list-style: none;

	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	font-size: 2rem;

	justify-content: center;
	align-content: center;
	align-items: center;

	&.margin-20 {
		margin-left: 20px;
		margin-right: 20px;
	}

	&.margin-5 {
		margin-left: 5px;
		margin-right: 5px;
	}
}

.gap {
	gap: 10px;
}



.column-list {
	list-style: none;
	justify-content: center;
	align-content: center;
	align-items: center;

	display: flex;
	flex-direction: column;
	font-size: 2rem;
	margin-left: 20px;
	margin-right: 20px;

	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
}

@media only screen and (max-width : 1899px) {
	.content {
		margin-left: 5vw;
		margin-right: 5vw;
		display: flex;
		flex-basis: content;
	}
}

@media only screen and (min-width : 1900px) {
	.content {
		margin-left: 5vw;
		margin-right: 5vw;
		display: flex;
		flex-basis: content;
		min-height: 100vh;
	}
}

.sp-ace {
	margin: 10px;
}

.cover-of-darkness {
	background-color: #000;
	// background-color: purple;
	color: #fff;
	font-size: 3rem;
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	text-wrap: wrap;

	p {
		padding: 30px;
	}

	& button {
		width: fit-content;
		text-align: center;
		align-self: center;
	}
}

.small {
	font-size: 1.2rem;
}

.client-nav {
	max-width: 100%;
	padding: 10px;
	height: 38px;
	display: flex;
	flex-direction: row;
	justify-content: baseline;
	gap: 10px;

	& button {
		text-wrap: nowrap;
		overflow: hidden;
	}
}

.ident {
	gap: 0px;
	margin: 0px;
	padding: 0px;

	.submenu {
		margin-top: 10px;
		margin-bottom: 10px;
		// display: flex;
		justify-content: center;
		// visibility: collapse;
		display: none;
		z-index: 5;

		.button-container {
			display: flex;
			align-items: stretch;
		}

		&.shown {
			display: flex;
			flex-direction: row;
			align-items: baseline;
		}

		button {
			font-size: 1rem;
		}
	}

	&:active,
	&:focus,
	&:hover {
		.submenu {
			// visibility: visible;
			display: flex;
		}
	}
}

.baseline {
	align-items: baseline;
	// justify-content: space-evenly;
}

error {
	position: absolute;
	top: 0;
	left: 0;
}

.identity {
	list-style: none;

	display: flex;
	flex-direction: column;
	gap: 0px;
	font-size: 1rem;
	justify-content: flex-start;
	margin: 0px;
	padding: 0px;

	p {
		margin: 0px;
		padding: 0px;
		text-wrap: nowrap;
		overflow: hidden;
	}
}

.identity-span {
	list-style: none;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 2px;
	font-size: 1rem;
	margin: 0px;
	padding: 0px;
	align-items: center;

	span {
		margin: 0px;
		padding: 0px;
		text-wrap: nowrap;
		overflow: hidden;
	}

	.number {
		padding-right: 5px;
		font-size: 1.2em;
	}
}

.binary {
	margin: 0;
	padding: 0;
	font-size: 1.5vw;

	.button-container {
		text-align: center;
		padding: 0;
		margin: 0;
		display: flex;
		flex: 1 1 0;
		gap: 20px;
		margin-top: 20px;
		justify-content: space-around;
		width: 100%;

		button {
			background-color: $wolves_color_faint;
			border: 3px solid $wolves_border_faint;
			font-size: 3rem;
			font-weight: bold;
			align-self: center;
			padding: 20px;
			width: 100%;
			height: 100%;
			margin: 0;

			&:hover {
				background-color: $wolves_border_faint;
				color: white;
			}
		}
	}

}

// input {
// 	background-color: rgba(255, 255, 255, 0.1);
// 	color: white;
// 	border: 2px solid rgba(255, 255, 255, 0.2);
// 	margin: 10px;
// }
input,
select {
	border: 1px solid rgba(255, 255, 255, 0.7);
	background-color: rgba(255, 255, 255, 0.07);
	color: white;
	font-size: 1em;

	&:focus {
		outline: 1px solid white;
		background-color: white;
		color: black;
	}
}

.info-update {
	border: 1px solid rgba(255, 255, 255, 0.5);
	padding: 30px 0px 30px 0px;
	// font-size: 2rem;
	align-content: stretch;
	margin: 0;
	position: fixed;
	left: 5vw;
	z-index: 3;
	background-color: #000;
	width: 90vw;

	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	gap: 10px;

	&>input {
		border: 1px solid rgba(255, 255, 255, 0.25);
		background-color: black;

		color: white;
		padding: 0;
		font-size: 1.5em;

		&:focus {
			background-color: white;
			color: black;
			outline: 1px solid rgba(255, 255, 255, 0.25);
		}
	}

	&>button {
		font-size: 1.1em;
	}

	&>* {
		margin: 0;
		width: 80% !important;
		text-align: center;
	}
}

.game-start-role {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	text-align: center;
	align-items: center;
	width: 100%;
	height: 80vh;
	justify-content: center;

	&>p {
		font-size: 1.5em;
	}

	&>button {
		font-size: 1.5rem;
		width: min(5cm, 30vw);
	}
}

.client-lobby-player-list {
	@extend .column-list;
	gap: 10px;

	&>.identity {
		align-self: flex-start;
	}

	&>button {
		width: 90vw;
		align-self: center;
		$leave_color: rgba(255, 0, 0, 0.6);
		color: $leave_color;
		border: 1px solid $leave_color;

		&:hover {
			background-color: $leave_color;
			color: black;
		}

		margin-bottom: 1cm;
	}

	&>.list-actual {
		@extend .row-list;
		align-items: stretch;
		align-content: stretch;
		margin: 0;

		gap: 10px;

		width: 100%;

		&>* {
			width: 4cm;
			border: 1px solid white;
			padding: 10px;
			text-align: center;

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

}

.character-picker,
.target-picker {
	display: flex;
	flex-direction: column;
	width: 100%;
	align-items: center;
	color: white;
	height: var(--target-picker-height);
	justify-content: center;
	$marked_bg: color.change($wolves_color, $alpha: 0.3);
	$marked_border: color.change($wolves_color, $alpha: 1.0);
	$village_bg: color.change($village_color, $alpha: 0.3);
	$village_border: color.change($village_color, $alpha: 1.0);

	.character {
		padding: 0.5cm;

		& * {
			font-size: 1.5rem;
		}

		&.marked {
			background-color: $marked_bg;
			border: 1px solid $marked_border;

			&:hover {
				color: white;
				background-color: $marked_border;
			}
		}

		&.dead {
			filter: saturate(0%);
			border: 1px solid rgba(255, 255, 255, 0.05);
		}

		&.recent-death {
			$bg: rgba(128, 128, 128, 0.5);
			background-color: $bg;
			border: 1px solid color.change($bg, $alpha: 1.0);

			&:hover {
				background-color: color.change($bg, $alpha: 1.0);
			}
		}

		background-color: $village_bg;
		border: 1px solid $village_border;

		&:hover {
			color: white;
			background-color: $village_border;
		}
	}
}

.align-start {
	align-self: flex-start;
}

.align-end {
	align-self: flex-end;
}

.slot-container {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 3px;
	font-size: 0.7em;

	.slot-options {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 3px;
		align-items: center;

		opacity: 30%;

		&:hover {
			opacity: 100%;
		}
	}
}

.slot-auras {
	padding-top: 5px;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	gap: 2px;

	.slot-aura-list {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 3px;

		span::after {
			content: ', ';
		}

		span:last-child::after {
			content: '';
		}
	}
}

.increment-decrement {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	text-align: center;
	justify-content: center;
	align-items: center;
	align-content: center;

	&>span {
		flex-grow: 3;
	}

	&>button {
		width: max-content;
		font-size: 3rem;
		flex-grow: 1;
	}
}

.setup-slot {
	text-align: center;

	& button span {
		cursor: pointer;
	}

	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	gap: 3px;

	&>.submenu {
		width: 30vw;
		// position: absolute;

		.assign-list {
			gap: 10px;

			& .submenu button {
				width: 10vw;
			}
		}

		.assignees {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			gap: 5px;
		}
	}
}

.add-role {
	color: white;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 10px;
	font-size: 1.5rem;

	.role-box {
		width: 1.25em;
		height: 1.25em;
		display: flex;
		align-items: center;
		justify-content: center;

		&>* {
			flex-shrink: 1;
			width: 1em;
		}
	}

	cursor: pointer;
}

.icon-role-add {
	height: 48px;
	width: 48px;
}

.icon-fit {
	height: 1em;
}

.icon-15pct {
	width: 15%;
}

.village {
	--faction-color: $village_color;
	--faction-border: $village_border;
	--faction-color-faint: $village_color_faint;
	--faction-border-faint: $village_border_faint;

	background-color: $village_color;
	border: 1px solid $village_border;

	&:hover {
		color: white;
		background-color: $village_border;
	}

	&.faint {
		border: 1px solid $village_border_faint;
		background-color: $village_color_faint;

		&:hover {
			background-color: $village_border_faint;
		}
	}
}

.wolves {
	--faction-color: $wolves_color;
	--faction-border: $wolves_border;
	--faction-color-faint: $wolves_color_faint;
	--faction-border-faint: $wolves_border_faint;

	background-color: $wolves_color;
	border: 1px solid $wolves_border;

	&:hover {
		color: white;
		background-color: $wolves_border;
	}

	&.faint {
		border: 1px solid $wolves_border_faint;
		background-color: $wolves_color_faint;

		&:hover {
			background-color: $wolves_border_faint;
		}
	}
}

.intel {
	--faction-color: $intel_color;
	--faction-border: $intel_border;
	--faction-color-faint: $intel_color_faint;
	--faction-border-faint: $intel_border_faint;

	background-color: $intel_color;
	border: 1px solid $intel_border;

	&:hover {
		color: white;
		background-color: $intel_border;
	}

	&.faint {
		border: 1px solid $intel_border_faint;
		background-color: $intel_color_faint;

		&:hover {
			background-color: $intel_border_faint;
		}
	}
}

.defensive {
	--faction-color: $defensive_color;
	--faction-border: $defensive_border;
	--faction-color-faint: $defensive_color_faint;
	--faction-border-faint: $defensive_border_faint;

	background-color: $defensive_color;
	border: 1px solid $defensive_border;

	&:hover {
		color: white;
		background-color: $defensive_border;
	}

	&.faint {
		border: 1px solid $defensive_border_faint;
		background-color: $defensive_color_faint;

		&:hover {
			background-color: $defensive_border_faint;
		}
	}
}

.offensive {
	--faction-color: $offensive_color;
	--faction-border: $offensive_border;
	--faction-color-faint: $offensive_color_faint;
	--faction-border-faint: $offensive_border_faint;

	background-color: $offensive_color;
	border: 1px solid $offensive_border;

	&:hover {
		color: white;
		background-color: $offensive_border;
	}

	&.faint {
		border: 1px solid $offensive_border_faint;
		background-color: $offensive_color_faint;

		&:hover {
			background-color: $offensive_border_faint;
		}
	}
}

.starts-as-villager {
	--faction-color: $starts_as_villager_color;
	--faction-border: $starts_as_villager_border;
	--faction-color-faint: $starts_as_villager_color_faint;
	--faction-border-faint: $starts_as_villager_border_faint;

	background-color: $starts_as_villager_color;
	border: 1px solid $starts_as_villager_border;

	&:hover {
		color: white;
		background-color: $starts_as_villager_border;
	}

	&.faint {
		border: 1px solid $starts_as_villager_border_faint;
		background-color: $starts_as_villager_color_faint;

		&:hover {
			background-color: $starts_as_villager_border_faint;
		}
	}
}

.traitor {
	--faction-color: $traitor_color;
	--faction-border: $traitor_border;
	--faction-color-faint: $traitor_color_faint;
	--faction-border-faint: $traitor_border_faint;

	background-color: $traitor_color;
	border: 1px solid $traitor_border;

	&:hover {
		color: white;
		background-color: $traitor_border;
	}

	&.faint {
		border: 1px solid $traitor_border_faint;
		background-color: $traitor_color_faint;

		&:hover {
			background-color: $traitor_border_faint;
		}
	}
}

.drunk {
	background-color: $drunk_color;
	border: 1px solid $drunk_border;

	&:hover {
		color: white;
		background-color: $drunk_border;
	}

	&.faint {
		border: 1px solid $drunk_border_faint;
		background-color: $drunk_color_faint;

		&:hover {
			background-color: $drunk_border_faint;
		}
	}
}

.scapegoat {
	@extend .wolves;
}

.assignments {
	display: flex;
	flex-direction: row;
	gap: 0;
	flex-wrap: wrap;
	font-size: 0.5em;
	gap: 10px;

	.assignment {
		color: white;
		text-align: center;
		padding-left: 10px;
		padding-right: 10px;
		// border: 1px solid white;

		&>* {
			cursor: pointer;
		}
	}
}

.roles-add-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 5px;
	row-gap: 10px;

	font-size: 2em;
}

.top-settings {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
}

.setup-screen {
	margin-top: 2%;
	font-size: 1.5vw;

	height: 100vh;

	.setup {
		height: 85%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 5%;
	}

	.defensive {
		background-color: color.change($defensive_color, $lightness: 30%);
		border: 1px solid color.change($defensive_border, $lightness: 40%);
	}


}



.category {
	text-align: center;
	display: flex;
	flex-direction: column;

	&.add-list {
		@media only screen and (max-width : 599px) {
			width: 100%;
		}

		@media only screen and (min-width : 600px) {
			width: 160px;
		}

		.hidden {
			display: none;
		}

		width: auto;
		flex-wrap: wrap;
		gap: 1px;


		&>.title {
			font-size: 0.5em !important;
			margin-bottom: 0px !important;
			cursor: pointer;
		}

		.category-list {
			gap: 1px;
		}
	}

	&.big {
		margin-bottom: 30px;
		width: 30%;
	}

	&.final {
		margin-top: 1cm;
		margin-bottom: 1cm;
	}

	& .title {
		text-shadow: black 3px 2px;
		margin-bottom: 10px;
	}

	& .count {
		text-align: right;
		left: -40px;
		position: relative;

		width: 0;
		height: 0;

		.scapegoats {
			color: rgba(255, 0, 255, 0.7);
			font-size: 2em;
			position: absolute;
		}
	}

	.category-list {
		text-align: left;
		display: flex;
		flex-wrap: nowrap;
		flex-direction: column;
		gap: 5px;

		.slot {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;

			.attributes {
				margin-left: 10px;
				align-self: flex-end;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				gap: 10px;
			}

			.role {
				text-shadow: black 3px 2px;

				width: 100%;
				filter: saturate(40%);
				padding-left: 10px;
				padding-right: 10px;

				&.wakes {
					border: 2px solid yellow;
				}
			}
		}
	}
}

li.change,
li.choice {
	width: fit-content;

	&:hover {
		.li-icon {
			filter: brightness(5000%);
		}

		backdrop-filter: invert(15%);
	}
}

.li-icon {
	filter: grayscale(100%) brightness(150%);
}

.icon {
	width: 32px;
	height: 32px;

	&:hover {
		filter: contrast(120%) brightness(120%);
	}
}

.inactive {
	// filter: grayscale(100%) brightness(30%);
	filter: brightness(0%);
}

.qrcode {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	z-index: 100;
	position: fixed;
	top: 0;
	left: 0;
	margin: 5vw;
	width: 90vw;
	height: 90vh;
	gap: 1cm;

	img {
		height: 70%;
		width: 100%;
	}

	.details {
		font-size: 5vw;
		// height: 100%;
		// width: 100%;
		border: 1px solid $village_border;
		background-color: color.change($village_color, $alpha: 0.3);

		text-align: center;
		// width: fit-content;

		&>* {
			margin-top: 0.5cm;
			margin-bottom: 0.5cm;
			// padding: 0;
		}
	}
}

.result {
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

.result-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	justify-content: space-evenly;
	row-gap: 0.5cm;

	.identity {
		padding: 1cm;
		border: 1px solid white;
		font-size: 2em;
		text-align: center;
	}
}

.check-icon {
	width: 40vw;
	height: 40vh;
	// margin-top: 10%;
	align-self: center;
}

.insomniac {
	display: flex;
	width: 100%;
	height: 100%;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	&.prompt {
		font-size: 2em;
	}
}

.arcanist-result {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	width: 100%;
	gap: 10px;

	img {
		// flex-shrink: 1 !important;
		width: max-content !important;
		height: max-content !important;
	}
}

.prompt {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	width: 100%;
}

.page {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	width: 100%;
	height: 100%;
}

.signin {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;

	&.full-height {
		height: 100vh;
		max-width: 100vw;
	}

	.signin-box {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: center;
		gap: 3px;
		// justify-content: center;
		// text-align: center;

		.field {
			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
			align-items: center;
			width: 100%;
		}

		& label {
			font-size: 1.25em;
		}

		& input {
			height: 2em;
			// max-width: 80%;
			width: 70%;

			&#number {
				text-align: center;
				// font-size: 2rem;
				// width: 20%;
				width: 3ch;
			}
		}

		&>button {
			margin-top: 7px;
		}
	}
}

.submenu:has(.signin) {
	position: absolute;
	width: max-content;

	& input {
		font-size: 1rem !important;
	}
}


// .story {
// 	.cast {
// 		display: flex;
// 		flex-direction: row;
// 		flex-wrap: wrap;
// 		gap: 10px;
// 		justify-content: center;
// 	}

// 	.time-period {
// 		user-select: text;

// 		.day {
// 			display: flex;
// 			flex-direction: column;
// 			flex-wrap: wrap;
// 			align-items: center;

// 			.executed {
// 				display: flex;
// 				flex-direction: row;
// 				flex-wrap: wrap;
// 				gap: 10px;
// 			}
// 		}

// 		.night {
// 			&>label {
// 				margin-left: 10vw;
// 				font-size: 2rem;
// 				font-weight: lighter;
// 			}

// 			ul.changes,
// 			ul.choices {
// 				display: flex;
// 				flex-direction: column;
// 				flex-wrap: nowrap;
// 				gap: 10px;

// 				&>li {
// 					display: flex;
// 					flex-direction: row;
// 					flex-wrap: wrap;
// 					align-items: center;

// 					gap: 10px;
// 				}


// 				& span {
// 					display: flex;
// 					flex-direction: row;
// 					flex-wrap: wrap;
// 					align-items: center;
// 					gap: 10px;
// 				}
// 			}
// 		}
// 	}
// }

.attribute-span {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: baseline;
	align-content: baseline;
	justify-content: baseline;
	justify-items: baseline;

	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 10px;

	&:has(.killer) {
		border: 1px solid rgba(212, 85, 0, 0.5);
	}

	&:has(.powerful) {
		border: 1px solid rgba(0, 173, 193, 0.5);
	}

	&:has(.inactive) {
		border: 1px solid rgba(255, 255, 255, 0.3);
	}

	img {
		vertical-align: sub;
	}

	&.execution {
		border: 1px solid rgba(255, 255, 255, 0.3);

	}
}

.alignment-eq {
	img {
		vertical-align: sub;
	}

	border: 1px solid $intel_border;
	background-color: color.change($intel_color, $alpha: 0.1);
	padding-top: 5px;
	padding-bottom: 5px;

	padding-left: 10px;
	padding-right: 10px;
}

.character-span {
	height: max-content;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 5px;

	.number {
		color: rgba(255, 255, 0, 0.7);
	}

	.role {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		font-size: 1.5vh;

		img {
			vertical-align: sub;
		}

		padding-top: 5px;
		padding-bottom: 5px;

		padding-left: 10px;
		padding-right: 10px;
		height: 100%;
		border: none;
		gap: 5px;

		&.wolves {
			background-color: color.change($wolves_color, $alpha: 0.1);
		}

		&.intel {
			background-color: color.change($intel_color, $alpha: 0.1);
		}

		&.defensive {
			background-color: color.change($defensive_color, $alpha: 0.1);
		}

		&.offensive {
			background-color: color.change($offensive_color, $alpha: 0.1);
		}

		&.village {
			background-color: color.change($village_color, $alpha: 0.1);
		}
	}

	padding-right: 10px;

	&.wolves,
	&.intel,
	&.offensive,
	&.defensive,
	&.village {
		background-color: inherit;
	}

	&.wolves {
		border: 1px solid $wolves_border_faint;
	}

	&.intel {
		border: 1px solid $intel_border_faint;
	}

	&.defensive {
		border: 1px solid $defensive_border_faint;
	}

	&.offensive {
		border: 1px solid $offensive_border_faint;
	}

	&.village {
		border: 1px solid $village_border_faint;
	}

	.icon {
		margin: 0;
	}
}


.post-game {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	width: 100%;
}


.role-page {
	width: 100%;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;

	h1 {
		text-align: center;
		// align-self: flex-start;
		font-size: 4vw;
	}

	.yellow {
		color: yellow;
	}

	.red {
		color: red;
	}
}

.icons {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	gap: 30px;
}

.icon-info {
	flex-shrink: 1;
}

.info-icon-grow {
	flex-grow: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;

	img {
		flex-grow: 1;
	}
}

.info-icon-list-grow {
	padding: 20px 0 20px 0;
	flex-grow: 1;
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;

	img {
		flex-grow: 1;
	}
}

.info-player-list {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	width: 100%;
	justify-content: center;
	gap: 10px;

	&.masons,
	&.large {
		font-size: 2rem;
		flex-wrap: wrap;
	}
}

.info-player-boxes {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	justify-content: center;
	gap: 10px;
	overflow-y: hidden;

	.identity {
		// flex-grow: 1;
		font-size: auto;
		flex-direction: row;
		align-items: center;
		padding: 5px 10px 5px 10px;

		.number {
			color: rgba(255, 255, 0, 0.7);
			font-size: 2em;
			padding-right: 1cm;
		}

		.pronouns {
			display: none;
		}
	}

	flex-wrap: wrap;
	text-align: center;
}

.two-column {
	display: grid;
	grid-template-columns: 3fr 2fr;
	height: 100%;
}

.seer-check {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	height: 100%;
	justify-content: space-around;
}

.role-title-span {
	// display: grid;
	// grid-template-columns: 1fr 100fr;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	height: 2rem;
	width: fit-content;


	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 10px;
	width: 100%;
	align-items: center;

	img {
		vertical-align: text-bottom;
		max-height: 2rem;
		padding-left: 10px;
		flex-shrink: 1;
	}

	span {
		flex-grow: 1;
	}

	text-align: center;
}

.false-positives {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	font-weight: bold;

	gap: 10px;
}

.bottom-bound {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
}

.joined {
	$joined_color: rgba(0, 255, 0, 0.7);
	$joined_border: color.change($joined_color, $alpha: 1);
	$joined_bg: color.change($joined_color, $alpha: 0.3);
	color: white;
	border: 1px solid $joined_border;
	background-color: $joined_bg;
	padding: 5px 10px 5px 10px;
	font-size: 3rem;
	text-align: center;
}

.not-joined {
	$joined_color: rgba(255, 0, 0, 0.7);
	$joined_border: color.change($joined_color, $alpha: 1);
	$joined_bg: color.change($joined_color, $alpha: 0.3);
	color: white;
	border: 1px solid $joined_border;
	background-color: $joined_bg;
	padding: 5px 10px 5px 10px;
	font-size: 3rem;
	text-align: center;
}

.victory {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	font-size: 3vw;
	height: max-content;
	gap: 1cm;
	padding: 1cm;
}


.end-screen {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	width: 100vw;
	height: 100vh;
	align-items: center;
	justify-content: center;
}

.inline-icons {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;

	width: 100%;
}

:root.big-screen {
	--information-height: 75vh;
	--target-picker-height: 100%;
	--role-reveal-cards-height: 100vh;
}

:root:not(.big-screen) {
	--information-height: auto;
	--target-picker-height: auto;
	--role-reveal-cards-height: auto;
}

.information {
	font-size: 1.0rem;
	padding-left: 5%;
	padding-right: 5%;

	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: center;
	gap: 10px;

	height: var(--information-height);

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin: 0;

		&:first-child {
			padding-top: 10px;
		}

		&:last-child {
			padding-bottom: 10px;
		}
	}
}

.setup-aura {
	&.active {
		$active_color: color.change($connected_color, $alpha: 0.7);
		border: $active_color 1px solid;
		color: $active_color;
		background-color: color.change($active_color, $alpha: 0.2);

		&:hover {
			background-color: $active_color;
			color: white;
		}
	}
}

.aura-title {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 3px;
	// text-align: center;
	align-items: center;

	.title {
		flex-grow: 1;
	}

	img,
	.icon {
		flex-shrink: 1;
	}
}

.guardian-select {
	max-height: 100vh;
}

.story-text {
	font-size: 1.7em;
}


.dialog {
	z-index: 5;
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	position: fixed;
	top: 0;
	left: 0;
	align-items: center;
	justify-content: center;
	color: white;

	.dialog-box {
		border: 1px solid white;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: center;
		padding-left: 30px;
		padding-right: 30px;
		padding-top: 10px;
		padding-bottom: 10px;
		background-color: black;

		.options {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			gap: 20px;

			&>button {
				min-width: 4cm;
				font-size: 1em;
			}
		}
	}

	.close-dialog {
		align-self: flex-end;
		width: 100%;
		margin: 0;
		border: 1px solid $wolves_border;
		color: $wolves_border;

		&:hover {
			background-color: $wolves_border_faint;
		}
	}
}

dialog::backdrop {
	background-color: rgba(0, 0, 0, 0.7);
}

.about {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 10px;

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin: 0;
	}

	p {
		margin: 0;
		text-align: center;
	}

	a {
		text-decoration: underline dotted;
		color: white;
	}

	.links {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: center;
		width: 100%;
		gap: 10px;
	}

	.build-info {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: center;
		text-align: center;

		label {
			color: hsl(280, 65%, 43%);
		}
	}

	.redir-url {
		user-select: text;
		color: rgba(255, 255, 255, 0.7);
	}
}

.footer {
	width: 100vw;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	margin-top: auto;
	max-height: 1cm;
	justify-content: center;
	background-color: #000;
	z-index: 3;
	padding: 10px 0 10px 0;
	border-top: 1px solid white;
}

.has-confirm {
	cursor: pointer;
}

.dimmed {
	filter: opacity(70%);
}

.test-screen {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 10px;
	align-items: center;

	width: 80vw;
	margin-left: 10vw;
	margin-right: 10vw;

	.test-screen-selector {
		.category {
			.selected {
				background-color: rgba(0, 255, 0, 0.7);
				border: 1px solid rgba(0, 255, 0, 1.0);
				color: black;
			}

			label {
				font-size: 2em;
			}

			button {
				color: white;
			}

			gap: 10px;

			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
			max-width: 80vw;

			.test-screens {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				align-items: center;
				gap: 10px;
				margin: 0;
				padding-left: 0;

				li {
					margin: 0;
					list-style: none;
				}
			}
		}
	}
}


.prompt-test,
.result-test {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	min-width: 40vw;
	align-items: center;

	.close {
		width: 100%;
	}

	font-size: 2em;

	.result-number,
	.prompt-number {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 20px;
	}

	.result-options,
	.prompt-options {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: center;
		gap: 5px;
		margin-top: 10px;

		.option-set {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			gap: 5px;
		}

		.result-option,
		.prompt-option {
			width: 100%;
			padding: 5px;
			border: 1px solid white;
			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
			gap: 5px;
		}
	}
}

.inc-dec {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 20px;

	.inc-dec-content {
		flex-grow: 1;
	}
}

.top-of-day-info {
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	padding: 10px;

	gap: 10vw;

	.info-tidbit {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: center;
		gap: 5px;

		label {
			font-size: 1.5em;
			opacity: 70%;
		}

		.parity {
			font-size: 2em;
		}

		.parity-pct {
			font-size: 1.25em;
		}

		.last-nights-kills {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			gap: 2cm;

			.identity {
				.number {
					color: red;
					font-size: 1.5em;
				}

				text-align: center;
				font-size: 1.25em;
			}
		}

		.current-day {
			color: red;
			font-size: 3em;
			flex-grow: 1;
		}
	}
}

.option-menu {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 5px;
}


.story {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	// width: 100vw;
	justify-content: space-evenly;
	row-gap: 5px;
	margin: 5vh 10vw 0px 10vw;

	.character-headline {
		display: flex;
		flex-direction: row;
		gap: 3px;
		align-items: center;

		.icon-spacer {
			height: 32px;
			width: 32px;
		}

		padding: 0.2em 1em 0.2em 1em;
		min-width: 5cm;

		.identity {
			text-align: center;
			flex-grow: 1;
		}
	}

	.character-details {
		display: none;

		&.shown {
			display: flex;
		}

		border-top: none;
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 3px;
		padding: 2px 3px 2px 3px;

	}

	.story-time {
		width: 100%;

		.time {
			width: 100%;
			font-size: 1.5em;
			font-weight: bold;
			padding: 3px 0px 3px 0px;
			display: block;

			&:hover {
				backdrop-filter: brightness(150%);
			}
		}

		.details {
			display: none;

			&.shown {
				display: flex;
			}

			flex-direction: column;
			flex-wrap: nowrap;
		}
	}
}

dialog {
	background-color: transparent;
	border: none;
}

.object-submenu {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;

	.object {
		width: 100%;
		background-color: black;
	}

	menu {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 3px;
		align-items: center;
		width: 100%;
		margin: 0;
		padding: 0;

		&>button,
		&>div,
		&>div>button {
			width: 100%;
		}
	}
}