/* Card layout corrections for the ALPHA redesign.
   Keeps cards at playing-card scale instead of sizing them as a percentage
   of each Bootstrap column. */

.pepper-hand {
	position: relative;
	width: min(100%, 540px);
	min-height: 255px;
	margin: 0 auto;
	padding: 70px 28px 12px;
	display: grid;
	place-items: end center;
	overflow: visible;
}

.pepper-hand img {
	grid-area: 1 / 1;
	width: 104px !important;
	max-width: 104px;
	height: auto;
	margin: 0;
	padding: 0;
	transform-origin: 50% 92%;
	filter: drop-shadow(0 12px 10px rgba(0,0,0,.34));
	transition: transform .16s ease, filter .16s ease;
}

.pepper-hand .card-place-holder {
	width: 104px !important;
	max-width: 104px;
	opacity: 0;
	pointer-events: none;
	transform: none;
}

.pepper-hand .card-1 { transform: translate(-150px, 12px) rotate(-12deg); }
.pepper-hand .card-2 { transform: translate(-92px, 1px) rotate(-7deg); }
.pepper-hand .card-3 { transform: translate(-32px, -5px) rotate(-2deg); }
.pepper-hand .card-4 { transform: translate(32px, -5px) rotate(2deg); }
.pepper-hand .card-5 { transform: translate(92px, 1px) rotate(7deg); }
.pepper-hand .card-6 { transform: translate(150px, 12px) rotate(12deg); }

.pepper-hand .card-1:hover { transform: translate(-150px, 2px) rotate(-12deg); }
.pepper-hand .card-2:hover { transform: translate(-92px, -9px) rotate(-7deg); }
.pepper-hand .card-3:hover { transform: translate(-32px, -15px) rotate(-2deg); }
.pepper-hand .card-4:hover { transform: translate(32px, -15px) rotate(2deg); }
.pepper-hand .card-5:hover { transform: translate(92px, -9px) rotate(7deg); }
.pepper-hand .card-6:hover { transform: translate(150px, 2px) rotate(12deg); }

/* Your primary hand gets a little more breathing room. */
#pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand-wrapper {
	min-height: 330px;
	overflow: hidden;
}

#pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand {
	min-height: 270px;
	padding-top: 78px;
}

/* The three non-primary hands should read as table positions, not giant card walls. */
#pepper-app > div > .row.g-0:last-child .pepper-hand-wrapper {
	min-height: 210px;
	overflow: hidden;
}

#pepper-app > div > .row.g-0:last-child .pepper-hand {
	width: min(100%, 380px);
	min-height: 160px;
	padding: 54px 18px 8px;
	transform: none;
}

#pepper-app > div > .row.g-0:last-child .pepper-hand img {
	width: 72px !important;
	max-width: 72px;
}

#pepper-app > div > .row.g-0:last-child .pepper-hand .card-place-holder {
	width: 72px !important;
	max-width: 72px;
}

#pepper-app > div > .row.g-0:last-child .pepper-hand .card-1 { transform: translate(-102px, 8px) rotate(-10deg); }
#pepper-app > div > .row.g-0:last-child .pepper-hand .card-2 { transform: translate(-62px, 1px) rotate(-6deg); }
#pepper-app > div > .row.g-0:last-child .pepper-hand .card-3 { transform: translate(-21px, -2px) rotate(-2deg); }
#pepper-app > div > .row.g-0:last-child .pepper-hand .card-4 { transform: translate(21px, -2px) rotate(2deg); }
#pepper-app > div > .row.g-0:last-child .pepper-hand .card-5 { transform: translate(62px, 1px) rotate(6deg); }
#pepper-app > div > .row.g-0:last-child .pepper-hand .card-6 { transform: translate(102px, 8px) rotate(10deg); }

#pepper-app > div > .row.g-0:last-child .pepper-hand .card-1:hover { transform: translate(-102px, 2px) rotate(-10deg); }
#pepper-app > div > .row.g-0:last-child .pepper-hand .card-2:hover { transform: translate(-62px, -5px) rotate(-6deg); }
#pepper-app > div > .row.g-0:last-child .pepper-hand .card-3:hover { transform: translate(-21px, -8px) rotate(-2deg); }
#pepper-app > div > .row.g-0:last-child .pepper-hand .card-4:hover { transform: translate(21px, -8px) rotate(2deg); }
#pepper-app > div > .row.g-0:last-child .pepper-hand .card-5:hover { transform: translate(62px, -5px) rotate(6deg); }
#pepper-app > div > .row.g-0:last-child .pepper-hand .card-6:hover { transform: translate(102px, 2px) rotate(10deg); }

/* Keep bidding/action controls visually separate from the cards. */
.pepper-hand-wrapper > .row > .col-md-12 > .row:first-of-type {
	position: relative;
	z-index: 20;
}

@media (max-width: 700px) {
	.pepper-hand {
		width: min(100%, 430px);
		min-height: 225px;
		padding-left: 10px;
		padding-right: 10px;
	}

	.pepper-hand img {
		width: 86px !important;
		max-width: 86px;
	}

	.pepper-hand .card-place-holder {
		width: 86px !important;
		max-width: 86px;
	}

	.pepper-hand .card-1 { transform: translate(-118px, 10px) rotate(-11deg); }
	.pepper-hand .card-2 { transform: translate(-72px, 2px) rotate(-6deg); }
	.pepper-hand .card-3 { transform: translate(-25px, -3px) rotate(-2deg); }
	.pepper-hand .card-4 { transform: translate(25px, -3px) rotate(2deg); }
	.pepper-hand .card-5 { transform: translate(72px, 2px) rotate(6deg); }
	.pepper-hand .card-6 { transform: translate(118px, 10px) rotate(11deg); }
}

@media (max-width: 420px) {
	.pepper-hand img {
		width: 72px !important;
		max-width: 72px;
	}

	.pepper-hand .card-place-holder {
		width: 72px !important;
		max-width: 72px;
	}

	.pepper-hand .card-1 { transform: translate(-94px, 8px) rotate(-10deg); }
	.pepper-hand .card-2 { transform: translate(-57px, 2px) rotate(-6deg); }
	.pepper-hand .card-3 { transform: translate(-20px, -2px) rotate(-2deg); }
	.pepper-hand .card-4 { transform: translate(20px, -2px) rotate(2deg); }
	.pepper-hand .card-5 { transform: translate(57px, 2px) rotate(6deg); }
	.pepper-hand .card-6 { transform: translate(94px, 8px) rotate(10deg); }
}

/* At desktop widths game-table-layout.css provides the overall table and uses
   highly specific !important shelf placement for the local hand. The card
   layout switcher loads this stylesheet before that desktop layer, so those
   shelf rules used to mask Fan completely. The extra data-card-layout
   specificity below lets Fan win the cascade only when Fan is selected. */
@media (min-width: 1200px) {
	body[data-card-layout="fan"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand {
		width: 500px !important;
		height: 145px !important;
		min-height: 145px !important;
	}

	body[data-card-layout="fan"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand img:not(.card-place-holder) {
		left: 50% !important;
		width: 96px !important;
		max-width: 96px !important;
		margin-left: -48px !important;
		transform-origin: 50% 94% !important;
	}

	body[data-card-layout="fan"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand .card-1 { transform: translate(-174px, 16px) rotate(-13deg) !important; }
	body[data-card-layout="fan"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand .card-2 { transform: translate(-106px, 4px) rotate(-8deg) !important; }
	body[data-card-layout="fan"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand .card-3 { transform: translate(-36px, -4px) rotate(-3deg) !important; }
	body[data-card-layout="fan"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand .card-4 { transform: translate(36px, -4px) rotate(3deg) !important; }
	body[data-card-layout="fan"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand .card-5 { transform: translate(106px, 4px) rotate(8deg) !important; }
	body[data-card-layout="fan"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand .card-6 { transform: translate(174px, 16px) rotate(13deg) !important; }

	body[data-card-layout="fan"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand .card-1:hover { transform: translate(-174px, 5px) rotate(-13deg) !important; }
	body[data-card-layout="fan"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand .card-2:hover { transform: translate(-106px, -7px) rotate(-8deg) !important; }
	body[data-card-layout="fan"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand .card-3:hover { transform: translate(-36px, -15px) rotate(-3deg) !important; }
	body[data-card-layout="fan"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand .card-4:hover { transform: translate(36px, -15px) rotate(3deg) !important; }
	body[data-card-layout="fan"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand .card-5:hover { transform: translate(106px, -7px) rotate(8deg) !important; }
	body[data-card-layout="fan"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand .card-6:hover { transform: translate(174px, 5px) rotate(13deg) !important; }

	/* The fan stays visibly fanned while selecting an exchange card, with a
	   little extra spacing for reliable pointer targets. */
	body[data-card-layout="fan"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand-wrapper.trading-cards .pepper-hand {
		width: 570px !important;
	}
	body[data-card-layout="fan"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand-wrapper.trading-cards .pepper-hand img:not(.card-place-holder) {
		width: 100px !important;
		max-width: 100px !important;
		margin-left: -50px !important;
	}
	body[data-card-layout="fan"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand-wrapper.trading-cards .pepper-hand .card-1 { transform: translate(-210px, 16px) rotate(-12deg) !important; }
	body[data-card-layout="fan"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand-wrapper.trading-cards .pepper-hand .card-2 { transform: translate(-126px, 4px) rotate(-7deg) !important; }
	body[data-card-layout="fan"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand-wrapper.trading-cards .pepper-hand .card-3 { transform: translate(-42px, -4px) rotate(-2deg) !important; }
	body[data-card-layout="fan"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand-wrapper.trading-cards .pepper-hand .card-4 { transform: translate(42px, -4px) rotate(2deg) !important; }
	body[data-card-layout="fan"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand-wrapper.trading-cards .pepper-hand .card-5 { transform: translate(126px, 4px) rotate(7deg) !important; }
	body[data-card-layout="fan"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand-wrapper.trading-cards .pepper-hand .card-6 { transform: translate(210px, 16px) rotate(12deg) !important; }
}