/* Animation de recyclage de la pioche. */
.stock-recycle-fx {
  position: fixed;
  z-index: 1900;
  inset: 0;
  overflow: hidden;
  pointer-events: auto;
  perspective: 900px;
}
.stock-recycle-card {
  position: fixed;
  left: var(--discard-x);
  top: var(--discard-y);
  display: block;
  width: 80px;
  height: 112px;
  font-style: normal;
  perspective: 500px;
  transform:
    translate(-50%, -50%)
    translate(var(--scatter-x), var(--scatter-y))
    rotate(var(--start-rotate));
  transition-property: left, top, transform;
  transition-duration: .72s;
  transition-timing-function: cubic-bezier(.2,.78,.24,1);
  will-change: left, top, transform;
}
.stock-recycle-card-inner {
  position: absolute;
  inset: 0;
  display: block;
  transform-style: preserve-3d;
  transition: transform .58s ease;
  will-change: transform;
}
.stock-recycle-card-inner > b {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 7px;
  background-color: #f7f0df;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  box-shadow: 0 5px 13px rgba(0,0,0,.38);
  backface-visibility: hidden;
}
.stock-recycle-back { transform: rotateY(180deg); }

.stock-recycle-fx.lifting .stock-recycle-card {
  left: var(--hover-x);
  top: var(--hover-y);
  transform: translate(-50%, -50%) rotate(var(--stack-rotate));
  transition-delay: var(--flight-delay);
}
.stock-recycle-fx.lifting .stock-recycle-card-inner {
  transform: rotateY(180deg);
  transition-delay: var(--flight-delay);
}

.stock-recycle-fx.splitting .stock-recycle-card {
  left: calc(var(--hover-x) + var(--split-x));
  top: calc(var(--hover-y) + var(--split-y));
  transform:
    translate(-50%, -50%)
    rotate(var(--split-rotate))
    rotateX(var(--fold));
  transition-duration: .58s;
  transition-delay: 0ms;
}
.stock-recycle-fx.splitting .stock-recycle-card-inner {
  transform: rotateY(180deg) rotateX(var(--fold));
  transition-delay: 0ms;
}

.stock-recycle-fx.riffling .stock-recycle-card {
  left: calc(var(--hover-x) + var(--riffle-x));
  top: calc(var(--hover-y) + var(--riffle-y));
  transform: translate(-50%, -50%) rotate(var(--riffle-rotate));
  transition-duration: .34s;
  transition-delay: var(--riffle-delay);
}
.stock-recycle-fx.riffling .stock-recycle-card-inner {
  transform: rotateY(180deg) rotateX(0deg);
  transition-duration: .34s;
  transition-delay: var(--riffle-delay);
}

.stock-recycle-fx.compacting .stock-recycle-card {
  left: var(--hover-x);
  top: var(--hover-y);
  transform: translate(-50%, -50%) rotate(var(--stack-rotate)) scale(.97);
  transition-duration: .34s;
  transition-delay: 0ms;
}

.stock-recycle-fx.dealing .stock-recycle-card {
  left: var(--stock-x);
  top: var(--stock-y);
  transform: translate(-50%, -50%) rotate(var(--stack-rotate)) scale(.94);
  transition-duration: .72s;
  transition-delay: var(--deal-delay);
}

.stock-recycle-label {
  position: fixed;
  z-index: 80;
  left: var(--hover-x);
  top: calc(var(--hover-y) + 66px);
  min-width: 190px;
  padding: 7px 14px;
  color: #fff2c8;
  text-align: center;
  background: rgba(7,35,27,.92);
  border: 1px solid rgba(225,185,95,.72);
  border-radius: 999px;
  box-shadow: 0 8px 30px rgba(0,0,0,.45);
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity .25s, transform .25s;
}
.stock-recycle-label strong { font-family: Georgia, serif; }
.stock-recycle-fx.lifting .stock-recycle-label {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 650px) {
  .stock-recycle-label {
    min-width: 170px;
    padding: 6px 11px;
  }
}