/* Larger face-up cards; only the player's hand changes, not the center pile. */
.controls .sound-toggle { padding: 10px; min-width: 44px; font-size: 18px; }
.player-role-stack { position: relative; display: inline-grid; flex: 0 0 auto; justify-items: center; }
.player-role-stack .hand-count { top: calc(100% + 2px); left: 50%; transform: translateX(-50%); white-space: nowrap; }
.hand-row .hand {
  --hand-card-width: 100px;
  --hand-card-height: 141px;
  --hand-card-step: 50px;
  width: 100%;
  height: 195px;
}
.hand-row .hand-stack {
  box-sizing: border-box;
  flex: 0 1 auto;
  width: min(100%, calc(var(--hand-card-width) + (var(--hand-size) - 1) * var(--hand-card-step) + 32px));
  min-width: 0;
}
.hand-row .hand-stack .card {
  flex: 0 0 var(--hand-card-width);
  width: var(--hand-card-width);
  height: var(--hand-card-height);
  /* Tighten a full hand without shrinking the actual card faces. */
  margin-right: calc((100% - var(--hand-card-width)) / max(1, var(--hand-size) - 1) - var(--hand-card-width));
}
.hand-row .hand-stack .card:last-child { margin-right: 0; }
@media (max-width: 700px) {
  .hand-row .hand {
    --hand-card-width: 86px;
    --hand-card-height: 121px;
    --hand-card-step: 34px;
    height: 175px;
  }
}