.scene-transition
{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: hidden;

	// Over-sized rotated bars that sweep across the screen
	.wipe
	{
		position: absolute;
		left: -45%;
		top: -90%;
		width: 190%;
		height: 280%;
	}

	.cover
	{
		background-color: #0c0a14;
	}

	// Leading / trailing accent stripes for a layered wipe.
	.accent-mid
	{
		background-color: #ffd23d;
	}

	.accent-back
	{
		background-color: #ff4d6a;
	}

	// Upright loading layer. Stays un-rotated so the artwork and text read normally.
	.content
	{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;

		.thumb
		{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			background-color: #0c0a14;
		}

		.scrim
		{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba( 12, 10, 20, 0.15 );
			background-image: linear-gradient( to top, rgba( 8, 7, 14, 0.85 ) 0%, rgba( 8, 7, 14, 0.3 ) 28%, rgba( 8, 7, 14, 0 ) 55% );

			// When the sidebar is present, darken the right side so it reads over bright art.
			&.with-sidebar
			{
				background-image: linear-gradient( to left, rgba( 8, 7, 14, 0.7 ) 0%, rgba( 8, 7, 14, 0.2 ) 28%, rgba( 8, 7, 14, 0 ) 48% );
			}
		}

		.loading-row
		{
			position: absolute;
			top: 56px;
			left: 64px;
			flex-direction: row;
			align-items: center;
            filter: drop-shadow(2px 2px 0px black);

			.spinner
			{
				width: 34px;
				height: 34px;
				align-items: center;
				justify-content: center;
				margin-right: 16px;

				.ring
				{
					position: absolute;
					width: 34px;
					height: 34px;
					border: 3px solid rgba( 255, 255, 255, 0.25 );
					border-top: 3px solid #ffd23d;
					border-radius: 50%;
					animation: scene-spin 0.9s linear infinite;
				}

				.ring-2
				{
					width: 22px;
					height: 22px;
					border: 3px solid rgba( 255, 255, 255, 0.25 );
					border-bottom: 3px solid #ff4d6a;
					animation: scene-spin 1.4s linear infinite reverse;
				}
			}

			.loading-text
			{
				font-family: Inter;
				font-weight: 700;
				font-size: 18px;
				color: rgba( white, 0.9 );
				letter-spacing: 6px;
			}
		}

		// Caption shown on the (map-less) lobby-return screen.
		.lobby-caption
		{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			align-items: center;
			justify-content: center;
			font-family: Poppins;
			font-weight: 800;
			font-size: 64px;
			color: #ffffff;
			text-align: center;
			text-shadow: 0px 3px 14px rgba( 0, 0, 0, 0.7 );
			letter-spacing: -1px;
		}

		// Translucent right-hand panel: name, stats, friends leaderboard, then minimap at the bottom.
		.sidebar
		{
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			width: 550px;
			padding: 64px 56px;
			flex-direction: column;
			align-items: stretch;
			background-color: rgba( 10, 9, 16, 0.9 );

			.map-name
			{
				font-family: Poppins;
				font-weight: 800;
				font-size: 56px;
				color: #ffffff;
				text-shadow: 0px 3px 14px rgba( 0, 0, 0, 0.7 );
				letter-spacing: -1.5px;
				margin-bottom: 24px;
			}

			.stats
			{
				flex-direction: row;
				margin-bottom: 36px;
			}

			.stat
			{
				flex-direction: column;
				align-items: flex-start;
				margin-right: 48px;

				.stat-value
				{
					font-family: Poppins;
					font-weight: 800;
					font-size: 36px;
					color: #ffd23d;
					text-shadow: 0px 2px 8px rgba( 0, 0, 0, 0.6 );
				}

				.stat-label
				{
					font-family: Inter;
					font-weight: 700;
					font-size: 13px;
					color: rgba( 255, 255, 255, 0.62 );
					letter-spacing: 2px;
					margin-top: 4px;
				}
			}

			// Aggregate star rating, shown above the play-count stats.
			.rating-row
			{
				flex-direction: row;
				align-items: center;
				gap: 3px;
				margin-top: -32px;
				margin-bottom: 18px;

				.rstar
				{
					font-size: 24px;
					color: #ffd23d;
				}

				.rating-num
				{
					font-family: Poppins;
					font-weight: 800;
					font-size: 18px;
					color: #ffffff;
					margin-left: 8px;
				}

				.rating-count
				{
					font-family: Inter;
					font-weight: 700;
					font-size: 14px;
					color: rgba( 255, 255, 255, 0.55 );
					margin-left: 5px;
				}
			}

			.board
			{
				flex-direction: column;
				align-items: stretch;

				.board-title
				{
					font-family: Inter;
					font-weight: 700;
					font-size: 14px;
					color: rgba( 255, 255, 255, 0.55 );
					letter-spacing: 3px;
					margin-bottom: 14px;
				}

				.board-msg
				{
					font-family: Inter;
					font-weight: 600;
					font-size: 16px;
					color: rgba( 255, 255, 255, 0.4 );
					padding: 8px 0px;
				}

				.brow
				{
					flex-direction: row;
					align-items: center;
					padding: 8px 0px;
					border-bottom: 1px solid rgba( 255, 255, 255, 0.08 );

					&.local
					{
						.brow-name,
						.brow-time { color: #ffd23d; }
					}

					.brow-rank
					{
						font-family: Poppins;
						font-weight: 800;
						font-size: 18px;
						color: rgba( 255, 255, 255, 0.5 );
						width: 38px;
					}

					.brow-name
					{
						flex-grow: 1;
						font-family: Inter;
						font-weight: 700;
						font-size: 18px;
						color: #ffffff;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}

					.brow-time
					{
						font-family: Poppins;
						font-weight: 700;
						font-size: 18px;
						color: rgba( 255, 255, 255, 0.85 );
					}
				}
			}

			// Pushed to the bottom of the sidebar.
			.minimap
			{
				margin-top: auto;
				width: 100%;
				height: 280px;
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
                filter: drop-shadow( 0px 0px 0px white );   
			}
		}
	}
}

@keyframes scene-spin
{
	from { transform: rotate( 0deg ); }
	to { transform: rotate( 360deg ); }
}