.playing-card{--overlap:-27px;flex:0 0 96px;width:96px;height:138px;margin-left:var(--overlap);border:1px solid rgba(35,30,24,.24);border-radius:12px;background:radial-gradient(circle at 25% 15%,rgba(255,255,255,.78),transparent 22%),linear-gradient(145deg,#fffefa 0%,#f7f3ea 68%,#eee8dc 100%);color:#151817;position:relative;cursor:pointer;box-shadow:0 12px 27px rgba(0,0,0,.29),inset 0 0 0 1px rgba(255,255,255,.8);transform:translateY(0);transition:transform .13s ease,box-shadow .13s ease,outline .13s ease;user-select:none;overflow:hidden}.playing-card:first-child{margin-left:0}.playing-card::before{content:"";position:absolute;inset:3px;border-radius:9px;border:1px solid rgba(40,37,31,.06);pointer-events:none}.playing-card.red{color:#b72433}.playing-card:hover:is(button):not(:disabled){transform:translateY(-4px);box-shadow:0 16px 31px rgba(0,0,0,.34)}.playing-card.selected{transform:translateY(-18px);outline:2px solid #f0d88e;outline-offset:2px;box-shadow:0 20px 36px rgba(0,0,0,.40),0 0 0 5px rgba(216,183,104,.12)}.playing-card.wild{box-shadow:0 12px 27px rgba(0,0,0,.29),inset 0 0 0 3px rgba(216,183,104,.64),inset 0 0 20px rgba(216,183,104,.08)}
.card-corner{position:absolute;left:7px;top:6px;z-index:3;display:grid;justify-items:center;line-height:.83;font-family:Georgia,"Times New Roman",serif;font-weight:800;text-align:center}.card-corner.bottom{left:auto;top:auto;right:7px;bottom:6px;transform:rotate(180deg)}.corner-rank{font-size:1.17rem}.corner-suit{margin-top:4px;font-size:.86rem}.card-pips{position:absolute;inset:18px 13px;z-index:1}.pip{position:absolute;transform:translate(-50%,-50%);font-family:Georgia,"Times New Roman",serif;font-size:1.42rem;line-height:1}.pip.flip{transform:translate(-50%,-50%) rotate(180deg)}
.face-card{position:absolute;inset:25px 17px;border:1px solid rgba(22,24,23,.16);background:linear-gradient(45deg,transparent 46%,currentColor 47% 49%,transparent 50%),linear-gradient(-45deg,transparent 46%,currentColor 47% 49%,transparent 50%),radial-gradient(circle,rgba(216,183,104,.16),transparent 62%);opacity:.95;display:grid;place-items:center;overflow:hidden}.face-card::before,.face-card::after{content:"";position:absolute;width:34px;height:34px;border:1px solid currentColor;transform:rotate(45deg);opacity:.24}.face-card::before{left:-18px;top:-18px}.face-card::after{right:-18px;bottom:-18px}.face-rank{position:absolute;left:50%;top:35%;transform:translate(-50%,-50%);font-family:Georgia,"Times New Roman",serif;font-size:2.15rem;font-weight:800;text-shadow:0 1px #fff}.face-suit{position:absolute;left:50%;top:66%;transform:translate(-50%,-50%);font-size:1.65rem}.face-line{position:absolute;left:12%;right:12%;top:50%;height:1px;background:currentColor;opacity:.18}
.card-joker{position:absolute;inset:21px 12px 29px;display:grid;place-items:center;font-family:Georgia,"Times New Roman",serif;font-size:.86rem;font-weight:900;letter-spacing:.15em;color:#5a377f;border:1px solid rgba(90,55,127,.22);border-radius:50%;background:radial-gradient(circle,rgba(216,183,104,.17),transparent 62%)}.joker-ornament{position:absolute;inset:0;display:grid;place-items:center;color:rgba(90,55,127,.12);font-size:4.5rem}.joker-small{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:.46rem;letter-spacing:.11em;color:rgba(45,45,45,.48);font-weight:800}
.discard-pile .playing-card{position:absolute;inset:0;width:100%;height:100%;margin:0;border-radius:13px;cursor:default;transform:rotate(.6deg);box-shadow:0 12px 26px rgba(0,0,0,.34),0 1px 0 rgba(255,255,255,.68) inset}.meld-cards .playing-card{margin-left:-25px;transform:none}.meld-cards .playing-card:first-child{margin-left:0}
@media(max-width:760px){.playing-card{--overlap:-38px;flex-basis:82px;width:82px;height:118px}.corner-rank{font-size:1.02rem}.corner-suit{font-size:.74rem}.pip{font-size:1.18rem}.face-rank{font-size:1.75rem}.face-suit{font-size:1.35rem}}
@media(max-width:430px){.playing-card{--overlap:-44px;flex-basis:76px;width:76px;height:109px}.card-pips{inset:16px 10px}.pip{font-size:1.05rem}}