$gold: #f5c542;
$panel: #1b2130;

.treepanel
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	pointer-events: all;

	// Same reason as the shop - without this the HUD paints through the sheet.
	z-index: 100;
	font-family: Poppins;
	color: white;

	.scrim
	{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba( 8, 10, 16, 0.65 );
		pointer-events: all;
	}

	.sheet
	{
		width: 560px;
		max-width: 92%;
		max-height: 90%;
		flex-direction: column;
		background-color: $panel;
		border-radius: 24px;
		padding: 22px;
		border-bottom: 6px solid rgba( 0, 0, 0, 0.4 );
		pointer-events: all;
	}

	.head
	{
		align-items: center;
		margin-bottom: 14px;

		.title
		{
			flex-grow: 1;
			font-size: 24px;
			font-weight: 800;
			letter-spacing: 2px;
			align-items: center;

			i
			{
				font-family: Material Icons;
				font-size: 28px;
				margin-right: 10px;
				color: $gold;
			}
		}

		.closebtn
		{
			width: 44px;
			height: 44px;
			border-radius: 12px;
			background-color: rgba( 255, 255, 255, 0.08 );
			align-items: center;
			justify-content: center;
			cursor: pointer;
			pointer-events: all;

			i { font-family: Material Icons; font-size: 24px; }

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

	.note
	{
		font-size: 13px;
		opacity: 0.7;
		background-color: rgba( 255, 255, 255, 0.05 );
		border-radius: 12px;
		padding: 10px 14px;
		margin-bottom: 12px;
	}

	.rows
	{
		flex-direction: column;
		overflow-y: scroll;
	}

	.lbrow
	{
		align-items: center;
		background-color: rgba( 255, 255, 255, 0.05 );
		border-radius: 14px;
		padding: 12px 16px;
		margin-bottom: 8px;
		border: 2px solid rgba( 0, 0, 0, 0 );

		.rank
		{
			width: 44px;
			font-size: 20px;
			font-weight: 800;
			opacity: 0.7;
		}

		.who
		{
			flex-grow: 1;
			font-size: 17px;
		}

		.score
		{
			font-size: 20px;
			font-weight: 700;
			align-items: center;

			.num { font-size: 20px; font-weight: 700; }

			.unit
			{
				font-size: 12px;
				opacity: 0.6;
				margin-left: 6px;
			}
		}

		&.gold .rank { color: $gold; opacity: 1; }
		&.silver .rank { color: #cfd6e4; opacity: 1; }
		&.bronze .rank { color: #d09a5c; opacity: 1; }

		&.me
		{
			border-color: #7fd06f;
			background-color: rgba( 127, 208, 111, 0.12 );
		}
	}

	.refresh
	{
		align-self: center;
		margin-top: 8px;
		padding: 10px 28px;
		border-radius: 12px;
		background-color: rgba( 255, 255, 255, 0.08 );
		font-size: 14px;
		font-weight: 700;
		letter-spacing: 1px;
		align-items: center;
		cursor: pointer;
		pointer-events: all;

		i
		{
			font-family: Material Icons;
			font-size: 18px;
			margin-right: 8px;
		}

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