/* ========== PEEK AT THE COMPUTERS' HANDS (build 21) ==========
   public/render/peek.js puts .peek-hand under a computer's seat plate: one
   small chip per suit ("♠ A A K 10 Q"). It grows the seat by a line or two
   (the sides stack their suits) and never overlaps the trick or the bids. */

.peek-hand {
  max-width: 100%;
  min-width: 0;
}

.peek-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px 4px;
  max-width: 100%;
}

.peek-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(250, 247, 240, 0.94);
  color: #1b1b1b;
  border: 1px solid rgba(0, 0, 0, 0.25);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.peek-chip b { font-size: 0.9em; }
.peek-chip.suit-H b,
.peek-chip.suit-D b { color: #c62828; }
.four-color-deck .peek-chip.suit-D b { color: #1565c0; }
.four-color-deck .peek-chip.suit-C b { color: #2e7d32; }

/* The side seats: one suit per line, so a 20-card hand stays narrow. */
.player-left .peek-chips,
.player-right .peek-chips {
  flex-direction: column;
  align-items: center;
}

/* The top seat: a single row while it fits. */
.player-top .peek-hand { max-width: min(560px, 92vw); }

@media (max-width: 600px), (max-height: 500px) {
  .peek-chip { font-size: 0.62rem; padding: 0 4px; gap: 2px; border-radius: 6px; }
  .peek-chips { gap: 2px 3px; }
  /* Phone side seats are narrow: each suit's chip wraps onto two lines
     rather than running under the bid panel or off the screen. */
  .player-left .peek-hand,
  .player-right .peek-hand { width: 100%; max-width: 100%; }
  .player-left .peek-chips,
  .player-right .peek-chips { align-items: stretch; }
  .player-left .peek-chip,
  .player-right .peek-chip {
    display: block;
    white-space: normal;
    text-align: center;
    word-spacing: -0.05em;
    padding: 1px 3px;
  }
}

.easy-view .peek-chip { font-size: 0.86rem; }