/* The account form (web/account.js): the cream card of the in-app notice (loading.css), with form fields. */
#mm-account, #mm-account * { box-sizing: border-box; }
#mm-account [hidden] { display: none !important; }
#mm-account {
	position: fixed;
	inset: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	overflow-y: auto;
	background: rgba(23, 17, 13, 0.72);
	font: 400 16px/1.4 "Nunito", "Arial Rounded MT Bold", system-ui, sans-serif;
}
.mm-account-card {
	width: min(100%, 380px);
	max-height: 100%;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: auto;
	padding: 20px 18px 14px;
	border-radius: 22px;
	background: #fff4e2;
	border: 4px solid #f26a1b;
	box-shadow: 0 6px 0 #1a120c;
	color: #1a120c;
}
.mm-account-card img { width: 52px; height: 52px; align-self: center; }
.mm-account-card h1 { margin: 0; font-size: 23px; line-height: 1.2; text-align: center; }
.mm-account-card p { margin: 0; text-align: center; }
.mm-account-card label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: 15px; }
.mm-account-card label span { font-weight: 400; color: #5a4b40; }
.mm-account-card input:not([type=checkbox]), .mm-account-card select {
	width: 100%;
	padding: 11px 12px;
	border-radius: 12px;
	border: 2px solid #1a120c;
	background: #fff;
	color: #1a120c;
	font: 400 16px/1.2 "Nunito", system-ui, sans-serif;  /* 16px: iOS does not zoom into the field */
}
.mm-account-row { display: flex; gap: 10px; }
.mm-account-row label { flex: 1; min-width: 0; }
.mm-account-card .mm-account-check { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 14px; }
.mm-account-check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: #f26a1b; }
.mm-account-check span { color: #1a120c; }
.mm-account-check a { color: #c64a0c; font-weight: 700; }
.mm-account-note { font-size: 13px; color: #5a4b40; }
.mm-account-note a { color: #c64a0c; font-weight: 700; }
.mm-account-error { color: #b3261e; font-weight: 700; font-size: 15px; }
.mm-account-go, .mm-account-later {
	width: 100%;
	padding: 14px 16px;
	border-radius: 16px;
	font: 700 18px/1.2 "Nunito", "Arial Rounded MT Bold", system-ui, sans-serif;
	cursor: pointer;
}
.mm-account-go { background: #f26a1b; color: #fff4e2; border: 3px solid #1a120c; box-shadow: 0 4px 0 #1a120c; }
.mm-account-go:disabled { opacity: 0.6; }
.mm-account-later { background: none; border: 0; color: #5a4b40; font-weight: 600; text-decoration: underline; padding: 6px; }
/* The sign-in screen's email / code field: a real input laid over the box the game draws (web/account.js). */
#mm-email-field {
	position: fixed;
	z-index: 5;  /* over the game's canvas, under the loading clip (#mm-load, 10) and the page's cards (30) */
	display: none;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	outline: none;
	background: transparent;
	color: #1a120c;
	font-family: "Nunito", "Arial Rounded MT Bold", system-ui, sans-serif;
	-webkit-appearance: none;
	appearance: none;
}
#mm-email-field::placeholder { color: #8d8780; }