.scd-shuf { position: relative; width: 220px; height: 170px; margin: 0 auto; cursor: pointer; }
.scd-shuf__c {
  position: absolute; left: 50%; top: 50%;
  width: 132px; height: 132px; margin: -66px 0 0 -66px;
  background: var(--bg);
  border-radius: 4px;
  color: #1a1a1a;
  display: flex; align-items: center; justify-content: center;
  position: absolute;
  box-shadow: 0 6px 18px -8px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(0,0,0,0.2);
  transform: translateY(calc(var(--i) * -8px)) translateX(calc(var(--i) * -4px));
  transition: transform .5s cubic-bezier(.3,1.4,.4,1);
  z-index: calc(10 - var(--i));
  overflow: hidden;
}
.scd-shuf__c::before {
  content: '';
  position: absolute; inset: 16px;
  background:
    radial-gradient(circle at center, #1a1a1a 0%, #1a1a1a 38%, transparent 38.5%),
    repeating-radial-gradient(circle at center, #1a1a1a 0 1px, transparent 1px 3px);
  border-radius: 50%;
}
.scd-shuf__hole {
  position: absolute; top: 50%; left: 50%;
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  background: var(--bg); border-radius: 50%;
  z-index: 2;
}
.scd-shuf__label {
  position: relative; z-index: 3;
  font: 800 10px ui-monospace, monospace;
  color: var(--bg);
  background: #1a1a1a;
  padding: 3px 8px; border-radius: 2px;
  letter-spacing: 0.14em;
  margin-top: 38px;
}
.scd-shuf:hover .scd-shuf__c { transform: translateY(calc((var(--i) - 1) * -8px)) translateX(calc((var(--i) - 1) * -4px)); }
.scd-shuf:hover .scd-shuf__c[style*="--i:0"] { transform: translate(140%, -10px) rotate(16deg); }