@keyframes spin-tails {
  0% {
    transform: rotateX(0);
  }
  50% {
    transform: rotateX(990deg) scale(1.4);
  }
  100% {
    transform: rotateX(1980deg);
  }
}
@keyframes spin-heads {
  0% {
    transform: rotateX(0);
  }
  50% {
    transform: rotateX(1080deg) scale(1.4);
  }
  100% {
    transform: rotateX(2160deg) scale(1);
  }
}
.coin {
  user-select: none;
  position: relative;
  margin: auto;
  display: flex;
  height: 192px;
  width: 192px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border: 8px solid #facc15;
  background-color: #fb923c;
  border-radius: 50%;
  position: relative;
  text-align: center;
  line-height: 50px;
  transform: rotateY(0deg);
  transform-style: preserve-3d;
  text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.2);
}
.face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  backface-visibility: hidden;
}
.face-text {
  inset: 0;
  display: block;
  font-size: 1.4rem;
  text-transform: uppercase;
  color: #fef08a;
  font-weight: 600;
}
.heads {
  z-index: 2;
  transform: rotateY(0deg);
}
.tails {
  z-index: 1;
  transform: rotateX(180deg);
}
.coin[data-face="head"] {
  animation: spin-heads 1.2s linear forwards;
}
.coin[data-face="tail"] {
  animation: spin-tails 1.2s linear forwards;
}