.playing-card{aspect-ratio:.72;background:var(--paper);width:min(360px,88%);color:var(--ink);border:1px solid #15191d2e;border-radius:8px;place-items:center;padding:24px;display:grid;box-shadow:0 28px 70px #141c202e}.playing-card[data-color=red],.card-history span[data-color=red]{color:var(--red)}.playing-card span{justify-self:start;font-size:3rem;font-weight:900;line-height:1}.playing-card strong{font-size:8rem;line-height:1}.playing-card small{color:currentColor;justify-self:end;font-weight:800}html[data-theme=dark] .playing-card{color:#11161a;background:#fbfaf4;border-color:#f4f7fb29}.playing-card{background:linear-gradient(145deg,#fffdf8,#f7f2e8);box-shadow:inset 0 0 0 1px #ffffffbd,0 30px 80px #141c202e}html[data-theme=dark] .playing-card{background:linear-gradient(145deg,#fffdf8,#ede6da)}.card-table{perspective:1300px;grid-template-columns:minmax(150px,.72fr) minmax(190px,1fr);place-items:center;gap:clamp(22px,5vw,70px);width:min(100%,760px);min-height:clamp(360px,43vw,500px);padding:clamp(24px,4vw,54px);display:grid}.card-deck-stack,.card-result-slot{aspect-ratio:.7;place-items:center;width:clamp(150px,20vw,210px);display:grid;position:relative}.card-deck-stack{transform-style:preserve-3d}.card-deck-stack>i,.card-deck-stack>.card-back{position:absolute;inset:0}.card-deck-stack>i{background:#f8f5ed;border:1px solid #15191d24;border-radius:12px;box-shadow:0 12px 24px #15191d1a}.card-back{color:#ffffffd6;background:linear-gradient(45deg,#0000 44%,#ffffff3d 44% 56%,#0000 56%) 0 0/14px 14px,linear-gradient(-45deg,#0000 44%,#ffffff2e 44% 56%,#0000 56%) 0 0/14px 14px,linear-gradient(145deg,#4652a8,#25315f);border:7px solid #f9f6ef;border-radius:12px;place-items:center;display:grid;overflow:hidden;box-shadow:inset 0 0 0 2px #ffffffb8,0 28px 54px #141c2033}.card-back span{border:2px solid;border-radius:50%;place-items:center;width:56px;height:56px;font-family:Georgia,serif;font-size:2rem;font-weight:900;display:grid}.card-deck-stack[data-empty=true]{opacity:.36}.card-result-slot{border:1px dashed color-mix(in srgb, var(--product-accent), transparent 62%);transition:opacity var(--motion-fast) var(--ease-interface);background:#ffffff2e;border-radius:14px}.card-slot-empty{color:color-mix(in srgb, var(--product-accent), transparent 34%);place-items:center;gap:12px;display:grid}.card-flight,.card-flip,.card-front,.card-back-face{position:absolute;inset:0}.card-flight{transform-style:preserve-3d}.card-flip{transform-style:preserve-3d;transform:rotateY(0)}.card-flip[data-revealed=true]{transform:rotateY(180deg)}.card-result-hand{position:absolute;inset:0}.card-result-hand .card-flight{width:100%;height:100%;transform:translateX(calc(-50% + (var(--card-index) * 24px) - ((var(--card-total) - 1) * 12px)));left:50%;right:auto}.card-front,.card-back-face{backface-visibility:hidden;width:100%;height:100%}.card-back-face{transform:rotateY(0)}.card-front{transform:rotateY(180deg)}.card-flight[data-drawing=true]{animation:card-travel .98s var(--ease-interface) both}.card-flight[data-drawing=true] .card-flip[data-revealed=true]{animation:card-turn .98s var(--ease-interface) both}.card-table[data-shuffling=true] .card-deck-stack{animation:deck-shuffle .82s var(--ease-interface) both}.card-table[data-shuffling=true] .card-deck-stack>i:first-child{animation:deck-split-left .82s var(--ease-interface) both}.card-table[data-shuffling=true] .card-deck-stack>i:nth-child(2){animation:deck-split-right .82s var(--ease-interface) both}.card-table[data-shuffling=true] .card-result-slot{opacity:.28}@media (max-width:600px){.card-table{grid-template-columns:minmax(108px,.68fr) minmax(145px,1fr);gap:18px;min-height:400px;padding:18px}.card-deck-stack,.card-result-slot{width:min(100%,170px)}}.card-table{border-radius:calc(var(--radius) + 6px);background:radial-gradient(circle at 48% 42%,#4ea08038,#0000 44%),repeating-linear-gradient(108deg,#ffffff05 0 1px,#0000 1px 7px),linear-gradient(145deg,#164f3d,#0c322a);border:1px solid #0a3e2d5c;box-shadow:inset 0 0 0 10px #ffffff09,inset 0 0 70px #00120d57,0 34px 80px #141c202e}.card-deck-stack{transform:perspective(1000px)rotateX(2deg)rotate(-1deg)}.card-deck-stack>i{background:repeating-linear-gradient(0deg,#f9f5ea 0 1px,#d9d0bf 1px 2px),#eee7d9;border-color:#42372b33;border-radius:14px;box-shadow:0 8px 16px #00120d29}.card-deck-stack>i:first-child{transform:translate(10px,13px)rotate(1.6deg)}.card-deck-stack>i:nth-child(2){transform:translate(7px,9px)rotate(1deg)}.card-deck-stack>i:nth-child(3){transform:translate(4px,6px)rotate(.5deg)}.card-deck-stack>i:nth-child(4){transform:translate(2px,3px)rotate(.2deg)}.card-back{background:radial-gradient(circle at center, transparent 0 27%, #ffffff29 27.5% 28.5%, transparent 29%), repeating-conic-gradient(from 45deg, #ffffff24 0 3deg, transparent 3deg 9deg), linear-gradient(145deg, #263d82, #14224f 58%, #0c1636);border:8px solid #f6f0e4;border-radius:14px;box-shadow:inset 0 0 0 2px #d5b968,inset 0 0 0 6px #ffffff3d,inset 0 0 34px #060a1f75,0 26px 52px #00120d47}.card-back span{color:#f7e9b4;text-shadow:0 2px 8px #00000061;border-color:#e4cf87;width:62px;height:62px;box-shadow:inset 0 0 0 3px #ffffff1a}.card-result-slot{background:radial-gradient(circle at 50% 44%,#ffffff12,#0000 58%),#0218122e;border:1px solid #e5cf9347;box-shadow:inset 0 0 24px #00130e3d}.playing-card.card-front{background:radial-gradient(circle at 28% 18%,#fffffff0,#0000 27%),linear-gradient(145deg,#fffdf8,#f2eadc 72%,#d9cfbf);border:1px solid #493d2f3d;border-radius:14px;padding:0;animation:none;display:block;overflow:hidden;transform:rotateY(180deg);box-shadow:inset 0 0 0 4px #ffffff8a,inset -8px -12px 22px #6251371a,0 28px 58px #00120d42}.playing-card .card-corner{z-index:2;justify-items:center;gap:1px;width:auto;font-family:Georgia,Times New Roman,serif;font-size:clamp(1.05rem,2.4vw,1.55rem);line-height:.88;display:grid;position:absolute}.playing-card .card-corner b{font-weight:800}.playing-card .card-corner i{font-size:.76em;font-style:normal}.card-corner-top{top:7%;left:8%}.card-corner-bottom{bottom:7%;right:8%;transform:rotate(180deg)}.playing-card .card-center-suit{text-shadow:0 4px #ffffffb8,0 10px 22px #4c392221;font-family:Georgia,Times New Roman,serif;font-size:clamp(5rem,10vw,8.6rem);font-weight:500;line-height:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.playing-card .card-suit-name{color:currentColor;letter-spacing:.12em;text-align:center;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;font-size:.58rem;font-weight:850;position:absolute;bottom:5%;left:15%;right:15%;overflow:hidden}.card-flight[data-drawing=true],.card-flight[data-drawing=true] .card-flip[data-revealed=true]{will-change:transform;animation-duration:1.18s}.card-table[data-shuffling=true] .card-deck-stack,.card-table[data-shuffling=true] .card-deck-stack>i{will-change:transform;animation-duration:1.26s}@media (max-width:600px){.card-table{padding:24px 14px}.playing-card .card-center-suit{font-size:clamp(4.2rem,20vw,6.2rem)}}.table-page .card-table{min-height:clamp(240px,min(30vw,100svh - 440px),380px);box-shadow:none;background:0 0;border:0;padding-block:clamp(12px,2vw,24px)}@media (min-width:961px) and (max-height:800px){.table-page .card-table{zoom:.84}}@keyframes card-travel{0%{transform:translate3d(-112%,10%,38px)rotateX(8deg)rotate(-8deg)scale(.94)}48%{transform:translate3d(-34%,-15%,118px)rotateX(-4deg)rotate(4deg)scale(1.035)}78%{transform:translate3d(4%,-4%,34px)rotateX(1deg)rotate(-1.2deg)scale(1.012)}to{transform:translate(0,0)rotateX(0)rotate(0)scale(1)}}@keyframes card-turn{0%,30%{transform:rotateY(0)rotateX(7deg)}72%{transform:rotateY(194deg)rotateX(-2deg)}to{transform:rotateY(180deg)rotateX(0)}}@keyframes deck-shuffle{0%,to{transform:perspective(1000px)rotateX(2deg)rotate(-1deg)translate(0)}20%{transform:perspective(1000px)rotateX(5deg)rotate(-3deg)translate(-9px)}46%{transform:perspective(1000px)rotateX(8deg)rotate(2deg)translate(13px)scale(1.018)}72%{transform:perspective(1000px)rotateX(3deg)rotate(-1.5deg)translate(-4px)}}@keyframes deck-split-left{0%,to{transform:translate(8px,9px)rotate(1.5deg)}45%{transform:translate(-42px,2px)rotate(-8deg)}}@keyframes deck-split-right{0%,to{transform:translate(4px,5px)rotate(.7deg)}45%{transform:translate(44px,2px)rotate(8deg)}}
