/* iPhone 5/SE and other very small screens (320px width) */
@media (max-width: 768px) {

	/* Make container take full viewport height */
	.container {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		height: 100vh;
		width: 100%;
		gap: 1px;
		padding-bottom: 18vh !important;
		/* Increase if needed for more gap */
		min-height: calc(100vh + 18vh) !important;
	}

	/* Distribute vertical space */

	/* Board + history stack vertically; the row takes the board's old slot. */
	.game-board-row {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		order: 2;
	}

	/* No phantom centering column when stacked vertically. */
	.game-board-row::before { display: none; }

	.game-board-row > #board-container {
		width: 100% !important;
		flex: 0 0 auto;
		order: 1;
	}

	/* Deck rail: no room for a side column on phones, so lay the two decks out as
	   a compact horizontal strip above the board. */
	#deck-rail {
		flex: 0 0 auto;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 40px;
		width: 100%;
		order: 0;
		padding: 4px 0 8px 0;
	}
	#deck-rail .hs-deck {
		width: 50px;
		height: 64px;
	}
	#deck-rail .deck-card-back {
		width: 44px;
		height: 62px;
	}
	#deck-rail .hs-deck-badge {
		min-width: 22px;
		height: 22px;
		font-size: 12px;
		right: -6px;
		bottom: -6px;
	}
	/* Rail sits at the top of the screen on phones, so drop the composition
	   popover below the deck (centered) instead of above it. */
	#deck-rail .deck-popover {
		bottom: auto;
		top: calc(100% + 12px);
		left: 50%;
		transform: translate(-50%, 4px);
	}
	#deck-rail .deck-popover.visible {
		transform: translate(-50%, 0);
	}

	/* History becomes a collapsible strip below the board. */
	#move-history-panel {
		order: 2;
		flex: 0 0 auto;
		width: 100%;
		/* Header (~40) + a few list rows + nav (~52). Collapse hides the list. */
		max-height: 200px;
	}

	/* Tighter header on mobile so the list keeps usable height. */
	.move-history-header { padding: 4px var(--space-3); }

	#move-history-toggle { display: inline-block; }
	#move-history-panel.collapsed #move-history-list,
	#move-history-panel.collapsed .move-history-nav { display: none; }

	/* Board sizing and centering */
	#board-container {
		width: 100% !important;
		max-width: 100% !important;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 !important;
		padding: 0 !important;
		order: 2;
		flex-direction: column;
	}

	#chessboard {
		width: 92% !important;
		max-width: 92% !important;
		height: auto !important;
		aspect-ratio: 1 / 1;
		display: block;
		margin: 0 auto;
	}

	/* Card container adjustments - make much more compact */
	.player-frame {
		margin: 0;
		flex: 0 0 auto;
		order: 4;
		width: 100%;
		position: relative;
		background: rgba(245, 245, 245, 0.9);
		display: flex;
		flex-direction: column;
		border-top: 1px solid #ddd;
		margin-bottom: 12vh !important;
		padding-bottom: 8px !important;
	}

	/* Integrate deck info into the card container to save space */

	.card-container {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-evenly;
		align-items: stretch;
		width: 100%;
		padding: 0 !important;
		margin: 0 !important;
		height: 12vh !important;
		/* Dynamic height based on viewport */
		min-height: 12vh !important;
		/* Minimum fallback height */
		margin-bottom: 2vh !important;
		overflow-x: hidden;
		box-sizing: border-box;
		gap: 0;
		order: 4;
		position: relative;
		/* Ensure it's above the board when needed */
	}

	/* Card sizing - even smaller */
	.piece-card {
		width: 18% !important;
		height: 90% !important;
		/* Fill the container height */
		border-width: 1px !important;
		box-sizing: border-box !important;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 15% !important;
	}

	.card-content {
		transform: scale(0.8);
		transform-origin: center center;
		/* Ensure scaling from center */
	}

	.piece-image {
		width: 100% !important;
		height: 100% !important;
	}


	#board-container {
		order: 2;
	}

	.player-frame {
		order: 4;
	}

	.time-controls.player {
		display: none;
	}

	.timer-bar.white-timer-bar {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		padding: 2px 4px;
	}

	/* Create control bar below the board */
	.controls-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 4px 6px;
		background: #f0f0f0;
		box-sizing: border-box;
		margin: 0;
		order: 3;
	}



	.deck-info,
	.timer,
	.pass-button,
	.multiplayer-button,
	.menu-button {
		width: auto;
		/* size to content, just tighter padding/font on small screens */
		min-width: 0;
		height: 32px;
		line-height: 20px;
		padding: 6px 10px;
		font-size: 12px;
	}

	.redraw-button {
		width: 40px;
		min-width: 40px;
		max-width: 40px;
		height: 32px;
		line-height: 20px;
		padding: 6px 4px;
		font-size: 12px;
	}

	/* Add safe area padding for iOS devices */
	@supports (padding: max(0px)) {
		.container {
			padding-bottom: max(18vh, env(safe-area-inset-bottom) + 12vh) !important;
		}
	}

}
/* Contains AI-generated edits. */