@import "top_header.css";
@import "sponsor_rotator.css";

.debug body:before {
	display: none;
}

.top-bar {
	display: grid;
	left: 75px;
	right: 75px;
	justify-content: space-evenly;
	grid-template-columns: repeat(5, 330px);
	gap: 40px;
}

.rivals-logo {
}

.page-name {
}

.bar-division {
	
}
/*.bar-division:not(:empty):before {
    content: 'PROMOTION ';
}*/
.theme-val[data-div*="cup"] ~ .top-bar .bar-division {
	font-size: 0px;
}
.theme-val[data-div*="cup"] ~ .top-bar .bar-division:before {
	content: 'LEGENDS Cup #1';
	font-size: 26px;
	line-height: 1.5em;
}
.bar-matchup,
.bar-tournament-stage {
	display: none;
}
.game-title {
}
.sponsor-wrapper {
	order: 5;
	grid-column: 5;
}
#sponsors {
	position: relative;
	bottom: auto;
	right: auto;
	font-size: 20px;
}
#sponsors:before {
	content: '';
}

/* Bracket lines */
:root {
	--bracket-line-width: 0px;
	--bracket-line-spacing: 30px;
	--bracket-line-connector: 30px;
	--bracket-line-thickness: 3px;

	--team-height: 50px;
	--team-gap: 7px;
	--match-gap: 8px;

	--logo-width: 40px;
	--score-width: 50px;
	--team-score-width: auto;
	--team-corner-line-thickness: 3px;
	
	--bracket-line-color: rgba(var(--white-rgb), 1);
}

.double_elimination [data-quarterfinal] {
	--bracket-line-spacing: 25px;
	--bracket-line-connector: 25px;
}
/*.single_elimination [data-roundof16][data-quarterfinal] .stage,
.double_elimination [data-quarterfinal][data-grandfinal] .stage,
.double_elimination [data-round1][data-quarterfinal] .stage,
.double_elimination [data-roundof-4][data-quarterfinal] .stage*/
.bracket[data-stages="4"] .stage {
	width: 400px;
	flex-basis: 400px;
}
.bracket[data-stages="5"] .stage {
	width: 320px;
	flex-basis: 320px;
}

/* Bracket */
.brackets {
	/*width: 1600px;*/ /* 3col = 1770px */
	/* height: 680px; */
	
	font-family: "Space Mono", sans-serif;

	color: var(--white);
	font-size: calc(var(--team-height) * 0.6);
	line-height: var(--team-height);

	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: calc(var(--top-offset) + 130px + 40px);
	bottom: calc(var(--bottom-offset) * 1.5);

	display: flex;
	flex-direction: row;

	justify-content: space-evenly;
	/*background-color: rgba(33,33,33,.3);*/
}
.brackets.pages {
	align-items: flex-start;
	gap: 10px;
	flex-wrap: row;
}
.double_elimination.brackets {
	width: 92%;
	bottom: 50px;
	flex-direction: column;
	justify-content: space-between;
}

.bracket {
	position: relative;

	display: grid;
	grid-template-columns: 1fr 1fr;

	justify-content: center;

	gap: 0 calc(var(--bracket-line-width) + var(--bracket-line-thickness) + var(--bracket-line-spacing) + var(--bracket-line-connector));
}
.bracket:empty {
	display: none;
}
.upper_bracket,
.lower_bracket,
.bracket[data-grandfinal],
.bracket[data-quarterfinal],
.bracket[data-stages="3"] {
	grid-template-columns: 1fr 1fr 1fr;
}
.single_elimination .stage.bronze {
	grid-row: 2;
	grid-column: 2;
	margin-top: 40px;
}
.single_elimination .stage.final {
	grid-column: 2;
}
.bracket[data-quarterfinal] .stage.bronze,
.single_elimination .bracket[data-quarterfinal] .stage.final {
	grid-column: 3;
}
.bracket[data-roundof16] .stage.bronze,
.single_elimination .bracket[data-roundof16] .stage.final {
	grid-column: 4;
}
.single_elimination .bracket {
	grid-template-rows: 1fr 210px; /* fits bronze match in single elim */
}
/*.single_elimination .bracket[data-roundof16][data-quarterfinal],
.double_elimination .bracket[data-quarterfinal][data-grandfinal],
.double_elimination .bracket[data-round1][data-quarterfinal],
.double_elimination .bracket[data-roundof-4][data-quarterfinal]*/
.bracket[data-stages="4"] {
	grid-template-columns: 1fr 1fr 1fr 1fr;
}
.double_elimination .bracket[data-stages="5"] {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.bracket[data-stages="6"] {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
.lower_bracket {
	padding: 0 calc((var(--bracket-line-width) + var(--bracket-line-thickness) + var(--bracket-line-spacing) + var(--bracket-line-connector)) / 2);
	gap: 0 calc((var(--bracket-line-width) + var(--bracket-line-thickness) + var(--bracket-line-spacing) + var(--bracket-line-connector)) / 2);
}
.double_elimination .bracket:only-child {
    flex-grow: 1;
}
.double_elimination .bracket:only-child:before {
    width: 100%;
}

/* Stage */
.stage {
	width: 500px;
	
	display: flex;
	flex-basis: 0;
	flex-grow: 1;
	flex-direction: column;
	justify-content: center;

	position: relative;
}
.single_elimination .stage {
	grid-row: 1/2 span;
	gap: calc((var(--team-height) - var(--team-gap)) / 2)
}
.double_elimination .stage {
	justify-content: center;
	gap: var(--match-gap);
}
.bracket[data-stages="6"] .stage {
	width: auto;
}

/* Match */
.match {
	text-align: center;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--team-gap);
	/* margin: calc(var(--team-height) / 2) 0px; */
	/* border: 2px solid var(--white); */
}
.match.current:after {
	content: '';
	position: absolute;
	top: -2px; bottom: -2px;
	left: -2px; right: -2px;

	border: 4px solid var(--white);
	z-index: 99;
	display: none;
}
.double_elimination .match {
	margin: 0;
}

/* Match Highlight */
.current .team {
    /*background-color: var(--light-color);
    color: var(--dark-text-color);*/
    background-color: var(--primary-color);
    color: var(--text-color);
}
.upper_bracket .grand-final .match.current:after,
.playoff_bracket .final .match.current:after {
	/* border-color: var(--primary-color); */
}

/* Team data */
.team {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	gap: 5px;
	align-items: center;
	
	height: var(--team-height);
	
	background-color: rgba(var(--dark-color-rgb),0.5);
}
.team:first-child {
	/* margin-bottom: var(--team-gap); */
}
.team:nth-child(2) {
}
.team:first-child .team-score {
}
.team.win {
	font-weight: 600;
}
.team.loss {
}
.team.loss:first-child .team-name,
.team.loss:first-child .team-abbr,
.team.loss:first-child .team-score {
	color: rgba(var(--light-text-color-rgb), 0.8);
}
.team.loss .team-name,
.team.loss .team-abbr,
.team.loss .team-score {
	color: rgba(var(--light-text-color-rgb), 0.8);
}

.team-logo {
	display: inline-block;
	vertical-align: top;
	width: calc(var(--logo-width) * 1.2);
	height: var(--logo-width);
	margin: 0 10px;

	/* filter: drop-shadow(0px 0px rgba(var(--black), 1)); */

	order: 1;
	flex-shrink: 0;
	position: relative;

	background: center center / contain no-repeat;
}
.team-info {
	order: 2;
	height: 100%;
	width: calc(100% - (var(--logo-width) * 1.5) - 18px - var(--score-width));
	text-align: left;
	white-space: nowrap;
	flex-grow: 1;
	font-family: "Satoshi", sans-serif;
	letter-spacing: -0.025em;
	position: relative; /* stack team-name and team-abbr */
}
.bracket[data-stages="6"] .team-info {
	display: none;
}
.team-name {
	width: 100%;
	flex-grow: 1;
}
.team-name, .team-abbr {
	display: block;
	width: 100%;
	/* grid-column: 1; */
	/* grid-row: 1; */
	align-items: center;
	justify-content: flex-start;
	position: absolute;
	top: 0; bottom: 0;
	left: 0; right: 0;
	z-index: 3;
}
.team-abbr {
	opacity: 0;
}
.team-abbr:empty {
	display: none;
}
.tbd .team-name {
	font-style: italic;
	padding-left: 1em;
}
/* Score */
.team-score {
	order: 3;
	width: var(--score-width);
	background-color: var(--secondary-color);
	color: var(--text-color);
	flex-shrink: 0;
	align-self: flex-end;
}
.theme-lol .team-score {
	color: var(--light-text-color);
}
.win .team-score {
	font-weight: 800;
	color: var(--text-color);
	background-color: var(--primary-color);
}
.match:not(.current) .team-score:empty {
	display: none;
}
.team-score:empty ~ .team-info {
	width: calc(100% - 24px);
	padding: 0 12px;
}
.team-logo ~ .team-score:empty ~ .team-info {
	width: calc(100% - (var(--logo-width) * 1.5) - 16px);
	padding: 0 0;
}

/* Round of 16 exceptions 
   - Horizontal teams + reordered info
*/
.round-of-16 .match,
.bracket[data-stages="6"] .match {
	display: flex;
	flex-direction: row;
}
.round-of-16 .team,
.bracket[data-stages="6"] .team {
	width: 50%;
}
.round-of-16 .team-name,
.bracket[data-stages="6"] .team-name {
	opacity: 0;
}
.round-of-16 .team-abbr,
.bracket[data-stages="6"] .team-abbr {
	opacity: 1;
}
.round-of-16 .team-logo,
.bracket[data-stages="6"] .team-logo { margin: 0 6px; }
.round-of-16 .team + .team .team-logo,
.bracket[data-stages="6"] .team + .team .team-logo { order: 3; }
.round-of-16 .team + .team .team-score,
.bracket[data-stages="6"] .team + .team .team-score { order: 1; }
.round-of-16 .team + .team .team-info,
.bracket[data-stages="6"] .team + .team .team-info { order: 2; text-align: right; }
/*[data-roundof16] .round-of-16 .team-name {
	opacity: 0;
	position: absolute;
	top: 0;
}
[data-roundof16] .round-of-16 .team-abbr {
	opacity: 1;
}*/

/* Stage texts */
.stage .match:first-child:before {
	content: 'Stage';
	position: absolute;

	left: 0;
	right: 0;
	bottom: 100%;

	text-align: left;
	font-size: 24px;
	line-height: 30px;
	margin-bottom: var(--bracket-line-thickness);
}

.round-1 .match:first-of-type:before { content: 'Round 1'; }
[lang="se"] .round-1 .match:first-of-type:before { content: 'Runda 1'; /* SE */ }
.round-2 .match:first-of-type:before { content: 'Round 2'; }
[lang="se"] .round-2 .match:first-of-type:before { content: 'Runda 2'; /* SE */ }
.round-3 .match:first-of-type:before { content: 'Round 3'; }
[lang="se"] .round-3 .match:first-of-type:before { content: 'Runda 3'; /* SE */ }
.round-of-4 .match:first-of-type:before { content: 'Round of 4'; }
[lang="se"] .round-of-4 .match:first-of-type:before { content: 'Runda av 4'; /* SE */ }
.round-of-16 .match:first-of-type:before { content: 'Round of 16'; }
[lang="se"] .round-of-16 .match:first-of-type:before { content: 'Runda av 16'; /* SE */ }
.stage.quarterfinal .match:first-child:before {
	content: 'Quarter Finals';
	content: 'Quarterfinals';
}
[lang="se"] .stage.quarterfinal .match:first-child:before { content: 'Kvartsfinal'; /* SE */ }
.stage.semifinal .match:first-child:before {
	content: 'Semifinals';
}
[lang="se"] .stage.semifinal .match:first-child:before { content: 'Semifinal'; /* SE */ }
.stage.bronze .match:first-child:before {
	content: 'Bronze Match';
	content: '3rd place decider';
}
[lang="se"] .stage.bronze .match:first-child:before { content: 'Bronsmatch'; /* SE */ }
.stage.final .match:first-child:before {
	content: 'Finals';
	content: 'Grand Final';
}
.upper_bracket .stage.final .match:first-child:before {
	content: 'Upper Final';
}
.lower_bracket .stage.final .match:first-child:before {
	content: 'Lower Final';
}
[lang="se"] .stage.final .match:first-child:before { content: 'Final'; /* SE */ }
.stage.grand-final .match:first-child:before {
	content: 'Grand Finals';
}

/* Match info (date/time/location) */
.match-info {
	order: 3;
	position: absolute;
	left: 0;
	bottom: calc(100% + 30px + var(--bracket-line-thickness));
	font-size: 24px;
	line-height: 30px;
	white-space: nowrap;
	color: var(--light-text-color);
	text-align: left;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	column-gap: 0.5em;
}
.match-location {
	width: 100%;
	flex-grow: 1;
	order: 0;
}
.match-time {
	order: 3;
}
.match-time:before {
	content: '-';
	margin: 0.2em;
}
.double_elimination .grand-final .match-info,
.single_elimination .final .match-info {
	/* background: var(--light-color); */
	/* color: var(--black); */
}
.round-of-16 .match-info,
.upper_bracket .quarterfinal .match-info,
.lower_bracket .stage:not(.semifinal):not(.final) .match-info,
.match-date:empty {
	display: none;
}

/* Bracket lines */
.team:after {
	content: '';
	position: absolute;
	left: 100%;
	width: var(--bracket-line-width);
	height: calc(var(--team-height) / 2);
	border: var(--bracket-line-thickness) solid var(--bracket-line-color);
	border-left-width: 0;

	display: none;
}
.team:first-child:after {
	border-bottom-width: 0;
	bottom: 0;
}
.team + .team:after {
	border-top-width: 0;
	top: 0;
}
.team.tbd:after {
	display: none;
}
.stage:not(.round-of-16) .match:nth-child(even) .team:first-child:before,
.stage.round-of-16 .match:nth-child(even) .team:last-child:before { /* ] */
	content: '';
	position: absolute;
	border: var(--bracket-line-thickness) solid var(--bracket-line-color);
	border-left-width: 0;
	width: calc(var(--bracket-line-spacing) + (var(--bracket-line-thickness) * 1));
	/* height: calc((var(--team-height) * 3) - var(--team-gap) + (var(--bracket-line-thickness) * 1)); */
	/* height: calc((var(--team-height) * 2) + var(--match-gap) + (var(--bracket-line-thickness) * 3)); */
	/* height: calc((var(--team-height) * 3) - ((var(--match-gap) + var(--team-gap)) * 2)); */
	/* height: calc((var(--team-height) * 3) + ((var(--match-gap) + var(--team-gap)) * 1)); */
	height: 180px;
	left: calc(100% + var(--bracket-line-width));
	bottom: calc(-1 * var(--bracket-line-thickness) / 2);
	
	margin-bottom: calc((var(--bracket-line-thickness) / 2) * -2);
}
.double_elimination .match:nth-child(even) .team:first-child:before { /* ] */
	height: calc((var(--team-height) * 2) + var(--match-gap) + (var(--bracket-line-thickness) * 3));
}
.lower_bracket .round-1 .match:nth-child(even) .team:first-child:before { /* = */
	border-right-width: 0;
	width: calc(var(--bracket-line-width) + var(--bracket-line-spacing) + (var(--bracket-line-thickness) * 2));
}
.lower_bracket .stage.semifinal {
	margin-left: var(--bracket-line-connector);
	margin-right: calc(var(--bracket-line-thickness) * -2);
}
.stage.semifinal {
	row-gap: calc((var(--team-height) - var(--team-gap) + var(--match-gap)) * 2);
}
.single_elimination .round-of-16 { /* 24px */
	/* row-gap: calc((var(--team-height) + var(--team-gap)) * 0.5); */
	row-gap: 24px;
}
.single_elimination .round-of-16 .match:nth-child(2n-1):not(:first-child) {
	margin-top: calc((var(--team-height) / 2) + var(--bracket-line-thickness)); /* 28px */
}
.single_elimination .quarterfinal { /* 70px */
	row-gap: calc((var(--team-height) + var(--team-gap)) * 1.25);
}
.single_elimination .semifinal { /* 246px */
	/* row-gap: calc((var(--team-height) + var(--team-gap) + (var(--bracket-line-thickness) * 2)) * 4); */
	row-gap: 246px;
}
.semifinal .match:nth-child(even) .team:first-child:before { /* ] */
	height: calc((var(--team-height) * 4) + (var(--bracket-line-thickness) * 4) + (var(--match-gap) * 2));
}
.single_elimination .semifinal .match:nth-child(even) .team:first-child:before {
	/* height: calc((var(--team-height) * 6) + (var(--bracket-line-thickness) * 2)); */
	/* height: calc((var(--team-height) * 7) + (var(--team-gap) * 1) + var(--bracket-line-thickness)); */
	height: 354px;
	margin-bottom: calc((var(--bracket-line-thickness) / 1) * -1);
}

/* Bracket line gaps with spacing */
.single_elimination [data-roundof16] {
	--bracket-line-spacing: 20px;
	--bracket-line-connector: 20px;
}
.brackets.single_elimination .stage.round-of-16 .match:nth-child(even) .team:last-child:before {
	width: 20px;
	margin-left: 5px;
	height: calc(var(--team-height) * 1.5 + var(--bracket-line-thickness)); /* 78px */
	bottom: calc(100% - ((var(--team-height) - var(--bracket-line-thickness)) / 2));
}
.brackets.single_elimination .stage .match:nth-child(even) .team:first-child:before {
	width: 20px;
	margin-left: 5px;
}

[data-roundof16] .quarterfinal .team + .team:before,
[data-quarterfinal] .semifinal .team + .team:before,
.final .team + .team:before,
.grand-final .team + .team:before { /* - (stage connector) */
	content: '';
	position: absolute;
	width: var(--bracket-line-connector);
	height: var(--bracket-line-thickness);
	background-color: var(--bracket-line-color);
	right: calc(100% + var(--bracket-line-width));
	top: calc(-1 * (var(--bracket-line-thickness) + var(--team-gap)) / 2);
}
.grand-final .team + .team:before {
	width: calc(var(--bracket-line-width) + var(--bracket-line-spacing) + (var(--bracket-line-thickness) * 2) + var(--bracket-line-connector));
}
.team.loss:after {
	opacity: 0.5;
}
.single_elimination .final .team:after,
.bronze .team:before,
.bronze .team:after {
	display: none;
}

/* Hide some corners for teams with score */
.stage:not(.round-of-16) .team-score:not(:empty) ~ .team-corners .corners:after,
.stage.round-of-16 .team:last-child .team-score:not(:empty) ~ .team-corners .corners:before,
.stage.round-of-16 .team:first-child .team-score:not(:empty) ~ .team-corners .corners:after {
	display: none;
}

/* Match decoration */
.team-corners {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	z-index: 80;
	color: var(--primary-color);
	z-index: 10;
	height: 100%;
	pointer-events: none;
	font-size: 14px;
}
.corners:before,
.corners:after {
	content: '';
	position: absolute;
	border: var(--team-corner-line-thickness) 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;
}