.jigsaw-game {
  position: relative;
  width: 450px;
  height: 450px;
  margin: 40px auto;
  border: 4px solid #333;
  background: #f4f4f9;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
  grid-template-columns: repeat(3, 1fr);
  -ms-grid-rows: (1fr)[3];
  grid-template-rows: repeat(3, 1fr);
}.jigsaw-game > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}.jigsaw-game > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}.jigsaw-game > *:nth-child(3) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}.jigsaw-game > *:nth-child(4) {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
}.jigsaw-game > *:nth-child(5) {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}.jigsaw-game > *:nth-child(6) {
  -ms-grid-row: 2;
  -ms-grid-column: 3;
}.jigsaw-game > *:nth-child(7) {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}.jigsaw-game > *:nth-child(8) {
  -ms-grid-row: 3;
  -ms-grid-column: 2;
}.jigsaw-game > *:nth-child(9) {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}

.piece {
  position: absolute;
  width: 150px;
  height: 150px;
  -webkit-transition: opacity 0.3s ease, margin 1s ease, width 1s ease, height 1s ease, -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, margin 1s ease, width 1s ease, height 1s ease, -webkit-transform 0.3s ease;
  transition: transform 0.3s ease, opacity 0.3s ease, margin 1s ease, width 1s ease, height 1s ease;
  transition: transform 0.3s ease, opacity 0.3s ease, margin 1s ease, width 1s ease, height 1s ease, -webkit-transform 0.3s ease;
  z-index: 10;
  cursor: pointer;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background-image: url("https://picsum.photos/300/300");
  background-size: 300% 300%;
}
.piece label {
  display: none;
  position: absolute;
  width: 30px;
  height: 30px;
  background: rgba(0, 0, 0, 0.2);
  color: white;
  text-align: center;
  line-height: 30px;
  font-size: 20px;
  border-radius: 50%;
  z-index: 20;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  opacity: 0.6;
}
.piece label:hover {
  background: rgba(0, 0, 0, 0.8);
}
.piece .move-up {
  top: 5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.piece .move-down {
  bottom: 5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.piece .move-left {
  left: 5px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.piece .move-right {
  right: 5px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.jigsaw-radio {
  display: none;
}

#p0-0:checked ~ .jigsaw-game .p0 {
  -webkit-transform: translate(0px, 0px);
          transform: translate(0px, 0px);
  background-position: 0% 0%;
}
#p0-0:checked ~ .jigsaw-game .p0 .move-down[for=p0-3] {
  display: block;
}
#p0-0:checked ~ .jigsaw-game .p0 .move-right[for=p0-1] {
  display: block;
}

#p0-1:checked ~ .jigsaw-game .p0 {
  -webkit-transform: translate(150px, 0px);
          transform: translate(150px, 0px);
  background-position: 0% 0%;
}
#p0-1:checked ~ .jigsaw-game .p0 .move-down[for=p0-4] {
  display: block;
}
#p0-1:checked ~ .jigsaw-game .p0 .move-left[for=p0-0] {
  display: block;
}
#p0-1:checked ~ .jigsaw-game .p0 .move-right[for=p0-2] {
  display: block;
}

#p0-2:checked ~ .jigsaw-game .p0 {
  -webkit-transform: translate(300px, 0px);
          transform: translate(300px, 0px);
  background-position: 0% 0%;
}
#p0-2:checked ~ .jigsaw-game .p0 .move-down[for=p0-5] {
  display: block;
}
#p0-2:checked ~ .jigsaw-game .p0 .move-left[for=p0-1] {
  display: block;
}

#p0-3:checked ~ .jigsaw-game .p0 {
  -webkit-transform: translate(0px, 150px);
          transform: translate(0px, 150px);
  background-position: 0% 0%;
}
#p0-3:checked ~ .jigsaw-game .p0 .move-up[for=p0-0] {
  display: block;
}
#p0-3:checked ~ .jigsaw-game .p0 .move-down[for=p0-6] {
  display: block;
}
#p0-3:checked ~ .jigsaw-game .p0 .move-right[for=p0-4] {
  display: block;
}

#p0-4:checked ~ .jigsaw-game .p0 {
  -webkit-transform: translate(150px, 150px);
          transform: translate(150px, 150px);
  background-position: 0% 0%;
}
#p0-4:checked ~ .jigsaw-game .p0 .move-up[for=p0-1] {
  display: block;
}
#p0-4:checked ~ .jigsaw-game .p0 .move-down[for=p0-7] {
  display: block;
}
#p0-4:checked ~ .jigsaw-game .p0 .move-left[for=p0-3] {
  display: block;
}
#p0-4:checked ~ .jigsaw-game .p0 .move-right[for=p0-5] {
  display: block;
}

#p0-5:checked ~ .jigsaw-game .p0 {
  -webkit-transform: translate(300px, 150px);
          transform: translate(300px, 150px);
  background-position: 0% 0%;
}
#p0-5:checked ~ .jigsaw-game .p0 .move-up[for=p0-2] {
  display: block;
}
#p0-5:checked ~ .jigsaw-game .p0 .move-down[for=p0-8] {
  display: block;
}
#p0-5:checked ~ .jigsaw-game .p0 .move-left[for=p0-4] {
  display: block;
}

#p0-6:checked ~ .jigsaw-game .p0 {
  -webkit-transform: translate(0px, 300px);
          transform: translate(0px, 300px);
  background-position: 0% 0%;
}
#p0-6:checked ~ .jigsaw-game .p0 .move-up[for=p0-3] {
  display: block;
}
#p0-6:checked ~ .jigsaw-game .p0 .move-right[for=p0-7] {
  display: block;
}

#p0-7:checked ~ .jigsaw-game .p0 {
  -webkit-transform: translate(150px, 300px);
          transform: translate(150px, 300px);
  background-position: 0% 0%;
}
#p0-7:checked ~ .jigsaw-game .p0 .move-up[for=p0-4] {
  display: block;
}
#p0-7:checked ~ .jigsaw-game .p0 .move-left[for=p0-6] {
  display: block;
}
#p0-7:checked ~ .jigsaw-game .p0 .move-right[for=p0-8] {
  display: block;
}

#p0-8:checked ~ .jigsaw-game .p0 {
  -webkit-transform: translate(300px, 300px);
          transform: translate(300px, 300px);
  background-position: 0% 0%;
}
#p0-8:checked ~ .jigsaw-game .p0 .move-up[for=p0-5] {
  display: block;
}
#p0-8:checked ~ .jigsaw-game .p0 .move-left[for=p0-7] {
  display: block;
}

#p1-0:checked ~ .jigsaw-game .p1 {
  -webkit-transform: translate(0px, 0px);
          transform: translate(0px, 0px);
  background-position: 50% 0%;
}
#p1-0:checked ~ .jigsaw-game .p1 .move-down[for=p1-3] {
  display: block;
}
#p1-0:checked ~ .jigsaw-game .p1 .move-right[for=p1-1] {
  display: block;
}

#p1-1:checked ~ .jigsaw-game .p1 {
  -webkit-transform: translate(150px, 0px);
          transform: translate(150px, 0px);
  background-position: 50% 0%;
}
#p1-1:checked ~ .jigsaw-game .p1 .move-down[for=p1-4] {
  display: block;
}
#p1-1:checked ~ .jigsaw-game .p1 .move-left[for=p1-0] {
  display: block;
}
#p1-1:checked ~ .jigsaw-game .p1 .move-right[for=p1-2] {
  display: block;
}

#p1-2:checked ~ .jigsaw-game .p1 {
  -webkit-transform: translate(300px, 0px);
          transform: translate(300px, 0px);
  background-position: 50% 0%;
}
#p1-2:checked ~ .jigsaw-game .p1 .move-down[for=p1-5] {
  display: block;
}
#p1-2:checked ~ .jigsaw-game .p1 .move-left[for=p1-1] {
  display: block;
}

#p1-3:checked ~ .jigsaw-game .p1 {
  -webkit-transform: translate(0px, 150px);
          transform: translate(0px, 150px);
  background-position: 50% 0%;
}
#p1-3:checked ~ .jigsaw-game .p1 .move-up[for=p1-0] {
  display: block;
}
#p1-3:checked ~ .jigsaw-game .p1 .move-down[for=p1-6] {
  display: block;
}
#p1-3:checked ~ .jigsaw-game .p1 .move-right[for=p1-4] {
  display: block;
}

#p1-4:checked ~ .jigsaw-game .p1 {
  -webkit-transform: translate(150px, 150px);
          transform: translate(150px, 150px);
  background-position: 50% 0%;
}
#p1-4:checked ~ .jigsaw-game .p1 .move-up[for=p1-1] {
  display: block;
}
#p1-4:checked ~ .jigsaw-game .p1 .move-down[for=p1-7] {
  display: block;
}
#p1-4:checked ~ .jigsaw-game .p1 .move-left[for=p1-3] {
  display: block;
}
#p1-4:checked ~ .jigsaw-game .p1 .move-right[for=p1-5] {
  display: block;
}

#p1-5:checked ~ .jigsaw-game .p1 {
  -webkit-transform: translate(300px, 150px);
          transform: translate(300px, 150px);
  background-position: 50% 0%;
}
#p1-5:checked ~ .jigsaw-game .p1 .move-up[for=p1-2] {
  display: block;
}
#p1-5:checked ~ .jigsaw-game .p1 .move-down[for=p1-8] {
  display: block;
}
#p1-5:checked ~ .jigsaw-game .p1 .move-left[for=p1-4] {
  display: block;
}

#p1-6:checked ~ .jigsaw-game .p1 {
  -webkit-transform: translate(0px, 300px);
          transform: translate(0px, 300px);
  background-position: 50% 0%;
}
#p1-6:checked ~ .jigsaw-game .p1 .move-up[for=p1-3] {
  display: block;
}
#p1-6:checked ~ .jigsaw-game .p1 .move-right[for=p1-7] {
  display: block;
}

#p1-7:checked ~ .jigsaw-game .p1 {
  -webkit-transform: translate(150px, 300px);
          transform: translate(150px, 300px);
  background-position: 50% 0%;
}
#p1-7:checked ~ .jigsaw-game .p1 .move-up[for=p1-4] {
  display: block;
}
#p1-7:checked ~ .jigsaw-game .p1 .move-left[for=p1-6] {
  display: block;
}
#p1-7:checked ~ .jigsaw-game .p1 .move-right[for=p1-8] {
  display: block;
}

#p1-8:checked ~ .jigsaw-game .p1 {
  -webkit-transform: translate(300px, 300px);
          transform: translate(300px, 300px);
  background-position: 50% 0%;
}
#p1-8:checked ~ .jigsaw-game .p1 .move-up[for=p1-5] {
  display: block;
}
#p1-8:checked ~ .jigsaw-game .p1 .move-left[for=p1-7] {
  display: block;
}

#p2-0:checked ~ .jigsaw-game .p2 {
  -webkit-transform: translate(0px, 0px);
          transform: translate(0px, 0px);
  background-position: 100% 0%;
}
#p2-0:checked ~ .jigsaw-game .p2 .move-down[for=p2-3] {
  display: block;
}
#p2-0:checked ~ .jigsaw-game .p2 .move-right[for=p2-1] {
  display: block;
}

#p2-1:checked ~ .jigsaw-game .p2 {
  -webkit-transform: translate(150px, 0px);
          transform: translate(150px, 0px);
  background-position: 100% 0%;
}
#p2-1:checked ~ .jigsaw-game .p2 .move-down[for=p2-4] {
  display: block;
}
#p2-1:checked ~ .jigsaw-game .p2 .move-left[for=p2-0] {
  display: block;
}
#p2-1:checked ~ .jigsaw-game .p2 .move-right[for=p2-2] {
  display: block;
}

#p2-2:checked ~ .jigsaw-game .p2 {
  -webkit-transform: translate(300px, 0px);
          transform: translate(300px, 0px);
  background-position: 100% 0%;
}
#p2-2:checked ~ .jigsaw-game .p2 .move-down[for=p2-5] {
  display: block;
}
#p2-2:checked ~ .jigsaw-game .p2 .move-left[for=p2-1] {
  display: block;
}

#p2-3:checked ~ .jigsaw-game .p2 {
  -webkit-transform: translate(0px, 150px);
          transform: translate(0px, 150px);
  background-position: 100% 0%;
}
#p2-3:checked ~ .jigsaw-game .p2 .move-up[for=p2-0] {
  display: block;
}
#p2-3:checked ~ .jigsaw-game .p2 .move-down[for=p2-6] {
  display: block;
}
#p2-3:checked ~ .jigsaw-game .p2 .move-right[for=p2-4] {
  display: block;
}

#p2-4:checked ~ .jigsaw-game .p2 {
  -webkit-transform: translate(150px, 150px);
          transform: translate(150px, 150px);
  background-position: 100% 0%;
}
#p2-4:checked ~ .jigsaw-game .p2 .move-up[for=p2-1] {
  display: block;
}
#p2-4:checked ~ .jigsaw-game .p2 .move-down[for=p2-7] {
  display: block;
}
#p2-4:checked ~ .jigsaw-game .p2 .move-left[for=p2-3] {
  display: block;
}
#p2-4:checked ~ .jigsaw-game .p2 .move-right[for=p2-5] {
  display: block;
}

#p2-5:checked ~ .jigsaw-game .p2 {
  -webkit-transform: translate(300px, 150px);
          transform: translate(300px, 150px);
  background-position: 100% 0%;
}
#p2-5:checked ~ .jigsaw-game .p2 .move-up[for=p2-2] {
  display: block;
}
#p2-5:checked ~ .jigsaw-game .p2 .move-down[for=p2-8] {
  display: block;
}
#p2-5:checked ~ .jigsaw-game .p2 .move-left[for=p2-4] {
  display: block;
}

#p2-6:checked ~ .jigsaw-game .p2 {
  -webkit-transform: translate(0px, 300px);
          transform: translate(0px, 300px);
  background-position: 100% 0%;
}
#p2-6:checked ~ .jigsaw-game .p2 .move-up[for=p2-3] {
  display: block;
}
#p2-6:checked ~ .jigsaw-game .p2 .move-right[for=p2-7] {
  display: block;
}

#p2-7:checked ~ .jigsaw-game .p2 {
  -webkit-transform: translate(150px, 300px);
          transform: translate(150px, 300px);
  background-position: 100% 0%;
}
#p2-7:checked ~ .jigsaw-game .p2 .move-up[for=p2-4] {
  display: block;
}
#p2-7:checked ~ .jigsaw-game .p2 .move-left[for=p2-6] {
  display: block;
}
#p2-7:checked ~ .jigsaw-game .p2 .move-right[for=p2-8] {
  display: block;
}

#p2-8:checked ~ .jigsaw-game .p2 {
  -webkit-transform: translate(300px, 300px);
          transform: translate(300px, 300px);
  background-position: 100% 0%;
}
#p2-8:checked ~ .jigsaw-game .p2 .move-up[for=p2-5] {
  display: block;
}
#p2-8:checked ~ .jigsaw-game .p2 .move-left[for=p2-7] {
  display: block;
}

#p3-0:checked ~ .jigsaw-game .p3 {
  -webkit-transform: translate(0px, 0px);
          transform: translate(0px, 0px);
  background-position: 0% 50%;
}
#p3-0:checked ~ .jigsaw-game .p3 .move-down[for=p3-3] {
  display: block;
}
#p3-0:checked ~ .jigsaw-game .p3 .move-right[for=p3-1] {
  display: block;
}

#p3-1:checked ~ .jigsaw-game .p3 {
  -webkit-transform: translate(150px, 0px);
          transform: translate(150px, 0px);
  background-position: 0% 50%;
}
#p3-1:checked ~ .jigsaw-game .p3 .move-down[for=p3-4] {
  display: block;
}
#p3-1:checked ~ .jigsaw-game .p3 .move-left[for=p3-0] {
  display: block;
}
#p3-1:checked ~ .jigsaw-game .p3 .move-right[for=p3-2] {
  display: block;
}

#p3-2:checked ~ .jigsaw-game .p3 {
  -webkit-transform: translate(300px, 0px);
          transform: translate(300px, 0px);
  background-position: 0% 50%;
}
#p3-2:checked ~ .jigsaw-game .p3 .move-down[for=p3-5] {
  display: block;
}
#p3-2:checked ~ .jigsaw-game .p3 .move-left[for=p3-1] {
  display: block;
}

#p3-3:checked ~ .jigsaw-game .p3 {
  -webkit-transform: translate(0px, 150px);
          transform: translate(0px, 150px);
  background-position: 0% 50%;
}
#p3-3:checked ~ .jigsaw-game .p3 .move-up[for=p3-0] {
  display: block;
}
#p3-3:checked ~ .jigsaw-game .p3 .move-down[for=p3-6] {
  display: block;
}
#p3-3:checked ~ .jigsaw-game .p3 .move-right[for=p3-4] {
  display: block;
}

#p3-4:checked ~ .jigsaw-game .p3 {
  -webkit-transform: translate(150px, 150px);
          transform: translate(150px, 150px);
  background-position: 0% 50%;
}
#p3-4:checked ~ .jigsaw-game .p3 .move-up[for=p3-1] {
  display: block;
}
#p3-4:checked ~ .jigsaw-game .p3 .move-down[for=p3-7] {
  display: block;
}
#p3-4:checked ~ .jigsaw-game .p3 .move-left[for=p3-3] {
  display: block;
}
#p3-4:checked ~ .jigsaw-game .p3 .move-right[for=p3-5] {
  display: block;
}

#p3-5:checked ~ .jigsaw-game .p3 {
  -webkit-transform: translate(300px, 150px);
          transform: translate(300px, 150px);
  background-position: 0% 50%;
}
#p3-5:checked ~ .jigsaw-game .p3 .move-up[for=p3-2] {
  display: block;
}
#p3-5:checked ~ .jigsaw-game .p3 .move-down[for=p3-8] {
  display: block;
}
#p3-5:checked ~ .jigsaw-game .p3 .move-left[for=p3-4] {
  display: block;
}

#p3-6:checked ~ .jigsaw-game .p3 {
  -webkit-transform: translate(0px, 300px);
          transform: translate(0px, 300px);
  background-position: 0% 50%;
}
#p3-6:checked ~ .jigsaw-game .p3 .move-up[for=p3-3] {
  display: block;
}
#p3-6:checked ~ .jigsaw-game .p3 .move-right[for=p3-7] {
  display: block;
}

#p3-7:checked ~ .jigsaw-game .p3 {
  -webkit-transform: translate(150px, 300px);
          transform: translate(150px, 300px);
  background-position: 0% 50%;
}
#p3-7:checked ~ .jigsaw-game .p3 .move-up[for=p3-4] {
  display: block;
}
#p3-7:checked ~ .jigsaw-game .p3 .move-left[for=p3-6] {
  display: block;
}
#p3-7:checked ~ .jigsaw-game .p3 .move-right[for=p3-8] {
  display: block;
}

#p3-8:checked ~ .jigsaw-game .p3 {
  -webkit-transform: translate(300px, 300px);
          transform: translate(300px, 300px);
  background-position: 0% 50%;
}
#p3-8:checked ~ .jigsaw-game .p3 .move-up[for=p3-5] {
  display: block;
}
#p3-8:checked ~ .jigsaw-game .p3 .move-left[for=p3-7] {
  display: block;
}

#p4-0:checked ~ .jigsaw-game .p4 {
  -webkit-transform: translate(0px, 0px);
          transform: translate(0px, 0px);
  background-position: 50% 50%;
}
#p4-0:checked ~ .jigsaw-game .p4 .move-down[for=p4-3] {
  display: block;
}
#p4-0:checked ~ .jigsaw-game .p4 .move-right[for=p4-1] {
  display: block;
}

#p4-1:checked ~ .jigsaw-game .p4 {
  -webkit-transform: translate(150px, 0px);
          transform: translate(150px, 0px);
  background-position: 50% 50%;
}
#p4-1:checked ~ .jigsaw-game .p4 .move-down[for=p4-4] {
  display: block;
}
#p4-1:checked ~ .jigsaw-game .p4 .move-left[for=p4-0] {
  display: block;
}
#p4-1:checked ~ .jigsaw-game .p4 .move-right[for=p4-2] {
  display: block;
}

#p4-2:checked ~ .jigsaw-game .p4 {
  -webkit-transform: translate(300px, 0px);
          transform: translate(300px, 0px);
  background-position: 50% 50%;
}
#p4-2:checked ~ .jigsaw-game .p4 .move-down[for=p4-5] {
  display: block;
}
#p4-2:checked ~ .jigsaw-game .p4 .move-left[for=p4-1] {
  display: block;
}

#p4-3:checked ~ .jigsaw-game .p4 {
  -webkit-transform: translate(0px, 150px);
          transform: translate(0px, 150px);
  background-position: 50% 50%;
}
#p4-3:checked ~ .jigsaw-game .p4 .move-up[for=p4-0] {
  display: block;
}
#p4-3:checked ~ .jigsaw-game .p4 .move-down[for=p4-6] {
  display: block;
}
#p4-3:checked ~ .jigsaw-game .p4 .move-right[for=p4-4] {
  display: block;
}

#p4-4:checked ~ .jigsaw-game .p4 {
  -webkit-transform: translate(150px, 150px);
          transform: translate(150px, 150px);
  background-position: 50% 50%;
}
#p4-4:checked ~ .jigsaw-game .p4 .move-up[for=p4-1] {
  display: block;
}
#p4-4:checked ~ .jigsaw-game .p4 .move-down[for=p4-7] {
  display: block;
}
#p4-4:checked ~ .jigsaw-game .p4 .move-left[for=p4-3] {
  display: block;
}
#p4-4:checked ~ .jigsaw-game .p4 .move-right[for=p4-5] {
  display: block;
}

#p4-5:checked ~ .jigsaw-game .p4 {
  -webkit-transform: translate(300px, 150px);
          transform: translate(300px, 150px);
  background-position: 50% 50%;
}
#p4-5:checked ~ .jigsaw-game .p4 .move-up[for=p4-2] {
  display: block;
}
#p4-5:checked ~ .jigsaw-game .p4 .move-down[for=p4-8] {
  display: block;
}
#p4-5:checked ~ .jigsaw-game .p4 .move-left[for=p4-4] {
  display: block;
}

#p4-6:checked ~ .jigsaw-game .p4 {
  -webkit-transform: translate(0px, 300px);
          transform: translate(0px, 300px);
  background-position: 50% 50%;
}
#p4-6:checked ~ .jigsaw-game .p4 .move-up[for=p4-3] {
  display: block;
}
#p4-6:checked ~ .jigsaw-game .p4 .move-right[for=p4-7] {
  display: block;
}

#p4-7:checked ~ .jigsaw-game .p4 {
  -webkit-transform: translate(150px, 300px);
          transform: translate(150px, 300px);
  background-position: 50% 50%;
}
#p4-7:checked ~ .jigsaw-game .p4 .move-up[for=p4-4] {
  display: block;
}
#p4-7:checked ~ .jigsaw-game .p4 .move-left[for=p4-6] {
  display: block;
}
#p4-7:checked ~ .jigsaw-game .p4 .move-right[for=p4-8] {
  display: block;
}

#p4-8:checked ~ .jigsaw-game .p4 {
  -webkit-transform: translate(300px, 300px);
          transform: translate(300px, 300px);
  background-position: 50% 50%;
}
#p4-8:checked ~ .jigsaw-game .p4 .move-up[for=p4-5] {
  display: block;
}
#p4-8:checked ~ .jigsaw-game .p4 .move-left[for=p4-7] {
  display: block;
}

#p5-0:checked ~ .jigsaw-game .p5 {
  -webkit-transform: translate(0px, 0px);
          transform: translate(0px, 0px);
  background-position: 100% 50%;
}
#p5-0:checked ~ .jigsaw-game .p5 .move-down[for=p5-3] {
  display: block;
}
#p5-0:checked ~ .jigsaw-game .p5 .move-right[for=p5-1] {
  display: block;
}

#p5-1:checked ~ .jigsaw-game .p5 {
  -webkit-transform: translate(150px, 0px);
          transform: translate(150px, 0px);
  background-position: 100% 50%;
}
#p5-1:checked ~ .jigsaw-game .p5 .move-down[for=p5-4] {
  display: block;
}
#p5-1:checked ~ .jigsaw-game .p5 .move-left[for=p5-0] {
  display: block;
}
#p5-1:checked ~ .jigsaw-game .p5 .move-right[for=p5-2] {
  display: block;
}

#p5-2:checked ~ .jigsaw-game .p5 {
  -webkit-transform: translate(300px, 0px);
          transform: translate(300px, 0px);
  background-position: 100% 50%;
}
#p5-2:checked ~ .jigsaw-game .p5 .move-down[for=p5-5] {
  display: block;
}
#p5-2:checked ~ .jigsaw-game .p5 .move-left[for=p5-1] {
  display: block;
}

#p5-3:checked ~ .jigsaw-game .p5 {
  -webkit-transform: translate(0px, 150px);
          transform: translate(0px, 150px);
  background-position: 100% 50%;
}
#p5-3:checked ~ .jigsaw-game .p5 .move-up[for=p5-0] {
  display: block;
}
#p5-3:checked ~ .jigsaw-game .p5 .move-down[for=p5-6] {
  display: block;
}
#p5-3:checked ~ .jigsaw-game .p5 .move-right[for=p5-4] {
  display: block;
}

#p5-4:checked ~ .jigsaw-game .p5 {
  -webkit-transform: translate(150px, 150px);
          transform: translate(150px, 150px);
  background-position: 100% 50%;
}
#p5-4:checked ~ .jigsaw-game .p5 .move-up[for=p5-1] {
  display: block;
}
#p5-4:checked ~ .jigsaw-game .p5 .move-down[for=p5-7] {
  display: block;
}
#p5-4:checked ~ .jigsaw-game .p5 .move-left[for=p5-3] {
  display: block;
}
#p5-4:checked ~ .jigsaw-game .p5 .move-right[for=p5-5] {
  display: block;
}

#p5-5:checked ~ .jigsaw-game .p5 {
  -webkit-transform: translate(300px, 150px);
          transform: translate(300px, 150px);
  background-position: 100% 50%;
}
#p5-5:checked ~ .jigsaw-game .p5 .move-up[for=p5-2] {
  display: block;
}
#p5-5:checked ~ .jigsaw-game .p5 .move-down[for=p5-8] {
  display: block;
}
#p5-5:checked ~ .jigsaw-game .p5 .move-left[for=p5-4] {
  display: block;
}

#p5-6:checked ~ .jigsaw-game .p5 {
  -webkit-transform: translate(0px, 300px);
          transform: translate(0px, 300px);
  background-position: 100% 50%;
}
#p5-6:checked ~ .jigsaw-game .p5 .move-up[for=p5-3] {
  display: block;
}
#p5-6:checked ~ .jigsaw-game .p5 .move-right[for=p5-7] {
  display: block;
}

#p5-7:checked ~ .jigsaw-game .p5 {
  -webkit-transform: translate(150px, 300px);
          transform: translate(150px, 300px);
  background-position: 100% 50%;
}
#p5-7:checked ~ .jigsaw-game .p5 .move-up[for=p5-4] {
  display: block;
}
#p5-7:checked ~ .jigsaw-game .p5 .move-left[for=p5-6] {
  display: block;
}
#p5-7:checked ~ .jigsaw-game .p5 .move-right[for=p5-8] {
  display: block;
}

#p5-8:checked ~ .jigsaw-game .p5 {
  -webkit-transform: translate(300px, 300px);
          transform: translate(300px, 300px);
  background-position: 100% 50%;
}
#p5-8:checked ~ .jigsaw-game .p5 .move-up[for=p5-5] {
  display: block;
}
#p5-8:checked ~ .jigsaw-game .p5 .move-left[for=p5-7] {
  display: block;
}

#p6-0:checked ~ .jigsaw-game .p6 {
  -webkit-transform: translate(0px, 0px);
          transform: translate(0px, 0px);
  background-position: 0% 100%;
}
#p6-0:checked ~ .jigsaw-game .p6 .move-down[for=p6-3] {
  display: block;
}
#p6-0:checked ~ .jigsaw-game .p6 .move-right[for=p6-1] {
  display: block;
}

#p6-1:checked ~ .jigsaw-game .p6 {
  -webkit-transform: translate(150px, 0px);
          transform: translate(150px, 0px);
  background-position: 0% 100%;
}
#p6-1:checked ~ .jigsaw-game .p6 .move-down[for=p6-4] {
  display: block;
}
#p6-1:checked ~ .jigsaw-game .p6 .move-left[for=p6-0] {
  display: block;
}
#p6-1:checked ~ .jigsaw-game .p6 .move-right[for=p6-2] {
  display: block;
}

#p6-2:checked ~ .jigsaw-game .p6 {
  -webkit-transform: translate(300px, 0px);
          transform: translate(300px, 0px);
  background-position: 0% 100%;
}
#p6-2:checked ~ .jigsaw-game .p6 .move-down[for=p6-5] {
  display: block;
}
#p6-2:checked ~ .jigsaw-game .p6 .move-left[for=p6-1] {
  display: block;
}

#p6-3:checked ~ .jigsaw-game .p6 {
  -webkit-transform: translate(0px, 150px);
          transform: translate(0px, 150px);
  background-position: 0% 100%;
}
#p6-3:checked ~ .jigsaw-game .p6 .move-up[for=p6-0] {
  display: block;
}
#p6-3:checked ~ .jigsaw-game .p6 .move-down[for=p6-6] {
  display: block;
}
#p6-3:checked ~ .jigsaw-game .p6 .move-right[for=p6-4] {
  display: block;
}

#p6-4:checked ~ .jigsaw-game .p6 {
  -webkit-transform: translate(150px, 150px);
          transform: translate(150px, 150px);
  background-position: 0% 100%;
}
#p6-4:checked ~ .jigsaw-game .p6 .move-up[for=p6-1] {
  display: block;
}
#p6-4:checked ~ .jigsaw-game .p6 .move-down[for=p6-7] {
  display: block;
}
#p6-4:checked ~ .jigsaw-game .p6 .move-left[for=p6-3] {
  display: block;
}
#p6-4:checked ~ .jigsaw-game .p6 .move-right[for=p6-5] {
  display: block;
}

#p6-5:checked ~ .jigsaw-game .p6 {
  -webkit-transform: translate(300px, 150px);
          transform: translate(300px, 150px);
  background-position: 0% 100%;
}
#p6-5:checked ~ .jigsaw-game .p6 .move-up[for=p6-2] {
  display: block;
}
#p6-5:checked ~ .jigsaw-game .p6 .move-down[for=p6-8] {
  display: block;
}
#p6-5:checked ~ .jigsaw-game .p6 .move-left[for=p6-4] {
  display: block;
}

#p6-6:checked ~ .jigsaw-game .p6 {
  -webkit-transform: translate(0px, 300px);
          transform: translate(0px, 300px);
  background-position: 0% 100%;
}
#p6-6:checked ~ .jigsaw-game .p6 .move-up[for=p6-3] {
  display: block;
}
#p6-6:checked ~ .jigsaw-game .p6 .move-right[for=p6-7] {
  display: block;
}

#p6-7:checked ~ .jigsaw-game .p6 {
  -webkit-transform: translate(150px, 300px);
          transform: translate(150px, 300px);
  background-position: 0% 100%;
}
#p6-7:checked ~ .jigsaw-game .p6 .move-up[for=p6-4] {
  display: block;
}
#p6-7:checked ~ .jigsaw-game .p6 .move-left[for=p6-6] {
  display: block;
}
#p6-7:checked ~ .jigsaw-game .p6 .move-right[for=p6-8] {
  display: block;
}

#p6-8:checked ~ .jigsaw-game .p6 {
  -webkit-transform: translate(300px, 300px);
          transform: translate(300px, 300px);
  background-position: 0% 100%;
}
#p6-8:checked ~ .jigsaw-game .p6 .move-up[for=p6-5] {
  display: block;
}
#p6-8:checked ~ .jigsaw-game .p6 .move-left[for=p6-7] {
  display: block;
}

#p7-0:checked ~ .jigsaw-game .p7 {
  -webkit-transform: translate(0px, 0px);
          transform: translate(0px, 0px);
  background-position: 50% 100%;
}
#p7-0:checked ~ .jigsaw-game .p7 .move-down[for=p7-3] {
  display: block;
}
#p7-0:checked ~ .jigsaw-game .p7 .move-right[for=p7-1] {
  display: block;
}

#p7-1:checked ~ .jigsaw-game .p7 {
  -webkit-transform: translate(150px, 0px);
          transform: translate(150px, 0px);
  background-position: 50% 100%;
}
#p7-1:checked ~ .jigsaw-game .p7 .move-down[for=p7-4] {
  display: block;
}
#p7-1:checked ~ .jigsaw-game .p7 .move-left[for=p7-0] {
  display: block;
}
#p7-1:checked ~ .jigsaw-game .p7 .move-right[for=p7-2] {
  display: block;
}

#p7-2:checked ~ .jigsaw-game .p7 {
  -webkit-transform: translate(300px, 0px);
          transform: translate(300px, 0px);
  background-position: 50% 100%;
}
#p7-2:checked ~ .jigsaw-game .p7 .move-down[for=p7-5] {
  display: block;
}
#p7-2:checked ~ .jigsaw-game .p7 .move-left[for=p7-1] {
  display: block;
}

#p7-3:checked ~ .jigsaw-game .p7 {
  -webkit-transform: translate(0px, 150px);
          transform: translate(0px, 150px);
  background-position: 50% 100%;
}
#p7-3:checked ~ .jigsaw-game .p7 .move-up[for=p7-0] {
  display: block;
}
#p7-3:checked ~ .jigsaw-game .p7 .move-down[for=p7-6] {
  display: block;
}
#p7-3:checked ~ .jigsaw-game .p7 .move-right[for=p7-4] {
  display: block;
}

#p7-4:checked ~ .jigsaw-game .p7 {
  -webkit-transform: translate(150px, 150px);
          transform: translate(150px, 150px);
  background-position: 50% 100%;
}
#p7-4:checked ~ .jigsaw-game .p7 .move-up[for=p7-1] {
  display: block;
}
#p7-4:checked ~ .jigsaw-game .p7 .move-down[for=p7-7] {
  display: block;
}
#p7-4:checked ~ .jigsaw-game .p7 .move-left[for=p7-3] {
  display: block;
}
#p7-4:checked ~ .jigsaw-game .p7 .move-right[for=p7-5] {
  display: block;
}

#p7-5:checked ~ .jigsaw-game .p7 {
  -webkit-transform: translate(300px, 150px);
          transform: translate(300px, 150px);
  background-position: 50% 100%;
}
#p7-5:checked ~ .jigsaw-game .p7 .move-up[for=p7-2] {
  display: block;
}
#p7-5:checked ~ .jigsaw-game .p7 .move-down[for=p7-8] {
  display: block;
}
#p7-5:checked ~ .jigsaw-game .p7 .move-left[for=p7-4] {
  display: block;
}

#p7-6:checked ~ .jigsaw-game .p7 {
  -webkit-transform: translate(0px, 300px);
          transform: translate(0px, 300px);
  background-position: 50% 100%;
}
#p7-6:checked ~ .jigsaw-game .p7 .move-up[for=p7-3] {
  display: block;
}
#p7-6:checked ~ .jigsaw-game .p7 .move-right[for=p7-7] {
  display: block;
}

#p7-7:checked ~ .jigsaw-game .p7 {
  -webkit-transform: translate(150px, 300px);
          transform: translate(150px, 300px);
  background-position: 50% 100%;
}
#p7-7:checked ~ .jigsaw-game .p7 .move-up[for=p7-4] {
  display: block;
}
#p7-7:checked ~ .jigsaw-game .p7 .move-left[for=p7-6] {
  display: block;
}
#p7-7:checked ~ .jigsaw-game .p7 .move-right[for=p7-8] {
  display: block;
}

#p7-8:checked ~ .jigsaw-game .p7 {
  -webkit-transform: translate(300px, 300px);
          transform: translate(300px, 300px);
  background-position: 50% 100%;
}
#p7-8:checked ~ .jigsaw-game .p7 .move-up[for=p7-5] {
  display: block;
}
#p7-8:checked ~ .jigsaw-game .p7 .move-left[for=p7-7] {
  display: block;
}

#p8-0:checked ~ .jigsaw-game .p8 {
  -webkit-transform: translate(0px, 0px);
          transform: translate(0px, 0px);
  background-position: 100% 100%;
}
#p8-0:checked ~ .jigsaw-game .p8 .move-down[for=p8-3] {
  display: block;
}
#p8-0:checked ~ .jigsaw-game .p8 .move-right[for=p8-1] {
  display: block;
}

#p8-1:checked ~ .jigsaw-game .p8 {
  -webkit-transform: translate(150px, 0px);
          transform: translate(150px, 0px);
  background-position: 100% 100%;
}
#p8-1:checked ~ .jigsaw-game .p8 .move-down[for=p8-4] {
  display: block;
}
#p8-1:checked ~ .jigsaw-game .p8 .move-left[for=p8-0] {
  display: block;
}
#p8-1:checked ~ .jigsaw-game .p8 .move-right[for=p8-2] {
  display: block;
}

#p8-2:checked ~ .jigsaw-game .p8 {
  -webkit-transform: translate(300px, 0px);
          transform: translate(300px, 0px);
  background-position: 100% 100%;
}
#p8-2:checked ~ .jigsaw-game .p8 .move-down[for=p8-5] {
  display: block;
}
#p8-2:checked ~ .jigsaw-game .p8 .move-left[for=p8-1] {
  display: block;
}

#p8-3:checked ~ .jigsaw-game .p8 {
  -webkit-transform: translate(0px, 150px);
          transform: translate(0px, 150px);
  background-position: 100% 100%;
}
#p8-3:checked ~ .jigsaw-game .p8 .move-up[for=p8-0] {
  display: block;
}
#p8-3:checked ~ .jigsaw-game .p8 .move-down[for=p8-6] {
  display: block;
}
#p8-3:checked ~ .jigsaw-game .p8 .move-right[for=p8-4] {
  display: block;
}

#p8-4:checked ~ .jigsaw-game .p8 {
  -webkit-transform: translate(150px, 150px);
          transform: translate(150px, 150px);
  background-position: 100% 100%;
}
#p8-4:checked ~ .jigsaw-game .p8 .move-up[for=p8-1] {
  display: block;
}
#p8-4:checked ~ .jigsaw-game .p8 .move-down[for=p8-7] {
  display: block;
}
#p8-4:checked ~ .jigsaw-game .p8 .move-left[for=p8-3] {
  display: block;
}
#p8-4:checked ~ .jigsaw-game .p8 .move-right[for=p8-5] {
  display: block;
}

#p8-5:checked ~ .jigsaw-game .p8 {
  -webkit-transform: translate(300px, 150px);
          transform: translate(300px, 150px);
  background-position: 100% 100%;
}
#p8-5:checked ~ .jigsaw-game .p8 .move-up[for=p8-2] {
  display: block;
}
#p8-5:checked ~ .jigsaw-game .p8 .move-down[for=p8-8] {
  display: block;
}
#p8-5:checked ~ .jigsaw-game .p8 .move-left[for=p8-4] {
  display: block;
}

#p8-6:checked ~ .jigsaw-game .p8 {
  -webkit-transform: translate(0px, 300px);
          transform: translate(0px, 300px);
  background-position: 100% 100%;
}
#p8-6:checked ~ .jigsaw-game .p8 .move-up[for=p8-3] {
  display: block;
}
#p8-6:checked ~ .jigsaw-game .p8 .move-right[for=p8-7] {
  display: block;
}

#p8-7:checked ~ .jigsaw-game .p8 {
  -webkit-transform: translate(150px, 300px);
          transform: translate(150px, 300px);
  background-position: 100% 100%;
}
#p8-7:checked ~ .jigsaw-game .p8 .move-up[for=p8-4] {
  display: block;
}
#p8-7:checked ~ .jigsaw-game .p8 .move-left[for=p8-6] {
  display: block;
}
#p8-7:checked ~ .jigsaw-game .p8 .move-right[for=p8-8] {
  display: block;
}

#p8-8:checked ~ .jigsaw-game .p8 {
  -webkit-transform: translate(300px, 300px);
          transform: translate(300px, 300px);
  background-position: 100% 100%;
}
#p8-8:checked ~ .jigsaw-game .p8 .move-up[for=p8-5] {
  display: block;
}
#p8-8:checked ~ .jigsaw-game .p8 .move-left[for=p8-7] {
  display: block;
}

.p0 {
  margin-top: 0px;
  margin-left: 0px;
  width: 140px;
  height: 140px;
}

.p1 {
  margin-top: 3px;
  margin-left: 3px;
  width: 140px;
  height: 140px;
}

.p2 {
  margin-top: 6px;
  margin-left: 6px;
  width: 140px;
  height: 140px;
}

.p3 {
  margin-top: 9px;
  margin-left: 9px;
  width: 140px;
  height: 140px;
}

.p4 {
  margin-top: 12px;
  margin-left: 12px;
  width: 140px;
  height: 140px;
}

.p5 {
  margin-top: 15px;
  margin-left: 15px;
  width: 140px;
  height: 140px;
}

.p6 {
  margin-top: 18px;
  margin-left: 18px;
  width: 140px;
  height: 140px;
}

.p7 {
  margin-top: 21px;
  margin-left: 21px;
  width: 140px;
  height: 140px;
}

.p8 {
  margin-top: 24px;
  margin-left: 24px;
  width: 140px;
  height: 140px;
}

.win-message {
  display: none;
  background: white;
  padding: 2rem;
  border: 4px solid #4CAF50;
  -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
          box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
  z-index: 100;
  text-align: center;
}
.win-message h2 {
  color: #4CAF50;
  margin-top: 0;
}

body:has(#p0-0:checked):has(#p1-1:checked):has(#p2-2:checked):has(#p3-3:checked):has(#p4-4:checked):has(#p5-5:checked):has(#p6-6:checked):has(#p7-7:checked):has(#p8-8:checked) .win-message {
  display: block;
}
body:has(#p0-0:checked):has(#p1-1:checked):has(#p2-2:checked):has(#p3-3:checked):has(#p4-4:checked):has(#p5-5:checked):has(#p6-6:checked):has(#p7-7:checked):has(#p8-8:checked) > .controls {
  display: none;
}
body:has(#p0-0:checked):has(#p1-1:checked):has(#p2-2:checked):has(#p3-3:checked):has(#p4-4:checked):has(#p5-5:checked):has(#p6-6:checked):has(#p7-7:checked):has(#p8-8:checked) .jigsaw-game {
  pointer-events: none;
  opacity: 0.7;
}
body:has(#p0-0:checked):has(#p1-1:checked):has(#p2-2:checked):has(#p3-3:checked):has(#p4-4:checked):has(#p5-5:checked):has(#p6-6:checked):has(#p7-7:checked):has(#p8-8:checked) .piece {
  width: 150px !important;
  height: 150px !important;
  margin-top: 0px !important;
  margin-left: 0px !important;
  margin-right: 0px !important;
  margin-bottom: 0px !important;
}
body:has(#p0-0:checked):has(#p1-1:checked):has(#p2-2:checked):has(#p3-3:checked):has(#p4-4:checked):has(#p5-5:checked):has(#p6-6:checked):has(#p7-7:checked):has(#p8-8:checked) .piece label {
  opacity: 0.2;
}