@layer app {
/* ============================================================
   Hand action buttons (shuffle + pass)
   ============================================================ */
.hand-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.hand-actions-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--hand-bg);
  flex-shrink: 0;
  justify-content: center;
}

.hand-actions-bar .btn {
  height: var(--cell-size);
  line-height: var(--cell-size);
  padding: 0 14px;
}

.btn-shuffle, .btn-pass {
  text-transform: uppercase;
  letter-spacing: 1px;
}

.pass-form, .switcher-form {
  display: inline;
}

}