:root {
  color-scheme: dark;
  --bg: #2e3f4b;
  --text: #eef5ef;
  --muted: #aab7ae;
  --accent: #6ee7a8;
  --danger: #ff8b7e;
  --line: #2b3631;
}

* {
  box-sizing: border-box;
}

html,
body {
	padding:0;
	margin:0;
	width:100%;
	min-height:100%;
	scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", Arial, sans-serif;
  padding:20px;
}
.wrapper {
	width:1600px;
	max-width:100%;
	margin:0 auto;
}
.players {
	display:flex;
	flex-wrap:wrap;
	gap:20px;
}
.players .itm {
	width:calc(50% - 10px);
	border-radius:10px;
	overflow:hidden;
	position:relative;
}
.players .itm video {
	aspect-ratio:16/9;
    background: #000;
	width:100%;
	display:block;
}
.players .itm span {
	display: block;
    background: #000;
    padding: 10px 15px;
    line-height: 1;
    font-size: 18px;	
}
.balloon a {
	color:var(--bg);
}
.players .itm img {
	cursor:pointer;
	-webkit-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
	position:absolute;
	top:20px;
	right:20px;
}
.players .itm img.active {
	transform:rotate(360deg);
	
}
#map_objects {
	aspect-ratio:16/4;
	margin-top:20px;
	border-radius:10px;
	overflow:hidden;
}
@media (max-width:767px) {
	.players .itm {
		width:100%;
	}
	.players .itm span {
		font-size: 16px;	
	}
	#map_objects {
		aspect-ratio:1;
	}
}