/* Match page surface balance and visual veto states. */
body.cs2day-v2 .cs2-detail--match .cs2-match-detail-flow > .cs2-detail-panel,
body.cs2day-v2 .cs2-detail--match .cs2-match-detail-lineups {
	background: linear-gradient(145deg, var(--cs2-card), color-mix(in srgb, var(--cs2-card-elevated) 88%, var(--cs2-bg-alt)));
}
body.cs2day-v2 .cs2-detail--match :is(
	.cs2-player-duel__compare,
	.cs2-match-team-card,
	.cs2-match-content-team,
	.cs2-match-recent__team,
	.cs2-match-team-map-stats article,
	.cs2-match-long-term
) {
	background: color-mix(in srgb, var(--cs2-card-elevated) 92%, var(--cs2-bg-alt));
}
body.cs2day-v2 .cs2-detail--match :is(
	.cs2-match-team-card dl div,
	.cs2-match-team-card__organization,
	.cs2-match-recent__team h3,
	.cs2-match-recent__row > b,
	.cs2-player-duel__compare dl div:nth-child(even)
) {
	background: color-mix(in srgb, var(--cs2-card) 88%, var(--cs2-bg-alt));
}
body.cs2day-v2 .cs2-match-live {
	background: var(--cs2-card);
}

body.cs2day-v2 .cs2-match-veto li {
	--cs2-veto-state: var(--cs2-text-muted);
	position: relative;
	isolation: isolate;
	min-height: 94px;
	align-content: end;
	overflow: hidden;
	border-color: color-mix(in srgb, var(--cs2-veto-state) 42%, var(--cs2-border));
	background-color: var(--cs2-card-elevated);
	background-image: linear-gradient(90deg, color-mix(in srgb, var(--cs2-card) 94%, transparent) 8%, color-mix(in srgb, var(--cs2-card) 70%, transparent)), url('../images/cs2-map-sprite.png');
	background-repeat: no-repeat;
	background-size: auto, 500% 200%;
	box-shadow: inset 3px 0 0 var(--cs2-veto-state);
}
body.cs2day-v2 .cs2-match-veto li::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, transparent 5%, color-mix(in srgb, var(--cs2-card) 88%, transparent));
}
body.cs2day-v2 .cs2-match-veto li > * {
	position: relative;
}
body.cs2day-v2 .cs2-match-veto li.cs2-match-veto--ban {
	--cs2-veto-state: var(--cs2-error);
}
body.cs2day-v2 .cs2-match-veto li:is(.cs2-match-veto--pick, .cs2-match-veto--decider) {
	--cs2-veto-state: var(--cs2-success);
}
body.cs2day-v2 .cs2-match-veto__action {
	color: var(--cs2-veto-state);
}
body.cs2day-v2 .cs2-match-veto li strong {
	font-size: 16px;
}

/* Sprite order: Mirage, Inferno, Nuke, Ancient, Anubis / Dust II, Overpass, Train, Vertigo, Cache. */
body.cs2day-v2 .cs2-match-veto--map-mirage { background-position: 0 0, 0 0; }
body.cs2day-v2 .cs2-match-veto--map-inferno { background-position: 0 0, 25% 0; }
body.cs2day-v2 .cs2-match-veto--map-nuke { background-position: 0 0, 50% 0; }
body.cs2day-v2 .cs2-match-veto--map-ancient { background-position: 0 0, 75% 0; }
body.cs2day-v2 .cs2-match-veto--map-anubis { background-position: 0 0, 100% 0; }
body.cs2day-v2 :is(.cs2-match-veto--map-dust2, .cs2-match-veto--map-dust-ii) { background-position: 0 0, 0 100%; }
body.cs2day-v2 .cs2-match-veto--map-overpass { background-position: 0 0, 25% 100%; }
body.cs2day-v2 .cs2-match-veto--map-train { background-position: 0 0, 50% 100%; }
body.cs2day-v2 .cs2-match-veto--map-vertigo { background-position: 0 0, 75% 100%; }
body.cs2day-v2 .cs2-match-veto--map-cache { background-position: 0 0, 100% 100%; }

@media (max-width: 600px) {
	body.cs2day-v2 .cs2-match-veto {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	body.cs2day-v2 .cs2-match-veto li {
		min-height: 84px;
	}
}