<div class="scd-shuf">
  <div class="scd-shuf__stage" data-scd-shuf="stage">
    <div class="scd-shuf__card scd-shuf__card--c1"><span class="scd-shuf__big">A</span><span class="scd-shuf__sub">CLICK TO SHUFFLE</span></div>
    <div class="scd-shuf__card scd-shuf__card--c2"><span class="scd-shuf__big">B</span><span class="scd-shuf__sub">NEXT UP</span></div>
    <div class="scd-shuf__card scd-shuf__card--c3"><span class="scd-shuf__big">C</span><span class="scd-shuf__sub">WAITING</span></div>
    <div class="scd-shuf__card scd-shuf__card--c4"><span class="scd-shuf__big">D</span><span class="scd-shuf__sub">LAST</span></div>
    <div class="scd-shuf__hint">click the top card</div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Clash+Display:wght@600&family=Space+Mono&display=swap');
@import url('https://fonts.cdnfonts.com/css/clash-display');

.scd-shuf, .scd-shuf *, .scd-shuf *::before, .scd-shuf *::after { box-sizing: border-box; margin: 0; padding: 0; }

.scd-shuf {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 20%,#2a1a3e,#120a1c);
  font-family: 'Space Mono', monospace;
}
.scd-shuf__stage { position: relative; width: 240px; height: 330px; }
.scd-shuf__card {
  position: absolute; inset: 0;
  border-radius: 20px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  color: #fff;
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
  transition: transform .55s cubic-bezier(.3,.85,.3,1), opacity .55s;
  cursor: pointer;
}
.scd-shuf__big { font-size: 4rem; font-weight: 700; font-family: 'Clash Display', sans-serif; }
.scd-shuf__sub { letter-spacing: .3em; opacity: .6; font-size: .75rem; margin-top: 8px; }
.scd-shuf__card--c1 { background: linear-gradient(150deg,#f857a6,#ff5858); }
.scd-shuf__card--c2 { background: linear-gradient(150deg,#4776e6,#8e54e9); }
.scd-shuf__card--c3 { background: linear-gradient(150deg,#11998e,#38ef7d); color: #053; }
.scd-shuf__card--c4 { background: linear-gradient(150deg,#f7971e,#ffd200); color: #623; }
.scd-shuf__hint {
  position: absolute; bottom: -40px; width: 100%;
  text-align: center; color: #9d8ab0; font-size: .8rem;
}

@media (prefers-reduced-motion: reduce) {
  .scd-shuf__card { transition: none !important; }
}

(() => {
  const root = document.querySelector('.scd-shuf');
  if (!root) return;
  const stack = root.querySelector('[data-scd-shuf="stage"]');
  if (!stack) return;

  function layout() {
    const cards = [...stack.querySelectorAll('.scd-shuf__card')];
    cards.forEach((c, i) => {
      c.style.transform = `translateY(${i * 10}px) scale(${1 - i * 0.04})`;
      c.style.zIndex = cards.length - i;
      c.style.opacity = 1 - i * 0.12;
    });
  }
  layout();

  stack.addEventListener('click', () => {
    const top = stack.querySelector('.scd-shuf__card');
    if (!top) return;
    top.style.transform = 'translateX(-320px) rotate(-18deg)';
    setTimeout(() => { stack.appendChild(top); layout(); }, 350);
  });
})();