@import 'sponsor_rotator.css';

:root {
	--logo-width: 100px;
	--logo-height: 100px;
	--logo-bg-width: 130px;
	--logo-bg-height: 130px;

	--player-panels-width: 300px;
	--player-panels-height: 425px;

	--player-panel-width: 336px;
	--player-panel-height: 625px;
	--player-height: 400px;
	--player-corner: 0px;

	--player-photo-height: 500px;

	--stat-height: 45px;
	--stats-height: calc(var(--stat-height) * 4) + 10px;
	--stats-height-with-agent: calc(var(--stats-height) + var(--stat-height));

	--team-name-width: 1000px;

	--left-offset: 60px;
	--right-offset: 60px;
}

.sponsor-wrapper {
	top: calc(45px + ((130px - 100px) / 2));
	right: calc(60px);
	bottom: auto;
	height: 100px;
	width: var(--player-panel-width);
	position: absolute;
}
#sponsors {
	position: relative;
	bottom: auto;
	right: auto;
	font-size: 25px;
	width: 100%;
}
#sponsors:before {
    content: '';
}

.page-header {
	position: absolute;
	top: 45px;
	left: 60px;
	display: flex;
	flex-direction: row;
	gap: 0.5em;
	font-size: 60px;
	line-height: 1;
	color: var(--light-text-color);

	align-items: center;
	justify-content: flex-start;
}

.page-title.team-name {
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-start;
	gap: 0.1em;
}
.page-title:before {
	font-size: 0.6em;
	color: var(--light-color);
	padding-left: 0.05em;
}

.page-header .team-logo {
	position: relative;
	z-index: 2;

	background: no-repeat center / contain;
	width: var(--logo-width);
	height: var(--logo-height);
	margin: 15px;

	flex-shrink: 0;
}
.page-header .team-logo-box {
	width: var(--logo-bg-width);
	height: var(--logo-bg-height);
	background-color: rgba(var(--dark-color-rgb), 0.9);
	z-index: 1;
	position: relative;
	border-bottom: 5px solid var(--primary-color);
}
.team-logo:not([style]):before,
.team-logo[style='background-image:url("")']:before {
	display: none;
}

/* Box containing all .player */
.players {
	position: absolute;
	z-index: 2;
	top: calc(var(--top-offset) + 120px);
	bottom: calc(var(--bottom-offset));

	left: calc(0px + var(--left-offset) + 0px);
	right: calc(0px + var(--right-offset) + 0px);

	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 30px;
	align-items: flex-start;
	text-align: center;
	white-space: nowrap;

	color: var(--light-text-color);
}
[data-game="rocket league"i] .players {
	justify-content: space-evenly;
	padding: 0 100px;
}
.player {
	position: relative;
	height: var(--player-panel-height);
	width: var(--player-panel-width);

	display: flex;
	align-items: stretch;
	justify-content: flex-end;
	flex-direction: column;
	text-align: center;

	transition: all 0.5s;

	left: 0;
	opacity: 1;

	border-bottom: 12px solid var(--primary-color);
	overflow: hidden;
}
.show-stats .has-stats .player {
}
/*body:not(.visible) .player {
	opacity: 0;
	left: -10px;
	transition-delay: 2s;
}*/

.player:after {
	display: block;
	content: '';
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: 0px;
	top: 0px;
	opacity: 0.6;
	/* height: calc(var(--player-photo-height) - 55px); */

	background-color: var(--white);
	background: no-repeat center top / auto 990px;
	background-image: url('../img/bg/prism_bw6.jpg');

	z-index: -1;
}
.theme-cs2 .player:after { background-image: url('../img/bg/prism_cs6.jpg'); }
.theme-lol .player:after { background-image: url('../img/bg/prism_lol4.jpg'); }
.theme-val .player:after { background-image: url('../img/bg/prism_val7.jpg'); }


.agent-image {
	background-size: auto 800px;
	background-position: center top;
	background-repeat: no-repeat;
	height: var(--player-panels-height);
	width: 100%;
	overflow: hidden;
	/*-webkit-mask-image: radial-gradient(farthest-side at 50% 200px, black 50%, black 60%, transparent 100%);
	-webkit-mask-size: 225% 125%;
	-webkit-mask-position: center -175px;
	-webkit-mask-repeat: no-repeat;*/

	position: absolute;
	bottom: 0px;
	left: 0;
	right: 0;
	z-index: 8;

	display; none;
}
.theme-val .agent-image {
	display: block;
}
.agent-image.unknown,
.agent-image.unknown[style] {
	filter: saturate(0.025) brightness(0.3);
}
.show-stats .has-stats .agent-image {
	bottom: -25px;
}
/*
.theme-val .p1 .agent-image.unknown { background-image: url('../img/agents/yoru.png'); }
.theme-val .p2 .agent-image.unknown { background-image: url('../img/agents/skye.png'); }
.theme-val .p3 .agent-image.unknown { background-image: url('../img/agents/breach.png'); }
.theme-val .p4 .agent-image.unknown { background-image: url('../img/agents/fade.png'); background-position: 55% top; }
.theme-val .p5 .agent-image.unknown { background-image: url('../img/agents/jett.png'); }

.theme-val[data-teamnum="1"] .p1 .agent-image.unknown { background-image: url('../img/agents/omen.png'); }
.theme-val[data-teamnum="1"] .p2 .agent-image.unknown { background-image: url('../img/agents/tejo.png'); }
.theme-val[data-teamnum="1"] .p3 .agent-image.unknown { background-image: url('../img/agents/brimstone.png'); }
.theme-val[data-teamnum="1"] .p4 .agent-image.unknown { background-image: url('../img/agents/raze.png'); }
.theme-val[data-teamnum="1"] .p5 .agent-image.unknown { background-image: url('../img/agents/neon.png'); }

.theme-lol .p1 .agent-image.unknown { background-image: url('../img/champions/renekton.png'); }
.theme-lol .p2 .agent-image.unknown { background-image: url('../img/champions/rengar.png'); background-position: 65% top; }
.theme-lol .p3 .agent-image.unknown { background-image: url('../img/champions/ahri.png'); background-position: 55% top; }
.theme-lol .p4 .agent-image.unknown { background-image: url('../img/champions/jhin.png'); }
.theme-lol .p5 .agent-image.unknown { background-image: url('../img/champions/leona.png'); background-position: 85% top; }
.theme-lol[data-teamnum="1"] .p1 .agent-image.unknown { background-image: url('../img/champions/aurora.png'); }
.theme-lol[data-teamnum="1"] .p2 .agent-image.unknown { background-image: url('../img/champions/udyr.png'); }
.theme-lol[data-teamnum="1"] .p3 .agent-image.unknown { background-image: url('../img/champions/syndra.png'); }
.theme-lol[data-teamnum="1"] .p4 .agent-image.unknown { background-image: url('../img/champions/miss fortune.png'); }
.theme-lol[data-teamnum="1"] .p5 .agent-image.unknown { background-image: url('../img/champions/thresh.png'); }
*/

/* VAL Agents */
.agent-image.waylay {
	background-position: 20% top;
}
/* LOL Champions */
.agent-image[style*="ahri"] { background-position: 55% top; }
.agent-image[style*="fade"] { background-position: 55% top; }
.agent-image[style*="leona"] { background-position: 85% top; }
.agent-image[style*="maokai"] { background-position: 25% top; }
.agent-image[style*="naafiri"] { background-position: 5% top; }
.agent-image[style*="rengar"] { background-position: 65% top; }
.agent-image[style*="ezreal"] { background-position:  50px top; }

.player:nth-child(1):after { background-position: left 25%; }
.player:nth-child(2):after { background-position: 20% 20%; }
.player:nth-child(3):after { background-position: center 20.5%; }
.player:nth-child(4):after { background-position: 80% 20%; }
.player:nth-child(5):after { background-position: right 25%; }
.player:nth-child(6):after { background-position: center 25%; }
.player.p1:after { background-position: left 25%; }
.player.p2:after { background-position: 20% 20%; }
.player.p3:after { background-position: center 20.5%; }
.player.p4:after { background-position: 80% 20%; }
.player.p5:after { background-position: right 25%; }
.player.p6:after { background-position: center 25%; }

.p1, .pos-top { order: 1; transition-delay: 0ms; }
.p2, .pos-jungle, .pos-jungler { order: 2; transition-delay: 150ms; }
.p3, .pos-mid, .pos-middle { order: 3; transition-delay: 350ms; }
.p4, .pos-bot, .pos-adc { order: 4; transition-delay: 600ms; }
.p5, .pos-support { order: 5; transition-delay: 900ms; }
.p6 { order: 6; transition-delay: 1250ms; }

/* javascript race condition fix/workaround */
.p1 ~ .p1,
.p2 ~ .p2,
.p3 ~ .p3,
.p4 ~ .p4,
.p5 ~ .p5,
.p6 ~ .p6 {
	display: none;
}
body[class*="theme-"]:not(.theme-cs2) .has-agent .player-photo[style*="silhouette"] {
	display: none;
}
[data-teamnum="0"] .player-photo[style*="silhouette"] { background-image: url('../img/silhouette_ct.png') !important; }
[data-teamnum="1"] .player-photo[style*="silhouette"] { background-image: url('../img/silhouette_t.png') !important; }
.player-photo[style]:not([style*="silhouette"]) ~ .agent-image {
	display: none;
}

.player-photo {
	background-size: 90% auto;
	background-position: center bottom; /* 300x500 canvas */
	background-repeat: no-repeat;
	height: calc(var(--player-photo-height) + 10px);
	overflow: hidden;
	/*
	-webkit-mask-image: radial-gradient(farthest-side at 50% 300px, black 40%, rgba(var(--black-rgb),0.9) 70%, transparent 100%);
	-webkit-mask-image: radial-gradient(farthest-side at 50% 200px, black 50%, black 60%, transparent 100%);
	-webkit-mask-size: 225% 135%;
	-webkit-mask-position: center -130px;
	-webkit-mask-repeat: no-repeat;
	*/
	position: relative;
	margin: 0 -12px;

	position: absolute;
	bottom: 0px;
	left: 0;
	right: 0;
	z-index: 5;
}
.show-stats .has-stats .player-photo {
	bottom: -25px;
}

/* Player info */
.player-data {
	position: relative;
	height: 100%;
	z-index: 10;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: flex-start;

	font-size: 30px;
	line-height: 1.4;
	padding: 0.5em;
	order: 3;
}
.player-info {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	flex-wrap: wrap;
	text-align: center;
	align-items: flex-end;
	font-size: 36px;
	width: 100%;
	z-index: 3;
	position: relative;
	font-weight: 400;
	text-shadow: 0 1px rgba(var(--black-rgb), 0.5);
}
.show-stats .has-stats .player-data {
	padding: 0;
	bottom: -12px;
	justify-content: space-between;
}
.show-stats .has-stats .player-info {
	padding: 0.3em;
	background-color: var(--primary-color);
	order: 5;
}
.show-stats .has-stats .nickname {
	color: var(--text-color);
}
.nickname,
.realname {
	/*display: flex;
	align-items: center;
	justify-content: center;*/
	width: 100%;
	padding: 0 0.25em;

	display: flex;
	align-items: center;
	justify-content: center;
}
.nickname {
	order: 1;
	color: var(--light-text-color);
	font-weight: 700;
}
.realname {
	order: 2;
	font-size: 20px;
	color: rgba(var(--light-text-color-rgb), 0.9);
}
.realname:not(:empty) ~ .nickname {
}
.show-stats .has-stats .realname,
.realname:empty,
.nickname.hide,
.realname.hide {
	display: none;
}
.nationality {
	display: none;
}

.player-photo[style*="silhouette"] ~ .stats .agent-icon {
	display: none;
}

/* LOL Role-icon */
.role-info {
	align-self: flex-start;
	line-height: 1;
	/* display: none; */
	opacity: 0;
}
.theme-lol .role-info {
	opacity: 1;
	order: 3;
	margin: 0.5em auto 0;
}
.theme-lol .show-stats .has-stats .role-info {
	margin: 0.15em 0.5em 0;
}
.theme-lol .role-icon {
	font-size: 45px;
}

/* Stats for players */
.stats {
	display: none;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-end;
	font-weight: 500;
	font-size: 23px;
	line-height: 1.2;
	padding: 0.8em 0.8em 0;
	height: var(--stats-height);
	letter-spacing: -0.015em;
	z-index: 3;
	text-shadow: 0 1px rgba(var(--black-rgb), 0.7);

	font-family: "Satoshi", sans-serif;

	opacity: 0;
	transition: opacity 0.6s;
	order: 1;

	gap: 0.5em 0.25em;
}
.stat {
	border-bottom: 2px solid var(--secondary-color);
	padding-bottom: 0.5em;
}

.show-stats .has-stats .stats {
	display: flex;
}
.show-stats .stats {
	opacity: 1;
}
.stats:empty {
	display: none;
}
.stat {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-end;
	width: 100%;
	order: 2;
}

.stat.champion,
.stat.agent,
.stat.agents,
.stat.roles {
	order: 4;
}
.stat-name {
	order: 1;
}
.stat-value {
	order: 2;
	display: flex;
	gap: 0.15em;
	align-items: center;
	font-weight: 700;
}
.avg-stats {
	opacity: 0;
	position: absolute;
	right: calc(var(--right-offset) + 30px + var(--player-panel-width));
	top: calc(120px);
	background-color: var(--primary-color);
	color: var(--text-color);
	font-size: 25px;
	line-height: 40px;
	width: var(--player-panel-width);
	padding: 0 12px;
	transition-delay: 0s;
	text-align: center;
	font-weight: 500;
}
.visible .stats-are-avg ~ .avg-stats {
	opacity: 1;
	transition: opacity 0.6s 2s;
}
.show-ratings ~ .avg-stats {
	display: none;
}

/* K/A/D stat blocks */
.stats {
	justify-content: space-between;
	flex-wrap: wrap;
	flex-direction: row;
}
.stat.kills, .stat.deaths, .stat.assists {
    flex-direction: column;
    text-align: center;
    width: 32%;
    align-items: center;
    color: var(--text-color);
    background-color: var(--primary-color);
    order: 0;
    border-bottom: 0;
    padding: 0.1em;
    margin-bottom: 0.1em;
}
.kills .stat-value, .deaths .stat-value, .assists .stat-value {
	font-size: 28px;
}

.agent-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	background: center no-repeat;
	background-size: contain;
	order: 0;
}
/* Val agent role icon */
.agent-role {
	background-color: var(--light-text-color);
	order: 3;
	font-size: 1.2em;
}

/* Coach information */
.coach-info {
	position: absolute;
	top: 45px;
	height: 65px;
	height: var(--logo-bg-height);
	right: calc(var(--right-offset) + 30px + var(--player-panel-width));

	display: flex;
	align-items: center;
	gap: 0.75em;

	font-weight: 500;
	font-size: 28px;
	line-height: 40px;

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

	opacity: 1;
}
.visible .coach-info {
	transition: opacity 0.6s 2.5s;
}
.show-stats ~ .coach-info {
	/* display: none; */
}
.show-stats.stats-are-avg ~ .coach-info {
	right: calc(var(--right-offset) + ((30px + var(--player-panel-width)) * 1));
	padding-bottom: 60px;
}
body:not(.visible) .coach-info {
	opacity: 0;
}
.matches:not(:empty) ~ .coach-info {

}
.matches:not(:empty) + .show-ratings + .coach-info {

}
.coach-name {
	display: flex;
	align-items: center;
	flex-direction: row;
	background-color: var(--dark-color);
	padding-right: 0.75em;
}
.coach-name:empty {
	display: none;
}
.coach-name:before {
	background-color: var(--primary-color);
	padding: 0 0.75em;
	margin-right: 0.75em;
	align-self: flex-start;
	left: 0;
	right: 0;
	top: 0;
	color: var(--text-color);
}

/* Player corner decoration */
.player-corners {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	font-size: 25px;
	color: var(--primary-color);
}
.corners:before,
.corners:after {
	content: '';
	position: absolute;
	border: 2px 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;
}
.player .corners-bottom {
	display: none;
}
.corners-bottom:before,
.corners-bottom:after {
	border-top-width: 0;
	bottom: 0;
}

/* Match History */
.matches {
	position: absolute;
	z-index: 1;
	bottom: calc(60px + (var(--bottom-offset) / 3));
	left: calc(var(--left-offset) + 50px);
	right: calc(var(--right-offset) + 50px);

	font-family: "Satoshi", sans-serif;

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;

	text-align: center;
	color: var(--white);

	line-height: 36px;
	font-size: 32px;

	gap: 5px;

	transform: scale(0.85);
	transform-origin: bottom center;

	/* display: none; */

	/* height: 125px; */
	/* max-width: calc(var(--logo-bg-width) + 0.3em + var(--team-name-width)); */
}
.matches:empty {
	display: none;
}
/*.matches:not(:empty) ~ .players.show-stats {
	top: 215px;
}*/
.match {
	position: relative;
	background-color: rgba(var(--black-rgb), 0.2);

	transition: all 0.5s;
	transition-delay: 2s;
	opacity: 1;
	left: 0;
}
body:not(.visible) .match {
	opacity: 0;
	left: -10px;
	transition-delay: 0;
}
.match:nth-child(1) { transition-delay: 0.5s; }
.match:nth-child(2) { transition-delay: 0.8s; }
.match:nth-child(3) { transition-delay: 1.1s; }
.match:nth-child(4) { transition-delay: 1.35s; }
.match:nth-child(5) { transition-delay: 1.6s; }
.match:nth-child(6) { transition-delay: 1.8s; }
.match:nth-child(7) { transition-delay: 2.0s; }
.match:nth-child(8) { transition-delay: 2.15s; }
.match:nth-child(9) { transition-delay: 2.25s; }
.match:nth-child(10) { transition-delay: 2.4s; }

.debug .match {
	transition-delay: 0s !important;
	transition: 0s all;
}

.match[data-stage]:before {
	content: attr(data-stage) ' (Map ' attr(data-map-no) ')';
	position: absolute;
	top: 100%;
	width: 100%;
	left: 0;
	font-size: 20px;
	text-shadow: 0 1px rgba(var(--black-rgb), 0.7);
}

.win .match-info {
	background-color: rgba(var(--val-green-rgb), 0.15);
}
.loss .match-info {
	background-color: rgba(var(--val-red-rgb), 0.15);
}
.win .map-name {
	color: #5A5;
}
.loss .map-name {
	color: #B22;
}
.walkover .map-name {
	color: black;
}

.map-image {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	opacity: 0.8;

	filter: grayscale(0.8);
}

.match-data {
	display: flex;
	align-items: center;
	justify-content: space-around;
	height: 40px;
	line-height: 25px;
	margin-bottom: 0px;

	display: none;
}
.match-info {
	color: var(--white);

	position: relative;
	overflow: hidden;

	display: grid;
	justify-content: space-evenly;
	justify-items: center;
	align-items: center;

	grid-template-columns: 75px 110px 75px;
	grid-template-rows: 40px 70px;
	column-gap: 0;
	row-gap: 0;
}
.match-info .team-logo {
	display: inline-block;
	width: 70px;
	height: 50px;
	margin: 5px 0;
	filter: drop-shadow(0px 0px rgba(var(--white-rgb), 1));

	background: no-repeat center / contain;

	grid-row: 2;
}

.team_1 {
	grid-column: 1;
}
.team_2 {
	grid-column: 3;
}

.team-divider {
	grid-row: 2;
	grid-column: 2;

	display: none;
}

.map-name {
	grid-row: 1;
	grid-column: 2;

	justify-self: stretch;
	align-self: flex-start;

	padding: 0 3px;
	color: var(--black);
	background-color: rgba(var(--white-rgb), 0.8);
	background-color: rgba(var(--white-rgb), 1);
	font-weight: 500;
}
.match-score {
	grid-row: 2;
	grid-column: 2;

	/* margin-top: 5px; */
	margin-bottom: 5px;

	font-size: 36px;
	font-weight: normal;
	font-weight: 600;
	font-style: normal;

	letter-spacing: 0.05em;

	display: flex;
	justify-content: space-evenly;
	align-items: center;

	width: 100px;
}
.match-score .score {
	display: inline-block;
	/* width: 30px; */
}

.score-divider {
	font-size: 30px;
}

.match-score:empty {
	display: none;
}

.match-score .win {
	font-weight: 800;
}


.match-score:empty ~ .team-divider {
	grid-row: 1 / span 2;
}

.team-abbr {
	font-size: 24px;
}

/* abbr + vs background */
.show-scores .team-divider,
.show-scores .team-abbr {
	justify-self: stretch;
	/* background-color: rgba(var(--black-rgb), 0.5); */
}

/* Logo Background - Disabled */
.logo-bg {
	position: absolute;
	width: 175px;
	height: 125px;
	top: 50%;
	opacity: 0.5;
	background: no-repeat center;
	background-size: contain;
	filter: grayscale(10%) saturate(75%);

	display: none;
}
.match-info .logo-bg {
	z-index: 0;
}
.team1-logo-bg {
	transform: translate(-50%, -50%);
	left: 15%;
	-webkit-mask-image: linear-gradient(to right, black 50%, transparent);
}
.team2-logo-bg {
	transform: translate(50%, -50%);
	right: 15%;
	-webkit-mask-image: linear-gradient(to left, black 50%, transparent);
}