/* Make overlapping cards much easier to select while trading or playing. */
.pepper-hand img:not(.card-place-holder) {
	pointer-events: auto;
}

.pepper-hand img:not(.card-place-holder):hover {
	z-index: 50 !important;
}

.pepper-hand-wrapper.trading-cards .pepper-hand {
	width: min(100%, 620px);
}

.pepper-hand-wrapper.trading-cards .pepper-hand img:not(.card-place-holder) {
	cursor: pointer;
	z-index: 5;
}

.pepper-hand-wrapper.trading-cards .pepper-hand .card-1 { transform: translate(-205px, 12px) rotate(-10deg) !important; }
.pepper-hand-wrapper.trading-cards .pepper-hand .card-2 { transform: translate(-123px, 2px) rotate(-6deg) !important; }
.pepper-hand-wrapper.trading-cards .pepper-hand .card-3 { transform: translate(-41px, -4px) rotate(-2deg) !important; }
.pepper-hand-wrapper.trading-cards .pepper-hand .card-4 { transform: translate(41px, -4px) rotate(2deg) !important; }
.pepper-hand-wrapper.trading-cards .pepper-hand .card-5 { transform: translate(123px, 2px) rotate(6deg) !important; }
.pepper-hand-wrapper.trading-cards .pepper-hand .card-6 { transform: translate(205px, 12px) rotate(10deg) !important; }

.pepper-hand-wrapper.trading-cards .pepper-hand .card-1:hover { transform: translate(-205px, 0) rotate(-10deg) !important; }
.pepper-hand-wrapper.trading-cards .pepper-hand .card-2:hover { transform: translate(-123px, -10px) rotate(-6deg) !important; }
.pepper-hand-wrapper.trading-cards .pepper-hand .card-3:hover { transform: translate(-41px, -16px) rotate(-2deg) !important; }
.pepper-hand-wrapper.trading-cards .pepper-hand .card-4:hover { transform: translate(41px, -16px) rotate(2deg) !important; }
.pepper-hand-wrapper.trading-cards .pepper-hand .card-5:hover { transform: translate(123px, -10px) rotate(6deg) !important; }
.pepper-hand-wrapper.trading-cards .pepper-hand .card-6:hover { transform: translate(205px, 0) rotate(10deg) !important; }

/* Selected trade cards should remain obvious instead of only becoming darker. */
.pepper-hand-wrapper.trading-cards .card-in-transition {
	outline: 3px solid var(--gold);
	outline-offset: 3px;
	border-radius: 7px;
	filter: brightness(.8) drop-shadow(0 12px 9px rgba(0,0,0,.3)) !important;
}

/* Sort mode is deliberately distinct from normal card selection. Entering
   Sort highlights every available card in gold. The first card picked for a
   swap turns red until the player chooses the destination card; after the
   swap, the hand returns to the all-gold ready state. */
.pepper-hand-wrapper.arranging-cards .pepper-hand img:not(.card-place-holder) {
	cursor: pointer;
	outline: 3px solid var(--gold);
	outline-offset: 3px;
	border-radius: 7px;
	filter: brightness(1.04) drop-shadow(0 8px 7px rgba(0,0,0,.32)) !important;
}

.pepper-hand-wrapper.arranging-cards .card-in-transition {
	z-index: 60 !important;
	outline: 4px solid #e34b4b !important;
	outline-offset: 3px;
	border-radius: 7px;
	filter: brightness(1.08) drop-shadow(0 10px 8px rgba(0,0,0,.38)) !important;
}

/* During normal play, the chosen card uses the same selected-card class. Give
   it a clear visual state without changing its table position. */
.pepper-hand-wrapper.playable .pepper-hand img:not(.card-place-holder) {
	cursor: pointer;
}

.pepper-hand-wrapper.playable .card-in-transition {
	z-index: 60 !important;
	outline: 3px solid var(--gold);
	outline-offset: 3px;
	border-radius: 7px;
	filter: brightness(1.08) drop-shadow(0 10px 8px rgba(0,0,0,.38)) !important;
}

@media (max-width: 700px) {
	.pepper-hand-wrapper.trading-cards .pepper-hand .card-1 { transform: translate(-150px, 10px) rotate(-9deg) !important; }
	.pepper-hand-wrapper.trading-cards .pepper-hand .card-2 { transform: translate(-90px, 2px) rotate(-5deg) !important; }
	.pepper-hand-wrapper.trading-cards .pepper-hand .card-3 { transform: translate(-30px, -3px) rotate(-2deg) !important; }
	.pepper-hand-wrapper.trading-cards .pepper-hand .card-4 { transform: translate(30px, -3px) rotate(2deg) !important; }
	.pepper-hand-wrapper.trading-cards .pepper-hand .card-5 { transform: translate(90px, 2px) rotate(5deg) !important; }
	.pepper-hand-wrapper.trading-cards .pepper-hand .card-6 { transform: translate(150px, 10px) rotate(9deg) !important; }
}