/* [project]/components/dice/dice.css [app-client] (css) */
@keyframes dice-v1-pop {
  0% {
    opacity: 0;
    transform: scale(.85);
  }

  60% {
    opacity: 1;
    transform: scale(1.06);
  }

  100% {
    transform: scale(1);
  }
}

.dice-v1-pop {
  animation: .45s both dice-v1-pop;
}

.dice-v2-stars, .dice-v2-stars-far {
  pointer-events: none;
  backface-visibility: hidden;
  background-repeat: repeat;
  position: absolute;
  inset: 0;
  transform: translateZ(0);
}

.dice-v2-stars {
  background-image: radial-gradient(1.5px 1.5px at 22px 34px, #fffffff2, #0000), radial-gradient(1px 1px at 68px 120px, #fff9, #0000), radial-gradient(2px 2px at 130px 60px, #ffffffd9, #0000), radial-gradient(1px 1px at 175px 150px, #ffffff80, #0000), radial-gradient(1.5px 1.5px at 96px 190px, #ffffffbf, #0000);
  background-size: 210px 220px;
  animation: 3.6s ease-in-out infinite alternate dice-v2-twinkle;
}

.dice-v2-stars-far {
  background-image: radial-gradient(1px 1px at 40px 80px, #fff6, #0000), radial-gradient(1px 1px at 120px 30px, #ffffff59, #0000), radial-gradient(1px 1px at 200px 140px, #ffffff4d, #0000), radial-gradient(1px 1px at 260px 90px, #fff6, #0000);
  background-size: 300px 260px;
  animation: 5.2s ease-in-out infinite alternate-reverse dice-v2-twinkle;
}

@keyframes dice-v2-twinkle {
  from {
    opacity: .45;
  }

  to {
    opacity: 1;
  }
}

.dice-v2-die {
  clip-path: polygon(50% 0%, 79% 9%, 97% 34%, 97% 66%, 79% 91%, 50% 100%, 21% 91%, 3% 66%, 3% 34%, 21% 9%);
  backface-visibility: hidden;
}

.dice-v2-die-float-1 {
  animation: 4.2s ease-in-out infinite dice-v2-float;
}

.dice-v2-die-float-2 {
  animation: 5s ease-in-out .6s infinite dice-v2-float;
}

.dice-v2-die-float-3 {
  animation: 4.6s ease-in-out 1.1s infinite dice-v2-float;
}

@keyframes dice-v2-float {
  0%, 100% {
    transform: translateY(0)rotate(-6deg);
  }

  50% {
    transform: translateY(-12px)rotate(5deg);
  }
}

.dice-v2-die-tumble {
  animation: 1.1s cubic-bezier(.4, .1, .6, .9) infinite dice-v2-tumble;
}

@keyframes dice-v2-tumble {
  0% {
    transform: translate(0)rotate(0)scale(1);
  }

  25% {
    transform: translate(-8px, -22px)rotate(170deg)scale(1.06);
  }

  50% {
    transform: translate(7px, 4px)rotate(345deg)scale(.96);
  }

  75% {
    transform: translate(-5px, -14px)rotate(530deg)scale(1.03);
  }

  100% {
    transform: translate(0)rotate(720deg)scale(1);
  }
}

.dice-v2-rise {
  animation: .55s both dice-v2-rise;
}

@keyframes dice-v2-rise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.dice-cube-scene {
  --size: 84px;
  --half: calc(var(--size) / 2);
  width: var(--size);
  height: var(--size);
  perspective: calc(var(--size) * 3.2);
}

.dice-cube {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--half) * -1)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 1.35s cubic-bezier(.18, .68, .28, 1.02);
  position: relative;
}

.dice-cube-side {
  backface-visibility: hidden;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
}

.dice-cube-side--front {
  transform: rotateY(0deg)   translateZ(var(--half));
}

.dice-cube-side--back {
  transform: rotateY(180deg) translateZ(var(--half));
}

.dice-cube-side--right {
  transform: rotateY(90deg)  translateZ(var(--half));
}

.dice-cube-side--left {
  transform: rotateY(-90deg) translateZ(var(--half));
}

.dice-cube-side--top {
  transform: rotateX(90deg)  translateZ(var(--half));
}

.dice-cube-side--bottom {
  transform: rotateX(-90deg) translateZ(var(--half));
}

.dice-v3-side {
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 82%;
  box-shadow: inset 0 0 8px #00000024;
}

.dice-v5-side {
  font-size: calc(var(--size) * .5);
  -webkit-user-select: none;
  user-select: none;
  background: linear-gradient(145deg, #342a6e, #241b52) center / cover no-repeat;
  border: 1px solid #fbd98180;
}

.dice-v5-side > span {
  color: #3f2d7a;
  text-shadow: 0 1px #ffffffa6, 0 0 12px #fffc;
}

.dice-v5-side--1, .dice-v5-side--2, .dice-v5-side--3 {
  background-image: url("/img/dice/bg/4-light.jpg");
}

.dice-fade-up {
  animation: .5s both dice-fade-up;
}

@keyframes dice-fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.dice-flip-in {
  transform-origin: center;
  animation: .55s both dice-flip-in;
}

@keyframes dice-flip-in {
  from {
    opacity: 0;
    transform: perspective(600px)rotateY(70deg);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.dice-v5-nebula {
  pointer-events: none;
  background: radial-gradient(60% 40% at 20% 10%, #815cf647, #0000 70%), radial-gradient(50% 35% at 85% 25%, #fbd9811f, #0000 70%), radial-gradient(70% 50% at 50% 100%, #4c379659, #0000 75%);
  position: absolute;
  inset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .dice-v2-stars, .dice-v2-stars-far, .dice-v2-die-float-1, .dice-v2-die-float-2, .dice-v2-die-float-3 {
    animation: none;
  }
}

/*# sourceMappingURL=components_dice_dice_0eoj-d1.css.map*/