div:focus{outline:none;
}
.soko-floor,
.soko-wall,
.soko-dock,
.soko-indent {
  display : block;
  
  float : left;
  overflow : hidden;
  text-indent : -999em;
}
.soko-line {
  overflow : hidden;
}

.soko-indent,
.soko-floor,
.soko-wall,
.soko-dock,
.soko-box,
.soko-worker {
  background : #ccc;
  /* padding-top: 100%; */
  /* height : 1rem;
  width : 1rem; */
  aspect-ratio: 1/1; 
}

.soko-indent {
  background : #4c4;
}
.soko-wall {
  background : #ccc url(wall.png) 0 0 no-repeat;
  background : #ccc url(wall.svg) 0 0 no-repeat;
  background-size: cover;
}
.soko-dock {
  background : #ccc url(dock.png) 0 0 no-repeat;
  background : #ccc url(dock.svg) 0 0 no-repeat;
  background-size: cover;
}
.soko-box {
  background : #ccc url(box.png) 0 0 no-repeat;
  background : #ccc url(box.svg) 0 0 no-repeat;
  background-size: cover;
}
.soko-worker {
  background : #ccc url(man.png) 0 0 no-repeat;
  background : #ccc url(man.svg) 0 0 no-repeat;
  background-size: cover;
}
.soko-box.soko-dock {
  background : #ccc url(docked-box.png) 0 0 no-repeat;
  background : #ccc url(docked-box.svg) 0 0 no-repeat;
  background-size: cover;
}
.soko-solved .soko-room * {
  opacity : .8;
}
.soko-room:after {
  content : attr(title);
  display : block;
  text-align : center;
  font-size : .9rem;
  margin: 1rem 0rem;
}