/* promotePicker.css — pawn-promotion chooser popup (js/game_modules/promotePicker.js).
   Floats above the destination square; shares the menu-surface theme used by the
   other popups so it reads as part of the same UI. */

.promote-overlay {
	position: fixed;
	inset: 0;
	z-index: 1200; /* above the board + material strips, below modals (which sit higher) */
	background: transparent; /* the board stays visible behind the picker */
}

.promote-picker {
	position: fixed;
	display: flex;
	gap: var(--space-1);
	padding: var(--space-2);
	background: var(--menu-surface);
	border: 1px solid var(--menu-border);
	border-radius: var(--menu-radius);
	box-shadow: var(--menu-shadow);
	/* A small pointer toward the square below the popup. */
}

.promote-picker::after {
	content: '';
	position: absolute;
	bottom: -7px;
	left: 50%;
	transform: translateX(-50%);
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid var(--menu-surface);
}
/* When the popup is forced below the square, flip the pointer to the top edge. */
.promote-picker.below::after {
	bottom: auto;
	top: -7px;
	border-top: none;
	border-bottom: 8px solid var(--menu-surface);
}

.promote-choice {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: var(--space-1);
	width: 64px;
	background: var(--menu-surface-2);
	border: 2px solid transparent;
	border-radius: var(--radius-panel);
	color: var(--menu-text);
	cursor: pointer;
	transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}

/* Hover gated to hover devices — a touch tap otherwise sticks the highlight. */
@media (hover: hover) and (pointer: fine) {
	.promote-choice:hover {
		background: var(--accent-cream);
		color: var(--accent-cream-text);
		border-color: var(--accent-cream);
		outline: none;
		transform: translateY(-1px);
	}

	.promote-choice:hover .promote-count {
		color: var(--accent-cream-text);
	}
}

.promote-choice:focus-visible {
	background: var(--accent-cream);
	color: var(--accent-cream-text);
	border-color: var(--accent-cream);
	outline: none;
	transform: translateY(-1px);
}

.promote-choice:focus-visible .promote-count {
	color: var(--accent-cream-text);
}

.promote-choice.default {
	border-color: var(--active-border);
}

.promote-piece-img {
	width: 44px;
	height: 44px;
	pointer-events: none; /* clicks land on the button, not the img */
}

.promote-count {
	font-size: 12px;
	font-weight: 600;
	color: var(--menu-text-dim);
	line-height: 1;
}