body {
	font-family:monospace;
	font-size:20px;
	background:#000000;
	color:#EEEEEE;
	table {
		empty-cells:show;
	}
	button {
		font-size:30px;
	}
	div {
		margin:0px;
		padding:0px;
	}
}

#results {
	border:solid 1px;
	border-color:white;
}
#keyboard {
	border:solid 1px;
	border-color:white;
}

p {
	margin:10px;
}
.game-area {
margin:auto;
        width:400px;
	display:flex;
	justify-content:space-between;
}
#guess {
	font-family:monospace;
	font-size:20px;
	width: 5em;
}
#submit-guess {
	font-family:monospace;
	font-size:20px;
}
#submit-custom-word {
	font-family:monospace;
	font-size:22px;
	font-weight:bold;
	background:white;
}
#submit-new-game, #custom-create, #custom-back {
	font-family:monospace;
	font-size:20px;
}
#win-lose, #version {
	text-align:center;
}
/* fixed-height status box, same width as the game area: text comes and goes without moving anything else */
#win-lose { height: 2.6em; width: 400px; max-width: 95%; margin: 10px auto; box-sizing: border-box; display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center; }
#win-lose > span { display: inline; }
.controls-container {
	margin-top: 14px;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
}

.home-link {
	margin: 4px 0 8px;
}
.home-link a {
	color: #05E0E0;
	text-decoration: underline;
}

#custom-panel { max-width: 420px; margin: 20px auto; text-align: center; }
#custom-word { font-family: monospace; font-size: 20px; width: 5em; text-align: center; text-transform: uppercase; }
#custom-error { color: #ff7b7b; min-height: 1.2em; }
.copy-link { color: #05E0E0; text-decoration: underline; cursor: pointer; word-break: break-all; font-size: 15px; }
#custom-copied { color: #BBFFBB; min-height: 1.2em; }
#share-copied { color: #BBFFBB; }
#rules { text-align: center; font-size: 14px; color: #BBBBBB; max-width: 520px; margin: 24px auto 10px; }

/* the hidden attribute must win over the display rules above */
[hidden] { display: none !important; }

/* buttons: white, square, Windows 95 bezel (light top-left, dark bottom-right); overrides the phone defaults */
.button {
	-webkit-appearance: none;
	appearance: none;
	background: #ffffff;
	color: #000000;
	border: none;
	border-radius: 0;
	padding: 4px 12px;
	box-shadow: inset 2px 2px 0 #ffffff, inset -2px -2px 0 #808080, 2px 2px 0 #000000;
	margin: 3px 4px;
}
.button:active {
	box-shadow: inset 2px 2px 0 #808080, inset -2px -2px 0 #ffffff, 1px 1px 0 #000000;
	transform: translate(1px, 1px);
}

/* phones: the status sentence needs three lines */
@media (max-width: 600px) {
	#win-lose { height: 3.9em; font-size: 17px; }
}
#share { text-align: center; margin: 18px 0 0; }
#rules { margin: 14px auto 4px; }

/* phones: the 400px game area was wider than the screen; let it shrink, keep board and keyboard side by side */
@media (max-width: 600px) {
	body { margin: 0; padding: 0 8px; box-sizing: border-box; max-width: 100%; overflow-x: hidden; }
	.game-area { width: auto; max-width: 100%; justify-content: center; gap: 14px; }
	#keyboard td { padding: 3px 2px; }
}

/* guess box under the keyboard, submit under the guess box */
.keyboard-container { display: flex; flex-direction: column; align-items: center; }
#guess-preview { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 12px; }