/*
 * deck.css - Tinder-style fruit/veg card deck (drop-in plug-in)
 * Loaded by incs/deck.js. Every selector scoped under .cm-deck.
 * Safe to delete together with deck.js.
 */

/* reserve the deck's height up front (before deck.js / the first image),
   so nothing shifts down on load. Values = measured deck height:
   stack (width x 1.25) + 14px gap + 55px button row + 8px net margin. */
#cmslot {
	display: flow-root;
	min-height: 527px;   /* desktop: deck is always 360px wide */
}
@media (max-width: 992px) {
	#cmslot { min-height: calc(min(82vw, 320px) * 1.25 + 77px); }
}

.cm-deck {
	width: min(360px, 82%);
	margin: -14px auto 1.4em;   /* tighten the gap to #logo above */
	-webkit-user-select: none;
	user-select: none;
}
@media (max-width: 992px) {
	.cm-deck { width: min(82vw, 320px); }
}

.cm-deck-stack {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;          /* clip the fly-off completely - can't grow the page */
	border-radius: 12px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .22);   /* only the top card shows, so one shadow here */
}
/* Fallback for browsers without aspect-ratio */
@supports not (aspect-ratio: 4 / 5) {
	.cm-deck-stack { height: 0; padding-bottom: 125%; }
}

.cm-card {
	position: absolute;
	inset: 0;
	margin: 0;
	box-sizing: border-box;
	border: 10px solid #fff;         /* playing-card frame */
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	touch-action: pan-y;
	cursor: grab;
	will-change: transform;
	transform: translate3d(0, 0, 0);
}
.cm-card.cm-anim { transition: transform .32s ease-out, opacity .32s ease-out; }
.cm-card.cm-drag { cursor: grabbing; transition: none; }

.cm-card picture { display: contents; }
.cm-card img {
	width: 100%;
	height: 100%;
	margin: 0 !important; /* beat #description img { margin-bottom } in 4tres.css */
	border-radius: 3px;
	object-fit: cover;
	display: block;
	pointer-events: none;
}

/* only the top two cards need painting; no scale/offset so the next card
   is already exactly in place when the top one leaves */
.cm-card:nth-last-child(n+3) { visibility: hidden; }

.cm-stamp {
	position: absolute;
	top: 16px;
	font: 700 26px/1 Arial, Helvetica, sans-serif;
	letter-spacing: .05em;
	padding: 3px 12px;
	border: 4px solid;
	border-radius: 8px;
	opacity: 0;
	pointer-events: none;
}
.cm-stamp.cm-like  { left: 12px;  color: #3aa657; border-color: #3aa657; transform: rotate(-18deg); }
.cm-stamp.cm-nope  { right: 12px; color: #e0554e; border-color: #e0554e; transform: rotate(18deg); }

.cm-deck-btns {
	display: flex;
	gap: 26px;
	justify-content: center;
	margin-top: 14px;
}
.cm-btn {
	box-sizing: border-box;
	width: 50px;
	height: 50px;
	padding: 0;
	border-radius: 50%;
	border: 2px solid #ddd;
	background: #fff;
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
	transition: transform .12s ease;
}
.cm-btn:hover  { transform: scale(1.08); }
.cm-btn:active { transform: scale(.94); }
.cm-btn.cm-like { color: #3aa657; }
.cm-btn.cm-nope { color: #e0554e; }
.cm-btn:focus-visible { outline: 2px solid #F68E35; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.cm-card.cm-anim, .cm-btn { transition: none; }
}