.wakuwaku-slidepuzzle {
  display: grid;
  grid-row-gap: calc(1.25 * var(--1em));
  justify-items: center;
}
.wakuwaku-slidepuzzle .timer {
  display: flex;
  align-items: center;
  column-gap: calc(0.8 * var(--1em));
}
.wakuwaku-slidepuzzle .timer::before {
  content: "";
  width: calc(6.3 * var(--1em));
  aspect-ratio: 126/39;
  background: url(../images/wakuwaku_slidepuzzle_guide.svg) no-repeat center center/contain;
}
.wakuwaku-slidepuzzle .main {
  display: grid;
  border-radius: calc(0.7 * var(--1em));
  padding: calc(0.9 * var(--1em));
  background: white;
  box-shadow: 0 calc(0.4 * var(--1em)) 0 var(--dark-red);
  box-sizing: border-box;
  width: calc(18 * var(--1em));
  touch-action: none;
}
.wakuwaku-slidepuzzle .main .pieces,
.wakuwaku-slidepuzzle .main .finish,
.wakuwaku-slidepuzzle .main .clear {
  grid-column: 1;
  grid-row: 1;
}
.wakuwaku-slidepuzzle .main .finish,
.wakuwaku-slidepuzzle .main .clear {
  position: relative;
}
.wakuwaku-slidepuzzle .main .pieces {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-radius: calc(0.3 * var(--1em));
  background: #b8b8b8;
}
.wakuwaku-slidepuzzle .main .pieces .piece {
  aspect-ratio: 1;
  border-radius: calc(0.3 * var(--1em));
  padding: calc(0.075 * var(--1em));
  background: repeat left top/300% 300%;
  background-clip: content-box, border-box;
  outline: calc(0.075 * var(--1em)) solid white;
}
.wakuwaku-slidepuzzle[data-gameid="1"] .main .pieces .piece {
  background-image: url(../data/slidepuzzle/picture_1.png), linear-gradient(white, white);
}

.wakuwaku-slidepuzzle[data-gameid="2"] .main .pieces .piece {
  background-image: url(../data/slidepuzzle/picture_2.png), linear-gradient(white, white);
}

.wakuwaku-slidepuzzle[data-gameid="3"] .main .pieces .piece {
  background-image: url(../data/slidepuzzle/picture_3.png), linear-gradient(white, white);
}

.wakuwaku-slidepuzzle .main .pieces .piece[data-default_col="0"][data-default_row="0"] {
  background-position: 100% 100%;
}
.wakuwaku-slidepuzzle .main .pieces .piece[data-default_col="1"][data-default_row="0"] {
  background-position: 0% 100%;
}
.wakuwaku-slidepuzzle .main .pieces .piece[data-default_col="2"][data-default_row="0"] {
  background-position: -100% 100%;
}
.wakuwaku-slidepuzzle .main .pieces .piece[data-default_col="3"][data-default_row="0"] {
  background-position: -200% 100%;
}
.wakuwaku-slidepuzzle .main .pieces .piece[data-default_col="0"][data-default_row="1"] {
  background-position: 100% 0%;
}
.wakuwaku-slidepuzzle .main .pieces .piece[data-default_col="1"][data-default_row="1"] {
  background-position: 0% 0%;
}
.wakuwaku-slidepuzzle .main .pieces .piece[data-default_col="2"][data-default_row="1"] {
  background-position: -100% 0%;
}
.wakuwaku-slidepuzzle .main .pieces .piece[data-default_col="3"][data-default_row="1"] {
  background-position: -200% 0%;
}
.wakuwaku-slidepuzzle .main .pieces .piece[data-default_col="0"][data-default_row="2"] {
  background-position: 100% -100%;
}
.wakuwaku-slidepuzzle .main .pieces .piece[data-default_col="1"][data-default_row="2"] {
  background-position: 0% -100%;
}
.wakuwaku-slidepuzzle .main .pieces .piece[data-default_col="2"][data-default_row="2"] {
  background-position: -100% -100%;
}
.wakuwaku-slidepuzzle .main .pieces .piece[data-default_col="3"][data-default_row="2"] {
  background-position: -200% -100%;
}
.wakuwaku-slidepuzzle .main .pieces .piece[data-default_col="0"][data-default_row="3"] {
  background-position: 100% -200%;
}
.wakuwaku-slidepuzzle .main .pieces .piece[data-default_col="1"][data-default_row="3"] {
  background-position: 0% -200%;
}
.wakuwaku-slidepuzzle .main .pieces .piece[data-default_col="2"][data-default_row="3"] {
  background-position: -100% -200%;
}
.wakuwaku-slidepuzzle .main .pieces .piece[data-default_col="3"][data-default_row="3"] {
  background-position: -200% -200%;
}
.wakuwaku-slidepuzzle .main .pieces .piece[data-col="1"] {
  grid-column: 1;
}
.wakuwaku-slidepuzzle .main .pieces .piece[data-col="2"] {
  grid-column: 2;
}
.wakuwaku-slidepuzzle .main .pieces .piece[data-col="3"] {
  grid-column: 3;
}
.wakuwaku-slidepuzzle .main .pieces .piece[data-row="1"] {
  grid-row: 1;
}
.wakuwaku-slidepuzzle .main .pieces .piece[data-row="2"] {
  grid-row: 2;
}
.wakuwaku-slidepuzzle .main .pieces .piece[data-row="3"] {
  grid-row: 3;
}
.wakuwaku-slidepuzzle .main .pieces .piece.blank {
  visibility: hidden;
}
.wakuwaku-slidepuzzle .main .pieces .piece:not([data-animation=""]) {
  animation-duration: 200ms;
  animation-fill-mode: forwards;
}
.wakuwaku-slidepuzzle .main .pieces .piece[data-animation=left-to-right] {
  animation-name: wakuwaku-slidepuzzle-piece-left-to-right;
}
.wakuwaku-slidepuzzle .main .pieces .piece[data-animation=right-to-left] {
  animation-name: wakuwaku-slidepuzzle-piece-right-to-left;
}
.wakuwaku-slidepuzzle .main .pieces .piece[data-animation=top-to-bottom] {
  animation-name: wakuwaku-slidepuzzle-piece-top-to-bottom;
}
.wakuwaku-slidepuzzle .main .pieces .piece[data-animation=bottom-to-top] {
  animation-name: wakuwaku-slidepuzzle-piece-bottom-to-top;
}
.wakuwaku-slidepuzzle .main .finish {
  display: grid;
  overflow: hidden;
  border-radius: calc(0.1 * var(--1em));
  transition: opacity 800ms;
}
.wakuwaku-slidepuzzle .main .finish::before, .wakuwaku-slidepuzzle .main .finish::after {
  content: "";
}
.wakuwaku-slidepuzzle .main .finish::before {
  background: no-repeat center center/100% 100%;
}
.wakuwaku-slidepuzzle[data-gameid="1"] .main .finish::before {
  background-image: url(../data/slidepuzzle/picture_1.png);
}

.wakuwaku-slidepuzzle[data-gameid="2"] .main .finish::before {
  background-image: url(../data/slidepuzzle/picture_2.png);
}

.wakuwaku-slidepuzzle[data-gameid="3"] .main .finish::before {
  background-image: url(../data/slidepuzzle/picture_3.png);
}

.wakuwaku-slidepuzzle .main .finish::after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 25%;
  background: rgba(255, 255, 255, 0.4);
  transform-origin: 100% 0;
  transform: skewY(-20deg);
  transition: top 1.2s ease-out 0.4s;
}
.wakuwaku-slidepuzzle .main .finish:not(.show) {
  visibility: hidden;
  opacity: 0;
}
.wakuwaku-slidepuzzle .main .finish:not(.show)::after {
  top: 100%;
}
.wakuwaku-slidepuzzle .main .finish.show::after {
  top: -100%;
}
.wakuwaku-slidepuzzle .clear {
  display: grid;
  grid-row-gap: calc(0.5 * var(--1em));
  align-content: center;
  justify-items: center;
}
.wakuwaku-slidepuzzle .clear::before {
  content: "";
  aspect-ratio: 256/216;
  width: calc(12.8 * var(--1em));
  background: url(../images/wakuwaku_clear_2.png) no-repeat left top/200% 100%;
}
.wakuwaku-slidepuzzle .clear .retry img {
  width: calc(9.6 * var(--1em));
}
.wakuwaku-slidepuzzle .clear:not(.show) {
  visibility: hidden;
}
.wakuwaku-slidepuzzle .clear.show::before {
  animation-name: wakuwaku-clear;
  animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-timing-function: steps(1);
}
.wakuwaku-slidepuzzle .sample {
  position: relative;
  display: grid;
  grid-row-gap: calc(0.5 * var(--1em));
  justify-items: center;
  padding: calc(0.75 * var(--1em));
  padding-top: 0;
}
.wakuwaku-slidepuzzle .sample .title {
  height: calc(1.2 * var(--1em));
  background: linear-gradient(var(--red), var(--red)) no-repeat center center/90% 100%;
}
.wakuwaku-slidepuzzle .sample .picture {
  width: calc(9 * var(--1em));
  border-radius: calc(0.1 * var(--1em));
}
.wakuwaku-slidepuzzle .sample::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  height: calc(100% - 0.6 * var(--1em));
  border: calc(0.1 * var(--1em)) solid white;
  border-radius: calc(0.75 * var(--1em));
}