img {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  //border: 1px solid red;
}

#game { 
  width: 256px; 
  height: 176px;
  overflow: hidden;
}

.room {
  position: absolute;
  left: 0;
  top: 0;
  background-color: green; 
  width: 256px; 
  height: 176px;
  z-index: 0;
}

.attack-box {
  position: absolute;
  border: 1px solid red;
  left: 0;
  top: 0;
  z-index: 90;
}

.curtain {
  position: absolute;
  left: 0;
  top: 0;
  background-color: black; 
  width: 256px; 
  height: 176px;
  z-index: 100;
}


body {
  overflow: hidden;
  font-family: sans-serif;
}


#radar {
  position: relative;
  width: 128px;
  height: 64px;
  background-color: gray;
  margin-bottom: 10px;
}

#radar_spot {
  width: 8px;
  height: 8px;
  margin: 0 0;
  padding: 0 0;
  left: 100px;
  top: 100px;
  background-color: #76c930;
  position: absolute;
}


.zoomed {
  -webkit-transform: scale(4);
  -moz-transform: scale(4);
  transform: scale(4);
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  transform-origin: 0 0;
}

.tile {
  object-fit: none;
  width: 16px;
  height: 16px;
  margin: 0 0;
  padding: 0 0;
  position: absolute;
}


.tile_i {
  object-fit: none;
  width: 16px;
  height: 16px;
  margin: 0 0;
  padding: 0 0;
  position: absolute;
}

.tile_q {
  object-fit: none;
  width: 8px;
  height: 8px;
  margin: 0 0;
  padding: 0 0;
  position: absolute;
}

.tile-type {
  display: none;
}

#player {
  position: absolute;
  z-index: 50;
  background: transparent;
  object-fit: none;
  width: 16px;
  height: 16px;
}

#sword {
  position: absolute;
  z-index: 30;
  background: transparent;
  object-fit: none;
  left: 96px;
  top: 100px;
}



.link-sprite-walk-south-1 {
  object-position: -1px -11px;
}

.link-sprite-walk-south-2 {
  object-position: -18px -11px;
}

.link-sprite-walk-east-1 {
  object-position: -35px -11px;
}

.link-sprite-walk-east-2 {
  object-position: -52px -11px;
}

.link-sprite-walk-north-1 {
  object-position: -69px -11px;
}

.link-sprite-walk-north-2 {
  object-position: -86px -11px;
}

.link-sprite-walk-west-1 {
  object-position: -35px -11px;
  transform: scaleX(-1);
}

.link-sprite-walk-west-2 {
  object-position: -52px -11px;
  transform: scaleX(-1);
}



.link-sprite-sword-south {
  object-position: -1px -47px;
}

.link-sprite-sword-east {
  object-position: -1px -77px;
}

.link-sprite-sword-north {
  object-position: -1px -109px;
}

.link-sprite-sword-west {
  object-position: -1px -77px;
  transform: scaleX(-1);
}



.link-sprite-walk-shield-south-1 {
  object-position: -289px -11px;
}

.link-sprite-walk-shield-south-2 {
  object-position: -306px -11px;
}

.link-sprite-walk-shield-east-1 {
  object-position: -323px -11px;
}

.link-sprite-walk-shield-east-2 {
  object-position: -340px -11px;
}

.link-sprite-walk-shield-north-1 {
  object-position: -69px -11px;
}

.link-sprite-walk-shield-north-2 {
  object-position: -86px -11px;
}

.link-sprite-walk-shield-west-1 {
  object-position: -323px -11px;
  transform: scaleX(-1);
}

.link-sprite-walk-shield-west-2 {
  object-position: -340px -11px;
  transform: scaleX(-1);
}