@keyframes card-enter {
  from {
    opacity: 0;
    transform: translate(calc(var(--card-x, 0px) - var(--card-half-width)), calc(var(--card-y, 0px) + 18px));
  }

  to {
    opacity: 1;
    transform: translate(calc(var(--card-x, 0px) - var(--card-half-width)), var(--card-y, 0px));
  }
}

@keyframes card-flip {
  0% {
    transform: rotateY(0deg);
  }

  100% {
    transform: rotateY(180deg);
  }
}

@keyframes table-border-flash {
  0% {
    border-color: var(--line-hot);
    box-shadow:
      0 0 0 1px rgba(126, 224, 129, 0.15) inset,
      0 25px 70px var(--shadow);
  }

  16%,
  56% {
    border-color: var(--result-flash);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--result-flash) 48%, transparent) inset,
      0 0 32px color-mix(in srgb, var(--result-flash) 45%, transparent),
      0 25px 70px var(--shadow);
  }

  32%,
  72% {
    border-color: var(--line-hot);
    box-shadow:
      0 0 0 1px rgba(126, 224, 129, 0.15) inset,
      0 25px 70px var(--shadow);
  }

  100% {
    border-color: var(--line-hot);
    box-shadow:
      0 0 0 1px rgba(126, 224, 129, 0.15) inset,
      0 25px 70px var(--shadow);
  }
}