.bracket {
	width: 100%;
	height: calc(var(--card-height) - 1px);
	border: 1px solid var(--nav-btn-border);
	border-radius: 3px;
	overflow: scroll;
}

bracket {
	--gap: 15px;
	--entrant-height: 24px;
	display: flex;
	justify-content: start;
	align-items: center;
	gap: 10px;
	padding: 5px;
	width: 100%;
	/*height: 100%;*/
	z-index: 0;
}

bracket.header {
	position: sticky;
	top: 0;
	height: auto;
	z-index: 99;
}

bracket + bracket {
	margin: 4em 0 0 0;
}

bracket column {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	flex: 0 0 182px;
	gap: var(--gap);
	/*height: 100%;*/
}

bracket.header column {
	font-weight: 500;
    font-size: 110%;
	color: var(--nav-btn-text-hover);
    background-color: var(--nav-btn-back-hover);
    text-shadow: 1px 0 var(--nav-btn-text-shadow-hover), 0 1px var(--nav-btn-text-shadow-hover), 1px 1px var(--nav-btn-text-shadow-hover);
	border-radius: 5px;
}

bracket connector {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: var(--gap);
	flex: 0 0 20px;
}

bracket match {
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: center;
	gap: 1px;
	height: calc(var(--entrant-height) * 2 + 1px);
	border-radius: 3px;
}

bracket connector > div {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1px;
	height: calc(var(--entrant-height) * 2 + 1px);
}

bracket connector.double > div {
	height: calc(var(--entrant-height) * 3 + 13px + (var(--gap) * 2));
}

bracket entrant {
	--border-size: 1px;
	--position-x: calc(3px - var(--border-size));
	--position-y: calc(11px - var(--border-size));
	position: relative;
	display: flex;
	justify-content: start;
	align-items: center;
	/*padding: 5px;*/
	width: 100%;
	height: var(--entrant-height);
	background-color: rgba(255, 255, 255, 0.05);
	overflow: hidden;
	cursor: pointer;
}

bracket entrant:first-child { border-radius: 5px 5px 0 0; }
bracket entrant:last-child { border-radius: 0 0 5px 5px; }

bracket entrant.winner {
	background-color: rgba(255, 255, 255, 0.15);
}

bracket entrant:hover, bracket entrant.hover {
	color: var(--nav-btn-text-hover);
    background-color: var(--nav-btn-back-hover);
    text-shadow: 1px 0 var(--nav-btn-text-shadow-hover), 0 1px var(--nav-btn-text-shadow-hover), 1px 1px var(--nav-btn-text-shadow-hover);
}

bracket entrant.winner:before, bracket entrant.winner:after {
	display: block;
	position: absolute;
	content: ' ';
	right: var(--position-x);
	top: var(--position-y);
	width: 22px;
	height: 4px;
	background-color: #0F0;
	border-bottom: 1px solid #000;
	transform: rotate(-45deg);
}

bracket entrant.winner:after {
	right: calc(var(--position-x) + 15px);
	top: calc(var(--position-y) + 3px);
	width: 12px;
	height: 4px;
	transform: rotate(45deg);
}

bracket entrant seed {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 5px;
	width: 32px;
	height: 100%;
	color: #FFF;
	background: rgba(255, 255, 255, 0.15);
	border-right: 1px solid var(--main-back);
}




bracket connector > div:after {
	content: ' ';
	position: absolute;
	right: 0;
	width: 10px;
	height: 0;
	border-bottom: 2px solid #FFF;
}
bracket connector.same > div:after { width: 20px; }

bracket connector:not(.same) > div:before {
	content: ' ';
	position: absolute;
	left: 0;
	width: 10px;
	height: 100%;
	border: 2px solid #FFF;
	border-left: none;
}






.invisible { opacity: 0; }