werewolves/style/setup.scss

.setup-screen {
	.inactive {
		filter: brightness(0%);
	}

	margin: 2%;
	font-size: 1.5em;

	.setup {
		display: grid;
		grid: auto-flow / 1fr 1fr 1fr;
		gap: 5vw;
		row-gap: 2ch;
	}

}

.setup-category {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 0.25ch;
	text-align: left;
	align-items: center;


	.title {
		padding: 0.1ch;
		text-align: center;
		text-shadow: black 1px 1px;
		width: 100%;
		flex-grow: 1;
		margin-bottom: 0.25ch;
		font-size: 1.25em;
	}

	.count {
		padding: 0 0.5ch 0 0.5ch;

		&.invisible {
			opacity: 0%;
		}
	}

	.slot {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;

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

		.role {
			flex-grow: 1;
			text-shadow: black 1px 1px;

			width: 100%;
			filter: saturate(40%);
			padding: 0.25ch 0 0.25ch 1ch;
		}

		.wakes {
			border: 2px solid $wakes_color;
			box-shadow: 0 0 3px $wakes_color;
		}
	}
}

.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;
		border: 1px solid $village_border;
		background-color: color.change($village_color, $alpha: 0.3);

		text-align: center;

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