.enter-dissolve-mask {
    animation: .15s steps(29, jump-none) forwards enter-dissolve;
    -webkit-mask-image: url("../public/img/coinflip/lcd-enter.png");
    mask-image: url("../public/img/coinflip/lcd-enter.png");
    -webkit-mask-position: -3100px 0;
    mask-position: -3100px 0;
    -webkit-mask-size: 3100px 100px;
    mask-size: 3100px 100px;
    -webkit-mask-repeat: repeat-y;
    mask-repeat: repeat-y;
  }
  
  @keyframes enter-dissolve {
    100% {
      -webkit-mask-position: -2800px 0;
      mask-position: -2800px 0;
    }
  
    0% {
      -webkit-mask-position: 0 0;
      mask-position: 0 0;
    }
  }
  
  .exit-dissolve-mask {
    animation: .5s steps(31, jump-none) forwards exit-dissolve;
    -webkit-mask-image: url("../public/img/coinflip/lcd-exit.png");
    mask-image: url("../public/img/coinflip/lcd-exit.png");
    -webkit-mask-position: -3100px 0;
    mask-position: -3100px 0;
    -webkit-mask-size: 3100px 100px;
    mask-size: 3100px 100px;
    -webkit-mask-repeat: repeat-y;
    mask-repeat: repeat-y;
  }
  
  @keyframes exit-dissolve {
    100% {
      -webkit-mask-position: -3000px 0;
      mask-position: -3000px 0;
    }
  
    0% {
      -webkit-mask-position: 0 0;
      mask-position: 0 0;
    }
  }
  
  .flip-text {
    transform-style: preserve-3d;
  }
  
  .flip-text.flip-active {
    animation: 1s cubic-bezier(.25, 1.4, .61, .98) forwards flip-text;
  }
  
  .flip-text.flip-active .top {
    opacity: 0;
  }
  
  .flip-text.flip-active .bottom {
    opacity: 1;
  }
  
  .flip-text .top, .flip-text .bottom {
    opacity: 1;
    transition: opacity .333s;
  }
  
  .flip-text .top {
    transform: rotateX(0)translateZ(10px);
  }
  
  .flip-text .bottom {
    opacity: 0;
    transform: rotateX(-90deg)translateZ(-10px)scaleY(-1);
  }
  
  @keyframes flip-text {
    0% {
      transform: rotateX(0);
    }
  
    100% {
      transform: rotateX(-90deg);
    }
  }
  
  .mask-fade {
    -webkit-mask-image: linear-gradient(#0000, #000 30% 70%, #0000);
    mask-image: linear-gradient(#0000, #000 30% 70%, #0000);
  }
  
  .animate-double-down-progress {
    will-change: transform;
    animation: 15s linear forwards double-down-progress;
  }
  
  @keyframes double-down-progress {
    from {
      transform: scaleX(1);
    }
  
    to {
      transform: scaleX(0);
    }
  }
  
  .animate-hide-double-down {
    will-change: transform, opacity, height, margin-top;
    animation: .7s 15s forwards hide-double-down;
  }
  
  @keyframes hide-double-down {
    from {
      opacity: 1;
      height: 40px;
      margin-top: 1rem;
      transform: scale(1);
    }
  
    to {
      opacity: 0;
      pointer-events: none;
      height: 0;
      margin-top: 0;
      transform: scale(.85);
    }
  }
  
  .animate-text-countdown {
    will-change: transform, color;
    animation: 1s 3 forwards text-flashing, .5s 3s forwards fade-out;
  }
  
  @keyframes text-countdown {
    0% {
      transform: translateY(1.5em);
    }
  
    16.67%, 33.33% {
      transform: translateY(0);
    }
  
    50%, 66.67% {
      transform: translateY(-1.5em);
    }
  
    83.33%, 100% {
      transform: translateY(-3em);
    }
  }
  
  @keyframes text-flashing {
    0%, 20% {
      color: #57576f;
      text-shadow: 0 0 .5em #0000;
    }
  
    50% {
      color: #6741ff;
      text-shadow: 0 0 .75em #6741ff;
    }
  
    100% {
      color: #57576f;
      text-shadow: 0 0 .5em #0000;
    }
  }
  
  @keyframes fade-out {
    0% {
      opacity: 1;
    }
  
    100% {
      opacity: 0;
    }
  }
  
  .special-confetti {
    pointer-events: none;
    z-index: 20;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .special-confetti canvas {
    position: absolute !important;
  }
  
  .three-flip.flip {
    transform-style: preserve-3d;
    perspective: 1000px;
    perspective-origin: 50%;
    animation: 1s cubic-bezier(.68, -.55, .265, 1.55) forwards half-flip;
  }
  
  .three-flip .top, .three-flip .bottom {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  .three-flip .top {
    transform: translateX(-50%)translateY(-50%)translateZ(2px);
  }
  
  .three-flip .bottom {
    transform: rotateY(180deg)translateZ(-2px);
  }
  
  .infinite-flip {
    transform-style: preserve-3d;
    perspective: 1000px;
    perspective-origin: 50%;
    animation: 4s cubic-bezier(.68, -.55, .265, 1.55) infinite forwards full-flip;
  }
  
  .infinite-flip img:first-child {
    transform: scaleX(-1)translateZ(-1px);
  }
  
  .infinite-flip img:nth-child(2) {
    transform: translateZ(1px);
  }
  
  @keyframes half-flip {
    0% {
      transform: rotateY(0);
    }
  
    100% {
      transform: rotateY(180deg);
    }
  }
  
  @keyframes full-flip {
    0% {
      transform: rotateY(0);
    }
  
    100% {
      transform: rotateY(360deg);
    }
  }
  
  .winner-avatar {
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  
  .winner-avatar div:first-child {
    background: linear-gradient(#0000, #171622);
    box-shadow: 0 .12em .093em #00000040;
  }
  
  @keyframes fade-in {
    0% {
      opacity: 0;
    }
  
    100% {
      opacity: 1;
    }
  }
  
  .button-pulse {
    will-change: transform, opacity;
    animation: 2s infinite forwards button-pulse;
  }
  
  .button-flash {
    will-change: opacity;
    animation: 2s infinite forwards button-flash;
  }
  
  .flip-animation {
    animation: 1s forwards fade-in;
  }
  
  .land-flash {
    will-change: opacity;
    animation: 1.5s 3s forwards land-flash;
  }
  
  .fade-up {
    animation: .5s ease-out forwards fade-up;
  }
  
  @keyframes fade-up {
    from {
      opacity: 0;
      transform: translateY(.5em);
    }
  
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes land-flash {
    0% {
      opacity: 0;
    }
  
    15% {
      opacity: .4;
    }
  
    100% {
      opacity: .2;
    }
  }
  
  @keyframes button-pulse {
    from {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  @keyframes button-flash {
    0% {
      transform: scaleX(1);
    }
  
    15% {
      transform: scaleX(1.025);
    }
  
    100% {
      transform: scaleX(1);
    }
  }