/* Keep the original 5:7 card artwork intact at every screen width. */
.card .card-face{object-fit:contain;background:#fff;max-width:100%;border-radius:inherit}
.hand .card .mobile-index,.played .card .mobile-index,.trick-collector .card .mobile-index{display:none}
.hand .card{min-width:0;padding:0;aspect-ratio:5/7;height:auto;align-self:start}
.played .card{padding:0;aspect-ratio:5/7;height:auto}
@media(max-width:479px){
 .hand{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 8px;align-items:start;justify-content:center;max-width:348px;margin:0 auto;padding:0 3px 8px;perspective:none;min-height:0}
 .hand .card,.table-wrap[data-phase=bid] .hand .card{width:100%;height:auto;min-width:0;min-height:0;aspect-ratio:5/7;flex:none;margin:0;transform:none;transform-origin:center;border-radius:5px;box-shadow:0 4px 9px #0004}
 .hand .card .card-face{width:100%;height:100%;aspect-ratio:5/7}
 .hand .card:not(:disabled):hover,.hand .card:focus-visible{transform:translateY(-4px);filter:brightness(1.04)}
 .hand-section,.table-wrap[data-phase=bid] .hand-section{padding:16px 14px 14px}
 .hand-heading{margin-bottom:12px;flex-wrap:wrap;row-gap:5px}
 .hand:has(>.card:last-child:nth-child(-n+3)){grid-template-columns:repeat(3,minmax(0,1fr));max-width:240px}
}

/* Highlight exactly the server-approved moves, only during your playing turn. */
.hand .card{transition:filter .2s,opacity .2s,box-shadow .2s,transform .2s}
.hand[data-your-turn="true"] .card.legal:not(:disabled){border-color:#ffe0a0;outline:2px solid #f1cc7b;outline-offset:2px;box-shadow:0 0 15px #e8bc6245,0 5px 12px #0005;filter:none;opacity:1}
.hand[data-your-turn="true"] .card:disabled{filter:grayscale(.8) brightness(.55);opacity:.65;box-shadow:none;border-color:#66776b}
.hand[data-your-turn="true"] .card.legal:focus-visible{outline:3px solid #fff1c9;outline-offset:3px}
.hand[data-your-turn="false"] .card:disabled{filter:none;opacity:1}