/* Original vector-friendly card faces: clear suit silhouettes at every size. */
.card{background:linear-gradient(150deg,#fffefa,#f5f2e9);color:#172d25;border-color:#d8d6cc;box-shadow:inset 0 0 0 2px #ffffffb0,0 3px 7px #071f2226;font-family:Georgia,'Times New Roman',serif;font-variant-numeric:lining-nums}
.card.red{color:#b12d35}
.card .corner{font-weight:700}
.card .face-suit{display:none}
.card.trump{border:1px solid #ab843c;box-shadow:inset 0 3px 0 #d5b673,inset 0 0 0 2px #ffffffb0,0 3px 7px #071f2226}
.card .trump-mark{background:#f1ddb0;color:#654813;border-color:#b38a3c;font-size:10px;width:14px;height:14px;aspect-ratio:auto;line-height:1}
/* Pips give large cards their classic face; small cards show one strong suit. */
@container (max-width:67px){
 .card .pips,.card .corner.bottom{display:none}
 .card .corner{top:5px;left:5px;right:auto;bottom:auto;display:flex;align-items:center;gap:2px;font-size:clamp(16px,30cqw,19px);line-height:1.1;letter-spacing:-.04em}
 .card .corner span{font-size:clamp(14px,28cqw,18px);line-height:1;letter-spacing:0}
 .card .face-suit{display:block;position:absolute;left:0;right:0;top:52%;transform:translateY(-50%);text-align:center;font-size:53cqw;line-height:1}
 .card .trump-mark{top:auto;right:4px;bottom:5px}
}
@media(forced-colors:active){.card{border:1px solid CanvasText}.card.trump{outline:2px solid Highlight}.trump-mark{border:1px solid CanvasText}}