/* Shared card faces for computer and online tables. Keep existing card sizes. */
.card{--card-color:#24577f}
.card.blue{--card-color:#24577f}
.card.green{--card-color:#386335}
.card.red{--card-color:#a1342b}
.card.wild{--card-color:#865c16}
.card:not(.empty):not(.back){background:linear-gradient(145deg,#fffef9 20%,#f4efdf);border:1px solid color-mix(in srgb,var(--card-color) 32%,#d9d0b8);box-shadow:inset 0 1px 0 #fff,0 3px 7px #09201855}
.card:not(.empty):not(.back)::after{content:"";position:absolute;inset:3px;border:1px solid color-mix(in srgb,var(--card-color) 20%,transparent);border-radius:4px;pointer-events:none}
.card:not(.empty):not(.back)::before{border:2px double currentColor;opacity:.22;inset:auto;width:76%;height:54%;left:50%;top:50%;transform:translate(-50%,-50%)}
.card .value{font-weight:700;line-height:1;text-shadow:0 1px 0 #fff}
.card:not(.empty):not(.back)>.value{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin-top:-.04em;text-align:center}
.card:not(.wild):not(.empty):not(.back)>.value{font-family:Cambria,"Times New Roman",serif;font-variant-numeric:lining-nums tabular-nums}
.card .corner{font-weight:900}
.card .color-label{font-weight:900;letter-spacing:.35px}
.card.wild:not(.empty):not(.back){background:linear-gradient(145deg,#fff9e5,#ecd89f);border-color:#b38b3e}
.card.wild::after{border-color:#ad823d66}
.card.back{border-color:#d8c378;box-shadow:inset 0 0 0 2px #173a2c,inset 0 0 0 3px #d8c37877,0 3px 7px #09201855}
.card.small::after,.online-seat-piles .card::after{inset:2px;border-radius:2px}

/* Keep small opponent cards readable with one central value. */
.online-seat-piles .card .corner{display:none}

/* Shared pile prompts stay legible against the felt in both game modes. */
.online-app .builds .pile-wrap>small{display:block;font:700 18px/1.25 Arial,sans-serif;color:#fff9e9;background:#10281f;border:1px solid #d8c37899;border-radius:6px;padding:4px 8px;white-space:nowrap;text-align:center;margin:0;text-shadow:none}
.online-app .builds .pile-wrap{gap:7px}
@media(max-width:1000px){.online-app .builds .pile-wrap>small{font-size:16px;padding:4px 6px}}
@media(max-width:700px){.online-app .online-center .builds{grid-template-columns:repeat(2,max-content);gap:16px 18px;margin-inline:auto}}
