/*
@import '../../playr/css/schedule.css';
*/
@import 'intermission_timer_base.css';
@import 'sponsor_rotator.css';
@import 'top_header.css';

:root {
	--sidebar-width: 292px;
	--lt-height: 165px;

	--abbr-width: 90px;

	--logo-size: 150px;
	--logo-width: calc(var(--logo-size) * 1.5);
	--logo-height: var(--logo-size);

	--match-border: 2px;

	--score-divider-width: 35px;
	--team-score-width: 75px;

	/* --schedule-width: calc(1920px - 1600px); */
	/* --schedule-width: var(--sidebar-width); */
	/* --schedule-margin: 0px; */
	/* --match-width: var(--schedule-width); */
	/* --match-result-width: calc(var(--team-score-width)* 2 + var(--score-divider-width)); */
}

.top-bar {
	left: calc(var(--sidebar-width) + 75px);
}
.top-bar .game-title {
	grid-column: 1;
	order: 1;
}
.top-bar .bar-matchup {
	grid-column: 4;
}

.sidebar {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: var(--sidebar-width);

	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;

	grid-auto-flow: row;
	grid-template-rows: 150px 100px auto var(--lt-height);
	background: left top url('../img/bg/prism_bw6.jpg') no-repeat;
	background-size: 1920px 1080px;

	padding-top: 45px; /* Logo spacing */
	align-content: space-between;
}
body:before { /* star */
	content: '';
	-webkit-mask: url('../img/rivals_star.png') no-repeat center / contain;
	background-color: var(--primary-color);
	width: 1920px;
	height: 1080px;
	z-index: 5;
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
}
.caster-ticker:before {
	display: none;
}
.caster-ticker .sidebar-match {
	display: none;
}
.caster-ticker .lower-third,
.caster-ticker .timer-container {
	border-top: 2px solid var(--primary-color);
}
.caster-ticker .lower-third {
	border-left: 2px solid var(--primary-color);
}
.timer.small {
	font-size: 60px;
}
.timer.small span {
	width: 32px;
}
.timer.small .digit {
	width: 36px;
}

.rivals-logo {
	width: 100%;
	height: 85px;
	margin-bottom: 0;
}

.sidebar-match:empty ~ .rivals-socials {
	height: calc(100% - 85px - var(--lt-height));
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	margin-bottom: 0.5em;
}
.rivals-socials {
	font-size: 28px;
	text-align: left;
	line-height: 1.5em;
	order: 9;
	font-family: "Space Mono", sans-serif;
	display: none;
	color: var(--light-text-color);
}
.socials-header {
	font-weight: 700;
}
.rivals-social {
	display: flex;
	height: 1.5em;
}
.rivals-social .suffix span {
	color: var(--light-color);
}
.suffix {
	display: flex;
	flex-direction: column;
	animation-delay: 1s;
	animation-timing-function: ease-out;
	transition: transform 0.25s ease-out;
	overflow: hidden;
	height: 100%;
	
	/* Mask: black = fully visible) */
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 0.25em, black calc(100% - 0.25em), transparent 100%);
}
.suffix span {
	animation: cycle-socials 16s infinite;
}

@keyframes cycle-socials {
    0% { transform: translateY(0); }
    10% { transform: translateY(-100%); }
    25% { transform: translateY(-100%); }
    35% { transform: translateY(-200%); }
    50% { transform: translateY(-200%); }
    60% { transform: translateY(-300%); }
    75% { transform: translateY(-300%); }
    85% { transform: translateY(-400%); }
    100% { transform: translateY(-400%); }
}

.lower-third {
	position: absolute;
	bottom: 0;
	left: var(--sidebar-width);
	right: 0;
	line-height: 1;
	height: var(--lt-height);
	display: grid;
	grid-template-columns: 1fr 460px;
	grid-template-rows: 1fr 1fr;

	background: right bottom url('../img/bg/prism_bw6.jpg') no-repeat;
	background-size: 1920px 1080px;

	align-items: center;
	justify-content: center;
	align-content: center;
	text-align: left;
	color: var(--light-text-color);
	text-shadow: 0.025em 0.025em rgba(var(--black-rgb), 0.7);
}
.lower-third:before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(var(--black-rgb), 0.3);
	z-index: 0;
}

.caster-ticker .sidebar:before {
	content: '';
	background: left bottom url('../img/bg/prism_bw6.jpg') no-repeat;
	background-size: 1920px 1080px;
	width: var(--sidebar-width);
	height: var(--lt-height);

	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 0;
}

.theme-cs2 .sidebar, .theme-cs2 .sidebar:before, .theme-cs2 .lower-third {
	background-image: url('../img/bg/prism_cs6.jpg');
}
.theme-lol .sidebar, .theme-lol .sidebar:before, .theme-lol .lower-third {
	background-image: url('../img/bg/prism_lol4.jpg');
}
.theme-val .sidebar, .theme-val .sidebar:before, .theme-val .lower-third {
	background-image: url('../img/bg/prism_val7.jpg');
}
.caster-ticker .sidebar {
	background-image: none;
}

.title, .sub-title {
	padding: 5px 30px;
	transition: opacity 0.5s, line-height 0.2s;
	line-height: 1.25em;
}
.title {
	opacity: 1;
	order: 1;
	max-height: 90px;
	border-bottom: 2px solid var(--primary-color);
	font-size: 45px;
	font-family: "Space Mono", "Satoshi", sans-serif;
	font-weight: 600;
	z-index: 3;
}
.sub-title {
	opacity: 1;
	order: 2;
	font-size: 28px;
	color: var(--gray);
	color: rgba(var(--white-rgb), 0.9);
	z-index: 3;
}

.title:empty,
.bottom-text:empty {
	opacity: 0;
	padding: 0;
}
.sub-title:has(.bottom-text:empty) {
	display: none;
}
.sub-title:has(.bottom-text:empty) ~ .title {
	color: var(--light-text-color);
}

.sponsor-wrapper {
	grid-column: 2;
	grid-row: 1 / 2 span;
	position: relative;
	/* background: linear-gradient(to top right, var(--dark-color), var(--light-color), var(--dark-color)); */
	align-items: center;
	justify-items: center;
	border-left: 2px solid var(--primary-color);
	height: 100%;
	z-index: 3;
}
#sponsors {
	position: absolute;
	left: 50%;
	right: auto;
	top: calc(50% + 0.5em);
	bottom: auto;
	transform: translate(-50%,-50%);
	font-size: 25px;
	color: var(--light-text-color);
	text-align: center;
}
#sponsors:before {
	margin-bottom: 0.25em;
}

.intermission-text {
	order: 2;
	display: none;
}
.intermission-text:before {
	content: 'Current Match';
}


/* Match Data */
.sidebar-match {
	padding: 0 1em;
	order: 3;
	font-family: "Space Mono", sans-serif;
	align-items: center;
	width: 100%;
}
.match-data {
	font-size: 40px;
	font-weight: 400;

	white-space: nowrap;

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

	text-shadow: 1px 1px rgba(var(--text-shadow), 0.5);

	display: flex;
	gap: 0.5em 0;
	flex-direction: column;
}

/* Teams data */
.match-teams {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 0.6em 0.2em;
}

/* Match Stats team info */
.team {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 0.3em;

	position: relative;
	z-index: 1;
}
.team-abbr {
	order: 2;
}
.team:not(.tbd) {
	/* background-color: rgba(var(--black-rgb), 0.25); */
}
/*.match-teams .team-name:empty,
.match-teams .team-name,
.match-stats .team-name {
	display: none;
}*/
.team-name {
	white-space: normal;
	font-size: 30px;
	line-height: 1;
	order: 2;
	display: none;
}
.team-divider {
	color: var(--primary-color);
}

/* Team Logo */
.team-logo {
	width: var(--logo-width);
	height: var(--logo-height);
	flex-shrink: 0;
	/* border-radius: 4px; */
	background: no-repeat center / contain;
}
.team_1_logo { order: 1; }
.team_2_logo { order: 3; }
.tbd .team-logo {
	background-image: url('../img/RIVALS_LOGOMARK.png');

	display: flex;
	justify-content: center;
	align-items: center;
}
/*.tbd .team-logo:before {
	content: 'tbd';
	text-transform: uppercase;
	color: var(--gray);
	font-style: italic;
	font-size: 40px;
	font-weight: 800;
}*/

/* Match result */
.team-score {
	font-variant-numeric: tabular-nums;
	font-family: "Satoshi", sans-serif;
	letter-spacing: 0.05em;
	width: 90px;
	line-height: 1.5em; /* 60px */
	background-color: var(--primary-color);
	color: var(--text-color);
	font-weight: 500;
}
.team_1_score { order: 3; }
.team_2_score { order: 1; }
.has-tbd-team .team-score,
.team-score:empty {
	display: none;
}
.team-score.win {
	font-weight: 700;
}

/* Alternative display when there is map information */
.sidebar-match.map-data .match-teams {
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: 2fr 2fr;
}
.map-data .team-logo {
	order: 1;
	width: 100px;
	height: 80px;
}
.map-data .team-divider {
	display: none;
}
.map-data .team-abbr { order: 2; }
.map-data .team-score { order: 3; }

/* MAPS */
.match-maps {
	display: flex;
	flex-direction: column;
	gap: 0.5em 0;
	position: relative;
	z-index: 4;
	order: 2;
}
.match-maps:empty {
	display: none;
}
.match-maps.has-map-score[data-bestof="1"][data-maps="1"] ~ .match-teams .team-score {
	display: none;
}
.series-map {
	position: relative;
	height: 120px;
	margin-bottom: 35px; /* mapname */

	display: flex;
	align-items: center;
	justify-content: center;
}
.series-mapscore {
	font-size: 45px;
	line-height: 1;
	font-weight: 400;
	/* text-shadow: 0.15em 0.15em rgba(var(--text-shadow-color), 0.75); */
	/* -webkit-text-stroke: 1px rgba(var(--black-rgb), 0.75); */
	display: none;
	z-index: 5;
}
.mapscore.mapwin {
	font-weight: 600;
}
.series-mapscore:not(:empty) {
	display: initial;
}
.match-maps[data-maps="4"] { gap: 0.25em; }
.match-maps[data-maps="5"] { gap: 0.25em; }
.match-maps[data-maps="4"] .series-map { height: 85px; }
.match-maps[data-maps="5"] .series-map { height: 60px; }
.series-map:before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 0;
	opacity: 1;
	background-color: rgba(var(--black-rgb), 0.25);
}
.series-map:before {
    /* background: linear-gradient(to bottom, rgba(var(--secondary-color-rgb), 0.05) 40%, var(--primary-color) 100%) 0%; */
}
.series-mapname {
	font-size: 22px;
	line-height: 35px;
	font-weight: 500;
	background-color: var(--primary-color);
	color: var(--text-color);
	width: 100%;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
}
.series-mapname:empty {
	display: none;
}
.series-mapvideo,
.series-mapimage {
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	opacity: 1;
	transition: 0.6s all;
	filter: saturate(1.25);
}
.mapvideo-container {
	overflow: hidden;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
}
.series-mapvideo {
	width: 125%;
	height: 125%;
	transform: translate(-50%,-50%);
	left: 50%;
	top: 50%;
	bottom: auto;
	object-fit: cover;
}

/* Match decoration */
.map-corners {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	font-size: 20px;
	color: var(--white);
}
.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;
}
.corners-bottom:before,
.corners-bottom:after {
	border-top-width: 0;
	bottom: 0;
}


/* DEBUG */
/*.match-results { background-color: yellow; }
.match-teams { background-color: indigo; }*/