.playing-card{--card-width:76px;display:inline-block;position:relative;flex:none;align-self:flex-start;width:var(--card-width);aspect-ratio:5/7;border-radius:calc(var(--card-width)*.07);background:#fbf4e3;color:#17211d;border:1px solid #d5c6a5;box-shadow:0 2px 3px #0003,0 7px 12px #0002;overflow:hidden;vertical-align:middle;isolation:isolate;font-family:Georgia,'Times New Roman',serif}
.playing-card.card-red{color:#9f2436}
.card-index{position:absolute;display:flex;align-items:center;flex-direction:column;gap:.08em;line-height:.93;z-index:2;font-size:calc(var(--card-width)*.23);font-style:normal}.card-index b{font-weight:700}.card-index i{display:block;font-style:normal;font-size:1em;line-height:1.12}.card-index-top{top:4%;left:5%}.card-index-bottom{bottom:4%;right:5%;transform:rotate(180deg)}.card-suit{display:block;width:1em;height:1.12em;fill:currentColor}
.card-art{position:absolute;inset:16% 16%;background-image:var(--card-atlas,url('/cards/atelier/illustrations.png'));background-size:400% 400%;border:1px solid #b7a36a44;border-radius:2px}
.playing-card:has(>.card-art) .card-index{background:#fbf4e3}
.card-pips{position:absolute;inset:10% 25%}.card-pips i{position:absolute;display:block;font-style:normal;font-size:calc(var(--card-width)*.23);line-height:1;transform:translate(-50%,-50%)}.card-pips i.pip-inverted{transform:translate(-50%,-50%) rotate(180deg)}.card-pips i.pip-ace{font-size:calc(var(--card-width)*.5)}
.card-pips .card-suit{width:.7em;height:.784em}
.card-back{background:#173c31;border:3px solid #f7edda;color:#d7b968}.card-back:before{content:'';position:absolute;inset:5%;border:1px solid #c9ab68;background:repeating-linear-gradient(45deg,transparent 0 5px,#c9ab6828 5px 6px),repeating-linear-gradient(-45deg,transparent 0 5px,#c9ab6828 5px 6px)}.card-back>span{position:absolute;inset:0;display:grid;place-items:center;font-size:calc(var(--card-width)*.6);text-shadow:0 1px 1px #000;background:radial-gradient(ellipse at center,#173c31 0 22%,transparent 24%)}

.card-back>span:before{content:"♠"}
[data-card-suit]{display:inline-block;vertical-align:middle}
[data-card-suit]>.card-suit{width:1em;height:1.12em}