.veto-maps {
	position: absolute;
	left: calc(var(--left-offset) * 1);
	right: calc(var(--left-offset) * 1);
	bottom: calc(var(--bottom-offset) * 1);

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

	text-align: center;

	font-family: "Space Mono", sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 1;

	color: var(--text-color);
	text-transform: uppercase;

	opacity: 0;
	transition: 0.5s all ease-in;

	gap: 12px;
}
.show-veto .veto-maps {
	opacity: 1;
}

.veto-map {
	width: 230px;
	width: calc(100% / 7);
	height: 150px;

	position: relative;
	z-index: 0;

	display: flex;
	gap: 8px;
	padding: 12px 10px;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;

	opacity: 0;
	transition: 0.5s all ease-in
}
[data-veto-mapcount="9"] .veto-map {
	width: calc(100% / 9);
}
.show-veto .veto-map,
[data-showmaps] .veto-map {
	opacity: 1;
}

.show-veto .veto-map:nth-child(1) { transition-delay: 0.6s; }
.show-veto .veto-map:nth-child(2) { transition-delay: 0.8s; }
.show-veto .veto-map:nth-child(3) { transition-delay: 1.05s; }
.show-veto .veto-map:nth-child(4) { transition-delay: 1.35s; }
.show-veto .veto-map:nth-child(5) { transition-delay: 1.70s; }
.show-veto .veto-map:nth-child(6) { transition-delay: 2.15s; }
.show-veto .veto-map:nth-child(7) { transition-delay: 2.6s; }
.show-veto .veto-map:nth-child(8) { transition-delay: 2.9s; }

.veto-maps[data-showmaps] .veto-map {
	transition-delay: 0s;
}
[data-showmaps="1"] .veto-map:nth-child(1) ~ .veto-map,
[data-showmaps="2"] .veto-map:nth-child(2) ~ .veto-map,
[data-showmaps="3"] .veto-map:nth-child(3) ~ .veto-map,
[data-showmaps="4"] .veto-map:nth-child(4) ~ .veto-map,
[data-showmaps="5"] .veto-map:nth-child(5) ~ .veto-map,
[data-showmaps="6"] .veto-map:nth-child(6) ~ .veto-map,
[data-showmaps="7"] .veto-map:nth-child(7) ~ .veto-map,
[data-showmaps="8"] .veto-map:nth-child(8) ~ .veto-map,
.veto-maps[data-showmaps="0"] .veto-map {
	opacity: 0;
}

.team-info {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	z-index: 5;
}
.team-name {
	display: flex;
	flex-grow: 1;
	align-items: center;
	font-family: "Satoshi", sans-serif;
	color: var(--light-text-color);
	text-shadow: 0.05em 0.05em rgba(var(--black-rgb), 0.75);
	font-weight: 500;
	position: relative;
}
.team-abbr {
	order: 3;
	display: none;
	text-shadow: 0.05em 0.05em rgba(var(--black-rgb), 0.75);
}

.team-logo,
.side-logo,
.winner-logo {
	background: no-repeat center / contain;
	order: 1;
	flex-shrink: 0;
	filter: drop-shadow(0px 0px rgba(var(--white-rgb), 1));
}
.team-logo[style]:not([style*="teams/.png"]) {
	width: 80px;
	height: 50px;
	display: inline-block;
}

.veto-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%;
}
.veto-mapname:empty {
	display: none;
}
.ban .veto-mapname {
	/*
	color: var(--veto-red);
	background-color: var(--white);
	*/
}
.decider .veto-mapname {
	/*
	background-color: var(--orange);
	color: var(--white);
	*/
}

.veto-mapvideo,
.veto-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);
	/*-webkit-mask-image: radial-gradient(farthest-side at 50% 300px, black 40%, rgba(var(--black-rgb), 0.9) 70%, transparent 100%);
	-webkit-mask-size: 225% 135%;
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;*/
}
.veto-mapvideo-container {
	overflow: hidden;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
}
.veto-mapvideo {
	width: 125%;
	height: 125%;
	transform: translate(-50%,-50%);
	left: 50%;
	top: 50%;
	bottom: auto;
	object-fit: cover;
}/*
.pick .veto-mapimage:before {
	content: '';
	position: absolute;
	background: linear-gradient(20deg, rgba(var(--veto-green-rgb), 0.5) 10%, transparent 50%);
	left: 0px;
	right: 0px;
	top: 0;
	bottom: 0px;
	z-index: 1;
	opacity: 0.1;
}*/
.ban .veto-mapimage {
	filter: saturate(0.2) grayscale(0.7) blur(1px);
	opacity: 0.8;
	transition-delay: 0.3s;
}
.pick .veto-mapimage {
}
.veto-map:after {
	/*content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 1;*/
}
.veto-map.pick:after,
.veto-map.decider:after {
	/*background: var(--dark-color);
	left: -3px;
	right: -3px;
	top: -3px;
	bottom: -3px;*/
}
.veto-map.ban:after {
	/* background: linear-gradient(to top, var(--light-color) 60%, transparent 100%); */
}
/*.veto-map.pick:before,
.veto-map.decider:before {*/
.veto-map:before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 0;
}
.veto-map.ban:before {
	background: rgba(var(--secondary-color-rgb), 0.5);
}
.veto-map.pick:before {
	/* background: linear-gradient(to bottom, rgba(var(--secondary-color-rgb), 0.1) 60%, var(--primary-color) 100%) 0%; */
	background: linear-gradient(to bottom, rgba(var(--black-rgb), 0.15) 60%, var(--primary-color) 100%) 0%;
	/* border-bottom: 0.25px solid var(--white); */
}
.veto-map.decider:before {
	background-color: rgba(var(--black-rgb), 0.15);
}

.veto-state {
	/*position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 25px;*/

	font-size: 16px;
	line-height: 1;
	order: 3;
	z-index: 5;

	color: var(--light-text-color);
	font-weight: 400;

	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}
.veto-state:before {
	content: '';
}
.veto-state:after {
	content: '';
	border: 1px solid;
	padding: 0.2em 0.5em;
}
/*
.veto-state.ban:before {
	content: '✘';
	font-size: 0.8em;
}
.veto-state.pick:before {
	content: '✔';
}
*/
.veto-state.ban:after {
	content: 'Ban';
}
.veto-state.pick:after {
	content: 'Pick';
}
.veto-state.pick:after,
.veto-state.decider:after {
	color: var(--black);
	background-color: var(--white);
	border: none;
}
.veto-state.decider {
	left: 15px;
	/* right: 15px; */
	/* top: 20px; */
	/* font-size: 34px; */
	/* font-weight: 700; */
	transform: initial;
}
.veto-state.decider:before {
}
.veto-state.decider:after {
	content: 'Decider';
}
.veto-state.decider {
	/* https://www.reddit.com/r/css/comments/1otp7qi/how_could_i_format_text_to_be_transparend_with_a/no8xvmc/ */
	/* mix-blend-mode: lighten; */
}

.veto-side {
	position: absolute;
	right: 12px;
	bottom: 10px;

	font-size: 22px;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	flex-direction: column;
	line-height: 1;

	padding: 6px;
	gap: 0.4em;
	background-color: var(--secondary-color);
}
[class="veto-side"] {
	opacity: 0; /* require at least a 'side' class set */
}
.ban .veto-side {
	opacity: 0;
}
.veto-side:before { /* ATK/DEF/CT/T prefix */
	display: none;
	color: rgba(var(--rgb-white), 0.9);
}
.veto-side:after {
	content: '';
	background: center no-repeat;
	background-size: contain;
	width: 1em;
	height: 1em;
	display: inline-block;
	filter: drop-shadow(0 0 0.05em rgba(var(--black-rgb), 1));
	order: 1;
	flex-shrink: 0;
}
.veto-side.attack:after,
.veto-side.attacker:after,
.veto-side.attackers:after {
	background-image: url('../img/val_attackers.png');
}
.veto-side.attack:before,
.veto-side.attacker:before,
.veto-side.attackers:before {
	content: 'Atk ';
}
.veto-side.defend:after,
.veto-side.defender:after,
.veto-side.defenders:after {
	background-image: url('../img/val_defenders.png');
}
.veto-side.defend:before,
.veto-side.defender:before,
.veto-side.defenders:before {
	content: 'Def ';
}
.veto-side.ct:before,
.veto-side.counterterrorist:before,
.veto-side.counterterrorists:before,
.veto-side.counter-terrorist:before,
.veto-side.counter-terrorists:before {
	content: 'CT ';
	content: '';
	color: rgba(var(--rgb-white), 0.9);
}
.veto-side.ct:after,
.veto-side.counterterrorist:after,
.veto-side.counterterrorists:after,
.veto-side.counter-terrorist:after,
.veto-side.counter-terrorists:after {
	background-image: url('../img/cs_counter-terrorists.png');
}
.veto-side.t:before,
.veto-side.terrorist:before,
.veto-side.terrorists:before {
	content: 'T ';
	content: '';
	color: rgba(var(--rgb-white), 0.9);
}
.veto-side.t:after,
.veto-side.terrorist:after,
.veto-side.terrorists:after {
	background-image: url('../img/cs_terrorists.png');
}
.side-abbr {
	display: none;
}
.side-name {
	display: none;
}
.side-logo {
	display: inline-block;
	width: 1.25em;
	height: 1em;
}

.veto-ticker {
	position: absolute;
	left: var(--left-offset);
	right: var(--right-offset);
	bottom: var(--bottom-offset);
	background-color: rgba(var(--primary-color), 0.8);
	color: var(--text-color);
	padding: 0 0.6em;
	font-size: 30px;
	line-height: 60px;
	display: none;
}

/* Winner & score indication */
.veto-map.complete {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 2fr 1fr 1fr;
	gap: 6px;
	align-items: stretch;
	font-size: 16px;
	padding-bottom: 0px;
}
.complete .veto-side { /* Att/Def/T/CT (icon) */
	display: none;
}
.complete .team-info { /* Who picked/banned */
	display: grid;
	grid-row: 1 / 3 span;
	grid-column: 1;
	align-items: flex-end;
	justify-content: flex-end;
	justify-items: flex-start;

}
.complete .veto-state {
	display: none;
}
.complete .veto-state:before {
	content: '';
	display: none;
}
.complete .side-logo,
.complete .team-logo {
	opacity: 0;
	display: none;
}

.winner-info {
	display: none;
	justify-content: flex-end;
	z-index: 5;
}
.complete .winner-info {
	display: grid;
	z-index: 1;

	grid-row: 1 / 3 span;
	grid-column: 1 / 3 span;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 2fr 1fr;

	justify-items: flex-end;
	justify-self: stretch;
}
.winner-logo {
	grid-row: 1;
	grid-column: 1 / 3 span;
	opacity: 0.8;
	justify-self: center;
	align-self: center;
	z-index: 2;
	width: 120px;
	height: 90px;
}

.complete .team-abbr, /* Pick info */
.complete .winner-abbr { /* Winner info */
	display: block;
	align-items: center;
	align-content: center;
	align-self: flex-end;
	border: 1px solid;
	padding: 0.2em 0.5em;
	z-index: 4;

	border: 0px;
	background-color: var(--white);
	color: var(--dark-text-color);
	text-shadow: none;
}
.complete .team-abbr {
	z-index: 2;

	grid-row: 2;
	grid-column: 1;

	grid-row: 1;
	align-self: flex-start;
}
.complete .winner-abbr {
	grid-row: 2;
	grid-column: 3;

	grid-row: 1;
	align-self: flex-start;
}
.complete .team-info .team-abbr:after {
	content: 'Pick';
	display: block;
	order: 2;
}
.complete .winner-info .team-abbr:after {
	content: 'Win';
	display: block;
	order: 2;
}
.match-score {
	/*position: absolute;
	left: 12px;
	right: 12px;
	top: 20px;
	height: 50px;*/
	font-size: 50px;
	line-height: 1;
	text-shadow: 0.15em 0.15em rgba(var(--text-shadow-color), 0.75),-0.15em -0.15em rgba(var(--text-shadow-color), 0.75);
	-webkit-text-stroke: 1px rgba(var(--black-rgb), 0.25);
	display: none;
	z-index: 5;
	align-self: center;
	grid-row: 3;
	grid-column: 1 / 3 span;
	color: var(--light-text-color);
}
.match-score:not(:empty) {
	display: initial;
}
.veto-mapscore.mapwin {
	font-weight: 600;
}
.complete .team-name,
.complete .side-name,
.winner-name {
	position: absolute;
	opacity: 0;
}

.complete .veto-corners {
	height: calc(100% + 35px);
}

/* Match decoration */
.veto-corners {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	z-index: 80;
	color: var(--white);
	z-index: 10;
	height: 100%;
	pointer-events: none;
	font-size: 20px;
}
.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;
}