/* Deck visualization — a Hearthstone-style deck pile beside the board.
   #deck-rail lives in .game-board-row opposite the move-history panel: it reuses
   the phantom centering column's slot (we drop ::before below) so the board stays
   centered. Opponent deck sits up top, the player's at the bottom. Each .hs-deck
   is a thick stack of card-backs with the remaining count badged on the corner.
   The back face is --card-back-img (set by js/cardBacks.js); a gradient shows as
   the fallback before art/JS loads. Layer count = deck fullness, painted by
   cardsView.renderDeckStack / stackLayers. New cards fly out of #player-deck-stack
   (see js/deck.js renderCards). */

/* The rail takes the place of the board row's left phantom column, so kill the
   phantom to avoid doubling the left gutter (review.js is the only thing that
   would hide the rail, and it's deprecated). */
.game-board-row::before { display: none; }

#deck-rail {
	flex: 0 0 220px;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;          /* hug the board edge */
	padding: var(--space-2) var(--space-4) var(--space-2) 0;
	box-sizing: border-box;
}

/* One deck object. The player's is a <button> (opens the deck-composition modal,
   wired in app.js by #player-deck-count-btn). */
.hs-deck {
	position: relative;
	width: 72px;
	height: 92px;
	background: none;
	border: none;
	padding: 0;
	cursor: default;
}
.hs-deck.player-deck { cursor: pointer; }

/* The pile holds the absolutely-stacked .deck-card-back layers. */
.hs-deck-pile {
	position: absolute;
	inset: 0;
}
.hs-deck-pile:empty { display: none; }

.deck-card-back {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 64px;
	height: 90px;
	border-radius: 6px;
	border: 1px solid rgba(0, 0, 0, 0.45);
	background-color: #324d78;
	background-image: var(--card-back-img, linear-gradient(135deg, #5b7fb4 0%, #324d78 100%));
	background-size: cover;
	background-position: center;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}

/* Each higher card steps up + right so the pile reads as a 3D stack. */
.deck-card-back:nth-child(2) { left: 2px; bottom: 2px; }
.deck-card-back:nth-child(3) { left: 4px; bottom: 4px; }
.deck-card-back:nth-child(4) { left: 6px; bottom: 6px; }
.deck-card-back:nth-child(5) { left: 8px; bottom: 8px; }

/* Remaining-count badge on the deck's bottom-right corner. */
.hs-deck-badge {
	position: absolute;
	right: -8px;
	bottom: -8px;
	min-width: 26px;
	height: 26px;
	padding: 0 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--button-bg, #2b3242);
	color: var(--button-text, #fff);
	border: 2px solid rgba(255, 255, 255, 0.85);
	border-radius: 999px;
	font-size: 13px;
	font-weight: bold;
	box-shadow: var(--shadow-sm);
	z-index: 6;
}

.hs-deck.player-deck:hover .deck-card-back {
	transform: translateY(-2px);
	transition: transform 0.15s ease;
}

/* Deck-composition popover: per-piece remaining counts, shown on hover/tap of
   the player's deck (wired in js/app.js, filled from ProxychessGame
   .getDeckComposition). Anchored above the deck so it clears the board. */
.deck-popover {
	position: absolute;
	left: 0;
	bottom: calc(100% + 12px);
	min-width: 96px;
	padding: 8px 10px;
	background: var(--menu-surface, #1e2330);
	color: var(--menu-text, #fff);
	border: 1px solid var(--menu-border, rgba(255, 255, 255, 0.12));
	border-radius: var(--menu-radius, 8px);
	box-shadow: var(--menu-shadow, 0 6px 20px rgba(0, 0, 0, 0.4));
	font-size: 13px;
	text-align: left;
	opacity: 0;
	transform: translateY(4px);
	pointer-events: none;          /* never steal hover from the deck button */
	transition: opacity 0.12s ease, transform 0.12s ease;
	z-index: 50;
}

.deck-popover.visible {
	opacity: 1;
	transform: translateY(0);
}

.deck-popover-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 3px 0;
}

.deck-popover-icon {
	width: 22px;
	height: 22px;
	display: block;
	flex: 0 0 auto;
}

.deck-popover-count {
	font-variant-numeric: tabular-nums;
	font-weight: bold;
	min-width: 1.5em;
	text-align: right;
}

/* Contains AI-generated edits. */