body,
div {
	box-sizing: border-box;
}
body {
	margin: 0;
}
.board,
.board .square {
	border: 1px solid black;
}
.board {
	margin: 50px auto;
	overflow: hidden;
	position: relative;
	width: 1002px;
}
.board .square {
	float: left;
	height: 50px;
	width: 50px;
}
.board .square.filled {
	background: black;
}
.board .square.filled-2 {
	background: red;
}
.board .square.filled-3 {
	background: gold;
}
.board .square.filled-4 {
	background: green;
}
.board .square.filled-5 {
	background: blue;
}			
.board .player {
	border-radius: 20px;
	height: 40px;
	margin: 5px;
	position: absolute;
	width: 40px;
}
.board .player.left:before,
.board .player.right:before,
.board .player.up:before,
.board .player.down:before {
	background: black;
	border-radius: 20px 0 0 20px;
	content: '';
	display: block;
	height: 40px;
	opacity: 0.3;
	position: absolute;
	width: 20px;
}
.board .player.left:before {
	left: 20px;
	transform: rotate(180deg);
}
.board .player.up:before {
	left: 10px;
	top: 10px;
	transform: rotate(270deg);
}
.board .player.down:before {
	left: 10px;
	top: -10px;
	transform: rotate(90deg);
}
.board .snake-tail-part {
	border: 10px solid black;
	border-radius: 15px;
	height: 30px;
	margin: 10px;
	position: absolute;
	width: 30px;
}
.board .teleport {
	border-radius: 20px;
	height: 40px;
	margin: 5px 10px;
	position: absolute;
	width: 30px;
}
.board .box {
	background: brown;
	height: 50px;
	position: absolute;
	width: 50px;
}
.board .box:before {
	border: 25px solid black;
	border-left-color: transparent;
	border-top-color: transparent;
	content: '';
	display: block;
	height: 0;
	opacity: 0.3;
	width: 0;
}