.playing-hand { display: flex; min-height: 38px; align-items: center; justify-content: center; }
.card-slot { position: relative; display: inline-flex; z-index: calc(var(--card-index) + 1); }
.card-slot-0 { --card-index: 0; } .card-slot-1 { --card-index: 1; } .card-slot-2 { --card-index: 2; } .card-slot-3 { --card-index: 3; } .card-slot-4 { --card-index: 4; }
.card-count-1 { --card-count: 1; } .card-count-2 { --card-count: 2; } .card-count-3 { --card-count: 3; } .card-count-4 { --card-count: 4; } .card-count-5 { --card-count: 5; }
.card-fan .card-slot { margin-left: -10px; transform: rotate(calc((var(--card-index) - (var(--card-count) - 1) / 2) * 5deg)); transform-origin: 50% 120%; }
.card-fan .card-slot:first-child { margin-left: 0; }
.playing-card { position: relative; display: inline-flex; box-sizing: border-box; flex: 0 0 auto; overflow: hidden; border: 1px solid rgba(3, 13, 22, .28); border-radius: 8px; background: linear-gradient(145deg, #fffdf7, #ece9df); color: #17232b; box-shadow: 0 5px 14px rgba(0, 0, 0, .28); font-family: Georgia, "Times New Roman", serif; }
.playing-card.red { color: #c73950; }
.card-hero { width: 66px; height: 92px; border-radius: 9px; }
.card-table { width: 48px; height: 67px; border-radius: 7px; }
.card-mini { width: 23px; height: 32px; border-radius: 4px; }
.card-corner { position: absolute; top: 4px; left: 5px; display: grid; justify-items: center; line-height: .85; }
.card-corner b { font-size: 14px; }
.card-corner i { font-size: 12px; font-style: normal; }
.card-corner-bottom { inset: auto 5px 4px auto; transform: rotate(180deg); }
.card-suit { margin: auto; font-size: 29px; line-height: 1; }
.card-mini .card-corner { top: 2px; left: 3px; }
.card-mini .card-corner b { font-size: 7px; }
.card-mini .card-corner i, .card-mini .card-corner-bottom { display: none; }
.card-mini .card-suit { font-size: 14px; }
.playing-card > small { position: absolute; right: 4px; bottom: 3px; font: 700 8px/1 sans-serif; color: #6d777c; }
.playing-card.face-down { border-color: rgba(117, 216, 233, .55); background: repeating-linear-gradient(45deg, #0b3346 0 5px, #0f4559 5px 10px); }
.playing-card.face-down::before { content: "H"; position: absolute; inset: 4px; display: grid; place-items: center; border: 1px solid rgba(240, 201, 121, .55); border-radius: inherit; color: #f0c979; font: 800 15px/1 Georgia, serif; }
.playing-card.face-down i { position: absolute; inset: 8px; border: 1px solid rgba(117, 216, 233, .32); transform: rotate(45deg); }
.empty-hand { color: var(--muted); font-size: 11px; }
.deal-in .card-slot { animation: card-deal-in .42s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--card-index) * 70ms); }
.effect-pair .playing-card { box-shadow: 0 0 18px rgba(117,216,233,.42); }
.effect-straight .playing-hand::after, .effect-straight-flush .playing-hand::after { content: ""; position: absolute; width: 190px; height: 2px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); animation: card-sweep 1.1s ease-out; }
.effect-flush .card-suit { text-shadow: 0 0 10px currentColor; }
.effect-straight-flush .playing-card, .effect-leopard .playing-card, .effect-five-small .playing-card { box-shadow: 0 0 22px rgba(240,201,121,.55); }
.effect-leopard .self-hand-title strong::before { content: "♛ "; }
.effect-235 .self-hand-title strong::before { content: "✦ "; color: var(--cyan); }
.effect-tenhalf .self-hand-title strong, .effect-five-small .self-hand-title strong { color: var(--gold); text-shadow: 0 0 12px rgba(240,201,121,.5); }
.effect-bust { animation: hand-bust .36s ease-out; border-color: rgba(255,141,147,.72) !important; }
.history-hand-effect { color: var(--muted); font-style: normal; }
.history-hand-effect.effect-leopard, .history-hand-effect.effect-straight-flush, .history-hand-effect.effect-five-small, .history-hand-effect.effect-tenhalf { color: var(--gold); font-weight: 900; text-shadow: 0 0 9px rgba(240,201,121,.35); }
.history-hand-effect.effect-bust { color: var(--danger); }
.result-players .playing-hand { display: inline-flex; min-height: 0; margin-left: 7px; vertical-align: middle; }
@keyframes card-deal-in { from { opacity: 0; transform: translate(-55px,-75px) rotate(-18deg) scale(.7); } to { opacity: 1; } }
@keyframes card-sweep { from { opacity: 0; transform: translateX(-80px); } 40% { opacity: 1; } to { opacity: 0; transform: translateX(80px); } }
@keyframes hand-bust { 25% { transform: translateX(-5px); } 55% { transform: translateX(5px); } }
@media (max-width: 520px) { .card-hero { width: 56px; height: 78px; } .card-suit { font-size: 24px; } }
@media (prefers-reduced-motion: reduce) { .deal-in .card-slot, .effect-bust, .playing-hand::after { animation: none !important; } }