.auth-hidden
{
	opacity: 0.5;
}

html, body
{
	background: var(--card-background);
	color: var(--card-text);
	line-height: 1.15;
}

.ui-modal
{
	&:not(.ui-window) > .content, &.ui-window .content .frame
	{
		background: var(--card-background);
	}
	& > .content
	{
		color: var(--card-text);
	}
	&.ui-dialog
	{
		.content
		{
			.titlebar
			{
				button, a.button
				{
					color: var(--card-overlay);
					
					&:hover
					{
						background: var(--card-text);
						color: var(--card-background);
					}
				}
			}
			.buttons
			{
				button, a.button
				{
					background: var(--card-overlay);
					color: var(--card-text);
					
					&:hover, &.highlight
					{
						background: var(--card-text);
						color: var(--card-background);
					}
				}
			}
		}
	}
	&.qrcode .contents .qrcode
	{
		display: flex;
		flex-flow: column nowrap;
		gap: 10px;
		
		svg
		{
			height: 180px;
			width: 180px;
			
			rect
			{
				fill: light-dark(var(--card-overlay), var(--card-text));
			}
			g path
			{
				fill: light-dark(var(--card-text), var(--card-background));
			}
		}
	}
}
.tippy-box
{
	background: var(--card-text);
	border-color: var(--card-background);
	
	& > .tippy-content
	{
		color: var(--card-background);
	}
	& > .tippy-arrow
	{
		color: var(--card-background) !important;
	}
}

#watermark
{
	inset: 0;
	pointer-events: none;
	position: fixed;
	z-index: 9999;
	
	img
	{
		height: 100%;
		object-fit: cover;
		object-position: center center;
		position: absolute;
		width: 100%;
		
		&.light
		{
			opacity: 0.036;
		}
		&.dark
		{
			opacity: 0.056;
		}
	}
}
#background
{
	--blur: 120;
	display: none;
	position: relative;
	
	& > *
	{
		height: 100%;
		left: 0;
		position: absolute;
		pointer-events: none;
		top: 0;
		width: 100%;
	}
	img
	{
		object-fit: cover;
		object-position: center center;
	}
	.blur
	{
		backdrop-filter: blur(calc(var(--blur) * 1px));
	}
}
#bgm
{
	align-items: center;
	background: var(--card-translucent);
	backdrop-filter: blur(50px);
	box-shadow: 2px 2px 20px var(--card-shadow);
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	left: 0;
	padding: 8px;
	position: sticky;
	right: 0;
	top: 0;
	z-index: 10;
	
	.controls
	{
		display: flex;
		flex: 0;
		gap: 4px;
		
		a.button, button
		{
			background-color: var(--card-overlay);
			border: none;
			border-radius: var(--card-border-radius);
			color: var(--card-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;
	}
}
#bottom-bar
{
	align-items: center;
	background: var(--card-translucent);
	backdrop-filter: blur(50px);
	box-shadow: 2px 2px 20px var(--card-shadow);
	border-top: solid 2px var(--card-background);
	bottom: 0;
	display: flex;
	gap: 6px;
	justify-content: center;
	left: 0;
	padding: 8px;
	position: sticky;
	right: 0;
	z-index: 10;
	
	a.logo
	{
		display: inline-flex;
		flex-flow: row nowrap;
		gap: 15px;
		justify-content: center;
		
		i
		{
			background-color: var(--card-text);
			mask: url(../images/icon-mono.png) center center / contain no-repeat;
			aspect-ratio: 1 / 1;
			display: inline-block;
			height: calc(var(--base-fontsize) * 1);
		}
	}
	.buttons
	{
		display: flex;
		flex: 0;
		gap: 4px;
		
		a.button, button
		{
			background-color: var(--card-overlay);
			border: none;
			border-radius: var(--card-border-radius);
			color: var(--card-text);
			font-size: calc(var(--base-fontsize) * 0.75);
		}
	}
}
.swiper-container
{
	--swiper-navigation-color: var(--card-text);
	--swiper-navigation-size: 24px;
	
	.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);
		}
	}
}
.glightbox-container
{
	.gslide-description
	{
		background-color: var(--card-background) !important;
		color: var(--card-text) !important;
		font-size: var(--base-fontsize) !important;
	}
}

#card-profile
{
	background-color: var(--card-background);
	display: flex;
	flex-flow: column nowrap;
	gap: var(--card-gap);
	min-height: 100vh;
	padding: var(--card-padding);
	
	.header
	{
		display: flex;
		flex-flow: column nowrap;
		gap: var(--card-gap);
		
		.header-image
		{
			position: relative;
			text-align: center;
			
			img
			{
				vertical-align:top;
				width: 100%;
			}
			.header-text.title
			{
				background: linear-gradient(var(--card-background-transparent) 0%, var(--card-background) 75%);
				bottom: 0;
				display: none;
				flex-flow: column nowrap;
				justify-content: flex-end;
				padding-top: 50px;
				position: absolute;
				width: 100%;
			}
		}
		.header-text
		{
			text-align: center;
			
			& > *
			{
				white-space: pre-wrap;
			}
			h1
			{
				font-size: calc(var(--base-fontsize) * 1.7);
				font-weight: var(--font-weight-black);
			}
			h2
			{
				font-size:  calc(var(--base-fontsize) * 1.35);
				font-weight: var(--font-weight-semi);
			}
			p
			{
				font-size: calc(var(--base-fontsize) * 1.15);
			}
			img
			{
				max-width: 100%;
			}
			.verified
			{
				--size: calc(var(--base-fontsize) * 1.15);
				align-items: center;
				display: inline-flex;
				font-size: var(--size);
				justify-content: center;
				height: var(--size);
				opacity: 0.4;
				position: relative;
				top: -4px;
				width: var(--size);
				
				.fa-check
				{
					color: var(--card-background);
					position: absolute;
					scale: 56%;
					z-index: 1;
				}
			}
		}
		.socials
		{
			align-items: center;
			display: flex;
			gap: 0 10px;
			flex-flow: row wrap;
			margin-top: -10px;
			justify-content: center;
			
			& > *:not(.separator.break)
			{
				margin-top: 10px;
			}
			a, button
			{
				background-color: var(--card-overlay);
				border: none;
				border-radius: var(--card-border-radius);
				color: var(--card-text);
				font-size: calc(var(--base-fontsize) * 1);
			}
			.separator.divider
			{
				background-color: var(--card-overlay);
				flex: 0 0 1px;
				height: 1em;
			}
			.separator.break
			{
				flex-basis: 100%;
			}
		}
		.nav-bar
		{
			border-top: solid 1px var(--card-overlay);
			padding-top: var(--card-gap);
			
			&:is(menu)
			{
				display: flex;
				gap: var(--card-gap);
				flex-flow: row wrap;
				margin-bottom: var(--card-padding);
				list-style: none;
			}
			&:is(.swiper-container)
			{
				--swiper-navigation-size: 18px;
				
				.swiper-slide
				{
					width: auto;
				}
				.swiper-nav
				{
					margin: 0;
					justify-content: center;
					
					&>*
					{
						margin-bottom: calc(var(--swiper-navigation-size) * 0.9);
					}
				}
			}
			
			button, a.button
			{
				background: none;
				background-color: var(--card-overlay);
				border: none;
				border-radius: var(--card-border-radius);
				color: var(--card-text);
				font-size: calc(var(--base-fontsize) * 1.15);
				padding: 0.36em 0.5em;
				
				&:hover
				{
					background-color: var(--card-text);
					color: var(--card-background);
				}
			}
		}
	}
	.contents
	{
		display: flex;
		flex-flow: column nowrap;
		gap: var(--contents-gap, var(--card-gap));
		
		.section
		{
			--columns-portrait: 1;
			--columns-landscape: 1;
			--rows-portrait: 1;
			--rows-landscape: 1;
			--ratio: 1 / 1;
			--brightness: 50;
			--contrast: 50;
			--saturation: 50;
			--sepia: 0;
			
			&, & > .content
			{
				display: flex;
				flex-flow: column nowrap;
				gap: var(--card-gap);
			}
			&:not(.sub) > strong.title
			{
				font-size: calc(var(--base-fontsize) * 1.45);
				font-weight: var(--font-weight-bold);
			}
			/*&.sub > strong.title
			{
				font-size: calc(var(--base-fontsize) * 1.15);
				font-weight: var(--font-weight-semi);
			}*/
			.content
			{
				&.grid-P
				{
					display: grid;
					grid-template-columns: repeat(var(--columns-portrait), 1fr);
				}
				.swiper
				{
					.swiper-wrapper
					{
						align-items: flex-start;
						transition-property: transform, height;
						
						.swiper-slide
						{
							height: auto !important;
						}
					}
				}
				.text-container, .link-container, .product-container, .picture-container, .video-container, .map-container
				{
					background: var(--card-overlay);
					border-radius: var(--card-border-radius);
					overflow: hidden;
					font-size: var(--base-fontsize);
				}
				.text-container
				{
					padding: var(--card-gap);
					white-space: pre-wrap;
				}
				.link-container, .product-container
				{
					align-items: center;
					display: flex;
					gap: var(--card-gap);
					padding: var(--card-gap);
					flex-flow: row nowrap;
					position: relative;
					
					a
					{
						border-radius: inherit;
						inset: 0;
						z-index: 1;
						position: absolute;
					}
					picture
					{
						background: var(--card-overlay);
						align-items: center;
						aspect-ratio: 1 / 1;
						border-radius: inherit;
						display: flex;
						justify-content: center;
						overflow: hidden;
						width: calc(var(--size) * 1px);
						
						img
						{
							filter: brightness(calc(var(--brightness) / 50)) contrast(calc(var(--contrast) / 50)) saturate(calc(var(--saturation) / 50)) sepia(calc(var(--sepia) / 100));
							height: 100%;
							object-fit: cover;
							object-position: calc(var(--position-x) * 1%) calc(var(--position-y) * 1%);
							transform-origin: calc(var(--position-x) * 1%) calc(var(--position-y) * 1%);
							width: 100%;
						}
						i
						{
							font-size: calc((20 / 12) * var(--base-fontsize));
						}
					}
					.label
					{
						display: flex;
						flex-flow: column nowrap;
						gap: 3px;
						font-size: var(--base-fontsize);
						flex: 1;
						
						h4
						{
							font-weight: var(--font-weight-semi);
						}
						hr
						{
							background: var(--card-text);
							border: none;
							height: 1px;
							opacity: 0.05;
						}
					}
				}
				.picture-container
				{
					img
					{
						aspect-ratio: var(--ratio);
						filter: brightness(calc(var(--brightness) / 50)) contrast(calc(var(--contrast) / 50)) saturate(calc(var(--saturation) / 50)) sepia(calc(var(--sepia) / 100));
						border-radius: var(--card-border-radius);
						border: none;
						object-fit: cover;
						object-position: calc(var(--position-x) * 1%) calc(var(--position-y) * 1%);
						transform-origin: calc(var(--position-x) * 1%) calc(var(--position-y) * 1%);
						vertical-align: middle;
						width: 100%;
					}
					
					.picture-description
					{
						display: flex;
						flex-flow: column nowrap;
						gap: 10px;
						padding: 15px;
						font-size: var(--base-fontsize);
						text-align: center;
					}
				}
				.video-container
				{
					aspect-ratio: var(--ratio);
					align-items: center;
					display: flex;
					justify-content: center;
					position: relative;
					
					a.preview
					{
						inset: 0;
						position: absolute;
						z-index: 2;
					}
					img.preview-image, iframe
					{
						border: none;
						height: 100%;
						filter: brightness(calc(var(--brightness) / 50)) contrast(calc(var(--contrast) / 50)) saturate(calc(var(--saturation) / 50)) sepia(calc(var(--sepia) / 100));
						object-fit: cover;
						object-position: calc(var(--position-x) * 1%) calc(var(--position-y) * 1%);
						transform-origin: calc(var(--position-x) * 1%) calc(var(--position-y) * 1%);
						vertical-align: top;
						width: 100%;
					}
					&.gdrive iframe
					{
						aspect-ratio: 2 / 1;
						height: 100%;
						width: auto;
					}
					span.label
					{
						background: linear-gradient(#18181878 0%,#18181800 100%);
						color: white;
						display: block;
						font-size: var(--base-fontsize);
						font-weight: var(--font-weight-semi);
						position: absolute;
						padding: 0.5em;
						padding-bottom: 1.5em;
						text-shadow: 1px 1px 10px #18181878;
						top: 0;
						width: 100%;
						z-index: 1;
					}
					span.play-icon
					{
						align-items: center;
						background: var(--card-text);
						border-radius: 100%;
						color: var(--card-background);
						display: flex;
						font-size: calc((15 / 12) * var(--base-fontsize));
						height: 3rem;
						justify-content: center;
						left: 50%;
						position: absolute;
						transform: translate(-50%, -50%);
						top: 50%;
						width: 3rem;
						z-index: 1;
					}
				}
				.map-container
				{
					.map-description
					{
						display: flex;
						flex-flow: column nowrap;
						gap: 10px;
						padding: 15px;
						text-align: center;
						
						h3
						{
							font-size: calc(var(--base-fontsize) * 1.15);
							font-weight: var(--font-weight-semi);
						}
					}
					.map-wrapper
					{
						display: block;
						position: relative;
						
						iframe
						{
							aspect-ratio: 5 / 4;
							vertical-align: top;
						}
					}
				}
				.swipe-container
				{
					/*.swipe-slide
					{
						width: calc((100% - (15px * (var(--columns-portrait, 1) - 1))) / var(--columns-portrait, 1))
					}*/
				}
			}
			
			/* Links */
			&.size-S *:is(.link-container, .product-container)
			{
				--size: 60;
			}
			&.size-M *:is(.link-container, .product-container)
			{
				--size: 90;
			}
			&.size-L *:is(.link-container, .product-container)
			{
				--size: 120;
			}
			
			/* Restrictions */
			&.landscape-only
			{
				display: none;
			}
		}
		.separator
		{
			background-color: var(--card-overlay);
			height: 1px;
		}
	}
	#footer, #views
	{
		color: currentColor;
		text-align: center;
	}
	#views
	{
		background-color: var(--card-overlay);
		border-radius: 5px;
		display: flex;
		flex-flow: row nowrap;
		font-size: calc(var(--base-fontsize) * 1.15);
		justify-content: space-between;
		padding: var(--card-gap, var(--card-gap));
	}
	#footer:not(#views + #footer)
	{
		border-top: solid 1px var(--card-overlay);
		padding-top: var(--card-gap, var(--card-gap));
	}
	
	.card-profile-ad
	{
		--scale-portrait: 100;
		--scale-landscape: 100;
		
		aspect-ratio: 2 / 1;
		overflow: hidden;
		position: relative;
		
		& > *
		{
			display: block;
			inset: 0;
			position: absolute;
			
			picture > *
			{
				height: 100%;
				object-fit: contain;
				object-position: center center;
				vertical-align: top;
				width: 100%;
				
				&:is(.background *)
				{
					object-fit: cover;
				}
			}
		}
		.contents
		{
			z-index: 1;

			picture img
			{
				scale: calc(var(--scale-portrait) / 100);
			}
		}
		.link
		{
			z-index: 2;
		}
		.ad-tooltip
		{
			display: none;
		}
	}
}
.glightbox-video-zoom
{
	.gslide-media
	{
		height: auto !important;
		width: auto !important;
		
		.ginlined-content
		{
			padding: 0;
			
			.video-wrapper
			{
				background: black;
				aspect-ratio: 16 / 9;
				height: 80vh;
				overflow: hidden;
				vertical-align: top;
				width: auto;
			}
			iframe
			{
				width: 100%;
				height: 100%;
			}
		}
	}
}

@media (prefers-color-scheme: light)
{
	#watermark.adaptive img.light
	{
		display: none;
	}
}
@media (prefers-color-scheme: dark)
{
	#watermark.adaptive img.dark
	{
		display: none;
	}
}

@media (max-width: 767px) or (orientation: portrait)
{
	#watermark img.landscape
	{
		display: none;
	}
}
@media (min-width: 768px) and (orientation: landscape)
{
	:root
	{
		--contents-gap: 30px;
		--card-border-radius: 8px;
	}
	
	#watermark img.portrait
	{
		display: none;
	}
	#background
	{
		display: block;
		inset: 0;
		position: fixed;
	}
	
	#card-profile
	{
		border-radius: 12px;
		margin: 40px auto;
		padding: 28px 74px 32px;
		position: relative;
		width: min(735px, 80vw);
		z-index: 5;
		
		.header
		{
			.header-image
			{
				img
				{
					margin-top: 50px;
					width: 366px;
				}
			}
			.header-text
			{
				img
				{
					margin: 0 auto;
					width: 366px;
				}
			}
		}
		
		.contents
		{
			.section
			{
				.content.grid-L
				{
					display: grid;
					grid-template-columns: repeat(var(--columns-landscape), 1fr);
				}
				&.portrait-only
				{
					display: none;
				}
				&.landscape-only
				{
					display: flex;
				}
			}
			.swiper-container
			{
				/*.swiper-slide
				{
					width: calc((100% - (15px * (var(--columns-landscape, 1) - 1))) / var(--columns-landscape, 1))
				}*/
			}
		}
		.card-profile-ad
		{
			aspect-ratio: 4 / 1;
			
			.contents
			{
				picture img
				{
					scale: calc(var(--scale-landscape) / 100);
				}
			}
		}
	}
}