:root {
	--header-height: 40px;
	--footer-height: 40px;

	--card-table-bg: #5e945e;
}

html,
body {
	overscroll-behavior-y: none;
}

html {
	/* font-size: clamp(0.85rem, 1vw + 0.5rem, 1.25rem); */
	font-size: 20px;
}

@media (width <= 768px) {
	html {
		font-size: 14px;
	}
}

body {
	font-family: Arial, Helvetica, sans-serif;
}

/* ========================== app ================================= */
.app {
	max-width: 1000px;
	height: 200dvh;
	display: grid;
	grid-template-rows: var(--header-height) 1fr var(--footer-height);
}

/* ========================== main ================================= */
main {
	display: grid;
	/* grid-template-rows: 50% 50%; */
	grid-template-rows: 1fr 1fr;
}

/* ========================== Header/Footer ================================= */
header,
footer {
	color: white;
	background-color: black;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

header {
	& .title {
		font-size: 1.25rem;
		font-weight: bold;
	}

	& .subTitle {
		font-size: 0.755rem;
		font-weight: bold;
	}
}

/* ========================== handRank ================================= */
section.handRank {
	display: grid;
	grid-template-rows: 30px 1fr;
	overflow: hidden;

	& > .title {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.25rem;
	}
}

/* ========================== handChart ================================= */
.handChart {
	display: grid;
	grid-template-rows: repeat(12, 1fr);
	grid-template-columns: 1fr auto;
	overflow: hidden;
	background-color: var(--card-table-bg);
}

/* ========================== hand ================================= */
.hand {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	/* gap: 5px; */
	/* padding: 2px 5px; */
}

.hand.fourCard {
	grid-template-columns: repeat(4, 20%);
	justify-content: center;
}

/* ========================== hand description ================================= */
.handDesc {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 5px;

	& .title {
		font-size: 1.1rem;
		font-weight: bold;
	}
}

/* ========================== houseRules ================================= */
section.houseRules {
	display: grid;
	grid-template-rows: 30px 1fr;
	overflow: hidden;

	& .titleWrapper {
		display: flex;
		gap: 5px;
		align-items: center;
		justify-content: center;
		padding-left: 20px;

		& .title {
			font-size: 1.25rem;
			font-weight: bold;
		}

		& .subTitle {
			font-size: 1rem;
		}
	}

	& .houseRuleList {
		background-color: papayawhip;
		font-size: 1.25rem;
		padding: 1rem;
	}
}

/* ========================== card ================================= */
.card {
	background-position: top left;
	background-size: 240%;
	background-repeat: no-repeat;
	background-origin: padding-box;
	background-clip: padding-box;
	margin: 2px 3px;
}

@media (min-width: 768px) {
	.card {
		background-size: cover; /* Locks to a fixed pixel width on large screens */
	}
}

@media print {
	.card {
		-webkit-print-color-adjust: exact !important; /* Chrome, Safari, Edge */
		print-color-adjust: exact !important; /* Firefox, Modern Safari */
		background-size: cover; /* Locks to a fixed pixel width on large screens */
	}

	nav {
		display: none !important;
	}
}

/* ========================== utility ================================= */
.dimmed {
	/* opacity: 0.3; */
	filter: brightness(0.5);
}

/* ========================== test ================================= */
/* * {
	outline: 1px solid blue;
} */