.wakuwaku-memory {
  display: grid;
  grid-row-gap: calc(1.25 * var(--1em));
  align-content: center;
  justify-content: center;
  justify-items: center;
}
.wakuwaku-memory .timer {
  display: flex;
  align-items: center;
  column-gap: calc(0.8 * var(--1em));
}
.wakuwaku-memory .timer::before {
  content: "";
  width: calc(6.05 * var(--1em));
  aspect-ratio: 121/46;
  background: url(../images/wakuwaku_memory_guide.svg) no-repeat center center/contain;
}
.wakuwaku-memory .body {
  position: relative;
  touch-action: none;
}
.wakuwaku-memory .cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: calc(0.5 * var(--1em));
  width: calc(18 * var(--1em));
}
.wakuwaku-memory .cards .card {
  display: grid;
  cursor: pointer;
}
.wakuwaku-memory .cards .card img {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  backface-visibility: hidden;
  transition: transform 400ms;
}
.wakuwaku-memory .cards .card:not(.open) img:nth-of-type(1) {
  transform: perspective(100vw) rotateY(180deg);
}
.wakuwaku-memory .cards .card:not(.open) img:nth-of-type(2) {
  transform: perspective(100vw) rotateY(0);
}
.wakuwaku-memory .cards .card.open {
  pointer-events: none;
  cursor: default;
}
.wakuwaku-memory .cards .card.open img:nth-of-type(1) {
  transform: perspective(100vw) rotateY(360deg);
}
.wakuwaku-memory .cards .card.open img:nth-of-type(2) {
  transform: perspective(100vw) rotateY(180deg);
}
.wakuwaku-memory .cards .card.clear {
  animation-name: wakuwaku-memory-clear-card;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(1);
}
.wakuwaku-memory .cards .card.lock {
  pointer-events: none;
  cursor: default;
}
.wakuwaku-memory .judge img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  visibility: hidden;
}
.wakuwaku-memory .judge img[src*=judge_good] {
  width: calc(9.35 * var(--1em));
}
.wakuwaku-memory .judge img[src*=judge_bad] {
  width: calc(8.45 * var(--1em));
}
.wakuwaku-memory .judge[data-judge=good] img.good, .wakuwaku-memory .judge[data-judge=bad] img.bad {
  visibility: visible;
}
.wakuwaku-memory .finish {
  display: grid;
  grid-row-gap: calc(0.5 * var(--1em));
  align-content: center;
  justify-items: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.wakuwaku-memory .finish::before {
  content: "";
  aspect-ratio: 256/216;
  width: calc(12.8 * var(--1em));
  background: url(../images/wakuwaku_clear_1.png) no-repeat left top/200% 100%;
  animation-name: wakuwaku-clear;
  animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-timing-function: steps(1);
}
.wakuwaku-memory .finish .retry img {
  width: calc(9.6 * var(--1em));
}
.wakuwaku-memory .finish:not(.open) {
  display: none;
}