.deck{--deck-line:color-mix(in srgb,currentColor 24%,transparent);display:flex;flex-direction:column;gap:28px;width:100%;max-width:calc((100svh - 380px) * 4 / 3);min-width:min(100%,300px);margin-inline:auto;border-radius:var(--r);outline:none}
.deck:focus-visible{outline:2px solid var(--lime-deep);outline-offset:8px}
.deck-pile{position:relative;aspect-ratio:4/3;margin-top:28px;touch-action:pan-y}
.deck-item{position:absolute;inset:0;margin:0;border-radius:var(--r);overflow:hidden;background:#d9ddd5;box-shadow:0 1px 2px rgba(7,19,13,.08),0 30px 60px -30px rgba(7,19,13,.55);transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .4s ease,filter .4s ease;will-change:transform;user-select:none;-webkit-user-select:none}
.deck-item[data-top="1"]{cursor:grab}
.deck-item[data-mode="drag"]{cursor:grabbing;transition:none}
.deck-item[data-mode="fly"]{transition:transform .45s cubic-bezier(.3,.5,.3,1),opacity .45s ease}
.deck-item[data-mode="snap"]{transition:none}
.deck-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}


.deck-ph{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;text-align:center;font-weight:700;letter-spacing:-.01em;background:linear-gradient(160deg,#25302a,#0f1a13);color:#e8eae6}
.deck-ph i{font-size:34px;opacity:.7}
.deck-ph small{font-size:13px;font-weight:500;opacity:.6}
.deck-ph::after{content:"";position:absolute;right:18px;top:18px;width:10px;height:10px;border-radius:50%;background:var(--lime)}
.deck-ph.light{background:linear-gradient(180deg,#eef0ea,#c9cec4);color:var(--smoke)}

.deck-meta{display:flex;align-items:center;gap:clamp(14px,2vw,24px)}
.deck-cap{flex:1;min-width:0;overflow:hidden;padding-bottom:.2em}
.deck-cap>*{display:block;animation:deck-in .6s cubic-bezier(.2,.8,.2,1) both}
.deck-title{font-size:clamp(17px,1.5vw,20px);font-weight:700;letter-spacing:-.02em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deck-sub{margin-top:3px;font-size:14px;line-height:1.4;color:color-mix(in srgb,currentColor 68%,transparent);animation-delay:.05s}
.deck-count{font-size:13px;font-weight:500;letter-spacing:.08em;font-variant-numeric:tabular-nums;white-space:nowrap}
.deck-count b{font-weight:700}
.deck-count span{opacity:.6}
.deck-btn{appearance:none;flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--deck-line);background:transparent;color:inherit;display:grid;place-items:center;font-size:18px;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}
.deck-btn:hover{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.deck-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@keyframes deck-in{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){
  .deck-item,.deck-item[data-mode]{transition:opacity .3s ease}
  .deck-cap>*{animation:none}
}