/* settings form */
#formBackground {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.85);
	z-index: 99;
	transition: none;
	opacity: 0;
	visibility: hidden;
	display: none;
}
#formBackground.visible {
	transition: opacity 0.6s ease-out, visibility 0s;
	opacity: 1;
	visibility: visible;
	display: block;
}

.underConstruction {
	display: none;
	visibility: hidden;
	content: '';
}

#settingsForm {
	z-index: 100;
	position: fixed;
	left: 50vw;
	top: 50vh;
	transform: translate(-50%, -50%);

	color: var(--primary-color);
	background-color: var(--background-darkbrown);
	border: 0.2em solid #444;
	border-radius: 0.5em;
	box-shadow: 0 0 0.7em 0.1em rgba(80, 80, 80, 0.4);
	width: 60vw;
	height: 70vh;
	padding: 3vmin;
}

#settingsForm form {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	grid-template-rows: repeat(6, auto);
}
#settingsForm form legend {
	cursor: default;
}

#settingsForm form * {
	font-size: 0.9em;
}
#settingsForm form #formHeader {
	grid-column: 1 / span 2;
	display: flex;
	justify-content: space-between;
	font-size: 1.3em;
	align-self: center;
	margin: 0.5vmin 1vmin 2.5vmin;
	cursor: default;
}
#settingsForm form #formHeader h1 {
	text-decoration: underline;
	text-underline-offset: 0.12em;
	margin: 0;
}
#settingsForm form #formHeader h1:last-of-type {
	font-style: italic;
	margin-left: 26vmin;
}
#settingsForm form #formHeader #resetFormBtn {
	background: none;
	border: none;
	font-size: 1em;
	text-decoration: none;
	margin: -0.2em 0 0 0;
	padding: 0;
	height: 1.5em;
	width: 1.5em;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	align-self: flex-start;
	text-shadow: rgba(245, 245, 245, 0.4) 0 0 0.1em;
	cursor: pointer;
}
#settingsForm form #formHeader #resetFormBtn:focus {
	text-shadow: white 0 0 0.25em;
	box-shadow: none !important;
}

#settingsForm *:focus,
#settingsForm input[type='radio']:focus + label,
#settingsForm input[type='checkbox']:focus + label {
	outline: none;
	box-shadow: 0 0 0 0.05em rgba(255, 255, 255, 1) !important;
}

#settingsForm fieldset {
	display: flex;

	align-content: center;
	justify-content: center;
	border-radius: 0.5em;
	margin: 0 1vmin 2vmin;
}

#settingsForm fieldset#playersFieldset {
	grid-row: 3 / span 3;
	grid-column: 1;
}
#settingsForm fieldset#scopeFieldset,
#settingsForm fieldset#inFieldset,
#settingsForm fieldset#outFieldset,
#settingsForm fieldset#firstToFieldset,
#settingsForm #setsDiv,
#settingsForm #legsDiv {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}
#settingsForm #setsDiv,
#settingsForm #legsDiv {
	flex: 1 1 auto;
	justify-content: center;
}

#settingsForm label {
	display: block;
	font-size: 0.95em;
	padding: 0.8em 0.4em;
	font-weight: bold;
	align-self: center;
}

#settingsForm select,
#settingsForm input,
#settingsForm textarea {
	width: 4em;
	padding: 2vmin 1vmin;
	border: 0.15em solid black;
	border-radius: 0.8em;
	box-sizing: border-box;
	font-size: 0.85em;
	font-weight: bold;
	margin: 0;
}

#settingsForm select#gameMode {
	overflow-y: auto;
	width: 85%;
	background-color: #fff;
	padding: 0.3em 0.5em;
	font-size: 1.05em;
	cursor: pointer;
}

#settingsForm select#gameMode option {
	font-weight: bold;
	text-align: center;
	font-size: 0.95em;
	cursor: pointer;
}

#settingsForm #playersFieldset {
	display: grid;
	grid-template-columns: 1fr 4fr;
	align-content: space-between;
}
#settingsForm textarea#playerNames {
	font-family: var(--chalkboard-font);
	grid-column: 2;
	grid-row: span 2;
	font-size: 1.1em;
	width: 100%;
	max-width: 93%;
	height: 100%;
	border-radius: 1.3em;
	justify-self: center;
	padding-left: 1em;
	margin-left: 0.4em;
	resize: none;
}

#settingsForm label[for='playerNames'] {
	align-self: flex-start;
	padding: 0.2em;
}
#settingsForm #playerCountDiv {
	grid-column: 1;
	margin-top: auto;
}
#settingsForm label[for='numPlayers'] {
	padding: 0.2em;
}

#settingsForm #formButtons {
	grid-column: 1 / span 2;
	display: flex;
	width: 100%;
	justify-content: space-evenly;
	align-items: center;
}
#settingsForm #formButtons button {
	color: var(--primary-color);
	font-size: 1em;
	padding: 0.5em 1em;
	flex: 1 0 25%;
	cursor: pointer;
	border: none;
	border-radius: 2.5vmin;
	margin: 1em 0.5em;
	box-shadow: rgba(0, 0, 0, 0.6) 0 0 0.3em;
}
#settingsForm button:hover {
	opacity: 0.9;
}
#settingsForm button#cancelFormBtn {
	background-color: #952a06;
}
#settingsForm button#cancelFormBtn:active {
	background-color: #952a06ba;
}
#settingsForm button#changeRulesBtn {
	background-color: #444;
}
#settingsForm button#changeRulesBtn:active {
	background-color: #444444ab;
}
#settingsForm button#applySettingsBtn {
	background-color: #37843a;
}
#settingsForm button#applySettingsBtn:active {
	background-color: #39873db0;
}

#settingsForm input[type='number'] {
	height: 2.5em;
	font-size: 0.95em;
	padding: 0vmin 1.5vmin;
	width: 4.5em;
	text-align: center;
}
#settingsForm input[type='number']:disabled {
	content: '3';
	color: black;
}

#settingsForm input[type='radio'],
#settingsForm input[type='checkbox'] {
	width: 0;
	height: 0;
	opacity: 0;
	margin: 0;
	visibility: hidden;
}
#settingsForm input[type='radio'] + label,
#settingsForm input[type='checkbox'] + label {
	display: block;
	width: 6.5em;
	padding: 0.3em 0.5em;
	margin: 0.1em 0.3em;
	background-color: hsla(0, 0, 0, 0.5);
	border: black 0.2em solid;
	border-radius: 0.9em;
	text-align: center;
	justify-content: center;
	cursor: pointer;
	font-weight: normal;
}
#settingsForm input[type='radio']:checked + label,
#settingsForm input[type='checkbox']:checked + label {
	background-color: hsl(0, 0%, 0%);
	border-color: antiquewhite;
	font-weight: bold;
}

/* @media queries */
@media (max-aspect-ratio: 9/6) {
	#settingsForm {
		width: 80vw;
		height: 78vh;
	}

	#settingsForm form {
		row-gap: 0.6em;
	}

	#settingsForm form #formHeader {
		margin-bottom: 0;
	}

	#settingsForm select#gameMode {
		width: 90%;
		align-self: center;
	}
}

@media (max-aspect-ratio: 6/5) {
	#settingsForm {
		width: 88vw;
	}

	#settingsForm form {
		row-gap: 0.7em;
	}
}

@media (max-aspect-ratio: 1/1.1) {
	#settingsForm {
		height: auto;
		transform: translate(-50%, -50%);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#settingsForm form {
		row-gap: 1.5em;
	}

	#settingsForm form #formHeader {
		margin-top: 0.7em;
	}

	#settingsForm #formButtons {
		margin-bottom: 1.5em;
	}
}

@media (max-aspect-ratio: 1/1.4) {
	#settingsForm form {
		row-gap: 2em;
	}
}

@media (max-aspect-ratio: 1/1.9) {
	#settingsForm form {
		grid-template-columns: 1.4fr 1fr;
	}
	#settingsForm form *,
	#settingsForm select#gameMode {
		font-size: 1.05em;
	}

	#settingsForm form #formHeader {
		margin-top: 1em;
	}

	#settingsForm #formButtons {
		margin-bottom: 1.7em;
	}

	#settingsForm select#gameMode {
		max-height: max-content;
		padding: 0.4em 0;
	}

	#settingsForm fieldset #legsDiv {
		margin-bottom: 0.2em;
	}
	#settingsForm input[type='number']#numSets + label {
		padding-right: 0.622em;
	}

	#settingForm input[type='checkbox'] + label {
		border: green 0.2em solid;
	}

	#settingsForm fieldset#firstToFieldset,
	#settingsForm fieldset#scopeFieldset,
	#settingsForm fieldset#inFieldset,
	#settingsForm fieldset#outFieldset {
		flex-direction: column;
		flex-wrap: nowrap;
		padding: 0.2em 0;
	}
	#settingsForm fieldset#scopeFieldset,
	#settingsForm fieldset#inFieldset,
	#settingsForm fieldset#outFieldset {
		padding: 1em 0 0;
	}
}