スワイプカード(Tinder風)

<div class="d11-03-02-phone">
          <div class="d11-03-02-screen">
            <div class="d11-03-02-deck" id="d11-03-02-deck">
              <div class="d11-03-02-card" style="background:#f472b6">A</div>
              <div class="d11-03-02-card" style="background:#60a5fa">B</div>
              <div class="d11-03-02-card" style="background:#34d399">C</div>
              <div class="d11-03-02-card" style="background:#fbbf24">D</div>
            </div>
            <div class="d11-03-02-hint">← ドラッグ →</div>
          </div>
        </div>

.d11-03-02-phone{width:190px;height:240px;border-radius:24px;border:6px solid #1f2937;background:#0f172a;position:relative;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.15)}
        .d11-03-02-screen{position:absolute;inset:0}
        .d11-03-02-deck{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
        .d11-03-02-card{position:absolute;width:120px;height:150px;border-radius:16px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:36px;font-weight:800;box-shadow:0 8px 20px rgba(0,0,0,.3);touch-action:none;user-select:none}
        .d11-03-02-card:nth-child(1){z-index:4;transform:scale(1)}
        .d11-03-02-card:nth-child(2){z-index:3;transform:scale(.94) translateY(8px)}
        .d11-03-02-card:nth-child(3){z-index:2;transform:scale(.88) translateY(16px)}
        .d11-03-02-card:nth-child(4){z-index:1;transform:scale(.82) translateY(24px)}
        .d11-03-02-card.d11-03-02-fly{transition:transform .4s ease,opacity .4s ease;opacity:0}
        .d11-03-02-hint{position:absolute;bottom:10px;left:0;right:0;text-align:center;color:#64748b;font-size:11px}

(function(){
        var root=document.getElementById('item-11-03-02');if(!root)return;
        var deck=root.querySelector('#d11-03-02-deck');
        function top(){return deck.querySelector('.d11-03-02-card');}
        function bind(){
          var c=top();if(!c)return;
          var sx=0,dx=0,drag=false;
          c.onpointerdown=function(e){drag=true;sx=e.clientX;c.setPointerCapture(e.pointerId);};
          c.onpointermove=function(e){if(!drag)return;dx=e.clientX-sx;c.style.transform='translateX('+dx+'px) rotate('+(dx/12)+'deg)';};
          c.onpointerup=function(){if(!drag)return;drag=false;
            if(Math.abs(dx)>60){
              c.classList.add('d11-03-02-fly');
              c.style.transform='translateX('+(dx>0?300:-300)+'px) rotate('+(dx>0?30:-30)+'deg)';
              setTimeout(function(){deck.appendChild(c);c.classList.remove('d11-03-02-fly');c.style.transform='';bind();},400);
            }else{c.style.transform='';}
            dx=0;
          };
        }
        bind();
      })();