body {
	font-family: sans-serif;
	margin: 0;
	padding: 8px;
	box-sizing: border-box;
}

#pageContainer {
	max-width: 800px;
	/* tune this: 1000px, 1100px, 1200px */
	margin-left: auto;
	margin-right: auto;
	padding: 0 12px;
	/* optional: side padding */
	box-sizing: border-box;
}

h3 {
	margin-top: 0;
}

h4 {
	margin-top: 0;
}

.active-bidder {
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
	outline: 3px solid gold;
}

.auction-suit-red {
	color: #c62828;
	font-weight: bold;
}

.auction-suit-black {
	color: #000000;
	font-weight: bold;
}

.auction-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	/* W N E S*/
	gap: 8px;
}

.auction-column {
	border: 1px solid #ccc;
	padding: 4px;
	box-sizing: border-box;
}

.auction-seat-header {
	font-weight: bold;
	text-align: center;
	margin-bottom: 4px;
	border-bottom: 1px solid #ddd;
}

.auction-bids {
	font-size: 14px;
}

.auction-bid-line {
	margin-bottom: 2px;
	min-height: 1.5em;
	text-align: center;
}

.bid-red {
	color: red;
	font-weight: bold;
}

.bid-black {
	color: black;
	font-weight: bold;
}

#handArea {
	align-items: center;
	background-color: #f9f9f9;
	border: 1px solid #ccc;
	box-sizing: border-box;
	display: grid;
	font-family: "Courier New", monospace;
	font-size: 14px;
	gap: 4px;
	grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr);
	grid-template-rows: auto auto auto;
	justify-items: center;
	margin-bottom: 4px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 4px;
	max-width: 520px;
	min-height: 200px;
	padding: 8px;
}

#yourHand {
	border: 1px solid #ccc;
	border-radius: 4px;
	background-color: #f9f9f9;
	padding: 6px;
	font-family: "Courier New", monospace;
	font-size: 14px;

	/* If you want, give it a fixed height too: */
	min-height: 60px;
}

.table-hand {
	width: 120px;
	/* adjust if needed */
	min-height: 60px;
	/* equal size even when empty */
	max-height: 80px;
	/* keeps multiline hands from pushing layout */


	border: 1px solid #ccc;
	border-radius: 4px;
	background-color: white;
	padding: 4px 6px;
	box-sizing: border-box;

	font-family: "Courier New", monospace;
	font-size: 14px;
}


.hand-red {
	color: red;
	font-weight: bold;
}

.hand-black {
	color: black;
	font-weight: bold;
}

#main {
	display: flex;
	gap: 12px;
	margin-top: 0px;
	align-items: flex-start;
}

#auctionGridRow {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 12px;
	margin-top: 4px;
	align-items: flex-start;
}

#ddResults {
	border: 1px solid #ccc;
	padding: 4px 6px;
	margin-top: 4px;
	min-height: 40px;
	background-color: #fdfdfd;
	font-size: 14px;
}

#ddResults table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

#ddResults th,
#ddResults td {
	border: 1px solid #ccc;
	padding: 2px 4px;
	text-align: center;
}

#ddResults th {
	background-color: #f0f0f0;
}

.dd-suit-red {
	color: red;
	font-weight: bold;
}

.dd-suit-black {
	color: black;
	font-weight: bold;
}

#leftColumn {
	flex: 1;
	min-width: 0;
	max-width: 60%;
}

#rightColumn {
	flex: 0 0 320px;
	/* may need adjusting */
}

#leftColumn h4,
#rightColumn h4 {
	margin-top: 1px;
	margin-bottom: 1px;
}

#topRight h4 {
	margin: 0 0 1px 0;
}

#topBar {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 4px;
	margin-bottom: 2px;
}

#topRight h4 {
	margin: 0 0 1px 0;
	/* no top margin small space below */
}

#topLeft {
	flex: 1;
}

#topRight {
	min-width: 180px;
}

#tableCentre {
	width: 120px;
	/* or 80px if you prefer */
	height: 120px;
	/* keep this! */
	background-color: #006400;
	border: 2px solid #004000;
	border-radius: 8px;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	color: #fff;
	font-size: 15px;
	font-weight: bold;

	justify-self: center;
	/* centers inside its column */
	grid-column: 2;
	grid-row: 2;
}

.waitingMessage {
	color: #fff;
	font-weight: bold;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;

	/* optional tweaks */
	font-size: 16px;
	letter-spacing: 0.5px;
}


/* position the four hands */
#northHand {
	grid-column: 2;
	grid-row: 1;
}

#southHand {
	grid-column: 2;
	grid-row: 3;
}

#westHand {
	grid-column: 1;
	grid-row: 2;
	justify-self: end;
}

#eastHand {
	grid-column: 3;
	grid-row: 2;
	justify-self: start;
}

#players {
	border: 1px solid #ccc;
	padding: 4px;
	margin-bottom: 8px;

}

#bidGrid {
	border: 1px solid #ccc;
	padding: 6px;
	margin-top: 4px;
	display: grid;
	grid-template-columns: repeat(5, minmax(44px, 1fr));
	/* 5 columns: C, D, H, S, NT */
	grid-auto-rows: 27px;
	gap: 4px;
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
	max-width: 360px;
}

#bidGrid button {
	width: 100%;
	height: 30px;
	font-size: 16px;
	padding: 0;
}

.alert-mark {
	color: #ff355e;
	font-weight: bold;
	margin-left: 3px;
	font-size: 15px;
}

.auction-note {
	font-size: 12px;
	margin-top: 4px;
}


.bid-button,
.special-bid {
	width: 64px;
	height: 30px;
	font-size: 13px;
	cursor: pointer;
	border-radius: 4px;
	border: 1px solid #555;
	background-color: #f0f0f0;
}

.bid-button:hover,
.special-bid:hover {
	background-color: #e0e0e0;
}

.dd-hint {
	color: #666;
	font-style: italic;
}

.special-bid.alert {
	background-color: #fff3cd;
	border: 1px solid #ff9800;
}

.special-bid.double {
	background-color: #ffebee;
}

.special-bid.pass {
	background-color: #e0f7fa;
}


.special-bid.redouble {
	background-color: #f3e5f5;
}

#chatArea {
	margin-top: 12px;
}

#chatLog {
	height: 10vh;
	overflow-y: auto;
	border: 1px solid #ccc;
	padding: 4px;
	margin-bottom: 4px;
}

.chat-line-time {
	color: #777;
	margin-right: 4px;
	font-size: 11px;
}

.chat-line-name {
	font-weight: bold;
}

.chat-input-row {
	display: flex;
	gap: 4px;
}

#msg {
	flex: 1;
	padding: 4px 6px;
	font-size: 13px;
}

#sendBtn {
	padding: 4px 10px;
	font-size: 13px;
}

#tableCentre {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-weight: bold;
	color: #fff;
}

@media (max-width: 800px) {
	#auctionGridRow {
		grid-template-columns: 1fr;
	}

	#handArea {
		grid-template-columns: repeat(3, 1fr);
		padding: 6px;
		max-width: 100%;
	}

	.table-hand {
		width: 100%;
		/* fill whatever space the grid cell has */
		max-width: 100%;
		/* don't try to be wider than the cell */
		font-size: 12px;
		/* slightly smaller cards so they wrap nicely */
	}

	#tableCentre {
		width: 80px;
		height: 80px;
		font-size: 13px;
		/* optional tweak so it doesn’t dominate */
	}

	#main {
		flex-direction: column;
	}

	#leftColumn {
		max-width: none;
		width: 100%;
		flex: 1 1 auto
	}

	#pageContainer {
		padding-left: 2px;
		padding-right: 2px;
	}

	#rightColumn {
		flex: 1 1 auto;
		width: 100%
	}
}

@media (max-width: 600px) {
	#tableCentre {
		width: 80px;
		height: 80px;
		font-size: 13px;
	}

	.table-hand {
	   font-size: 15px;
	   height: 80px;
	   min-height: 80px;
	   max-height: none; 
	   line-height: 1.3;
	   font-weight: 600;

	   display: flex;
	   flex-direction: column;     /* stack suits top-to-bottom */
	   justify-content: center;    /* centre vertically */
	   align-items: flex-start;    /* left align text */
	   padding-left: 6px;          /* 👈 nice slight indent */
	}
}