/* Quiet Table — Agent C: grouped local hand and waiting hint. */

.suit-groups {
  --quiet-tile-width: clamp(23px, 6.2vw, var(--tile-w, 48px));
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(3px, 1vw, 10px);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 7px max(4px, env(safe-area-inset-right)) 13px max(4px, env(safe-area-inset-left));
  scrollbar-width: none;
}

/* The legacy #hand rule has higher specificity; keep the grouped rack finite. */
#hand.suit-groups {
  gap: clamp(3px, 1vw, 10px);
  overflow-x: hidden;
  overflow-y: visible;
}

.suit-groups::-webkit-scrollbar { display: none; }

.hand-group {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(1px, .35vw, 5px);
  min-width: 0;
  flex: 0 1 auto;
}

.hand-group .tile.hand-tile {
  position: relative;
  flex: 0 1 var(--quiet-tile-width);
  width: var(--quiet-tile-width);
  min-width: 0;
  height: auto;
  aspect-ratio: 3 / 4;
  touch-action: manipulation;
  cursor: pointer;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.22));
  transition: transform 130ms var(--ease-out), filter 130ms ease;
}

.hand-group .tile.hand-tile:hover { transform: translateY(-4px); }
.hand-group .tile.hand-tile.sel,
.hand-group .tile.hand-tile.is-selected {
  transform: translateY(-13px);
}

.hand-group .tile.hand-tile.drawn::after,
.hand-group .tile.hand-tile.is-drawn::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 11px;
  border: 1.5px solid var(--gold-deep);
  animation: quiet-hand-breathe 1.6s ease-in-out infinite;
}

.quiet-melds {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(5px, 1vw, 10px);
  flex-wrap: wrap;
  max-width: 100%;
}

.quiet-melds .meld {
  display: flex;
  gap: 2px;
  flex: 0 0 auto;
}

.quiet-melds .meld .tile { pointer-events: none; }

#hintChip .wait-tile { flex: 0 0 auto; }
#hintChip .wait-tile.is-unqualified { filter: saturate(.7); }

@keyframes quiet-hand-breathe {
  0%, 100% { opacity: .25; }
  50% { opacity: .95; }
}

@media (max-width: 479px) {
  .suit-groups {
    gap: 2px;
    padding-left: 2px;
    padding-right: 2px;
  }
  .hand-group { gap: 1px; }
  .hand-group .tile.hand-tile { filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.24)); }
  .hand-group .tile.hand-tile:hover { transform: translateY(-2px); }
  .hand-group .tile.hand-tile.sel,
  .hand-group .tile.hand-tile.is-selected { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .hand-group .tile.hand-tile.drawn::after,
  .hand-group .tile.hand-tile.is-drawn::after { animation: none; opacity: .8; }
}