/* Phase 3 online gameplay, layered on top of the shared board and seat styles. */
.online-game-exit { border-color: rgba(220,242,116,.45); }
.online-seat-hand { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 7px; direction: ltr; }
.online-seat-hand .hand-tile { width: 48px; height: 30px; flex-basis: 48px; padding: 2px; border-radius: 5px; }
.online-seat-hand .hand-tile .pip { width: 3px; height: 3px; }
.online-seat-hand .hand-tile.double-tile { width: 30px; height: 48px; flex-basis: 30px; }
.online-chain-tile { pointer-events: none; }
.online-choice-actions { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.online-challenge-actions, .online-round-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.online-challenge-actions .continue-button, .online-next-round-button { border-color: rgba(246, 188, 82, .75); color: #fff3d1; background: rgba(111, 76, 24, .62); }
.online-next-round-button[hidden] { display: none; }
.online-choice-actions .continue-button { min-width: 84px; }
.online-pass-button[hidden] { display: none; }
.online-pass-button { border-color: rgba(239,129,89,.7); color: #fff5e7; background: rgba(142,61,39,.55); }
.online-pass-button:hover { background: rgba(181,78,50,.72); }
@media (max-width: 760px) {
  .online-seat-hand .hand-tile { width: 40px; height: 26px; flex-basis: 40px; }
  .online-seat-hand .hand-tile.double-tile { width: 26px; height: 40px; flex-basis: 26px; }
  .online-seat-hand .hand-tile .pip { width: 2.6px; height: 2.6px; }
  .online-choice-actions, .online-challenge-actions { width: 100%; }
  .online-choice-actions .continue-button, .online-challenge-actions .continue-button, .online-next-round-button { flex: 1 1 84px; }
}