/* 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 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. */