.deal-wrap{width:var(--card-w);margin:0 auto}.ff-scene{position:relative;width:var(--card-w);height:var(--card-h);perspective:1100px}.ff-scene:after{content:"";position:absolute;left:6%;right:6%;bottom:-16px;height:20px;background:radial-gradient(50% 50% at 50% 50%,hsla(0,0%,7%,.3),hsla(0,0%,7%,0) 70%);z-index:-1}.ff-scene.is-dealt{transform:rotate(-3.2deg);transition:transform var(--t-flip) var(--ease-flip)}.ff-scene.is-dealt.is-straight{transform:rotate(0deg)}[dir=rtl] .ff-scene.is-dealt{transform:rotate(3.2deg)}[dir=rtl] .ff-scene.is-dealt.is-straight{transform:rotate(0deg)}.ff-card{position:relative;width:100%;height:100%;transform-style:preserve-3d;cursor:pointer;transition:transform var(--t-flip) var(--ease-flip)}.ff-card.is-flipped{transform:rotateY(180deg)}@media (hover:hover) and (pointer:fine){.ff-card:not(.is-flipped):hover{transform:rotateY(-8deg)}}.ff-card:focus-visible{outline:2px solid var(--ink-900);outline-offset:4px;border-radius:var(--radius-card)}.ff-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--radius-card);overflow:hidden;box-shadow:0 2px 6px hsla(0,0%,7%,.16)}.ff-face--back{background:var(--paper-0)}.ff-face--front{transform:rotateY(180deg)}.deal-in{animation:dealIn var(--t-deal) var(--ease-out) both}@keyframes dealIn{0%{transform:translate(-240px,-8px) rotate(-6deg);opacity:0}to{transform:none;opacity:1}}[dir=rtl] .deal-in{animation-name:dealInRtl}@keyframes dealInRtl{0%{transform:translate(240px,-8px) rotate(6deg);opacity:0}to{transform:none;opacity:1}}