/* Keep each player's name in normal document flow so it can never occupy
   the same space as the bidding/action controls below it. */
.pepper-hand-wrapper > div[style="position:relative"] {
	min-height: 0;
	position: relative !important;
	padding: 10px 14px 6px;
}

.pepper-hand-wrapper > div[style="position:relative"] .player-name {
	position: static !important;
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	min-height: 30px;
	margin: 0;
	padding: 6px 11px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: top;
}

/* The controls are their own row immediately after the optional suit picker.
   Explicitly keep them in normal flow as well so compact opponent hands cannot
   pull the controls back up underneath the name label. */
.pepper-hand-wrapper > .row[style*="z-index"] {
	position: relative !important;
	z-index: 10;
	margin-top: 0 !important;
	clear: both;
}

.pepper-hand-wrapper > div[style="position:relative"] + .row,
.pepper-hand-wrapper > div[style="position:relative"] + .suit-picker + .row {
	position: relative !important;
	margin-top: 0 !important;
}

@media (max-width: 700px) {
	.pepper-hand-wrapper > div[style="position:relative"] {
		padding: 8px 10px 5px;
	}

	.pepper-hand-wrapper > div[style="position:relative"] .player-name {
		font-size: 11px;
		min-height: 28px;
		padding: 5px 9px;
	}
}