#map {
	position: relative;
	left: 0; right: 0; top: 0; bottom: 0;
	/* margin: auto; */
	margin: 2px 0 0 2px;
	background-color: white;
}
.canvasMap {
	width: 706px;
	height: 432px;
	/* transition: all 0.5s linear; */
}
.canvasMap:nth-child(1) {
	position: relative;
	top: -2px;
	left: -2px;
	margin: 0 -2px -2px 0;
	border: solid black; 
    border-width: 2px 2px 0 2px;
	/* box-sizing: border-box; */
	border-radius: 5px 5px 0 0;
}
.canvasMap:not(.X) {
	position: absolute;
	top: 0; left: 0;
}
#map.fullMap {
	z-index: 1000000;
	position: absolute;
	margin: auto;
	width: max-content;
	height: max-content;
}
#fullMap, #normalMap {
	position: absolute;
	z-index: 1;
	top: -2px;
	left: -2px;
	/* width: 80px;
	height: 80px;
	overflow: hidden; */
}
#fullMap>.activPlace, #normalMap>.activPlace {
	position: absolute;
	background-color: #999;
	transform: rotate(45deg);
	transform-origin: right top;
	padding: 32px 5px 25px 43px;
	border: solid black; 
    border-width: 0 2px 0 0;
}
#fullMap>:not(.activPlace), #normalMap>:not(.activPlace) {
	position: absolute;
	background-color: white;
	width: 200px;
	height: 100px;
}
#fullMap>.whiteBorderOverflowTop, #normalMap>.whiteBorderOverflowTop {
	bottom: 0;
	left: -100;
}
#fullMap>.whiteBorderOverflowLeft, #normalMap>.whiteBorderOverflowLeft {
	top: 0;
	right: 0;
}
#fullMap>.activPlace>img, #normalMap>.activPlace>img {
	width: 25px;
}
#scoreMap>div {
	display: inline-block;
}
#scoreMap .score {
	text-align: right;
	width: 4ch;
}
#scoreMap {
	position: absolute;
	right: 0;
	top: -2px;
	height: 1.2em;
	font-size: 1em;
	background-color: #888;
	border: solid black;
    border-width: 0 0 2px 2px;
	color: white;
	border-radius: 0 5px 0 5px;
	padding: 0.1em 0.5em;
}
#loadingMap, #loadingMap>img {
	position: absolute;
	left: 0; right: 0; top: 0; bottom: 0;
	margin: auto;
	background-attachment: rgba(0, 0, 0, 0.5);
}










#robotImages {
	width: 0; height: 0;
}
#robotImages>div {
	position: absolute;
}
#robotImages>div>* {
	position: absolute;
	transform-origin: center center;
	width: 100%;
	height: 100%;
}
#robotImages>div>div>img {
	position: absolute;
	filter: drop-shadow(red 2px 2px 4px) drop-shadow(red -2px -2px 4px);
	width: 100%;
	height: 100%;
}
#robotImages>div>div>* {
	z-index: 1;
	opacity: 0;
}
#robotImages>div>div.show img,
#robotImages>div>div:hover img {
	opacity: 0.5;
}
#robotImages>div>div.show .robotNumber,
#robotImages>div>div:hover .robotNumber {
	opacity: 1;
}
#robotImages .robotNumber {
	position: absolute;
	width: 1ch;
	height: 1em;
	margin: auto;
	left: 0; right: 0; top: 0; bottom: 0;
	font-size: 2em;
	font-weight: bold;
	color: white;
}
#robotImages .bubble {
	z-index: 1;
	margin: 0 0 70% 50%;
	padding: 0.3em 0.5em;
	width: max-content;
	height: min-content;
	text-align: center;
	font-size: 1.2em;
	font-family: "Comic Sans MS";
	background-color: white;
	border-radius: 20px 20px 20px 0;
	box-shadow: inset 0 0 20px black;
}
#robotImages .bubble:not(.hidden)>div {
	animation: opacityUp 1 linear forwards;
}
#robotImages .bubble>div {
	display: inline-block;
	transition: all 3s linear;
}
#robotImages .bubble>div:nth-child(1) { animation-delay: 0.2s; }
#robotImages .bubble>div:nth-child(2) { animation-delay: 0.4s; }
#robotImages .bubble>div:nth-child(3) { animation-delay: 0.6s; }
#robotImages .bubble>div:nth-child(4) { animation-delay: 0.8s; }
#robotImages .bubble>div:nth-child(5) { animation-delay: 1.0s; }







#toolsPlayers {
	position: relative;
	top: -2px;
	left: -2px;
	margin: 0 -2px -2px 0;
	height: 30px;
	font-size: large;
	line-height: 1.5em;
	box-sizing: border-box;
}
#toolsPlayers>div {
	flex: auto;
}
#toolsPlayers .points, #toolsPlayers .name {
	border: solid black; 
}
#toolsPlayers .points {
	padding: 0 1ch 0 0.5ch;
	color: greenyellow;
	text-shadow: 0 0 2px black;
}
#toolsPlayers .points>img {
	width: 28px;
	margin: 0 -4px;
	filter: drop-shadow(0 0 2px #555);
}
#toolsPlayers .points.local {
    border-width: 0 0 2px 2px;
	border-radius: 0 0 0 5px;
}
#toolsPlayers .points.network {
    border-width: 0 2px 2px 0;
	border-radius: 0 0 5px 0;
	text-align: right;
}
#toolsPlayers .name.local {
    border-width: 0 0 2px 0;
	text-align: center;
}
#toolsPlayers .name.network {
	border-width: 0 0 2px 0;
	text-align: center;
}
#toolsPlayers .space {
	flex: 0;
	position: relative;
	top: 0px;
}
#toolsPlayers .space .border {
	border: solid black; 
	border-width: 2px 0 0 0;
}
#toolsPlayers .space>div>* {
	position: absolute;
	left: 0; right: 0;
	margin: auto;
	width: 20px;
	text-align: center;
}
#toolsPlayers .space>div>*:not(.border) {
	font-size: 2.5em;
	/* top: 0.3em; */
	top: 0.2em;
	border-width: 0;
	cursor: pointer;
}
#toolsPlayers .space>div:not(.border):hover>* {
	animation: zoomDown501001210 0.3s linear;
	animation-iteration-count: 1;
}
#toolsPlayers .space>div>div.vs {
	color: white;
	font-size: 1em;
	top: 9px;
}
#toolsPlayers .space>div>.transparent {
	opacity: 0;
}
#toolsPlayers .space .start:not(.vs) {
    width: 38px;
    left: 10px;
	top: 5px;
	filter: drop-shadow(0 0px 3px #999);
}
#toolsPlayers .space .stop:not(.vs) {
	width: 33px;
	top: 7px;
	filter: drop-shadow(0 0px 3px #999);
}
#toolsPlayers .space>div {
	width: 100px;
	text-align: center;
}
#toolsPlayers .space:before {
	content: '';
	width: 50px;
	height: 0;
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: white;
	border: solid black; 
	border-width: 0 0 2px 0;
	transform: rotate(-35deg);
	transform-origin: bottom left;
}
#toolsPlayers .space:after {
	content: '';
	width: 50px;
	height: 0;
	position: absolute;
	bottom: 0;
	right: 0;
	background-color: white;
	border: solid black; 
    border-width: 0 0 2px 0;
	transform: rotate(35deg);
	transform-origin: bottom right;
}

@keyframes teleportIn {
	0% { transform: rotate(1000deg) scale(0); filter: blur(20px); /*width: 0%; height: 0%;*/ opacity: 0; }
	30% { transform: rotate(500deg) scale(0.5); /*width: 50%; height: 50%;*/ opacity: 1; }
	60% { transform: rotate(0deg) scale(1); /*width: 100%; height: 100%;*/ }
	100% { filter: blur(0px); }
}
@keyframes teleportOut {
	40% { filter: blur(20px); }
	70% { transform: rotate(1000deg) scale(0.5); /*width: 50%; height: 50%;*/ }
	100% { transform: scale(0); /*width: 0%; height: 0%;*/ opacity: 0; }
}
#robotImages>div {
	transform-origin: center center;
	animation: teleportIn 1s linear;
	animation-iteration-count: 1;
	position: absolute;
	margin: auto;
	left: 0; right: 0; top: 0; bottom: 0;
}
#robotImages>div.teleportOut {
	animation: teleportOut 1s linear forwards;
}
#robotImages>div.teleportIn {
	animation: teleportIn 1s linear forwards;
}