#bgm
{
	align-items: center;
	background: light-dark( hsl(0deg 0% calc((90 - var(--base-darkness)) * 1%) / 84%) , hsl(0deg 0% calc((10 + var(--base-lightness)) * 1%) / 84%) );
	backdrop-filter: blur(50px);
	box-shadow: 2px 2px 20px hsl(0deg 0% calc((10 + var(--base-lightness)) * 1%) / 50%);
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	left: 0;
	padding: 8px;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 10;
	
	.controls
	{
		display: flex;
		flex: 0;
		gap: 4px;
		
		a.button, button
		{
			background-color: light-dark( hsl(0deg 0% calc((0 + var(--base-lightness)) * 1%) / 10%) , hsl(0deg 0% calc((100 - var(--base-darkness)) * 1%) / 10%) );
			border: none;
			border-radius: 8px;
			color: var(--color-text);
			font-size: calc(var(--base-fontsize) * 0.75);
		}
	}
	.display
	{
		display: none;
		overflow: hidden;
		flex: 1;
		
		span
		{
			white-space: nowrap;
		}
	}
	
	&.state-playing button[data-states~='!playing'],
	&:not(.state-playing) button[data-states~='playing'],
	&.state-halfway button[data-states~='!halfway'],
	&:not(.state-halfway) button[data-states~='halfway']
	{
		display: none;
	}
}
#checkName
{
	--color-green: light-dark( hsl(120deg 72% calc((36 - var(--base-darkness)) * 1%)), hsl(120deg 72% calc((64 + var(--base-lightness)) * 1%)) );
	--color-red: light-dark( hsl(0deg 72% calc((36 - var(--base-darkness)) * 1%)), hsl(0deg 72% calc((64 + var(--base-lightness)) * 1%)) );
	min-height: 90vh;
	
	h2
	{
		font-weight: var(--font-weight-normal);
		font-style: italic;
	}
	
	form
	{
		.input-wrapper
		{
			align-items: flex-start;
			
			.input
			{
				align-self: stretch;
			}
		}
	}
	.display
	{
		overflow: hidden;
		transition: height .36s, opacity .36s;
		
		.display-wrapper
		{
			border: solid 1px var(--color-lines);
			border-radius: 5px;
			padding: 15px;
		}
		h2.available
		{
			color: var(--color-green);
		}
		h2.unavailable
		{
			color: var(--color-red);
		}
		&:not(.visible),
		&:not(.available) h2.available,
		&:not(.unavailable) h2.unavailable
		{
			display: none;
		}
	}
}
#highlights
{
	ul
	{
		display: grid;
		gap: 5px;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.swiper-container
	{
		--swiper-navigation-color: var(--color-text);
		--swiper-navigation-size: 24px;
		
		.swiper
		{
			.swiper-wrapper
			{
				align-items: flex-start;
				transition-property: transform, height;
				
				.swiper-slide
				{
					height: auto !important;
				}
			}
			.swiper-nav
			{
				display: flex;
				flex-flow: row nowrap;
				gap: var(--card-gap);
				justify-content: flex-end;
				margin-top: var(--card-gap);
				
				&>*
				{
					background-color: var(--card-overlay);
					border-radius: 100%;
					padding: calc(var(--swiper-navigation-size) * 0.9);
					position: unset;
					margin: 0;
					width: var(--swiper-navigation-size);
				}
			}
		}
	}
	.link-container
	{
		background: var(--color-overlay);
		border-radius: 10px;
		box-sizing: border-box;
		display: flex;
		flex-flow: row nowrap;
		gap: 10px;
		font-size: calc(var(--base-fontsize) * 1.42);
		padding: 15px;
		position: relative;
		
		.info
		{
			align-items: center;
			align-self: flex-end;
			aspect-ratio: 1 / 1;
			background: var(--color-overlay-1);
			border-radius: 100%;
			color: var(--color-text);
			display: flex;
			height: 1em;
			justify-content: center;
			vertical-align: middle;
			
			i
			{
				font-size: calc((8 / 12) * var(--base-fontsize));
			}
		}
		a.link
		{
			inset: 0;
			position: absolute;
			z-index: 1;
		}
		img
		{
			aspect-ratio: 1 / 1;
			border: solid 3px var(--color-lines-active);
			border-radius: 100%;
			box-sizing: border-box;
			object-position: center center;
			object-fit: cover;
			padding: 2px;
			width: 100px;
		}
		.separator
		{
			background: var(--color-lines);
			height: 1px;
		}
		.meta
		{
			flex: 1;
			text-align: left;
			
			.title
			{
				color: var(--color-link);
				font-size: calc((22 / 16) * var(--base-fontsize));
				font-weight: var(--font-weight-semi);
				text-transform: uppercase;
				
				.verified
				{
					--size: calc(var(--base-fontsize) * 1.15);
					align-items: center;
					display: inline-flex;
					font-size: var(--size);
					justify-content: center;
					height: var(--size);
					position: relative;
					top: -4px;
					width: var(--size);
					
					.fa-certificate
					{
						color: var(--color-overlay-1);
					}
					.fa-check
					{
						color: var(--color-text);
						position: absolute;
						scale: 56%;
						z-index: 1;
					}
				}
			}
			.description
			{
				--min-lines: 3;
				color: var(--color-text);
				font-size: calc((20 / 16) * var(--base-fontsize));
				line-height: 1.25;
				margin-top: 5px;
				min-height: calc((20 / 16) * var(--base-fontsize) * 1.25 * var(--min-lines));
			}
		}
	}
}
@media (min-width: 768px) or (orientation: landscape)
{
	#checkName
	{
		min-height: 80vh;
		padding-top: 45px;
		padding-bottom: 45px;
		
		form
		{
			.buttons
			{
				flex-flow: row wrap;
				justify-content: flex-end;
			}
		}
	}
	#highlights
	{
		padding-top: 45px;
		padding-bottom: 45px;
		
		.link-container .meta .description
		{
			--min-lines: 3;
		}
	}
}