:root {
	color-scheme: light dark;
}

*, *::before, *::after {
	box-sizing:border-box;
}
body {
	margin:0;
	background-color:Canvas;
	color:CanvasText;
}
img {
	max-width:100%;
	height:auto;
}
main {
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:0.5rem;
	padding:0.75rem 0;
}
header h1 {
	font-size:1.25rem;
	text-transform:uppercase;
	margin:0;
}
button {
	font-weight:bold;
	padding:0.5rem 1rem;
	border-radius:0.25rem;
	border:none;
	cursor:pointer;
	background-color:ButtonFace;
	color:ButtonText;

	&:hover:not(:disabled) {
		filter:brightness(0.9);
	}
	&:disabled {
		opacity:0.5;
	}
}
.btn-group {
	display:flex;
	gap:0.5rem;
}
.players {
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	flex-direction:column;
	gap:1rem;

	li {
		display:flex;
		gap:1rem;
	}
}
input {
	border:1px solid light-dark(#374151, #6b7280);
	padding:0.5rem 0.75rem;
	background-color:Field;
	color:FieldText;
	border-radius:0.25rem;
}
.sr-only {
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip: rect(0, 0, 0, 0);
	white-space:nowrap;
	border:0;
}
table {
	margin:0.5rem;
	border-collapse:collapse;

	caption {
		font-weight:bold;
		padding-bottom:0.5rem;
	}
	th, td {
		border:1px solid light-dark(#9ca3af, #4b5563);
		padding:0.5rem;
	}
	td {
		overflow-wrap:anywhere;

		&:nth-child(n+3) {
			text-align:right;
		}
	}
}
.card-row {
	display:flex;
	justify-content:center;
	width:100%;
}
.card {
	width:calc(100% / 6);
	max-width:7rem;
	padding:0.25rem;
	background:none;

	&:disabled {
		opacity:1;
		cursor:default;
	}
}
article {
	max-width:65ch;
	padding:0 1rem;
	line-height:1.75;
	font-size:clamp(1rem, 0.95rem + 0.3vw, 1.125rem);

	h1, h2, h3 {
		margin-top:1.5em;
		margin-bottom:0.5em;
	}
	h1 {
		font-size:1.875rem;
	}
	h2 {
		font-size:1.5rem;
	}
	h3 {
		font-size:1.25rem;
	}
	p {
		margin:0.75em 0;
	}
	ul, ol {
		padding-left:1.5rem;
		margin:0.75em 0;
	}
	li {
		margin:0.25em 0;
	}
}