/* Position classes for 4x4 grid - FIXED */
.position_0_0:not(.isMoving) {
  top: 10px;
  left: 10px;
}

.position_0_1:not(.isMoving) {
  top: 10px;
  left: 110px;
}

.position_0_2:not(.isMoving) {
  top: 10px;
  left: 210px;
}

.position_0_3:not(.isMoving) {
  top: 10px;
  left: 310px;
}

.position_1_0:not(.isMoving) {
  top: 110px;
  left: 10px;
}

.position_1_1:not(.isMoving) {
  top: 110px;
  left: 110px;
}

.position_1_2:not(.isMoving) {
  top: 110px;
  left: 210px;
}

.position_1_3:not(.isMoving) {
  top: 110px;
  left: 310px;
}

.position_2_0:not(.isMoving) {
  top: 210px;
  left: 10px;
}

.position_2_1:not(.isMoving) {
  top: 210px;
  left: 110px;
}

.position_2_2:not(.isMoving) {
  top: 210px;
  left: 210px;
}

.position_2_3:not(.isMoving) {
  top: 210px;
  left: 310px;
}

.position_3_0:not(.isMoving) {
  top: 310px;
  left: 10px;
}

.position_3_1:not(.isMoving) {
  top: 310px;
  left: 110px;
}

.position_3_2:not(.isMoving) {
  top: 310px;
  left: 210px;
}

.position_3_3:not(.isMoving) {
  top: 310px;
  left: 310px;
}

/* Row animations */
.row_from_0_to_0 {
  top: 10px;
}

.row_from_0_to_1 {
  animation-duration: 0.20s;
  animation-name: row_from_0_to_1;
  animation-fill-mode: forwards;
}

@keyframes row_from_0_to_1 {
  from {
    top: 10px;
  }
  to {
    top: 110px;
  }
}

.row_from_0_to_2 {
  animation-duration: 0.20s;
  animation-name: row_from_0_to_2;
  animation-fill-mode: forwards;
}

@keyframes row_from_0_to_2 {
  from {
    top: 10px;
  }
  to {
    top: 210px;
  }
}

.row_from_0_to_3 {
  animation-duration: 0.20s;
  animation-name: row_from_0_to_3;
  animation-fill-mode: forwards;
}

@keyframes row_from_0_to_3 {
  from {
    top: 10px;
  }
  to {
    top: 310px;
  }
}

.row_from_1_to_0 {
  animation-duration: 0.20s;
  animation-name: row_from_1_to_0;
  animation-fill-mode: forwards;
}

@keyframes row_from_1_to_0 {
  from {
    top: 110px;
  }
  to {
    top: 10px;
  }
}

.row_from_1_to_1 {
  top: 110px;
}

.row_from_1_to_2 {
  animation-duration: 0.20s;
  animation-name: row_from_1_to_2;
  animation-fill-mode: forwards;
}

@keyframes row_from_1_to_2 {
  from {
    top: 110px;
  }
  to {
    top: 210px;
  }
}

.row_from_1_to_3 {
  animation-duration: 0.20s;
  animation-name: row_from_1_to_3;
  animation-fill-mode: forwards;
}

@keyframes row_from_1_to_3 {
  from {
    top: 110px;
  }
  to {
    top: 310px;
  }
}

.row_from_2_to_0 {
  animation-duration: 0.20s;
  animation-name: row_from_2_to_0;
  animation-fill-mode: forwards;
}

@keyframes row_from_2_to_0 {
  from {
    top: 210px;
  }
  to {
    top: 10px;
  }
}

.row_from_2_to_1 {
  animation-duration: 0.20s;
  animation-name: row_from_2_to_1;
  animation-fill-mode: forwards;
}

@keyframes row_from_2_to_1 {
  from {
    top: 210px;
  }
  to {
    top: 110px;
  }
}

.row_from_2_to_2 {
  top: 210px;
}

.row_from_2_to_3 {
  animation-duration: 0.20s;
  animation-name: row_from_2_to_3;
  animation-fill-mode: forwards;
}

@keyframes row_from_2_to_3 {
  from {
    top: 210px;
  }
  to {
    top: 310px;
  }
}

.row_from_3_to_0 {
  animation-duration: 0.20s;
  animation-name: row_from_3_to_0;
  animation-fill-mode: forwards;
}

@keyframes row_from_3_to_0 {
  from {
    top: 310px;
  }
  to {
    top: 10px;
  }
}

.row_from_3_to_1 {
  animation-duration: 0.20s;
  animation-name: row_from_3_to_1;
  animation-fill-mode: forwards;
}

@keyframes row_from_3_to_1 {
  from {
    top: 310px;
  }
  to {
    top: 110px;
  }
}

.row_from_3_to_2 {
  animation-duration: 0.20s;
  animation-name: row_from_3_to_2;
  animation-fill-mode: forwards;
}

@keyframes row_from_3_to_2 {
  from {
    top: 310px;
  }
  to {
    top: 210px;
  }
}

.row_from_3_to_3 {
  top: 310px;
}

/* Column animations - FIXED */
.column_from_0_to_0 {
  left: 10px;
}

.column_from_0_to_1 {
  animation-duration: 0.20s;
  animation-name: column_from_0_to_1;
  animation-fill-mode: forwards;
}

@keyframes column_from_0_to_1 {
  from {
    left: 10px;
  }
  to {
    left: 110px;
  }
}

.column_from_0_to_2 {
  animation-duration: 0.20s;
  animation-name: column_from_0_to_2;
  animation-fill-mode: forwards;
}

@keyframes column_from_0_to_2 {
  from {
    left: 10px;
  }
  to {
    left: 210px;
  }
}

.column_from_0_to_3 {
  animation-duration: 0.20s;
  animation-name: column_from_0_to_3;
  animation-fill-mode: forwards;
}

@keyframes column_from_0_to_3 {
  from {
    left: 10px;
  }
  to {
    left: 310px;
  }
}

.column_from_1_to_0 {
  animation-duration: 0.20s;
  animation-name: column_from_1_to_0;
  animation-fill-mode: forwards;
}

@keyframes column_from_1_to_0 {
  from {
    left: 110px;
  }
  to {
    left: 10px;
  }
}

.column_from_1_to_1 {
  left: 110px;
}

.column_from_1_to_2 {
  animation-duration: 0.20s;
  animation-name: column_from_1_to_2;
  animation-fill-mode: forwards;
}

@keyframes column_from_1_to_2 {
  from {
    left: 110px;
  }
  to {
    left: 210px;
  }
}

.column_from_1_to_3 {
  animation-duration: 0.20s;
  animation-name: column_from_1_to_3;
  animation-fill-mode: forwards;
}

@keyframes column_from_1_to_3 {
  from {
    left: 110px;
  }
  to {
    left: 310px;
  }
}

.column_from_2_to_0 {
  animation-duration: 0.20s;
  animation-name: column_from_2_to_0;
  animation-fill-mode: forwards;
}

@keyframes column_from_2_to_0 {
  from {
    left: 210px;
  }
  to {
    left: 10px;
  }
}

.column_from_2_to_1 {
  animation-duration: 0.20s;
  animation-name: column_from_2_to_1;
  animation-fill-mode: forwards;
}

@keyframes column_from_2_to_1 {
  from {
    left: 210px;
  }
  to {
    left: 110px;
  }
}

.column_from_2_to_2 {
  left: 210px;
}

.column_from_2_to_3 {
  animation-duration: 0.20s;
  animation-name: column_from_2_to_3;
  animation-fill-mode: forwards;
}

@keyframes column_from_2_to_3 {
  from {
    left: 210px;
  }
  to {
    left: 310px;
  }
}

.column_from_3_to_0 {
  animation-duration: 0.20s;
  animation-name: column_from_3_to_0;
  animation-fill-mode: forwards;
}

@keyframes column_from_3_to_0 {
  from {
    left: 310px;
  }
  to {
    left: 10px;
  }
}

.column_from_3_to_1 {
  animation-duration: 0.20s;
  animation-name: column_from_3_to_1;
  animation-fill-mode: forwards;
}

@keyframes column_from_3_to_1 {
  from {
    left: 310px;
  }
  to {
    left: 110px;
  }
}

.column_from_3_to_2 {
  animation-duration: 0.20s;
  animation-name: column_from_3_to_2;
  animation-fill-mode: forwards;
}

@keyframes column_from_3_to_2 {
  from {
    left: 310px;
  }
  to {
    left: 210px;
  }
}

.column_from_3_to_3 {
  left: 310px;
}