Scoreboard {
	position: absolute;
	justify-content: center;
	align-items: center;
	font-family: Open Sans;
	font-weight: 600;
	font-size: 22px;
	color: #fff;
	opacity: 0;
	transition: all 0.1s ease-in;
	margin: auto;
	width: 100%;
	height: 100%;
	margin: auto;
	z-index: 999;
	background-color: rgba( black, 0.75 );
	backdrop-filter: blur(5px);

	.voting {
		width: 20%;
	}

	.col {
		flex-direction: column;
		gap: 8px;
	}

	.title {
		top: 24px;
		width: 100%;
		height: 64px;
		align-items: center;
		flex-direction: row;
		justify-content: space-between;
		position: relative;

		&:after {
			position: absolute;
			bottom: 12px;
			width: 64px;
			height: 4px;
			background-color: #FF9E2D50;
		}
	}

	.avatar {
		margin-right: 8px;
		width: 28px;
		height: 28px;
		border: 0.2px solid black;
		box-shadow: 0px 0px 20px rgba( #FF9E2D10, 0.5 );
		position: relative;
	}

	.table {
		flex-direction: column;
		width: 1000px;
		color: #d7b35b;
		border-radius: 0px;
		min-height: 600px;
		min-width: 800px;

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

		.row {
			white-space: nowrap;
			align-items: center;
			height: 54px;
			cursor: pointer;
			position: relative;

			> .name {
				flex-grow: 1;
			}

			> .stat {
				width: 100px;
				justify-content: flex-end;
				text-transform: lowercase;
			}
		}

		.header {
			opacity: 0.5;
			font-weight: 300;
			height: 40px;

			> .stat {
				font-size: 20px;
			}
		}

		.player {
			background-image: radial-gradient( #FF9E2D05, #FF9E2D10 );
			border: 0.5px solid rgba( black, 0.5 );
			padding: 0px 8px;
			backdrop-filter: blur(50px);

			&:nth-child(odd) {
				background-image: radial-gradient( #FF9E2D10, #FF9E2D30 );
			}

			label {
				color: radial-gradient( #FFEB00, #E4AB17 );
				text-shadow: 0px 0px 5px rgba( black, 0.2 );
			}

			&:before {
				left: 0;
				top: 0;
				position: absolute;
				width: 100%;
				height: 100%;
				background-color: rgba( black, 0.25 );
				mask-position: center;
				mask-size: 32px;
				mask-image: url( ui/diag_line_mask.png );
			}

			&.me {
				background-image: radial-gradient( #FF9E2D10, #FF9E2D90 );
				position: relative;
				border: 1px solid #F1BE0A99;
				box-shadow: 0px 0px 30px 1px #ff9e2d30;

				&:after {
					left: -36px;
					position: absolute;
					width: 16px;
					height: 16px;
					background-image: linear-gradient( to right, #ffaf007b, #ffaf007b );
					transform: rotateZ(45deg);
					box-shadow: 0px 0px 10px #ffaf0020;
					border: 0.25px solid black;
				}
			}
		}
	}

	&.visible {
		opacity: 1.0;
		transform: scale( 1 );
		transition: all 0.1s ease-out;
	}
}