/* ==== START of FONTS ==== */
	/* Poppins Thin */
	@font-face {
		font-family: 'Poppins';
		src: url('/vshojo/assets/fonts/Poppins/Poppins-Thin.ttf') format('truetype');
		font-weight: 100;
		font-style: normal;
	}
	@font-face {
		font-family: 'Poppins';
		src: url('/vshojo/assets/fonts/Poppins/Poppins-ThinItalic.ttf') format('truetype');
		font-weight: 100;
		font-style: italic;
	}
	/* Poppins ExtraLight */
	@font-face {
		font-family: 'Poppins';
		src: url('/vshojo/assets/fonts/Poppins/Poppins-ExtraLight.ttf') format('truetype');
		font-weight: 200;
		font-style: normal;
	}
	@font-face {
		font-family: 'Poppins';
		src: url('/vshojo/assets/fonts/Poppins/Poppins-ExtraLightItalic.ttf') format('truetype');
		font-weight: 200;
		font-style: italic;
	}
	/* Poppins Light */
	@font-face {
		font-family: 'Poppins';
		src: url('/vshojo/assets/fonts/Poppins/Poppins-Light.ttf') format('truetype');
		font-weight: 300;
		font-style: normal;
	}
	@font-face {
		font-family: 'Poppins';
		src: url('/vshojo/assets/fonts/Poppins/Poppins-LightItalic.ttf') format('truetype');
		font-weight: 300;
		font-style: italic;
	}
	/* Poppins Regular */
	@font-face {
		font-family: 'Poppins';
		src: url('/vshojo/assets/fonts/Poppins/Poppins-Regular.ttf') format('truetype');
		font-weight: 400;
		font-style: normal;
	}
	@font-face {
		font-family: 'Poppins';
		src: url('/vshojo/assets/fonts/Poppins/Poppins-Italic.ttf') format('truetype');
		font-weight: 400;
		font-style: italic;
	}
	/* Poppins Medium */
	@font-face {
		font-family: 'Poppins';
		src: url('/vshojo/assets/fonts/Poppins/Poppins-Medium.ttf') format('truetype');
		font-weight: 500;
		font-style: normal;
	}
	@font-face {
		font-family: 'Poppins';
		src: url('/vshojo/assets/fonts/Poppins/Poppins-MediumItalic.ttf') format('truetype');
		font-weight: 500;
		font-style: italic;
	}
	/* Poppins SemiBold */
	@font-face {
		font-family: 'Poppins';
		src: url('/vshojo/assets/fonts/Poppins/Poppins-SemiBold.ttf') format('truetype');
		font-weight: 600;
		font-style: normal;
	}
	@font-face {
		font-family: 'Poppins';
		src: url('/vshojo/assets/fonts/Poppins/Poppins-SemiBoldItalic.ttf') format('truetype');
		font-weight: 600;
		font-style: italic;
	}
	/* Poppins Bold */
	@font-face {
		font-family: 'Poppins';
		src: url('/vshojo/assets/fonts/Poppins/Poppins-Bold.ttf') format('truetype');
		font-weight: 700;
		font-style: normal;
	}
	@font-face {
		font-family: 'Poppins';
		src: url('/vshojo/assets/fonts/Poppins/Poppins-BoldItalic.ttf') format('truetype');
		font-weight: 700;
		font-style: italic;
	}
	/* Poppins ExtraBold */
	@font-face {
		font-family: 'Poppins';
		src: url('/vshojo/assets/fonts/Poppins/Poppins-ExtraBold.ttf') format('truetype');
		font-weight: 800;
		font-style: normal;
	}
	@font-face {
		font-family: 'Poppins';
		src: url('/vshojo/assets/fonts/Poppins/Poppins-ExtraBoldItalic.ttf') format('truetype');
		font-weight: 800;
		font-style: italic;
	}
	/* Poppins Black */
	@font-face {
		font-family: 'Poppins';
		src: url('/vshojo/assets/fonts/Poppins/Poppins-Black.ttf') format('truetype');
		font-weight: 900;
		font-style: normal;
	}
	@font-face {
		font-family: 'Poppins';
		src: url('/vshojo/assets/fonts/Poppins/Poppins-BlackItalic.ttf') format('truetype');
		font-weight: 900;
		font-style: italic;
	}

	/* MPLUSRounded1c Thin */
	@font-face {
		font-family: 'MPLUSRounded1c';
		src: url('/vshojo/assets/fonts/MPLUSRounded1c/MPLUSRounded1c-Thin.ttf') format('truetype');
		font-weight: 100;
		font-style: normal;
	}
	/* MPLUSRounded1c Light */
	@font-face {
		font-family: 'MPLUSRounded1c';
		src: url('/vshojo/assets/fonts/MPLUSRounded1c/MPLUSRounded1c-Light.ttf') format('truetype');
		font-weight: 300;
		font-style: normal;
	}
	/* MPLUSRounded1c Regular */
	@font-face {
		font-family: 'MPLUSRounded1c';
		src: url('/vshojo/assets/fonts/MPLUSRounded1c/MPLUSRounded1c-Regular.ttf') format('truetype');
		font-weight: 400;
		font-style: normal;
	}
	/* MPLUSRounded1c Medium */
	@font-face {
		font-family: 'MPLUSRounded1c';
		src: url('/vshojo/assets/fonts/MPLUSRounded1c/MPLUSRounded1c-Medium.ttf') format('truetype');
		font-weight: 500;
		font-style: normal;
	}
	/* MPLUSRounded1c Bold */
	@font-face {
		font-family: 'MPLUSRounded1c';
		src: url('/vshojo/assets/fonts/MPLUSRounded1c/MPLUSRounded1c-Bold.ttf') format('truetype');
		font-weight: 700;
		font-style: normal;
	}
	/* MPLUSRounded1c ExtraBold */
	@font-face {
		font-family: 'MPLUSRounded1c';
		src: url('/vshojo/assets/fonts/MPLUSRounded1c/MPLUSRounded1c-ExtraBold.ttf') format('truetype');
		font-weight: 800;
		font-style: normal;
	}
	/* MPLUSRounded1c Black */
	@font-face {
		font-family: 'MPLUSRounded1c';
		src: url('/vshojo/assets/fonts/MPLUSRounded1c/MPLUSRounded1c-Black.ttf') format('truetype');
		font-weight: 900;
		font-style: normal;
	}
/* ==== END of FONTS ==== */

/* ==== START of LOAD ==== */
	@keyframes slideIn {
		0% {
			margin-top: -50px;
			opacity: 0;
		}
		100% {
			margin-top: 0;
			opacity: 1;
		}
	}
	.load header {
		animation: slideIn 500ms ease 2.25s forwards;
		opacity: 0;
	}
	.load .card-container {
		opacity: 0;
	}
	.load .card-control-panel {
		opacity: 0;
		animation: slideIn 500ms ease forwards 2.6s;
	}
	.load .card-container.loaded { animation: slideIn 500ms ease forwards; }
	.load .logo span {
		opacity: 0;
		animation: slideIn 500ms ease 2s forwards;
	}
	.load .logo img {
		transform: translateX(30%);
		clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
		animation: logoSlide 500ms ease 1.5s forwards;
	}
	.load .logo:before {
		left: 30%;
		opacity: 0;
		animation: vShow 1s ease forwards 500ms, vSlide 500ms ease 1.5s forwards;
	}
	@keyframes vShow {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	@keyframes vSlide {
		0% {
			left: 30%;
		}
		100% {
			left: 0;
		}
	}
	@keyframes logoSlide {
		0% {
			transform: translateX(30%);
			clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
		}
		100% {
			transform: translateX(0%);
			clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
		}
	}
/* ==== END of LOAD ==== */

/* ==== START of MAIN ==== */
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		transition: 300ms ease;
	}
	body {
		min-height: 100vh;
		margin: 0;
		color: #DDD;
		font-family: 'Poppins', sans-serif;
	}
	body.en { font-family: 'Poppins', sans-serif; }
	body > .background {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	body > .background:before,
	body > .background:after {
		position: absolute;
		content: '';
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(0deg, rgba(0,0,0,0.25), transparent);
		pointer-events: none;
	}
	body > .background:before {
		background: #EEE radial-gradient(#aaa 1px, transparent 1px) top center/25px 25px;
	}
/* ==== END of MAIN ==== */

/* ==== START of HEADER ==== */
	header {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		display: flex;
		justify-content: space-between;
		background: linear-gradient(0deg, transparent, rgba(0,0,0,0.5));
		z-index: 1000;
	}
	header .about {
		display: flex;
		align-items: center;
		padding: 10px;
		color: #000;
		flex-wrap: wrap;
	}
	header .about, header .about span {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	header .about span { margin: 0 5px; }
	header .about img {
		width: 32px;
		margin-left: 5px;
	}
	header .about a {
		display: contents;
		color: #ed0f71;
	}
	header nav {
		display: flex;
		align-items: center;
		padding: 15px;
	}
	header nav #mode,
	header nav #language {
		position: relative;
		width: 32px;
		height: 32px;
		background: none;
		padding: 0;
		cursor: pointer;
		border-radius: 10px;
	}
	header nav #language {
		margin-left: 10px;
		font-family: 'Poppins', sans-serif;
		font-weight: 700;
		color: #222;
	}
	body.en header nav #language span:before {
		content: 'JP';
	}
	body.jp header nav #language span:before {
		content: 'EN';
	}
	header nav #mode span {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		mask-size: 20px;
		mask-position: center;
		mask-repeat: no-repeat;
	}
	body.light header nav #mode,
	header nav #language {
		border: 3px solid #222;
	}
	body.light header nav #mode:hover,
	header nav #language:hover {
		background: #222;
		color: #DDD;
	}
	body.light header nav #mode span {
		mask-image: url(/vshojo/assets/img/dark.svg);
		background: #222;
	}
	body.light header nav #mode:hover span {
		background: #EEE;
	}
/* ==== END of HEADER ==== */

/* ==== START of LOGO ==== */
	.logo {
		position: relative;
		min-width: 30vh;
		margin: 20vh auto;
		text-align: center;
		width: 400px;
		z-index: 1;
	}
	.logo:before {
		position: absolute;
		content: '';
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		background: url('/vshojo/assets/img/v.svg') no-repeat left center/contain;
	}
	.logo img { display: block; }
	.logo span {
		position: absolute;
		display: flex;
		width: max-content;
		margin: 0 auto;
		color: #222;
		left: 50%;
		transform: translateX(-50%);
		z-index: -1;
	}
	.logo span:before,
	.logo span:after {
		position: absolute;
		content: '';
		top: 50%;
		width: 100px;
		height: 3px;
		transform: translateY(-50%);
		background: #222;
		border-radius: 100vh;
	}
	.logo span:before {
		left: 110%;
	}
	.logo span:after {
		right: 110%;
	}
/* ==== END of LOGO ==== */

/* ==== START of CARD-CONTROL ==== */
	.card-control-panel {
		position: relative;
		width: calc(480px * 4 + 40px * 3);
		margin: 0 auto;
	}
	.card-control-panel .switch {
		display: inline;
		font-weight: 700;
		background: #F50F75;
		color: #222;
		cursor: pointer;
		border-radius: 15px;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
		padding: 3px 20px 2px 20px;
	}
	.card-control-panel.show .switch {
		border-top-right-radius: 0;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 100%, 0 100%);
		padding: 3px 30px 2px 20px;
	}
	.card-control-panel .switch:after { content: ' ▼'; }
	.card-control-panel.show .switch:after { content: ' ▲'; }
	.card-control-panel .inner {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		background: linear-gradient(90deg, #F50F75, transparent);
		border-radius: 15px;
		border-top-left-radius: 0;
		clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
		margin-bottom: -65px;
		padding: 10px;
	}
	.card-control-panel.show .inner {
		margin-bottom: 20px;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	}
	.card-control-panel .filter {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
	}
	.card-control-panel .filter > span {
		display: flex;
		cursor: pointer;
		border: 3px solid #222;
		border-radius: 15px;
		padding: 10px;
	}
	.card-control-panel .filter span span {
		mask-position: center;
		mask-size: contain;
		mask-repeat: no-repeat;
		background: #222;
	}
	.card-control-panel .filter > span.active,
	.card-control-panel .filter > span:hover {
		border: 3px solid #DDD;
	}
	.card-control-panel .filter > span.active span,
	.card-control-panel .filter span:hover span {
		background: #DDD;
	}
	.card-control-panel .filter img {
		opacity: 0;
		display: block;
		width: 150px;
	}
	.card-control-panel .filter .vshojo-en span {
		mask-image: url(/vshojo/assets/img/card/vshojo_en_logo.png);
	}
	.card-control-panel .filter .vshojo-jp span {
		mask-image: url(/vshojo/assets/img/card/vshojo_jp_logo.png);
	}
	.card-control-panel .filter .vshojo-nova span {
		mask-image: url(/vshojo/assets/img/card/nova_logo.png);
	}
	.card-control-panel .flip span {
		padding: 5px 10px;
		color: #222;
		border: 3px solid #222;
		border-radius: 15px;
		cursor: pointer;
		font-weight: 700;
		display: inline-block;
	}
	html body .card-control-panel .flip span.active,
	html body .card-control-panel .flip span:hover {
		color: #F50F75;
		border: 3px solid #F50F75;
	}
/* ==== START of CARD-CONTROL ==== */

/* ==== START of CARDS ==== */
	/* MAIN */
		.cards {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			max-width: calc(480px * 4 + 40px * 4);
			margin: 0 auto;
		}
		.card-container {
			perspective: 1000px;
			transform: scale(1);
		}
		.card-container.hide {
			transform: scale(0);
			animation: cardHide 0s ease 300ms forwards;
		}
		@keyframes cardHide {
			0% {  }
			100% {
				width: 0;
				margin: 0;
			}
		}
		.card {
			background: #DDD;
			width: 480px;
			border-radius: 25px;
			box-shadow: 0 20px 30px rgba(0, 0, 0, 0.4);
			transform-style: preserve-3d;
			position: relative;
			overflow: hidden;
			transform: rotateX(0deg) rotateY(0deg);
			transition: 0.5s cubic-bezier(0.25, 1, 0.5, 1);
			/*border: 3px solid #f50f75;*/
			box-shadow: 0 0 15px #000;
			aspect-ratio: 480/670;
			margin: 20px;
		}
		.card.show {
			box-shadow: 0 0 15px #f50f75;
		}
		.card.is-interacting .card-layer,
		.card.is-interacting .reflection {
			transition: 0.1s ease-out;
		}
		.card .card-bg,
		.card .card-layer {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 100%;
			height: 100%;
			transform: translate(-50%,-50%);
			background-size: 200% 200%;
			background-position: 50% 50%;
			transition: 0.5s cubic-bezier(0.25, 1, 0.5, 1);
		}
		.card .card-layer {
			width: calc(100% - 30px);
			height: calc(100% - 30px);
			border-radius: 15px;
			background-size: calc(200% + 30px) calc(200% + 30px);
		}
		.card .card-background-border,
		.card .card-background {
			position: absolute;
			top: 1px;
			left: 1px;
			width: calc(100% - 2px);
			height: calc(80% - 2px);
			border-radius: 15px;
			overflow: hidden;
			clip-path: polygon(0 0, calc(20% - 1px) 0, calc(30% - 1px) 10%, calc(70% + 1px) 10%, calc(80% + 1px) 0, 100% 0, 100% 100%, calc(80% + 1px) 100%, calc(70% + 1px) 90%, calc(30% - 1px) 90%, calc(20% - 1px) 100%, 0 100%, 0 calc(76% + 1px), 10% calc(67.5% + 1px), 10% calc(32.5% - 1px), 0 calc(24% - 1px));
			filter: contrast(140%);
		}
		.card .card-background-border {
			background: #FFF;
			top: 0;
			left: 0;
			width: 100%;
			height: 80%;
			clip-path: polygon(0 0, 20% 0, 30% 10%, 70% 10%, 80% 0, 100% 0, 100% 100%, 80% 100%, 70% 90%, 30% 90%, 20% 100%, 0 100%, 0 76%, 10% 67.5%, 10% 32.5%, 0 24%);
		}
		.card .card-background .image {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			filter: blur(2px);
		}
		.card .card-art {
			position: absolute;
			top: -15px;
			left: -15px;
			width: calc(100% + 30px);
			height: calc(100% + 30px);
		}
		.card .card-art .character,
		.card .card-art .overlap,
		.card .card-art .shimmer {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
		.card .card-art {
			filter: contrast(110%);
			pointer-events: none;
		}
		.card .card-art .character,
		.card .card-art .clip {
			height: calc(80% - 10px);
			clip-path: polygon(0 0, 100% 0, 100% 100%, calc(80% - 8px) 100%, calc(70% - 5px) calc(90% + 2px), calc(30% + 5px) calc(90% + 2px), calc(20% + 8px) 100%, 0 100%);
			/*clip-path: polygon(0 0, 100% 0, 100% 100%, calc(80% + 1px) 100%, calc(70% + 1px) 90%, calc(30% - 1px) 90%, calc(20% - 1px) 100%, 0 100%);*/
		}
		.card .card-art .shimmer {
			mask-position: right top;
			mask-size: 95%;
			mask-repeat: no-repeat;
		}
		.card .card-logo {
			position: absolute;
			top: 0;
			left: 50%;
			width: 50%;
			height: 7%;
			transform: translateX(-50%);
			mask-image: url(/vshojo/assets/img/card/vshojo_en_logo.png);
			mask-repeat: no-repeat;
			mask-position: center;
			mask-size: contain;
			background: #f50f75;
		}
		.card-container.jp .card .card-logo {
			mask-image: url(/vshojo/assets/img/card/vshojo_jp_logo.png);
			margin-left: 5px;
		}

		.card-container.nova .card .card-logo {
			mask-image: url(/vshojo/assets/img/card/nova_logo.png);
			margin-left: 0;
		}

	/* FRONT/BACK */
		.card .front,
		.card .back {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			pointer-events: none;
			transition: all 0ms 250ms;
		}
		.card .back {
			background: linear-gradient(0deg, #f50f75, #DDD);
			cursor: pointer;
		}
		.card > .visible {
			opacity: 1;
			pointer-events: all;
		}
		.flip-front { animation: flipFront 500ms linear; }
		.flip-back { animation: flipBack 500ms linear; }
		@keyframes flipFront {
			0% { transform: rotateY(0deg) scale(1); }
			50% { transform: rotateY(90deg) scale(1.05); }
			100% { transform: rotateY(0deg) scale(1); }
		}
		@keyframes flipBack {
			0% { transform: rotateY(0deg) scale(1); }
			50% { transform: rotateY(90deg) scale(1.05); }
			100% { transform: rotateY(0deg) scale(1); }
		}
		.flip-front .card { animation: flipFrontReset 500ms linear; }
		@keyframes flipFrontReset {
			0% {}
			50% { transform: rotateX(0deg) rotateY(0deg); }
			100% {}
		}
		.flip-back .card { animation: flipBackReset 500ms linear; }
		@keyframes flipBackReset {
			0% {}
			50% { transform: rotateX(0deg) rotateY(0deg); }
			100% {}
		}
		div.card .back .card-bg {
			background-image: none;
		}
		div.card .back .card-layer {
			clip-path: polygon(0 0, calc(100% - 50px) 0, 100% 50px, 100% 100%, 50px 100%, 0 calc(100% - 50px));
			background-image: none;
		}
		.card .back .card-layer:before,
		.card .back .card-layer:after {
			position: absolute;
			content: '';
			width: 100px;
			height: 50px;
			background: #222;
		}
		.card .back .card-layer:before {
			top: 0;
			right: 0;
			clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 1px, 0 1px);
		}
		.card .back .card-layer:after {
			bottom: 0;
			left: 0;
			clip-path: polygon(0 0, 50% 100%, 100% 100%, 100% calc(100% - 1px), 50% calc(100% - 1px), 1px 0);
		}
		.card .back .texture {
			background-image: url('/vshojo/assets/img/textures/cosmos.png');
			background-size: cover;
			background-repeat: repeat;
			background-position: center;
			opacity: 1;
			mask-image: radial-gradient(circle, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 50%);
			mask-position: 50% 50%;
			mask-size: 200% 200%;
			filter: invert(0);
		}
		.card .back .top,
		.card .back .middle,
		.card .back .bottom {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			mask-repeat: no-repeat;
			background: #222;
		}
		.card .back .top,
		.card .back .bottom {
			mask-size: calc(100% - 50px);
			mask-image: url(/vshojo/assets/img/card/card_back_top.png);
			mask-position: left top;
		}
		.card .back .bottom {
			mask-image: url(/vshojo/assets/img/card/card_back_bottom.png);
			mask-position: bottom right;
		}
		.card .back .middle {
			mask-image: url(/vshojo/assets/img/card/card_back_mid.png);
			mask-size: contain;
			mask-position: center;
		}
		.card .back .card-layer .top > span,
		.card .back .card-layer .middle > span,
		.card .back .card-layer .bottom > span {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			filter: invert(0);
			background: none;
			mask-position: center;
			mask-repeat: repeat;
		}
		.card-container.en .card .back .card-layer .top > span,
		.card-container.en .card .back .card-layer .bottom > span {
			mask-image: url('/vshojo/assets/img/textures/waves.png');
			mask-size: 25%;
		}
		.card-container.jp .card .back .card-layer .top > span,
		.card-container.jp .card .back .card-layer .bottom > span {
			mask-image: url('/vshojo/assets/img/textures/hexagon_waves.png');
			mask-size: 25%;
		}
		.card-container.nova .card .back .card-layer .top > span,
		.card-container.nova .card .back .card-layer .bottom > span {
			mask-image: url('/vshojo/assets/img/textures/stripes.png');
			mask-size: 15%;
		}
		.card .back .card-layer .middle > span {
			mask-size: 40%;
			background-image: linear-gradient(45deg, #fff 0%, transparent 30%, rgba(255,255,255,0.35) 40%, transparent 45%, #fff 55%, transparent 60%, rgba(255,255,255,0.35) 70%, transparent 80%, #FFF 100%);
		}
		.card .back .card-layer .middle .glimmer {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-image: linear-gradient(135deg, #FFF, #F00 ,#f0f, #0FF, #FF0, #FFF);
			background-size: 200% 200%;
			background-position: 50% 50%;
		}
		.card .back .card-bg .glimmer {
			background-image: linear-gradient(135deg, #000, #fff, #000, #fff, #000);
		}
		.card .back .card-layer .glimmer {
			background: #FFF;
			mask-image: radial-gradient(circle, rgb(0, 0, 0) 0%, rgba(0, 0, 0, .25) 50%);
		}
		.card .back .card-logos .top,
		.card .back .card-logos .middle,
		.card .back .card-logos .bottom {
			background: #FFF;
			mask-repeat: no-repeat;
			mask-position: center;
			mask-size: contain;
		}
		.card .back .card-logos .top,
		.card .back .card-logos .bottom {
			mask-size: 27px;
		}
		.card .back .card-logos .top {
			mask-image: url('/vshojo/assets/img/card/vshojo_en_logo_left.png');
			mask-position: 30px 63px;
		}
		.card .back .card-logos .middle {
			mask-size: 60%;
		}
		.card .back .card-logos .bottom {
			mask-image: url('/vshojo/assets/img/card/vshojo_en_logo_right.png');
			mask-position: calc(100% - 30px) calc(100% - 63px);
		}
		.card .back .card-logos .shimmer {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-image: linear-gradient(135deg, #000, #F00 ,#f0f, #0FF, #FF0, #000);
			filter: none;
		}
		.card-container.jp .card .back .card-logos .top {
			mask-image: url('/vshojo/assets/img/card/vshojo_jp_logo_left.png');
		}
		.card-container.jp .card .back .card-logos .bottom {
			mask-image: url('/vshojo/assets/img/card/vshojo_jp_logo_right.png');
		}
		.card-container.nova .card .back .card-logos .top {
			mask-image: url('/vshojo/assets/img/card/nova_logo_left.png');
		}
		.card-container.nova .card .back .card-logos .bottom {
			mask-image: url('/vshojo/assets/img/card/nova_logo_right.png');
		}

	/* TEXTURE/GLIMMER/SHIMMER */
		.card .texture,
		.card .texture span,
		.card .glimmer {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-repeat: repeat;
			background-position: center;
			pointer-events: none;
			opacity: 1;
			mask-image: radial-gradient(circle, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 50%);
			mask-position: 50% 50%;
			mask-size: 200% 200%;
			transition: mask-position 0.1s, opacity 0.5s;
			filter: invert(100);
		}
		.card-container.en .card .front .card-bg .texture {
			background-image: url("/vshojo/assets/img/textures/waves.png");
			background-size: 12%;
		}
		.card-container.jp .card .front .card-bg .texture {
			background-image: url("/vshojo/assets/img/textures/hexagon_waves.png");
			background-size: 15%;
		}
		.card-container.nova .card .front .card-bg .texture {
			background-image: url("/vshojo/assets/img/textures/stripes.png");
			background-size: 8.8%;
		}
		.card .card-layer .texture {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;
			filter: invert(0);
			border-radius: 15px;
		}
		.card .card-layer .texture span,
		.card .glimmer {
			mask-image: radial-gradient(circle, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 50%);
			filter: invert(100);
			opacity: 1;
			top: -15px;
			left: -15px;
			width: calc(100% + 30px);
			height: calc(100% + 30px);
		}
		.card-container.en .card .front .card-layer > .texture span {
			background-image: url('/vshojo/assets/img/textures/circle_waves.png');
			background-size: 60%;
		}
		.card-container.jp .card .front .card-layer > .texture span {
			background-image: url('/vshojo/assets/img/textures/hexagon_lines.png');
			background-size: 10%;
		}
		.card-container.nova .card .front .card-layer > .texture span {
			background-image: url('/vshojo/assets/img/textures/square.png');
			background-size: 11.7%;
		}
		.card .card-background .texture,
		.card .glimmer {
			background-image: url('/vshojo/assets/img/textures/angled_stripes.png');
			background-size: 50%;
			mask-image: radial-gradient(circle, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 40%);
			height: calc(125% + 30px);
			filter: invert(100);
			opacity: 1;
		}
		.card-container.en .card .card-background .texture {
			background-image: url('/vshojo/assets/img/textures/recktangle_stripes.png');
			background-size: 31%;
		}
		.card-container.jp .card .card-background .texture {
			background-image: url('/vshojo/assets/img/textures/hexagon.png');
			background-size: cover;
		}
		.card-container.nova .card .card-background .texture {
			background-image: url('/vshojo/assets/img/textures/angled_stripes.png');
			background-size: 50%;
		}
		.card .glimmer,
		.card .shimmer {
			background-image: linear-gradient(135deg, #000, #ffcc00, #6a1b9a, #00ffcc, #000);
			mask-image: radial-gradient(circle, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%);
			opacity: 0.5;
			mask-position: 50% 50%;
			mask-size: 200% 200%;
			background-size: 200% 200%;
			background-position: 50% 50%;
			filter: contrast(200%);
			transition: background-position 0.5s cubic-bezier(0.25, 1, 0.5, 1);
		}

	/* REFLECTIONS */
		.card .reflections { mix-blend-mode: hard-light; }
		.card .reflection {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 300%;
			height: 300%;
			background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.4) 40%, rgb(0,0,0) 100%);
			opacity: 1;
			filter: blur(50px);
			pointer-events: none; /* Doesn't interfere with mouse events */
			transform: translate(-50%, -50%); /* Initially centered on parent */
			transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); /* Smooth movement */
		}

	/* DISCRIPTION */
		.card .discription {
			position: absolute;
			left: 0;
			bottom: 0;
			height: 28%;
			padding: 0 15px 15px 15px;
			border: 1px solid;
			border-radius: 15px;
			width: 100%;
			overflow: hidden;
		}
		.discription:before,
		.discription:after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 25px;
			background: linear-gradient(90deg, #ed0f71, transparent);
		}
		.discription:after {
			bottom: 25px;
			border-bottom-right-radius: 15px;
			height: 105px;
			background: linear-gradient(0deg, #222, transparent);
			z-index: 0;
		}
		.card .discription .menu {
			display: flex;
			flex-flow: row-reverse;
			position: absolute;
			bottom: 0;
			left: 0;
		}
		.card .discription .menu li {
			list-style: none;
			position: relative;
		}
		.card .discription .menu li:before {
			position: absolute;
			content: '';
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: #f50f75;
			clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
			transition: 300ms ease;
		}
		.card .discription .menu a {
			position: relative;
			padding: 0 20px 0 15px;
			color: #FFF;
			clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
			cursor: pointer;
			pointer-events: auto;
			text-decoration: none;
			font-weight: 500;
			font-style: italic;
			z-index: 1;
		}
		div.card .discription .menu li.active:hover a,
		body .card .discription .menu li.hover a,
		body .card .discription .menu li:hover a,
		body .card .discription .menu li.prev.hover a,
		body .card .discription .menu li.prev:hover a {
			color: #FFF;
		}
		.card .discription .menu .stats { margin-left: -15px; }
		.card .discription .menu .stats a { padding: 0 15px 0 20px; }
		.card .discription .menu .key-art { margin-left: -10px; }
		.card .discription .menu .prev:before { background: #FFF; }
		.card .discription .menu .prev a { color: #222; }
		.card .discription .menu .active:before,
		.card .discription .menu .active:hover:before {
			background: #222;
			pointer-events: none;
		}
		.card .discription .menu .active a,
		.card .discription .menu .active:hover a { color: #FFF; }
		.card .discription > span {
			position: absolute;
			font-style: italic;
			left: 0;
			bottom: 25px;
			width: 100%;
			padding: 13px 15px;
			opacity: 0;
			border-bottom-right-radius: 15px;
			-webkit-text-stroke: 1px #000;
			text-stroke: 1px #000;
			font-weight: 700;
			font-size: 17px;
			line-height: 20px;
			height: 105px;
			z-index: 1;
		}
		.card .discription > .stats,
		.card .discription > .key-art {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			font-size: 16px;
			line-height: 15px;
			padding: 4px 8px;
			-webkit-text-stroke: 0;
			text-stroke: 0;
			font-weight: 500;
			pointer-events: none;
			height: 98px;
		}
		.card .discription > .stats li,
		.card .discription > .key-art li {
			list-style: none;
			margin-left: 5px;
		}
		.card .discription > .stats .hashtag {
			display: flex;
		}
		.card .discription > .stats > span,
		.card .discription > .key-art > span {
			width: max-content;
		}
		.card .discription > .stats > span:nth-child(2),
		.card .discription > .key-art > span:nth-child(2) {
			display: flex;
			flex-wrap: wrap;
			align-items: baseline;
			justify-content: left;
			align-content: baseline;
			width: min-content;
			margin-left: 10px;
		}
		.card .discription > .stats span span,
		.card .discription > .key-art span span {
			width: max-content;
			display: block;
			color: #FFF;
			background: linear-gradient(0deg, transparent, #f6358b);
			padding: 5px;
			border-radius: 15px;
			margin-bottom: 5px;
			box-shadow: 0 0 5px #000;
		}
		.card .discription > .stats span:before,
		.card .discription > .key-art span:before {
			font-weight: 700;
		}
		.card .discription > .key-art > span a { color: #f6358b; }
		.card .discription > .stats .birthday:before { content: 'Birthday: '; }
		.card .discription > .stats .height:before { content: 'Height: '; }
		.card .discription > .stats .mark:before { content: 'Oshi Mark: '; }
		.card .discription > .stats .debut:before { content: 'Debut: '; }
		.card .discription > .stats .hashtag:before { content: 'Hashtag: '; }
		.card .discription > .key-art .concept:before { content: 'Concept: '; }
		.card .discription > .key-art .rig:before { content: 'Rig: '; }
		.card .discription > .key-art .illustrator:before { content: 'Illustrator: '; }
		.card .discription > .key-art .gallery:before { content: 'Gallery: '; }
		.card .discription > .key-art .videos:before { content: 'Videos: '; }
		.card .discription > .show {
			opacity: 1;
			pointer-events: all;
		}
		.card .discription h2 {
			margin: 0 0 10px;
		}
		.card .discription h2 a {
			text-align: center;
			display: block;
			padding: 7px 0;
			font-size: 23px;
			font-weight: 500;
			text-shadow: 0 0 5px;
			background: #f50f75;
			cursor: pointer;
			text-decoration: none;
			color: #FFF;
		}
		.card .discription h2.hover a,
		.card .discription h2 a:hover {
			background: #FFF;
			color: #f50f75;
		}
		.card .discription p { margin: 0; }

	/* COPYRIGHT */
		.card .copyright {
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			color: #f50f75;
			font-weight: 700;
			width: 100%;
			text-align: center;
			font-size: 10px;
		}

	/* SOCIALS */
		.card .socials {
			position: absolute;
			left: 0;
			width: 10%;
			height: 80%;
		}
		.card .socials .inner {
			position: absolute;
			top: 50%;
			left: 0;
			width: 100%;
			height: 35%;
			transform: translateY(-50%);
			display: flex;
			align-items: center;
			align-content: flex-start;
			justify-content: center;
			flex-wrap: wrap;
		}
		.card .socials a {
			position: relative;
			width: 60%;
			padding-bottom: 100%;
			height: 0;
		}
		.card .socials i {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 100%;
			height: 100%;
			transform: translate(-50%,-50%);
			mask-repeat: no-repeat;
			mask-position: center;
			mask-size: contain;
			background: #f50f75;
			transition: 500ms ease;
		}
		.card .socials a.hover i,
		.card .socials a:hover i {
			background: #FFF;
		}
		.card .socials .twitch i { mask-image: url(/vshojo/assets/img/socials/twitch.svg); }
		.card .socials .youtube i { mask-image: url(/vshojo/assets/img/socials/youtube.svg); }
		.card .socials .x i { mask-image: url(/vshojo/assets/img/socials/x.svg); }
		.card .socials .tiktok i { mask-image: url(/vshojo/assets/img/socials/tiktok.svg); }
		.card .socials .fanbox i { mask-image: url(/vshojo/assets/img/socials/fanbox.svg); }
		.card .socials a span {
			font-family: 'Poppins', sans-serif;
			position: absolute;
			top: 50%;
			left: 100%;
			transform: translateY(-50%);
			padding: 10% 150% 10% 175%;
			background: linear-gradient(90deg, #f50f75 50%, rgba(0,0,0,0) 100%);
			margin-left: calc(-100% - 8px);
			z-index: -1;
			color: #FFF;
			font-weight: 700;
			font-size: 150%;
			clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
			transition: clip-path 500ms ease, opacity 200ms ease 200ms;
			border-bottom-left-radius: 100vw;
			border-top-left-radius: 100vw;
			opacity: 0;
		}
		.card .socials .fanbox span {
			height: 41px;
			padding-right: 0;
		}
		.card .socials a.hover span,
		.card .socials a:hover span {
			clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
			opacity: 1;
			transition: clip-path 500ms ease, opacity 200ms ease;
		}

	/* GLARE */
		.glare {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			pointer-events: none;
			mask-position: center;
			mask-size: 75%;
			background-image: linear-gradient(45deg, #fff 0%, transparent 30%, rgba(255,255,255,0.75) 40%, transparent 45%, #fff 55%, transparent 60%, rgba(255,255,255,0.75) 70%, transparent 80%, #FFF 100%);
			background-size: 200% 200%;
			background-position: 50% 50%;
		}
/* ==== END of CARDS ==== */

/* ==== START of TALENTS ==== */
	/* AMALEE */
		.card.amalee .card-bg,
		.card.amalee .card-layer {
			background-image: linear-gradient(135deg, #000, #093768, #112948, #4f78ac, #196380, #000);
		}
		.card.amalee .card-background .image {
			background: url(/vshojo/assets/img/bg/bg_image_amalee.jpg) center 0/100%;
		}
		.card.amalee .card-art .character {
			background: url(/vshojo/assets/img/talents/en/amalee.png) no-repeat right top/95%;
		}
		.card.amalee .card-art .shimmer {
			mask-image: url(/vshojo/assets/img/talents/en/amalee_shimmer.png);
		}
		.card.amalee .discription {
			background: linear-gradient(0deg, rgba(0,0,0,0) 0%, #112948 100%);
		}
		.card.amalee .shimmer {
			background-image: linear-gradient(0deg, #000, #602c80, #cbe5fd, #0070ff, #cbe5fd, #FFF, #000);
		}
		.card.amalee .discription p {
			-webkit-text-stroke: 1px #112948;
			text-stroke: 1px #112948;
		}
		.card.amalee .glare,
		.card.amalee .back .card-layer .middle > span {
			mask-image: url(/vshojo/assets/img/patterns/pattern_amalee.png);
		}
		.card.amalee .glare { opacity: 0.75; }
		.card.amalee .discription .menu li.hover:before,
		.card.amalee .discription .menu li:hover:before {
			background: #112948;
		}
		.card.amalee .discription .menu .prev a {
			color: #112948;
		}
		.card.amalee .discription .menu .active:before,
		.card.amalee .discription .menu .active:hover:before { background: #112948; }
		.card.amalee .discription .menu .active a,
		.card.amalee .discription .menu .active:hover a { color: #FFF; }
		.card.amalee .discription:after {
			background: linear-gradient(0deg, #112948, transparent);
		}
		.card.amalee .discription > .stats span span,
		.card.amalee .discription > .key-art span span {
			background: linear-gradient(0deg, transparent, #112948);
		}
		.card.amalee .back .card-logos .middle {
			mask-image: url('/vshojo/assets/img/talents/en/amalee_logo.png');
		}
		.card-container.en .card.amalee .front .card-bg .texture,
		.card-container.en .card.amalee .front .card-layer > .texture {
			opacity: 0.5;
		}

	/* APROCOT */
		.card.apricot .card-bg,
		.card.apricot .card-layer {
			background-image: linear-gradient(135deg, #000, #181618, #523968, #604e77, #40185b, #000);
		}
		.card.apricot .card-background .image {
			background: url(/vshojo/assets/img/bg/bg_image_apricot.jpg) center 0/100%;
		}
		.card.apricot .card-art .character {
			background: url(/vshojo/assets/img/talents/en/apricot.png) no-repeat right 10px/95%;
		}
		.card.apricot .card-art .shimmer {
			mask-image: url(/vshojo/assets/img/talents/en/apricot_shimmer.png);
			mask-position: right 10px;
		}
		.card.apricot .discription {
			background: linear-gradient(0deg, rgba(0,0,0,0) 0%, #181618 100%);
		}
		.card.apricot .shimmer {
			background-image: linear-gradient(0deg, #000, #f50f75, #000, #4FF50F, #000, #000);
		}
		.card.apricot .discription p {
			-webkit-text-stroke: 1px #181618;
			text-stroke: 1px #181618;
		}
		.card.apricot .glare,
		.card.apricot .back .card-layer .middle > span {
			mask-image: url(/vshojo/assets/img/patterns/pattern_apricot.png);
		}
		.card.apricot .glare { opacity: 0.75; }
		.card.apricot .discription .menu li.hover:before,
		.card.apricot .discription .menu li:hover:before {
			background: #181618;
		}
		.card.apricot .discription .menu .prev a {
			color: #181618;
		}
		.card.apricot .discription .menu .active:before,
		.card.apricot .discription .menu .active:hover:before { background: #181618; }
		.card.apricot .discription .menu .active a,
		.card.apricot .discription .menu .active:hover a { color: #FFF; }
		.card.apricot .discription:after {
			background: linear-gradient(0deg, #181618, transparent);
		}
		.card.apricot .discription > .stats span span,
		.card.apricot .discription > .key-art span span {
			background: linear-gradient(0deg, transparent, #181618);
		}
		.card.apricot .back .card-logos .middle {
			mask-image: url('/vshojo/assets/img/talents/en/apricot_logo.png');
		}
		.card-container.en .card.apricot .front .card-bg .texture,
		.card-container.en .card.apricot .front .card-layer > .texture {
			opacity: 0.5;
		}

	/* GEEGA */
		.card.geega .card-bg,
		.card.geega .card-layer {
			background-image: linear-gradient(135deg, #000, #595f75, #e7eef4, #676d84, #e4edf1, #000);
		}
		.card.geega .card-background .image {
			background: url(/vshojo/assets/img/bg/bg_image_geega.jpg) center 0/100%;
		}
		.card.geega .card-art .character {
			background: url(/vshojo/assets/img/talents/en/geega.png) no-repeat right top/120%;
		}
		.card.geega .card-art .overlap {
			background: url(/vshojo/assets/img/talents/en/geega_overlap.png) no-repeat right top/120%;
		}
		.card.geega .card-art .shimmer {
			mask-image: url(/vshojo/assets/img/talents/en/geega_shimmer.png);
			mask-size: 120%;
		}
		.card.geega .discription {
			background: linear-gradient(0deg, rgba(0,0,0,0) 0%, #040305 100%);
		}
		.card.geega .shimmer {
			background-image: linear-gradient(0deg, #000, #FFF, #F50F75, #00ffdb, #00ff28, #f00, #ff00a7, #000);
		}
		.card.geega .discription p {
			-webkit-text-stroke: 1px #040305;
			text-stroke: 1px #040305;
		}
		.card.geega .glare,
		.card.geega .back .card-layer .middle > span {
			mask-image: url(/vshojo/assets/img/patterns/pattern_geega.png);
		}
		.card.geega .discription .menu li.hover:before,
		.card.geega .discription .menu li:hover:before {
			background: #040305;
		}
		.card.geega .discription .menu .prev a {
			color: #040305;
		}
		.card.geega .discription .menu .active:before,
		.card.geega .discription .menu .active:hover:before { background: #040305; }
		.card.geega .discription .menu .active a,
		.card.geega .discription .menu .active:hover a { color: #FFF; }
		.card.geega .discription:after {
			background: linear-gradient(0deg, #040305, transparent);
		}
		.card.geega .discription > .stats span span,
		.card.geega .discription > .key-art span span {
			background: linear-gradient(0deg, transparent, #040305);
		}
		.card.geega .back .card-logos .middle {
			mask-image: url('/vshojo/assets/img/talents/en/geega_logo.png');
		}
		body.en .card.geega .discription > span { letter-spacing: -.2px; }

	/* HARUKA */
		.card.haruka .card-bg,
		.card.haruka .card-layer {
			background-image: linear-gradient(135deg, #000, #36574a, #a3e1c5, #75b09b, #aefbd0, #000);
		}
		.card.haruka .card-background .image {
			background: url(/vshojo/assets/img/bg/bg_image_haruka.jpg) center 0/100%;
		}
		.card.haruka .card-art .character {
			background: url(/vshojo/assets/img/talents/en/haruka.png) no-repeat right top/100%;
		}
		.card.haruka .card-art .overlap {
			background: url(/vshojo/assets/img/talents/en/haruka_overlap.png) no-repeat right top/100%;
		}
		.card.haruka .card-art .shimmer {
			mask-image: url(/vshojo/assets/img/talents/en/haruka_shimmer.png);
			mask-size: 100%;
		}
		.card.haruka .discription {
			background: linear-gradient(0deg, rgba(0,0,0,0) 0%, #162220 100%);
		}
		.card.haruka .shimmer {
			background-image: linear-gradient(0deg, #000, #FFF, #E30FF5, #0058ff, #47a681, #ffcb00, #f00, #000);
		}
		.card.haruka .discription p {
			-webkit-text-stroke: 1px #162220;
			text-stroke: 1px #162220;
		}
		.card.haruka .glare,
		.card.haruka .back .card-layer .middle > span {
			mask-image: url(/vshojo/assets/img/patterns/pattern_haruka.png);
		}
		.card.haruka .discription .menu li.hover:before,
		.card.haruka .discription .menu li:hover:before {
			background: #162220;
		}
		.card.haruka .discription .menu .prev a {
			color: #162220;
		}
		.card.haruka .discription .menu .active:before,
		.card.haruka .discription .menu .active:hover:before { background: #162220; }
		.card.haruka .discription .menu .active a,
		.card.haruka .discription .menu .active:hover a { color: #FFF; }
		.card.haruka .discription:after {
			background: linear-gradient(0deg, #162220, transparent);
		}
		.card.haruka .discription > .stats span span,
		.card.haruka .discription > .key-art span span {
			background: linear-gradient(0deg, transparent, #162220);
		}
		.card.haruka .back .card-logos .middle {
			mask-image: url('/vshojo/assets/img/talents/en/haruka_logo.png');
		}

	/* HENYA */
		.card.henya .card-bg,
		.card.henya .card-layer {
			background-image: linear-gradient(135deg, #000, #9385b4, #f1ebf6, #d4bcdd, #f1ebf7, #000);
		}
		.card.henya .card-background .image {
			background: url(/vshojo/assets/img/bg/bg_image_henya.jpg) center 0/100%;
		}
		.card.henya .card-art .character {
			background: url(/vshojo/assets/img/talents/jp/henya.png) no-repeat right top/95%;
		}
		.card.henya .card-art .overlap {
			background: url(/vshojo/assets/img/talents/jp/henya_overlap.png) no-repeat right top/95%;
		}
		.card.henya .card-art .shimmer {
			mask-image: url(/vshojo/assets/img/talents/jp/henya_shimmer.png);
		}
		.card.henya .discription {
			background: linear-gradient(0deg, rgba(0,0,0,0) 0%, #23202a 100%);
		}
		.card.henya .shimmer {
			background-image: linear-gradient(0deg, #000, #00ffdb, #9e00ff, #ffb300, #00e7ff, #000);
		}
		.card.henya .discription p {
			-webkit-text-stroke: 1px #23202a;
			text-stroke: 1px #23202a;
		}
		.card.henya .glare,
		.card.henya .back .card-layer .middle > span {
			mask-image: url(/vshojo/assets/img/patterns/pattern_henya.png);
		}
		.card.henya .discription .menu li.hover:before,
		.card.henya .discription .menu li:hover:before {
			background: #23202a;
		}
		.card.henya .discription .menu .prev a {
			color: #23202a;
		}
		.card.henya .discription .menu .active:before,
		.card.henya .discription .menu .active:hover:before { background: #23202a; }
		.card.henya .discription .menu .active a,
		.card.henya .discription .menu .active:hover a { color: #FFF; }
		.card.henya .discription:after {
			background: linear-gradient(0deg, #23202a, transparent);
		}
		.card.henya .discription > .stats span span,
		.card.henya .discription > .key-art span span {
			background: linear-gradient(0deg, transparent, #23202a);
		}
		.card.henya .back .card-logos .middle {
			mask-image: url('/vshojo/assets/img/talents/jp/henya_logo.png');
		}

	/* HESTIA-HAPPINESS */
		.card.hestia-happiness .card-bg,
		.card.hestia-happiness .card-layer {
			background-image: linear-gradient(135deg, #000, #d4b19f, #ffe9c9, #b7b09f, #fff3dc, #000);
		}
		.card.hestia-happiness .card-background .image {
			background: url(/vshojo/assets/img/bg/bg_image_hestia_happiness.jpg) center 0/100%;
		}
		.card.hestia-happiness .card-art .character {
			background: url(/vshojo/assets/img/talents/nova/hestia_happiness.png) no-repeat 5px top/100%;
		}
		.card.hestia-happiness .card-art .overlap {
			background: url(/vshojo/assets/img/talents/nova/hestia_happiness_overlap.png) no-repeat 5px top/100%;
		}
		.card.hestia-happiness .card-art .shimmer {
			mask-image: url(/vshojo/assets/img/talents/nova/hestia_happiness_shimmer.png);
			mask-size: 100%;
			mask-position: 5px top;
		}
		.card.hestia-happiness .discription {
			background: linear-gradient(0deg, rgba(0,0,0,0) 0%, #6c574b 100%);
		}
		.card.hestia-happiness .shimmer {
			background-image: linear-gradient(0deg, #000, #FF0, #F00, #1a74e8, #f0f, #000);
		}
		.card.hestia-happiness .discription p {
			-webkit-text-stroke: 1px #423e40;
			text-stroke: 1px #423e40;
		}
		.card.hestia-happiness .glare,
		.card.hestia-happiness .back .card-layer .middle > span {
			mask-image: url(/vshojo/assets/img/patterns/pattern_hestia_happiness.png);
		}
		.card.hestia-happiness .discription .menu li.hover:before,
		.card.hestia-happiness .discription .menu li:hover:before {
			background: #6c574b;
		}
		.card.hestia-happiness .discription .menu .prev a {
			color: #6c574b;
		}
		.card.hestia-happiness .discription .menu .active:before,
		.card.hestia-happiness .discription .menu .active:hover:before { background: #6c574b; }
		.card.hestia-happiness .discription .menu .active a,
		.card.hestia-happiness .discription .menu .active:hover a { color: #FFF; }
		.card.hestia-happiness .discription:after {
			background: linear-gradient(0deg, #6c574b, transparent);
		}
		.card.hestia-happiness .discription > .stats span span,
		.card.hestia-happiness .discription > .key-art span span {
			background: linear-gradient(0deg, transparent, #6c574b);
		}
		.card.hestia-happiness .back .card-logos .middle {
			mask-image: url('/vshojo/assets/img/talents/nova/hestia_happiness_logo.png');
		}
		body.en .card.hestia-happiness .discription > .stats li:nth-child(1) { letter-spacing: -1px; }

	/* HIME-HAJIME */
		.card.hime-hajime .card-bg,
		.card.hime-hajime .card-layer {
			background-image: linear-gradient(135deg, #000, #9087b6, #f4f1ff, #8378a4, #fcfcff, #000);
		}
		.card.hime-hajime .card-background .image {
			background: url(/vshojo/assets/img/bg/bg_image_hime_hajime.jpg) center 0/100%;
		}
		.card.hime-hajime .card-art .character {
			background: url(/vshojo/assets/img/talents/en/hime_hajime.png) no-repeat right top/100%;
		}
		.card.hime-hajime .card-art .shimmer {
			mask-image: url(/vshojo/assets/img/talents/en/hime_hajime_shimmer.png);
			mask-size: 100%;
		}
		.card.hime-hajime .discription {
			background: linear-gradient(0deg, rgba(0,0,0,0) 0%, #56465e 100%);
		}
		.card.hime-hajime .shimmer {
			background-image: linear-gradient(0deg, #000, #ffcb00, #790000, #b0f, #00abff, #ffcb00, #f00, #000);
		}
		.card.hime-hajime .discription p {
			-webkit-text-stroke: 1px #56465e;
			text-stroke: 1px #56465e;
		}
		.card.hime-hajime .glare,
		.card.hime-hajime .back .card-layer .middle > span {
			mask-image: url(/vshojo/assets/img/patterns/pattern_hime_hajime.png);
		}
		.card.hime-hajime .discription .menu li.hover:before,
		.card.hime-hajime .discription .menu li:hover:before {
			background: #56465e;
		}
		.card.hime-hajime .discription .menu .prev a {
			color: #56465e;
		}
		.card.hime-hajime .discription .menu .active:before,
		.card.hime-hajime .discription .menu .active:hover:before { background: #56465e; }
		.card.hime-hajime .discription .menu .active a,
		.card.hime-hajime .discription .menu .active:hover a { color: #FFF; }
		.card.hime-hajime .discription:after {
			background: linear-gradient(0deg, #56465e, transparent);
		}
		.card.hime-hajime .discription > .stats span span,
		.card.hime-hajime .discription > .key-art span span {
			background: linear-gradient(0deg, transparent, #56465e);
		}
		.card.hime-hajime .back .card-logos .middle {
			mask-image: url('/vshojo/assets/img/talents/en/hime_hajime_logo.png');
		}

	/* HOTARU-AKATSUKI */
		.card.hotaru-akatsuki .card-bg,
		.card.hotaru-akatsuki .card-layer {
			background-image: linear-gradient(135deg, #000, #424242, #787274, #4e4e4e, #767171, #000);
		}
		.card.hotaru-akatsuki .card-background .image {
			background: url(/vshojo/assets/img/bg/bg_image_hotaru_akatsuki.jpg) center 0/100%;
		}
		.card.hotaru-akatsuki .card-art .character {
			background: url(/vshojo/assets/img/talents/nova/hotaru_akatsuki.png) no-repeat 60% top/110%;
		}
		.card.hotaru-akatsuki .card-art .overlap {
			background: url(/vshojo/assets/img/talents/nova/hotaru_akatsuki_overlap.png) no-repeat 60% top/110%;
		}
		.card.hotaru-akatsuki .front .card-bg .texture,
		.card.hotaru-akatsuki .front .card-layer > .texture {
			opacity: 0.5;
		}
		.card.hotaru-akatsuki .card-art .shimmer {
			mask-image: url(/vshojo/assets/img/talents/nova/hotaru_akatsuki_shimmer.png);
			mask-size: 110%;
			mask-position: 60% top;
		}
		.card.hotaru-akatsuki .discription {
			background: linear-gradient(0deg, rgba(0,0,0,0) 0%, #222 100%);
		}
		.card.hotaru-akatsuki .shimmer {
			background-image: linear-gradient(0deg, #000, #fc0, #ff00cb, #338edf, #6be815, #000);
		}
		.card.hotaru-akatsuki .discription p {
			-webkit-text-stroke: 1px #222;
			text-stroke: 1px #222;
		}
		.card.hotaru-akatsuki .glare,
		.card.hotaru-akatsuki .back .card-layer .middle > span {
			mask-image: url(/vshojo/assets/img/patterns/pattern_hotaru_akatsuki.png);
		}
		.card.hotaru-akatsuki .discription .menu li.hover:before,
		.card.hotaru-akatsuki .discription .menu li:hover:before {
			background: #222;
		}
		.card.hotaru-akatsuki .discription .menu .prev a {
			color: #222;
		}
		.card.hotaru-akatsuki .discription .menu .active:before,
		.card.hotaru-akatsuki .discription .menu .active:hover:before { background: #222; }
		.card.hotaru-akatsuki .discription .menu .active a,
		.card.hotaru-akatsuki .discription .menu .active:hover a { color: #FFF; }
		.card.hotaru-akatsuki .discription:after {
			background: linear-gradient(0deg, #222, transparent);
		}
		.card.hotaru-akatsuki .discription > .stats span span,
		.card.hotaru-akatsuki .discription > .key-art span span {
			background: linear-gradient(0deg, transparent, #222);
		}
		.card.hotaru-akatsuki .back .card-logos .middle {
			mask-image: url('/vshojo/assets/img/talents/nova/hotaru_akatsuki_logo.png');
		}

	/* IRONMOUSE */
		.card.ironmouse .card-bg,
		.card.ironmouse .card-layer {
			background-image: linear-gradient(135deg, #000, #9d7783, #faccd7, #d495a6, #e7adbf, #000);
		}
		.card.ironmouse .card-background .image {
			background: url(/vshojo/assets/img/bg/bg_image_ironmouse.jpg) center 0/100%;
		}
		.card.ironmouse .card-art .character {
			background: url(/vshojo/assets/img/talents/en/ironmouse.png) no-repeat right top/100%;
		}
		.card.ironmouse .card-art .shimmer {
			mask-image: url(/vshojo/assets/img/talents/en/ironmouse_shimmer.png);
			mask-size: 100%;
		}
		.card.ironmouse .discription {
			background: linear-gradient(0deg, rgba(0,0,0,0) 0%, #412438 100%);
		}
		.card.ironmouse .shimmer {
			background-image: linear-gradient(0deg, #000, #F52280, #8000ff, transparent, #8324f5, #f00, #000);
		}
		.card.ironmouse .discription p {
			-webkit-text-stroke: 1px #412438;
			text-stroke: 1px #412438;
		}
		.card.ironmouse .glare,
		.card.ironmouse .back .card-layer .middle > span {
			mask-image: url(/vshojo/assets/img/patterns/pattern_ironmouse.png);
		}
		.card.ironmouse .discription .menu li.hover:before,
		.card.ironmouse .discription .menu li:hover:before {
			background: #412438;
		}
		.card.ironmouse .discription .menu .prev a {
			color: #412438;
		}
		.card.ironmouse .discription .menu .active:before,
		.card.ironmouse .discription .menu .active:hover:before { background: #412438; }
		.card.ironmouse .discription .menu .active a,
		.card.ironmouse .discription .menu .active:hover a { color: #FFF; }
		.card.ironmouse .discription:after {
			background: linear-gradient(0deg, #412438, transparent);
		}
		.card.ironmouse .discription > .stats span span,
		.card.ironmouse .discription > .key-art span span {
			background: linear-gradient(0deg, transparent, #412438);
		}
		.card.ironmouse .back .card-logos .middle {
			mask-image: url('/vshojo/assets/img/talents/en/ironmouse_logo.png');
		}
		body.en .card.ironmouse .discription > span { letter-spacing: -.3px; }

	/* KSON */
		.card.kson .card-bg,
		.card.kson .card-layer {
			background-image: linear-gradient(135deg, #000, #f092ba, #dfb2e0, #8790c1, #a7daf0, #000);
		}
		.card.kson .card-background .image {
			background: url(/vshojo/assets/img/bg/bg_image_kson.jpg) center 0/100%;
		}
		.card.kson .card-art .character {
			background: url(/vshojo/assets/img/talents/jp/kson.png) no-repeat right top/100%;
		}
		.card.kson .card-art .overlap {
			background: url(/vshojo/assets/img/talents/jp/kson_overlap.png) no-repeat right top/100%;
		}
		.card.kson .card-art .shimmer {
			mask-image: url(/vshojo/assets/img/talents/jp/kson_shimmer.png);
			mask-size: 100%;
		}
		.card.kson .discription {
			background: linear-gradient(0deg, rgba(0,0,0,0) 0%, #1c1427 100%);
		}
		.card.kson .shimmer {
			background-image: linear-gradient(0deg, #000, #00DBFF, #F62C85, transparent, #979797, #f62883, #000);
		}
		.card.kson .discription p {
			-webkit-text-stroke: 1px #1c1427;
			text-stroke: 1px #1c1427;
		}
		.card.kson .glare,
		.card.kson .back .card-layer .middle > span {
			mask-image: url(/vshojo/assets/img/patterns/pattern_kson.png);
		}
		.card.kson .discription .menu li.hover:before,
		.card.kson .discription .menu li:hover:before {
			background: #1c1427;
		}
		.card.kson .discription .menu .prev a {
			color: #1c1427;
		}
		.card.kson .discription .menu .active:before,
		.card.kson .discription .menu .active:hover:before { background: #1c1427; }
		.card.kson .discription .menu .active a,
		.card.kson .discription .menu .active:hover a { color: #FFF; }
		.card.kson .discription:after {
			background: linear-gradient(0deg, #1c1427, transparent);
		}
		.card.kson .discription > .stats span span,
		.card.kson .discription > .key-art span span {
			background: linear-gradient(0deg, transparent, #1c1427);
		}
		.card.kson .back .card-logos .middle {
			mask-image: url('/vshojo/assets/img/talents/jp/kson_logo.png');
		}
		body.en .card.kson .discription > span { letter-spacing: -.6px; }

	/* KURO-KURENAI */
		.card.kuro-kurenai .card-bg,
		.card.kuro-kurenai .card-layer {
			background-image: linear-gradient(135deg, #000, #0a1810, #585659, #2f2931, #202020, #000);
		}
		.card.kuro-kurenai .card-background .image {
			background: url(/vshojo/assets/img/bg/bg_image_kuro_kurenai.jpg) center 0/100%;
		}
		.card.kuro-kurenai .card-art .character {
			background: url(/vshojo/assets/img/talents/en/kuro_kurenai.png) no-repeat right top/100%;
		}
		.card.kuro-kurenai .card-art .overlap {
			background: url(/vshojo/assets/img/talents/en/kuro_kurenai_overlap.png) no-repeat right top/100%;
		}
		.card.kuro-kurenai .card-art .shimmer {
			mask-image: url(/vshojo/assets/img/talents/en/kuro_kurenai_shimmer.png);
			mask-size: 100%;
		}
		.card.kuro-kurenai .discription {
			background: linear-gradient(0deg, rgba(0,0,0,0) 0%, #111 100%);
		}
		.card.kuro-kurenai .shimmer {
			background-image: linear-gradient(0deg, #000, #000, #F00, #000, #f00, #000, #000);
		}
		.card.kuro-kurenai .discription p {
			-webkit-text-stroke: 1px #111;
			text-stroke: 1px #111;
		}
		.card.kuro-kurenai .glare,
		.card.kuro-kurenai .back .card-layer .middle > span {
			mask-image: url(/vshojo/assets/img/patterns/pattern_kuro_kurenai.png);
		}
		.card.kuro-kurenai .glare { opacity: 0.75; }
		.card.kuro-kurenai .discription .menu li.hover:before,
		.card.kuro-kurenai .discription .menu li:hover:before {
			background: #111;
		}
		.card.kuro-kurenai .discription .menu .prev a {
			color: #111;
		}
		.card.kuro-kurenai .discription .menu .active:before,
		.card.kuro-kurenai .discription .menu .active:hover:before { background: #111; }
		.card.kuro-kurenai .discription .menu .active a,
		.card.kuro-kurenai .discription .menu .active:hover a { color: #FFF; }
		.card.kuro-kurenai .discription:after {
			background: linear-gradient(0deg, #111, transparent);
		}
		.card.kuro-kurenai .discription > .stats span span,
		.card.kuro-kurenai .discription > .key-art span span {
			background: linear-gradient(0deg, transparent, #111);
		}
		.card.kuro-kurenai .back .card-logos .middle {
			mask-image: url('/vshojo/assets/img/talents/en/kuro_kurenai_logo.png');
		}
		.card.kuro-kurenai .front .card-bg .texture,
		.card.kuro-kurenai .front .card-layer > .texture {
			opacity: 0.5;
		}

	/* MATARA-KAN */
		.card.matara-kan .card-bg,
		.card.matara-kan .card-layer {
			background-image: linear-gradient(135deg, #000, #fff, #bbb, #fff, #ccc, #000);
		}
		.card.matara-kan .card-background .image {
			background: url(/vshojo/assets/img/bg/bg_image_matara_kan.jpg) center 0/100%;
		}
		.card.matara-kan .card-art .character {
			background: url(/vshojo/assets/img/talents/en/matara_kan.png) no-repeat right top/100%;
		}
		.card.matara-kan .card-art .overlap {
			background: url(/vshojo/assets/img/talents/en/matara_kan_overlap.png) no-repeat right top/100%;
		}
		.card.matara-kan .card-art .shimmer {
			mask-image: url(/vshojo/assets/img/talents/en/matara_kan_shimmer.png);
			mask-size: 100%;
		}
		.card.matara-kan .discription {
			background: linear-gradient(0deg, rgba(0,0,0,0) 0%, #39273c 100%);
		}
		.card.matara-kan .shimmer {
			background-image: linear-gradient(0deg, #000, #00f3ff, #FFE300, #f62a84, transparent, #f00, #000);
		}
		.card.matara-kan .discription p {
			-webkit-text-stroke: 1px #39273c;
			text-stroke: 1px #39273c;
		}
		.card.matara-kan .glare,
		.card.matara-kan .back .card-layer .middle > span {
			mask-image: url(/vshojo/assets/img/patterns/pattern_matara_kan.png);
		}
		.card.matara-kan .discription .menu li.hover:before,
		.card.matara-kan .discription .menu li:hover:before {
			background: #39273c;
		}
		.card.matara-kan .discription .menu .prev a {
			color: #39273c;
		}
		.card.matara-kan .discription .menu .active:before,
		.card.matara-kan .discription .menu .active:hover:before { background: #39273c; }
		.card.matara-kan .discription .menu .active a,
		.card.matara-kan .discription .menu .active:hover a { color: #FFF; }
		.card.matara-kan .discription:after {
			background: linear-gradient(0deg, #39273c, transparent);
		}
		.card.matara-kan .discription > .stats span span,
		.card.matara-kan .discription > .key-art span span {
			background: linear-gradient(0deg, transparent, #39273c);
		}
		.card.matara-kan .back .card-logos .middle {
			mask-image: url('/vshojo/assets/img/talents/en/matara_kan_logo.png');
		}
		@media screen and (max-width: 1300px) {
			.card.matara-kan .card-art {
				width: calc(100% + 21px);
				height: calc(100% + 21px)
			}
		}

	/* MICHI-MOCHIEVEE */
		.card.michi-mochievee .card-bg,
		.card.michi-mochievee .card-layer {
			background-image: linear-gradient(135deg, #000, #573562, #573968, #9071a2, #bb90cc, #000);
		}
		.card.michi-mochievee .card-background .image {
			background: url(/vshojo/assets/img/bg/bg_image_michi_mochievee.jpg) center 0/100%;
		}
		.card.michi-mochievee .card-art .character {
			background: url(/vshojo/assets/img/talents/en/michi_mochievee.png) no-repeat right top/100%;
		}
		.card.michi-mochievee .card-art .shimmer {
			mask-image: url(/vshojo/assets/img/talents/en/michi_mochievee_shimmer.png);
			mask-size: 100%;
		}
		.card.michi-mochievee .discription {
			background: linear-gradient(0deg, rgba(0,0,0,0) 0%, #222 100%);
		}
		.card.michi-mochievee .shimmer {
			background-image: linear-gradient(0deg, #000, #f50f75, #000, #fF0, #ffdd76, #f50f75, #000);
		}
		.card.michi-mochievee .discription p {
			-webkit-text-stroke: 1px #222;
			text-stroke: 1px #222;
		}
		.card.michi-mochievee .glare,
		.card.michi-mochievee .back .card-layer .middle > span {
			mask-image: url(/vshojo/assets/img/patterns/pattern_michi_mochievee.png);
		}
		.card.michi-mochievee .glare { opacity: 0.75; }
		.card.michi-mochievee .discription .menu li.hover:before,
		.card.michi-mochievee .discription .menu li:hover:before {
			background: #222;
		}
		.card.michi-mochievee .discription .menu .prev a {
			color: #222;
		}
		.card.michi-mochievee .discription .menu .active:before,
		.card.michi-mochievee .discription .menu .active:hover:before { background: #222; }
		.card.michi-mochievee .discription .menu .active a,
		.card.michi-mochievee .discription .menu .active:hover a { color: #FFF; }
		.card.michi-mochievee .discription:after {
			background: linear-gradient(0deg, #222, transparent);
		}
		.card.michi-mochievee .discription > .stats span span,
		.card.michi-mochievee .discription > .key-art span span {
			background: linear-gradient(0deg, transparent, #222);
		}
		.card.michi-mochievee .back .card-logos .middle {
			mask-image: url('/vshojo/assets/img/talents/en/michi_mochievee_logo.png');
		}
		.card-container.en .card.michi-mochievee .front .card-bg .texture,
		.card-container.en .card.michi-mochievee .front .card-layer > .texture {
			opacity: 0.5;
		}

	/* NAGI OKAMOTO */
		.card.nagi-okamoto .card-bg,
		.card.nagi-okamoto .card-layer {
			background-image: linear-gradient(135deg, #000, #b1d3e9, #c3ddee, #d6e6f0, #b1d3e9, #000);
		}
		.card.nagi-okamoto .card-background .image {
			background: url(/vshojo/assets/img/bg/bg_image_nagi_okamoto.jpg) center 0/100%;
		}
		.card.nagi-okamoto .card-art .character {
			background: url(/vshojo/assets/img/talents/nova/nagi_okamoto.png) no-repeat right top/95%;
		}
		.card.nagi-okamoto .card-art .overlap {
			background: url(/vshojo/assets/img/talents/nova/nagi_okamoto_overlap.png) no-repeat right top/95%;
		}
		.card.nagi-okamoto .card-art .shimmer {
			mask-image: url(/vshojo/assets/img/talents/nova/nagi_okamoto_shimmer.png);
		}
		.card.nagi-okamoto .discription {
			background: linear-gradient(0deg, rgba(0,0,0,0) 0%, #353356 100%);
		}
		.card.nagi-okamoto .shimmer {
			background-image: linear-gradient(0deg, #000, #ffcc00, #00ffcc, #3b00df, #e81578, #000);
		}
		.card.nagi-okamoto .discription p {
			-webkit-text-stroke: 1px #353356;
			text-stroke: 1px #353356;
		}
		.card.nagi-okamoto .glare,
		.card.nagi-okamoto .back .card-layer .middle > span {
			mask-image: url(/vshojo/assets/img/patterns/pattern_nagi_okamoto.png);
		}
		.card.nagi-okamoto .discription .menu li.hover:before,
		.card.nagi-okamoto .discription .menu li:hover:before {
			background: #353356;
		}
		.card.nagi-okamoto .discription .menu .prev a {
			color: #353356;
		}
		.card.nagi-okamoto .discription .menu .active:before,
		.card.nagi-okamoto .discription .menu .active:hover:before { background: #353356; }
		.card.nagi-okamoto .discription .menu .active a,
		.card.nagi-okamoto .discription .menu .active:hover a { color: #FFF; }
		.card.nagi-okamoto .discription:after {
			background: linear-gradient(0deg, #353356, transparent);
		}
		.card.nagi-okamoto .discription > .stats span span,
		.card.nagi-okamoto .discription > .key-art span span {
			background: linear-gradient(0deg, transparent, #353356);
		}
		.card.nagi-okamoto .back .card-logos .middle {
			mask-image: url('/vshojo/assets/img/talents/nova/nagi_okamoto_logo.png');
		}

	/* PEKE YUTORI */
		.card.peke-yutori .card-bg,
		.card.peke-yutori .card-layer {
			background-image: linear-gradient(135deg, #000, #b1767f, #ffd9dc, #f2b8c0, #eca9b7, #000);
		}
		.card.peke-yutori .card-background .image {
			background: url(/vshojo/assets/img/bg/bg_image_peke_yutori.jpg) center 0/100%;
		}
		.card.peke-yutori .card-art .character {
			background: url(/vshojo/assets/img/talents/nova/peke_yutori.png) no-repeat -100% top/95%;
		}
		.card.peke-yutori .card-art .shimmer {
			mask-image: url(/vshojo/assets/img/talents/nova/peke_yutori_shimmer.png);
			mask-position: -100% top;
		}
		.card.peke-yutori .discription {
			background: linear-gradient(0deg, rgba(0,0,0,0) 0%, #221e21 100%);
		}
		.card.peke-yutori .shimmer {
			background-image: linear-gradient(0deg, #000, #00DBFF, #eb00ff, #ff7800, #00ffcf, #000);
		}
		.card.peke-yutori .discription p {
			-webkit-text-stroke: 1px #221e21;
			text-stroke: 1px #221e21;
		}
		.card.peke-yutori .glare,
		.card.peke-yutori .back .card-layer .middle > span {
			mask-image: url(/vshojo/assets/img/patterns/pattern_peke_yutori.png);
		}
		.card.peke-yutori .discription .menu li.hover:before,
		.card.peke-yutori .discription .menu li:hover:before {
			background: #221e21;
		}
		.card.peke-yutori .discription .menu .prev a {
			color: #221e21;
		}
		.card.peke-yutori .discription .menu .active:before,
		.card.peke-yutori .discription .menu .active:hover:before { background: #221e21; }
		.card.peke-yutori .discription .menu .active a,
		.card.peke-yutori .discription .menu .active:hover a { color: #FFF; }
		.card.peke-yutori .discription:after {
			background: linear-gradient(0deg, #221e21, transparent);
		}
		.card.peke-yutori .discription > .stats span span,
		.card.peke-yutori .discription > .key-art span span {
			background: linear-gradient(0deg, transparent, #221e21);
		}
		.card.peke-yutori .back .card-logos .middle {
			mask-image: url('/vshojo/assets/img/talents/nova/peke_yutori_logo.png');
		}

	/* PROJECT-MELODY */
		.card.project-melody .card-bg,
		.card.project-melody .card-layer {
			background-image: linear-gradient(135deg, #000, #60537b, #f0a7fd, #92c3c8, #6ef2ff, #000);
		}
		.card.project-melody .card-background .image {
			background: url(/vshojo/assets/img/bg/bg_image_project_melody.jpg) center 0/100%;
		}
		.card.project-melody .card-art .character {
			background: url(/vshojo/assets/img/talents/en/project_melody.png) no-repeat right top/100%;
		}
		.card.project-melody .card-art .overlap {
			background: url(/vshojo/assets/img/talents/en/project_melody_overlap.png) no-repeat right top/100%;
		}
		.card.project-melody .card-art .shimmer {
			mask-image: url(/vshojo/assets/img/talents/en/project_melody_shimmer.png);
			mask-size: 100%;
		}
		.card.project-melody .discription {
			background: linear-gradient(0deg, rgba(0,0,0,0) 0%, #00040c 100%);
		}
		.card.project-melody .shimmer {
			background-image: linear-gradient(0deg, #000, #FFFB00, #FF8F00, #7400ff, #35edff, #F52280, #000);
		}
		.card.project-melody .discription p {
			-webkit-text-stroke: 1px #00040c;
			text-stroke: 1px #00040c;
		}
		.card.project-melody .glare,
		.card.project-melody .back .card-layer .middle > span {
			mask-image: url(/vshojo/assets/img/patterns/pattern_project_melody.png);
		}
		.card.project-melody .discription .menu li.hover:before,
		.card.project-melody .discription .menu li:hover:before {
			background: #00040c;
		}
		.card.project-melody .discription .menu .prev a {
			color: #00040c;
		}
		.card.project-melody .discription .menu .active:before,
		.card.project-melody .discription .menu .active:hover:before { background: #00040c; }
		.card.project-melody .discription .menu .active a,
		.card.project-melody .discription .menu .active:hover a { color: #FFF; }
		.card.project-melody .discription:after {
			background: linear-gradient(0deg, #00040c, transparent);
		}
		.card.project-melody .discription > .stats span span,
		.card.project-melody .discription > .key-art span span {
			background: linear-gradient(0deg, transparent, #00040c);
		}
		.card.project-melody .back .card-logos .middle {
			mask-image: url('/vshojo/assets/img/talents/en/project_melody_logo.png');
		}
		body.jp .card.project-melody .discription h2 a { letter-spacing: -2px; }
		body.en .card.project-melody .discription > span { letter-spacing: -.2px; }

	/* ZENTREYA */
		.card.zentreya .card-bg,
		.card.zentreya .card-layer {
			background-image: linear-gradient(135deg, #000, #000, #424242, #ff3c5c, #7b4654, #000);
		}
		.card.zentreya .card-background .image {
			background: url(/vshojo/assets/img/bg/bg_image_zentreya.jpg) center 0/100%;
		}
		.card.zentreya .card-art .character {
			background: url(/vshojo/assets/img/talents/en/zentreya.png) no-repeat right top/100%;
		}
		.card.zentreya .card-art .overlap {
			background: url(/vshojo/assets/img/talents/en/zentreya_overlap.png) no-repeat right top/100%;
		}
		.card.zentreya .card-art .shimmer {
			mask-image: url(/vshojo/assets/img/talents/en/zentreya_shimmer.png);
			mask-size: 100%;
		}
		.card.zentreya .discription {
			background: linear-gradient(0deg, rgba(0,0,0,0) 0%, #111 100%);
		}
		.card.zentreya .shimmer {
			background-image: linear-gradient(0deg, #000, #22FFD7, #000, #22FFD7, transparent, #22FFD7, #000);
		}
		.card.zentreya .discription p {
			-webkit-text-stroke: 1px #111;
			text-stroke: 1px #111;
		}
		.card.zentreya .glare,
		.card.zentreya .back .card-layer .middle > span {
			mask-image: url(/vshojo/assets/img/patterns/pattern_zentreya.png);
		}
		.card.zentreya .glare { opacity: 0.75; }
		.card.zentreya .discription .menu li.hover:before,
		.card.zentreya .discription .menu li:hover:before {
			background: #111;
		}
		.card.zentreya .discription .menu .prev a {
			color: #111;
		}
		.card.zentreya .discription .menu .active:before,
		.card.zentreya .discription .menu .active:hover:before { background: #111; }
		.card.zentreya .discription .menu .active a,
		.card.zentreya .discription .menu .active:hover a { color: #FFF; }
		.card.zentreya .discription:after {
			background: linear-gradient(0deg, #111, transparent);
		}
		.card.zentreya .discription > .stats span span,
		.card.zentreya .discription > .key-art span span {
			background: linear-gradient(0deg, transparent, #111);
		}
		.card.zentreya .back .card-logos .middle {
			mask-image: url('/vshojo/assets/img/talents/en/zentreya_logo.png');
		}
		.card-container.en .card.zentreya .front .card-bg .texture,
		.card-container.en .card.zentreya .front .card-layer > .texture {
			opacity: 0.5;
		}
		body.en .card.zentreya .discription > span { letter-spacing: -.2px; }
/* ==== END of TALENTS ==== */

/* ==== START of DISCLAIMER ==== */
	.disclaimer {
		position: relative;
		margin: 0 auto;
		color: #000;
		text-align: center;
		margin: 0 20px;
	}
	.disclaimer > * { margin: revert; }
/* ==== END of DISCLAIMER ==== */

/* ==== START of DARKMODE ==== */
	body.dark .background:before {
		background: #1f1f22 radial-gradient(#343439 1px, transparent 1px) center/25px 25px;
	}
	body.dark > .background:after {
		background: linear-gradient(0deg, rgba(209, 210, 255, 0.1), transparent);
	}
	body.dark header {
		background: linear-gradient(0deg, transparent, rgba(209, 210, 255, 0.1));
	}
	body.dark header .about {
		color: #DDD;
	}
	body.dark header nav #language,
	body.dark header nav #mode {
		border: 3px solid #DDD;
		color: #DDD;
	}
	body.dark header nav #language:hover,
	body.dark header nav #mode:hover {
		background: #DDD;
		color: #222;
	}
	body.dark header nav #mode span {
		mask-image: url(/vshojo/assets/img/light.svg);
		background: #DDD;
	}
	body.dark header nav #mode:hover span {
		background: #222;
	}
	body.dark .logo span {
		color: #DDD;
	}
	body.dark .logo span:before,
	body.dark .logo span:after {
		background: #DDD;
	}
	body.dark .card-control-panel .flip span {
		color: #DDD;
		border: 3px solid #DDD;
	}
	body.dark .disclaimer {
		color: #DDD;
	}
	/*body.dark .card .back {
		background: linear-gradient(0deg, #f50f75, #DDD);
	}
	body.dark .card .back .top,
	body.dark .card .back .middle,
	body.dark .card .back .bottom {
		background: #DDD;
	}*/
/* ==== END of DARKMODE ==== */

/* ==== START of JAPANESE ==== */
	body.jp { font-family: 'MPLUSRounded1c', sans-serif; }
	body.jp .card .discription p {
		font-weight: 800;
		font-style: normal;
	}
	body.jp .card .discription .menu a {
		font-style: normal;
		font-size: 18px;
	}
	body.jp .card .discription > .stats {
		font-style: normal;
	}
	body.jp .card .discription > .stats .birthday:before { content: '誕生日: '; }
	body.jp .card .discription > .stats .height:before { content: '身長: '; }
	body.jp .card .discription > .stats .mark:before { content: '推しマーク: '; }
	body.jp .card .discription > .stats .debut:before { content: 'デビュー: '; }
	body.jp .card .discription > .stats .hashtag:before { content: 'ハッシュタグ: '; }
	body.jp .card .discription > .key-art .concept:before { content: 'コンセプト: '; }
	body.jp .card .discription > .key-art .rig:before { content: 'リグ: '; }
	body.jp .card .discription > .key-art .illustrator:before { content: 'イラストレーター: '; }
	body.jp .card .discription > .key-art .gallery:before { content: 'ギャラリー: '; }
	body.jp .card .discription > .key-art .videos:before { content: 'ビデオ: '; }
	@media screen and (max-width: 1300px) {
		body.jp .card .discription .menu a {
			font-size: 15px;
		}
		body.jp .card .discription p {
			font-weight: 900;
		}
	}
/* ==== END of JAPANESE ==== */

/* ==== START of RESPONSIVE ==== */
	@media screen and (max-width: 2079px) {
		.card-control-panel {
			width: calc(480px * 3 + 40px * 2);
		}
	}
	@media screen and (max-width: 1559px) {
		.card-control-panel {
			width: calc(480px * 2 + 40px);
		}
	}
	@media screen and (max-width: 1300px) {
		.card-control-panel {
			width: calc(380px * 3 + 40px * 2);
		}
		.card {
			background: #7ecdf4;
			width: 380px;
			border-radius: 20px;
			/*border: 2px solid #f50f75;*/
			margin: 20px;
		}
		.card .card-layer {
			width: calc(100% - 20px);
			height: calc(100% - 20px);
			border-radius: 10px;
			background-size: calc(200% + 20px) calc(200% + 20px);
		}
		.card .card-art {
			top: -10px;
			left: -10px;
			width: calc(100% + 20px);
			height: calc(100% + 20px);
		}
		.card .card-art .character,
		.card .card-art .clip {
			height: calc(80% - 8px);
			clip-path: polygon(0 0, 100% 0, 100% 100%, calc(80% - 6px) 100%, calc(70% - 3px) calc(90% + 2px), calc(30% + 3px) calc(90% + 2px), calc(20% + 6px) 100%, 0 100%);
		}
		.card .glimmer {
			top: -10px;
			left: -10px;
			width: calc(100% + 20px);
			height: calc(100% + 20px);
		}
		.card .discription {
			padding: 0 10px 10px 10px;
			border-radius: 10px;
		}
		.card .discription h2 a {
			padding: 6px 0;
			font-size: 18px;
		}
		.card .discription p {
			font-size: 13px;
			line-height: 17px;
		}
		.card .discription .menu a {
			padding: 0 25px 0 15px;
			font-size: 15px;
		}
		.card .discription > span {
			bottom: 22px;
			padding: 5px 10px;
			border-bottom-right-radius: 10px;
		}
		.card .discription > .info {
			padding: 6px 10px;
			height: 80px;
		}
		.discription:after {
			bottom: 21px;
			height: 80px;
		}
		.card .discription > .stats span span,
		.card .discription > .key-art span span {
			padding: 3px 5px;
			border-radius: 10px;
			margin-bottom: 3px;
		}
		.card .discription > .stats .hashtag {
			line-height: 12px;
		}
		.card .discription > .stats,
		.card .discription > .key-art {
			font-size: 12px;
			line-height: 14px;
			height: 78px;
			padding: 5px 7px;
		}
		.card .discription .menu .stats { margin-left: -20px; }
		.card .discription .menu .stats a { padding: 0 20px 0 28px; }
		.card .discription .menu .key-art { margin-left: -11px; }
		.card .discription .menu .key-art a { padding: 0 20px; }
		.card .copyright {
			font-size: 7px;
		}
		.card .socials a span {
			padding: 10% 150% 10% 185%;
			margin-left: calc(-100% - 7px);
			font-size: 120%;
		}
		.card .socials .fanbox span { height: 33px; }
		.card .back .card-logos .top,
		.card .back .card-logos .bottom {
			mask-size: 21px;
		}
		.card .back .card-logos .top {
			mask-position: 22px 50px;
		}
		.card .back .card-logos .bottom {
			mask-position: calc(100% - 22px) calc(100% - 50px);
		}
	}
	@media screen and (max-width: 1259px) {
		.card-control-panel {
			width: calc(380px * 2 + 40px);
		}
		.card-control-panel .inner { margin-bottom: -105px; }
		.card-control-panel .flip {
			margin-top: 10px;
			width: 100%;
		}
		.card-control-panel .filter {
			gap: 10px;
		}
		body.dark .card-control-panel .flip span {
			color: #222;
			border: 3px solid #222;
		}
		html body .card-control-panel .flip span.active,
		html body .card-control-panel .flip span:hover {
			color: #DDD;
			border: 3px solid #DDD;
		}
	}
	@media screen and (max-width: 839px) {
		html, body {
			overflow-x: hidden;
		}
		.card-control-panel {
			width: calc(100% - 40px);
		}
	}
	@media screen and (max-width: 607px) {
		.card-control-panel {
			display: flex;
			flex-wrap: wrap;
		}
		.card-control-panel.show .switch {
			left: 0;
			transform: translateX(0);
		}
		.card-control-panel .switch {
			position: relative;
			left: 50%;
			transform: translateX(-50%);
		}
		.card-control-panel .filter img { width: 100px; }
		.card-control-panel .inner {
			width: 100%;
			margin-bottom: -175px;
			justify-content: space-between;
		}
		.card-control-panel .filter {
			justify-content: center;
			width: min-content;
		}
		.card-control-panel .flip {
			text-align: center;
    		width: auto;
		}
		.card-control-panel .flip span {
			display: block;
			margin: 10px 0;
		}
		html body .card-control-panel .flip span.active,
		html body .card-control-panel .flip span:hover {
			color: #F50F75;
			border: 3px solid #F50F75;
		}
	}
	@media screen and (max-width: 600px) {
		.card-control-panel { margin-top: 100px; }
		.card-container {
			transform: scale(0.9);
		}
		.flip-front { animation: flipFront 500ms linear; }
		.flip-back { animation: flipBack 500ms linear; }
		@keyframes flipFront {
			0% { transform: rotateY(0deg) scale(0.9); }
			50% { transform: rotateY(90deg) scale(0.95); }
			100% { transform: rotateY(0deg) scale(0.9); }
		}
		@keyframes flipBack {
			0% { transform: rotateY(0deg) scale(0.9); }
			50% { transform: rotateY(90deg) scale(0.95); }
			100% { transform: rotateY(0deg) scale(0.9); }
		}
		.card { margin: 20px 0; }
		header .about {
			font-size: 14px;
			line-height: 26px;
		}
		.logo {
			max-width: 35vh;
		}
		.logo span { width: fit-content; }
		.logo span h2 {
			font-size: 5vw;
		}
	}
/* ==== END of RESPONSIVE ==== */