/* One readable, compact hand layout for local and online play. */
.hand-group { margin: 0; }
.hand-group+.hand-group { margin-top: 16px; }
.hand-label { display: block; margin: 0 0 8px; font: 600 16px/1.5 var(--body); text-align: left; }
.hand { gap: 8px; }
.hand-card { min-height: 80px; padding: 12px; }
.card-title { padding: 0; font-size: 26px; line-height: 1.08; }
.hand-card.twist .card-title { font-size: 24px; }
.selection-mark { display: none; }
.hand-card.selected, .hand-card.selected:hover { transform: none; }
.hand-card.selected .selection-mark { display: grid; top: -7px; right: -7px; bottom: auto; width: 20px; height: 20px; font-size: 13px; }
.submit-bar { display: block; margin-top: 16px; padding-top: 12px; }
.submit-bar .primary { width: 100%; min-height: 48px; }
@media (max-width:850px) {
  .hand { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hand-card { min-height: 70px; padding: 10px 12px; }
  .hand-group+.hand-group { margin-top: 12px; }
  .submit-bar { margin-top: 12px; padding-top: 10px; }
}
@media (min-width:560px) and (max-width:850px) {
  .hand { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .hand-card { min-height: 88px; }
  .hand-card.twist { min-height: 112px; }
}
@media (max-width:374px) {
  .card-title { font-size: 24px; }
}