/* Shared tall deck proportions. Width, minimum width, flex basis and height agree. */
html body :is(#app,#modal,.drag-ghost) .card{--playing-card-w:65px;width:var(--playing-card-w)!important;min-width:var(--playing-card-w)!important;max-width:var(--playing-card-w)!important;height:calc(var(--playing-card-w) * 5 / 3)!important;min-height:calc(var(--playing-card-w) * 5 / 3)!important;max-height:calc(var(--playing-card-w) * 5 / 3)!important;flex:0 0 var(--playing-card-w)!important;aspect-ratio:3/5!important;box-sizing:border-box!important;padding:0!important;border-radius:7px!important}
html body #app .blackjack-table .card{--playing-card-w:82px}
html body #app .poker-game .poker-hole .card{--playing-card-w:30px}
html body #app .poker-game .poker-hole.your-hole .card{--playing-card-w:66px}
html body #app .poker-game .poker-community .card,html body #app .poker-card-slot{--playing-card-w:clamp(40px,12vw,62px)}
html body #app .poker-card-slot{width:var(--playing-card-w)!important;min-width:var(--playing-card-w)!important;height:calc(var(--playing-card-w) * 5 / 3)!important;min-height:calc(var(--playing-card-w) * 5 / 3)!important;flex:0 0 var(--playing-card-w)!important;aspect-ratio:3/5!important}
html body #app .scene-spades .card{--playing-card-w:76px}
html body #app .scene-spades .spadeshand .card{--playing-card-w:clamp(34px,9.2vw,70px)}
html body #app .solitaire-table .card,html body #app .solitaire-table .slot{--playing-card-w:var(--sol-card-w,45px)}
html body #app .solitaire-table .slot{width:var(--playing-card-w)!important;min-width:var(--playing-card-w)!important;height:calc(var(--playing-card-w) * 5 / 3)!important;min-height:calc(var(--playing-card-w) * 5 / 3)!important;aspect-ratio:3/5!important}
html body #app .solitaire-table .piles .card,html body #app .solitaire-table .piles .slot{--playing-card-w:clamp(33px,8.3vw,45px)}
html body #app .rule-art .card{--playing-card-w:72px}
/* Live suit/rank indices remain legible and correct on every face. */
html body :is(#app,#modal,.drag-ghost) .card.luxury-card .card-index{font-size:calc(var(--playing-card-w) * .24)!important;line-height:1!important;left:5%!important;top:3%!important;min-width:0!important;padding:0 1px!important;background:#f7f0dfe8!important;border-radius:2px;z-index:3}
html body :is(#app,#modal,.drag-ghost) .card.luxury-card .card-index small{font-size:calc(var(--playing-card-w) * .20)!important;line-height:1!important;margin-top:1px!important}
html body :is(#app,#modal,.drag-ghost) .card.luxury-card .card-index.index-bottom{left:auto!important;top:auto!important;right:5%!important;bottom:3%!important;transform:rotate(180deg)!important}
html body :is(#app,#modal,.drag-ghost) .card .card-pips{left:23%!important;right:23%!important;top:20%!important;bottom:20%!important}
html body :is(#app,#modal,.drag-ghost) .card .card-pips i{font-size:calc(var(--playing-card-w) * .24)!important;line-height:1!important}
html body :is(#app,#modal,.drag-ghost) .card .ace-emblem{font-size:calc(var(--playing-card-w) * .63)!important}
/* Full double-ended court illustrations, rather than repeated small headshots. */
html body :is(#app,#modal,.drag-ghost) .card .court-art.modern-court{left:5%!important;right:5%!important;top:5%!important;bottom:5%!important;border:0!important;border-radius:2px;background-image:url('assets/courts-v2401.webp')!important;background-size:300% 100%!important;background-position:var(--court-x) center!important;background-repeat:no-repeat!important;box-shadow:none!important}
html body :is(#app,#modal,.drag-ghost) .card .court-person{display:none!important}
/* Disable the old showgirl pseudo-element that covered the intended deck back. */
html body :is(#app,#modal,.drag-ghost) .card.back,html body :is(#app,#modal,.drag-ghost) .card.back:hover{background-image:url('assets/vip-cards-v234.png')!important;background-size:322% 283%!important;background-position:2.3% 11.9%!important;background-repeat:no-repeat!important;background-color:#091626!important;border:1px solid #dab877!important;color:transparent!important;box-shadow:inset 0 0 0 1px #f9df93,0 4px 8px #0008!important;filter:none!important}
html body :is(#app,#modal,.drag-ghost) .card.back::before,html body :is(#app,#modal,.drag-ghost) .card.back::after{content:none!important;display:none!important;background:none!important}
html body #app .solitaire-table[data-puzzle-theme="ivory"] .card.back{background-size:315% 270%!important;background-position:97.7% 80.2%!important}
@media(max-width:600px){html body #app .blackjack-table .card{--playing-card-w:76px}html body #app .scene-spades .trickstage .card{--playing-card-w:64px}}
@media(max-width:360px){html body #app .blackjack-table .card{--playing-card-w:70px}html body #app .poker-game .poker-hole.your-hole .card{--playing-card-w:58px}}
/* Drag previews inherit the exact same dimensions as the card being moved. */
.drag-ghost .card{aspect-ratio:3/5!important}