.pawn {
	image-rendering: pixelated;
	position: absolute;
	transform: translate(-50%,-50%);
	transition: all ease .2s;
}
.pawn:hover {
	filter: brightness(1.2);
	cursor: pointer;
}
.pawn:active {
	filter: brightness(1.4);
}

#pawn {

	width: 88px;
	height: 196px;
	background: url('/db/hero/pawn.gif') center center no-repeat;

	top: 0;
    left: 50%;
}

#controller {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	user-select: none;
	height: 160px;
	width: 240px;
}
.arrow {
	position: absolute;
	background: hsla(0,0%,50%,0.2);
	width: 80px;
	height: 80px;
	text-align: center;
	line-height: 80px;
}
.arrow:hover {
	cursor: pointer;
	background: hsla(0,0%,50%,0.3);
}
.arrow:active {
	background: hsla(0,0%,50%,0.4);
}

#btn-left {
	top: 80px;
	left: 0px;
}
#btn-right {
	top: 80px;
	left: 160px;
}
#btn-up {
	top: 0px;
	left: 80px;
}
#btn-down {
	top: 80px;
	left: 80px;
}

.exit {
	position: absolute;
	background: hsla(0,0%,50%,0.2);
	width: 80px;
	height: 80px;
	text-align: center;
	line-height: 80px;
}
.exit-left {
	position: fixed;
	top: 50%;
	left: 0;
	transform: translateY(50%);
}
.exit-right {
	position: fixed;
	top: 50%;
	right: 0;
	transform: translateY(50%);
}


#gotopawn {
	position: fixed;
	top: 0px;
	left: 50%;
	transform: translateX(-50%);
	position: absolute;
	background: hsla(0,0%,50%,0.2);
	width: 160px;
	height: 80px;
	text-align: center;
	line-height: 80px;
}