#playField {
  width: 100%;
  padding-bottom: 100%;
  position: relative;
  perspective: 1000px;
  background-color: #eee;
  overflow: hidden;
  float: left;
}

.cube {
  width: 50%;
  height: 50%;
  position: absolute;
  left: 25%;
  top: 25%;
  transform-style: preserve-3d;
  transition: transform 500ms;
}

.plane {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transform: rotateY(90deg) translateX(-37.5%) rotateY(-90deg);
}
.plane + .plane {  
  transform: rotateY(90deg) translateX(-12.5%) rotateY(-90deg);
}
.plane + .plane + .plane {  
  transform: rotateY(90deg) translateX(12.5%) rotateY(-90deg);
}
.plane + .plane + .plane + .plane {  
  transform: rotateY(90deg) translateX(37.5%) rotateY(-90deg);
}

.cube-pane {
  width: 25%;
  height: 25%;
  float: left;
  transition: transform 500ms;
  text-align: center;
}

.cube-pane.focus {
  color: #ff0;
}

.cube-pane.active {
  color: #f00;
}

.cube-pane.success {
  color: #0f0;
}

.cube-pane::before {
  content: '';
  height: 100%;
  display: inline-block;
  margin-right: -5px;
  vertical-align: middle;
}

.field-container {
  width: 100%;
  padding-bottom: 100%;
  position: relative;
}

.field-container.field-diagonal {
  padding-bottom: 25%;
}

.field-panel {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.field-cell {
  float: left;
  width: 25%;
  height: 25%;
  text-align: center;
  outline: 1px solid #ccc;
}

.field-diagonal .field-cell {
  height: 100%;
}

.field-cell::before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

.field-cell.focus {
  outline-color: #ff0;
}
.field-cell.active {
  outline-color: #f00;
}
.field-cell.success {
  color: #0f0;
}