:root {
	--np-width: 380px;
	--np-height: 90px;
	--nameplate-height: 55px;
	--np-x-padding: 0px;
	--np-name-padding: 25px;
	--corner-height: var(--nameplate-height);
}
.online {
	--np-width: 550px;
	--np-height: 100px;
	--nameplate-height: 600px;
	--bottom-offset: 275px;

	--corner-height: calc(var(--nameplate-height) - var(--np-height));
}
.online.nameplates {
	display: flex;
	gap: 30px;
	justify-content: center;
	align-items: flex-start;
}
.online .role {
	display: none !important;
}

.nameplates {
	position: absolute;
	left: calc(var(--left-offset) * 1);
	right: calc(var(--right-offset) * 1);
	bottom: calc(var(--bottom-offset) * 1);
	transition: opacity 0.75s ease-in, padding 0.5s ease-in-out, left 1s ease-out, right 1s ease-out;

	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-auto-flow: column;
}
[data-talent="2"] {
	/* grid-template-columns: 1fr 1fr; */
}
[data-talent="3"] {
	/* grid-template-columns: 1fr 1fr 1fr; */
	--np-width: 400px;
}
[data-talent="5"] {
	--np-width: 320px;
}
[data-talent="6"] {
	--np-width: 275px;
}
[data-slots="5"] {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
[data-slots="6"] {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
[data-slots="7"] {
	grid-template-columns: auto;
}
[data-slots="3"][data-talent="3"] {
	--np-width: 420px;
	grid-template-columns: 1fr 1fr 1fr;
}
[data-slots="5"][data-talent="2"] {
	--np-width: 420px;
	grid-template-columns: 1fr 2fr 1fr 2fr 1fr;
}
[data-slots="5"][data-talent="3"] {
	--np-width: 420px;
	grid-template-columns: 2fr 1fr 2fr 1fr 2fr;
}
[data-slots="6"][data-talent="3"] {
	--np-width: 420px;
	grid-template-columns: 2fr 1fr 2fr 1fr 2fr;
}
[data-slots="7"][data-talent="4"] {
	--np-width: 400px;
	grid-template-columns: 2fr 1fr 2fr 1fr 2fr 1fr 2fr;
}
[data-slots="6"][data-talent="6"] {
	--np-width: 275px;
}

.nameplate {
	width: 0;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	text-align: left;

	padding-top: calc(var(--corner-height)); /* Optional team/role space above nameplate */

	white-space: nowrap;
	transition: all 0.5s, width 1.5s, left 0s, opacity 0.5s;
	transition-timing-function: ease-out;

	color: var(--text-color);
	-webkit-text-stroke: transparent;

	overflow: hidden;
	position: relative;
}

.role,
.team-info {
	position: absolute;
	z-index: 0;
	left: 0;
	bottom: 100%;
	margin-bottom: 8px;

	background-color: rgba(var(--secondary-color), 0.9);
	color: var(--white);
	text-shadow: 0 1px rgba(var(--black-rgb), 0.5);
	font-size: 24px;
	line-height: 40px;
	font-weight: 400;

	max-width: 100%;

	display: flex;
	align-items: center;
	line-height: 1;

	opacity: 0;
	transition: opacity 0.5s;

	text-transform: uppercase;
}
.role {

}
.role:empty {
	display: none;
	padding: 0;
}
.role:not(:empty) {
	padding: 8px 12px;
}
.nameplates:not(.show-talent-roles) .role {
	opacity: 0;
}
.show .role {
	opacity: 1;
	transition-delay: 1s;
}
.show .team-info {
	opacity: 1;
	transition-delay: 1s;
}
[class="game-icon"] ~ .team-name:not(:empty) ~ .team-logo-bg {
	position: absolute;
	width: 44px;
	height: 44px;
	z-index: 0;
	background-color: rgba(var(--black-rgb), 0.15);
}
.team-name {
	order: 2;
	padding: 8px 12px;
	width: 100%;
	display: flex;
}
.team-logo[style]:not([style*="/."]) ~ .team-name {
	width: calc(100% - 32px - 6px);
}
.team-name:empty,
.role:not(:empty) ~ .team-info,
.team-name:empty + .team-logo {
	display: none !important;
}
.team-logo[style]:not([style*="/."]) {
	display: block;
	width: 32px;
	height: 32px;
	margin: 6px;
}

.talent-info {
	position: relative;
	width: var(--np-width);
	padding: 10px var(--np-x-padding) 15px;
	background: rgba(var(--secondary-color-rgb), 0.9);
	color: var(--white);

	transition: opacity 0.75s, width 0.75s;
	display: grid;
	justify-content: flex-start;
	align-items: center;

	grid-auto-flow: column;
	z-index: 2;
}

.team-logo {
	background: no-repeat center / contain;
	/* aspect-ratio : 1 / 1; */
	position:relative;
	grid-column: 1;
	grid-row: 1 / 2 span;

	height: 40px;
	width: 40px;

	order: 1;
	z-index: 2;
	flex-shrink: 0;
	align-self: flex-start;
}
.team-logo[style=""], .team-logo:not([style]) {
	display: none;
}

.nickname {
	/*font-family: "Dharma Gothic", sans-serif;
	font-size: 60px;
	letter-spacing: 0.02em;
	line-height: 40px;
	padding-top: 0.1em;*/

	font-size: 30px;
	line-height: 45px;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--primary-color);
	color: var(--light-text-color);

	width: calc(var(--np-width) - (var(--np-x-padding) * 2));
	text-transform: uppercase;
	position: relative;

	padding: 0px var(--np-name-padding);
}

/* Extra info (socials / real name) */
.extra-info {
	position: relative;
	display: grid;
	justify-content: center;
	align-items: flex-start;
	order: 3;
	z-index: 3;
	width: 100%;
	line-height: 30px;
	font-size: 20px;

	grid-row: 2;

	color: var(--light-text-color);

	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}
.extra-info.no-instagram.no-twitter.no-realname {
	display: none;
}
.realname, .twitter, .instagram {
	grid-column: 1;
	grid-row: 1;
	order: 1;
	opacity: 0;
	transition: opacity 0.5s, transform 0.5s;
	animation-iteration-count: 0;
	max-width: 100%;
	width: calc(var(--np-width) - 30px);
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.25em;

	padding: 0 var(--np-name-padding);
}

.hide .twitter,
.hide .instagram,
.hide .realname {
	animation-iteration-count: 0 !important;
}
.show .twitter,
.show .instagram,
.show .realname {
	animation-iteration-count: 1 !important;
}
.twitter:empty,
.instagram:empty,
.instagram:not(:empty) + .twitter,
.realname:empty { display: none; }
.twitter:not(:empty),
.instagram:not(:empty),
.instagram:empty + .twitter:not(:empty),
.instagram:empty + .twitter:empty + .realname {
	opacity: 1;
}
.hide-nameplates .twitter,
.hide-nameplates .instagram,
.hide-nameplates .realname {
	animation: show-info 1s ease-in-out !important;
	animation-iteration-count: 2;
	animation-direction: reverse;
}
.show .instagram:not(:empty),
.show .instagram:empty + .twitter:not(:empty) {
	animation: cycle-socials 12s ease-in-out;
	transition-delay: 2s;
}
.show .instagram:not(:empty) + .twitter:empty + .realname,
.show .instagram:empty + .twitter:not(:empty) + .realname {
	animation: cycle-socials 12s reverse ease-in-out;
	transition-delay: 10s;
}
.show .no-realname .instagram:not:empty,
.show .no-realname .instagram:empty + .twitter:not(:empty) {
	transition-delay: 2s;
	opacity: 1;
	animation: show-info 1s ease-in-out !important;
}
.show .no-instagram.has-twitter.no-realname > .twitter {
	animation: none;
}

/* Socials Icons */
.instagram:before,
.twitter:before {
	content: '';
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	background: no-repeat center / contain;
	-webkit-mask: no-repeat center;
	-webkit-mask-size: contain;
	background-color: var(--primary-color);
}

.instagram:not(:empty):before {
	-webkit-mask-image: url('../img/instagram.svg');
}
.twitter:not(:empty):before {
	-webkit-mask-image: url('../img/x.svg');
}

/* Online/camera nameplates */
.online .nameplate.show {
	width: var(--np-width);
	transition: all 0.5s, width 0s, left 0s, opacity 0.5s;
}

/* Animations */
.show-nameplates .talent-info {
	opacity: 1;
	transition-delay: 1s;
}
.show-nameplates .nameplate.show:not(.hide) .talent-info {
	opacity: 1;
	transition-delay: 0.5s;
}
.show-nameplates .nameplate:not(.show) .talent-info,
.show-nameplates .nameplate.hide .talent-info,
.show-nameplates .nameplate.show.hide .talent-info,
.show-nameplates .nameplate.hidden .talent-info,
.hide-nameplates .nameplate .talent-info {
	opacity: 0;
}
.show-nameplates:not(.online) .nameplate.show {
	animation: show-nameplate 2s;
	width: var(--np-width);
}
.online .nameplate .talent-info > *:not(.nameplate-corners) {
	transform: translateX(-100%);
}
.show-nameplates.online .nameplate.show .talent-info > *:not(.nameplate-corners) {
	animation: reveal-info 2s ease-out;
	transform: translateX(0);
}
.show-nameplates:not(.online) .nameplate.hide,
.show-nameplates:not(.online) .nameplate:not(.show),
.hide-nameplates:not(.online) .nameplate {
	opacity: 0;
	width: 0;
}
.hide .talent-info {
	opacity: 0;
	transition-delay: 1.5s;
}

@keyframes show-nameplate {
 0% {
	width: 0;
 }
 50% {
 }
 90% {
	width: var(--np-width);
 }
 100% {
	width: var(--np-width);
 }
}

@keyframes reveal-info {
 0% {
	transform: translateX(-100%);
 }
 100% {
	transform: translateY(0);
 }
}

@keyframes show-info {
 0% {
	opacity: 0;
 }
 100% {
	opacity: 1;
 }
}
@keyframes cycle-socials {
 0% {
	opacity: 0;
	transform: translateX(-0.4em);
 }
 45% {
	opacity: 0;
	transform: translateX(-0.4em);
 }
 50% {
	opacity: 0;
	transform: translateX(-0.2em);
 }
 55% {
	opacity: 1;
	transform: translateX(0em);
 }
 100% {
	opacity: 1;
	transform: translateX(0em);
 }
}


/* Nameplate decoration */
.nameplate-corners {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	color: var(--primary-color);
	z-index: 10;
	height: 100%;
	pointer-events: none;
	font-size: 20px;
}
.online .nameplate-corners {
	height: auto;
	top: calc(-1 * var(--corner-height));
	bottom: 0;
}
.corners:before,
.corners:after {
	content: '';
	position: absolute;
	border: 3px solid;
	width: 1em;
	height: 1em;
}
.corners:before {
	border-right-width: 0;
	left: 0;
}
.corners:after {
	border-left-width: 0;
	right: 0;
}
.corners-top:before,
.corners-top:after {
	border-bottom-width: 0;
	top: 0;
}
.corners-bottom:before,
.corners-bottom:after {
	border-top-width: 0;
	bottom: 0;
}