/* playing cards */
.pcard { --cw: 92px; position: relative; flex: none; width: var(--cw); aspect-ratio: 5 / 7; perspective: 900px; container-type: inline-size; transition: transform 0.5s var(--out), opacity 0.3s; }
.pcard__in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.65s var(--out); }
.pcard.is-down .pcard__in { transform: rotateY(180deg); }
.pcard__face, .pcard__back { position: absolute; inset: 0; border-radius: 8cqw; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.14); }
.pcard__face { background: #f4f5f8; color: #12151c; }
.pcard__face.is-red { color: #d6334b; }
.pcard__corner { position: absolute; left: 8cqw; top: 6cqw; display: grid; justify-items: center; gap: 1.5cqw; line-height: 1; }
.pcard__corner b { font: 650 25cqw/1 var(--display); letter-spacing: -0.04em; }
.pcard__corner .suit { width: 16cqw; height: 16cqw; }
.pcard__corner--end { left: auto; top: auto; right: 8cqw; bottom: 6cqw; transform: rotate(180deg); }
.pcard__mid { position: absolute; inset: 0; display: grid; place-items: center; }
.pcard__mid .suit.big { width: 44cqw; height: 44cqw; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.18)); }
.pcard__court { position: absolute; font: 700 78cqw/1 var(--display); font-style: normal; opacity: 0.07; }
.pcard__back { transform: rotateY(180deg); background: #1a1d24; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 0 0 3cqw #1a1d24, inset 0 0 0 3.8cqw #3a4150; }
.pcard__back::before { content: ''; position: absolute; inset: 7cqw; border-radius: 5cqw; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 2cqw, transparent 2cqw 6cqw); }
.pcard__back span { position: absolute; inset: 0; display: grid; place-items: center; font: 700 44cqw/1 var(--display); color: #3a4150; }
.pcard.deal-in { animation: dealIn 0.5s var(--out) both; }
@keyframes dealIn { from { opacity: 0; transform: translate(80px, -120px) rotate(14deg) scale(0.8); } }
.pcard.lit .pcard__face { box-shadow: 0 0 0 3px var(--accent); }
.pcard.dim { opacity: 0.55; filter: saturate(0.6); }
.pcard.win .pcard__face { box-shadow: 0 0 0 3px var(--green); }
.pcard.sm { --cw: 64px; }
.pcard.xs { --cw: 46px; }

/* 3d dice */
.die3d { --s: 64px; position: relative; width: var(--s); height: var(--s); transform-style: preserve-3d; }
.df { position: absolute; inset: 0; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 15%; border-radius: 20%; background: #eceef3; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14); backface-visibility: hidden; }
.df b { align-self: center; justify-self: center; width: 64%; aspect-ratio: 1; border-radius: 50%; }
.df b.on { background: #12151c; }
.df1 { transform: translateZ(calc(var(--s) / 2)); }
.df6 { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.df2 { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.df5 { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.df3 { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.df4 { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.die3d.spin1 { animation: dieSpin1 6s linear infinite; }
.die3d.spin2 { animation: dieSpin2 7.5s linear infinite; }
.die3d.spinslow { animation: dieSpin1 11s linear infinite; }
@keyframes dieSpin1 { from { transform: rotateX(0) rotateY(0); } to { transform: rotateX(360deg) rotateY(360deg); } }
@keyframes dieSpin2 { from { transform: rotateX(360deg) rotateY(0) rotateZ(0); } to { transform: rotateX(0) rotateY(360deg) rotateZ(360deg); } }
.dwrap { perspective: 500px; padding: 10px; }