:root {
	--schedule-width: 400px;
	--schedule-margin: 0px;
	--schedule-width: calc((1920px - (var(--right-offset) * 2) - var(--schedule-margin)) / 3); /* 570 */
	--schedule-width: 550px;

	--match-width: 640px;

	--abbr-width: 90px;

	--team-info-height: 60px;
	--match-info-height: 30px;

	--logo-size: 120px;

	--match-border: 6px;

	--score-divider-width: 35px;
	--team-score-width: 75px;
	--match-result-width: calc(var(--team-score-width)* 2 + var(--score-divider-width));
}

.schedule {
	position: absolute;
	top: calc((var(--top-offset) / 2) + 84px + 16px);
	top: 75px;
	bottom: 75px;
	right: calc(var(--right-offset));


	z-index: 1;
	text-transform: uppercase;

	gap: 50px;

	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	flex-direction: row;

	text-align: center;

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

.schedule-header {
	/* display: none; */
	opacity: 0;
}

.matches {
	display: flex;
	flex-direction: column;

	width: var(--match-width);
	width: var(--schedule-width);

	background: no-repeat 10% top / cover;
}
.matches:empty {
	display: none;
}

.match {
	position: relative;
	height: calc(var(--logo-size) + var(--team-info-height) + var(--match-border) + var(--match-info-height));
	margin-top: 20px;

	display: flex;
	justify-content: stretch;
	align-items: center;
	flex-wrap: wrap;

	color: var(--white);
	gap: var(--match-border);
	/* background-color: rgba(var(--black-rgb), 0.5); */
	background-position: center;
	background-size: cover;
}
.ticker .match {
	height: calc(80px + var(--team-info-height) + var(--match-border) + var(--match-info-height));
}
.ticker .team-logo {
	width: 64px;
	height: 64px;
}
.ticker .match-game {
	bottom: calc(100% + 80px + var(--match-border));
}
.match:first-child {
	margin-top: 0px;
}
.live.match {
	/* border: 1px solid var(--primary-color); */
}
.completed.match {
	opacity: 0.9;
}
.match-state {
	line-height: var(--match-info-height);
}
.match-state:not(:empty) {
	width: var(--logo-size);
	right: 0;
	position: absolute;
}
.live .match-state:empty:after {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	font-size: 20px;
	line-height: 30px;
}
.has-scores[data-game=""] .match-state {
	display: none;
}
.live .match-state:empty:after {
	content: 'Up Next';
	color: var(--black);
	background: var(--light-color);
	padding: 0 8px;
	z-index: 2;

	order: 2;
}
.live.has-scores .match-state:empty:after {
	content: 'LIVE •';
	padding: 0 6px;
	padding-left: 9px;
	bottom: 0;
	left: auto;
	right: 0;
	transform: initial;
	width: var(--logo-size);
}
.has-scores.completed:not(.live) .match-state:empty:after,
.match.live.completed .match-state:empty:after {
	content: 'Result';
	color: var(--white);
	background-color: var(--secondary-color);
	bottom: 0;
	left: auto;
	right: 0;
	transform: initial;
	width: var(--logo-size);
	position: absolute;
}
.match-stage:not(:empty):after {
	content: '';
	display: none;
}

/* Match Data */
.match-data {
	order: 2;
	display: grid;
	align-content: center;
	align-items: center;
	justify-content: space-between;
	grid-template-columns: 2fr 1fr 2fr;
	/* flex-wrap: wrap; */
	font-size: 20px;
	line-height: 1;
	height: var(--match-info-height);
	padding: 0 12px;
	white-space: nowrap;

	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--primary-color);
	color: var(--text-color);

	/* display: none; */
}
/*
.live .match-data {
	background-color: rgba(var(--black-rgb), 0.75);
	color: var(--white);
}*/
/* force game + stage + box to new line */
.match-data:before {
	content: '';
	width: 100%;
	height: 0px;
	display: inline-block;
	order: 3;
}
.has-scores:not([data-game=""]) .match-data:before {
	/* height: 56px; */
}

/* Teams before 'data' */
.match-teams {
	display: flex;
	align-items: center;
	justify-content: space-between;
	order: 0;

	height: var(--team-info-height);
	font-size: 20px;
	line-height: 1;
	padding: 0 12px;

	/* background-color: rgba(var(--black-rgb), 0.25); */
	/* color: var(--dark-text-color); */
	/* color: var(--text-color); */
	background-color: rgba(var(--light-color-rgb), 0.9);
	/* border-bottom: var(--match-border) solid transparent; */
	width: 100%;
	font-weight: 700;

	/* display: none; */
}
/*
.live .match-teams {
	background-color: rgba(var(--white-rgb), 1);
	color: var(--black);
	border-bottom-color: var(--black);
}*/
.has-results .match-teams {
	/* display: none; */
}
.team-divider {
	flex-shrink: 0;
}
.match-teams .team-divider {
	display: none;
}

.match-date {
	/*position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);*/
	z-index: 99;

	display: flex;
	align-items: center;
	justify-content: flex-end;
	white-space: nowrap;
}
.has-time .match-date {
	/* padding: 0 12px; */

}
.completed:not(.has-tbd-team) .match-date,
.has-scores:not(.has-tbd-team) .match-date {
	display: none;
}
.live .match-date {
	/* display: none; */
	/* margin: 0 0.5em; */
}
.match-day:not(:empty), .match-time:not(:empty) {

}
.match-stage:not(:empty) ~ .match-round:not(:empty):before,
.match-day:not(:empty) ~ .match-time:not(:empty):before {
    content: '- ';
    margin-left: 0.2em;
}

/* game info (icon + title) */
.match-game {
	display: flex;
	justify-content: space-between;
	align-items: center;
	white-space: nowrap;

	height: var(--match-info-height);
	gap: 0.15em;
	position: absolute;
	bottom: calc(100% + var(--logo-size) + var(--match-border) + (var(--team-info-height) / 4));
	left: 50%;
	transform: translateX(-50%);
}
.game-title {
	display: none;
}
.game-icon {
	font-size: 30px;
	width: 1em;
	height: 1em;
	-webkit-mask: no-repeat right center / contain;
	background-color: var(--white);
}
[class="game-icon"] { display: none; }
.game-icon.cs, .game-icon.counter-strike, .game-icon.cs2 { -webkit-mask-image: url('../img/icon-cs2.png'); }
.game-icon.dota, .game-icon.dota2 { -webkit-mask-image: url('../img/dota2_logo.png'); }
.game-icon.lol, .game-icon.leageue-of-legends { -webkit-mask-image: url('../img/icon-lol.png'); }
.game-icon.rl, .game-icon.rocket-league { -webkit-mask-image: url('../img/rocketleague_logo.png'); }
.game-icon.val, .game-icon.valorant { -webkit-mask-image: url('../img/icon-val.png'); }

.live .game-icon {
	/* background-color: var(--black); */
}

.live.in-progress:not(.has-scores) .game-icon.cs2 {
	/* align-self: flex-start; */
}
.live.in-progress:not(.has-scores) .match-game {
}
.live.in-progress:not(.has-scores) .match-stage {
}
.live.in-progress:not(.has-scores) .match-game:not(:empty) ~ .match-stage:before {
	content: '';
}

.match-best-of {
	font-size: 15px;
	border: 1px solid;
	padding: 0.2em 0.5em;
	line-height: 1;
	justify-self: center;
}
.match-stage:empty ~ .match-best-of:not(:empty):before,
.match-round:empty ~ .match-best-of:not(:empty):before,
.match-best-of:not(:empty):before {
	content: 'BO';
}

/* Ordering data */
.match-tournament-stage {
	grid-row: 1;
	grid-column: 1;
	white-space: nowrap;
	text-align: left;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}
.match-stage { order: 1; }
.match-round { order: 2; }
.match-game { order: 3; }
.match-division { order: 4;
	position: absolute;
	/*
	bottom: calc(var(--logo-size) + var(--match-border));
	line-height: 24px;
	color: var(--light-text-color);
	left: 50%;
	transform: translateX(-50%);
	*/
	font-weight: 600;
	color: var(--white);
	background-color: var(--dark-color);
	transform: rotate(-90deg) translate(0px, 0px);
	transform-origin: top left;
	left: -35px;
	line-height: 35px;
	top: 100%;
	bottom: auto;
	min-width: auto;
	width: 150px;

}
.match-division:not(:empty):before { content: 'Division '; }
.match-division.group-only:not(:empty):before { content: 'Group '; }
.match-best-of { order: 7; grid-row: 1; grid-column: 2; }
.match-date { order: 8; grid-row: 1; grid-column: 3; }

.match[data-game=""] .match-data {
	font-size: 20px;
	top: 0;

	text-align: left;
	display: grid;
	align-items: flex-start;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr auto;
}
.match[data-game=""] .match-data:before {
	display: none;
}
.match[data-game=""] .match-date {
	order: 2;

	justify-self: flex-end;
	align-self: flex-end;

	grid-row: 1;
	grid-column: 2;
}
.match[data-game=""] .match-game {
	background-color: var(--white);
	order: 1;

	justify-self: flex-start;
	grid-row: 1;
	grid-column: 1;
}
.match:not([data-game=""]) .match-game:not(:empty) ~ .match-stage:before {
	/* content: ' - '; */
	/* margin-left: 0.15em; */
}

/* Match Stats (logos & result) */
.match-stats {
	display: grid;
	grid-template-columns: var(--logo-size) 1fr var(--logo-size);
	gap: 0;
	width: 100%;
	height: calc(100% - var(--team-info-height) - var(--match-border));
	position: relative;
	align-items: flex-start;
	justify-items: center;
}
[data-game=""] .match-stats {
	display: none;
}
[data-game=""] .match-stage {
}
.has-scores:not(.completed):not(.live) .match-result {
	/* margin-bottom: 35px; */
}
.live:not(.has-scores):not(.has-tbd-team) .match-result {
	padding-bottom: 30px;
}

/* Match Stats team info */
.team {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 100%;
	height: calc(100% - var(--match-info-height));

	position: relative;
	z-index: 1;
}
.team:not(.tbd) {
	background-color: rgba(var(--black-rgb), 0.25);
}
.team_1 {
}
.team_2 {
}
.match-teams .team-abbr,
.match-stats .team-abbr {
	display: none;
}
.team-name:empty + .team-abbr.tbd {
	display: inline-block;
	font-style: italic;
	opacity: 0;
}
.team-abbr {

}
.match-teams .team-name:empty,
.match-stats .team-name {
	display: none;
}
.match-teams .team-name {
	width: 45%;
}
.team_1_name {
	text-align: left;
}
.team_2_name {
	text-align: right;
}
.team-logo {
	width: 80px;
	height: 80px;
	flex-shrink: 0;
	/* border-radius: 4px; */
	filter: drop-shadow(0px 0px rgba(var(--white-rgb), 1));
	background: no-repeat center / contain;
}
.tbd .team-logo {
	/* background-image: url('../img/lul_icon_white.png'); */

	opacity: 0.8;

	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;

	/* display: none; */
}

/* Match result */
.match-result {
	display: flex;
	justify-content: center;
	align-items: center;
	justify-items: center;
	position: relative;
	z-index: 2;

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

	/* width: var(--match-result-width); */
	height: calc(100% - var(--team-info-height) + var(--match-info-height));
	width: 100%;

	font-size: 60px;
	font-weight: 600;

	/* color: var(--text-color); */
}
.has-scores .match-result,
.live .match-result,
.completed .match-result {
	display: flex;
}
.has-tbd-team .match-state,
.completed:not(.has-scores) .match-state {
	display: none;
}
.team-score {
	line-height: 1;
	/* font-variant-numeric: tabular-nums; */
	width: var(--team-score-width);
	letter-spacing: 0.05em;
}
.has-tbd-team .team-score,
.team-score:empty {
	display: none;
}
.team-score:empty ~ .team-score:empty ~ .score-divider {
	/* display: none; */
}
.has-tbd-team .score-divider:before,
.team-score:empty ~ .team-score:empty ~ .score-divider:before {
	content: 'VS';
	order: 2;
	font-weight: 700;
}
.score-divider:not(:empty) {
	width: var(--score-divider-width);
	order: 3;
	margin: 0 0.1em;
}
.team_1_score {
	text-align: right;
}
.team_2_score {
	text-align: left;
	order: 4;
}
.has-scores:not(.has-tbd-team) .score-divider:before {
	content: ":";
	font-weight: 600;
	margin: 0 0.1em;
}
.team-score.win {
	font-weight: 800;
}
.completed .team-score:not(.win) {
	opacity: 0.75;
}

/* Match decoration */
.match-bg,
.match-corners {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	z-index: -1;
	font-size: 15px;
	color: var(--primary-color);
}
.match-corners {
	z-index: 10;
	height: var(--team-info-height);
}
.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;
}
.match-bg {
	height: auto;
	top: calc(var(--team-info-height) + var(--match-border));
	bottom: 0;
	background: no-repeat center;
	background-size: cover;
}
.match-bg[style]: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);
}
.theme-cs2 .match-bg { background-image: url('../img/bg/prism_cs6.jpg'); }
.theme-lol .match-bg { background-image: url('../img/bg/prism_lol4.jpg'); }
.theme-val .match-bg { background-image: url('../img/bg/prism_val7.jpg'); }

/* HIDE dumb stuff */
.playoff .match-group,
.match-group:empty {
	display: none;
}
.match-stream {
	display: none; /* no b-streams */
}

/* DEBUG */
/*.match-group { background-color: teal; }
.match-division { background-color: purple; }
.match-round { background-color: yellow; }
.match-teams { background-color: indigo; }*/