html, input, textarea {
	font-family: "Source Serif", "Georgia", "Noto Emoji", "Dingbats", serif;
	font-size: 16px;
}
button, select, option {
	font-family: "Source Sans", "Verdana", "Noto Emoji", "Dingbats", sans-serif;
	font-size: 16px;
}

html, body { margin: 0 }
h1 { margin: 16px 0 16px -1px; font-size: 24px; }
h2 { margin: 16px 0 16px -1px; font-size: 20px; }
a { color: blue; }
.w { white-space: nowrap; }
.r { text-align: right; }

header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 2px solid brown;
	padding-right: 1em;
}
header img {
	display: block;
	margin: 4px 0 -2px 2px;
}
header nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: end;
}
header nav a { display: block; margin: 0 16px; color: black; }
header nav a:hover { color: blue; }
article { margin: 2em; }
article p, article dl, article ul { max-width: 50rem; }

div.logo {
	float: left;
	margin: 0 20px 5px 0;
	min-width: 150px;
}
div.logo img {
	box-shadow: 1px 2px 4px 0px #0004;
}

input[type="checkbox"], input[type="radio"] {
	margin-right: 7px;
}
input[type="text"], input[type="password"], input[type="email"], textarea {
	padding: 5px;
	margin: 5px 0;
	border: 1px solid black;
	vertical-align: middle;
}
input:focus, textarea:focus {
	outline: 2px solid lightsteelblue;
}
button, select {
	margin: 5px 10px 5px 0;
	padding: 1px 10px;
	background-color: gainsboro;
	vertical-align: middle;
	border: 2px solid;
	border-color: white darkgray darkgray white;
	outline: 1px solid black;
}
button:enabled:active:hover, select:active {
	border-color: darkgray white white darkgray;
	padding: 2px 9px 0px 11px;
}
option {
	background-color: white;
	color: black;
}
button:disabled {
	color: gray;
	border-color: gainsboro;
	outline-color: gray;
}

.error { color: brown; font-style: italic; white-space: pre-wrap; }
.warning { color: brown; }
p.warning::before { content: "\26a0"; }

/* TABLES */

table {
	background-color: white;
	min-width: min(50rem,100%);
	border-collapse: collapse;
	border: 1px solid black;
	box-shadow: 1px 2px 4px #0004;
}
thead, tfoot {
	background-color: gainsboro;
	border: 1px solid black;
}
th, td {
	vertical-align: top;
	text-align: left;
	padding: 5px 10px;
}
tbody tr:nth-child(2n) {
	background-color: whitesmoke;
}
table a:not(:hover) { text-decoration: none; color: black; }
td.command a { text-decoration: underline; color: blue; }
td.is_active { background-color: lemonchiffon; }

/* FORUM AND MESSAGE POSTS */

div.post {
	background-color: white;
	max-width: 50em;
	margin-top: 24px;
	border: 1px solid black;
	box-shadow: 1px 2px 4px #0004;
}
div.post > div.head {
	display: flex;
	justify-content: space-between;
	padding: 5px 10px;
	background-color: gainsboro;
	border-bottom: 1px solid black;
}
div.post > div.head a { font-weight: bold; }
div.post > div.head a:not(:hover) { color: black; text-decoration: none; }
div.post > div.body { padding: 15px; white-space: pre-wrap; }
div.post + div.edit { max-width: 50em; margin-top: 5px; text-align:right; }

article hr { max-width: 50rem; margin-right: auto; margin-left: 0; }
article hr { border: none; border-top: 2px dotted brown; }
article hr + p { font-style: italic; }

/* GAME BOXES */

.game_list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 400px));
	gap: 24px;
	margin: 16px 0;
}
.game_item {
	border: 1px solid black;
	box-shadow: 1px 2px 4px #0004;
}
.game_head, .game_main {
	display: flex;
	justify-content: space-between;
	padding: 4px 8px;
}
.game_head {
	border-bottom: 1px solid black;
}
.game_info {
	font-family: "Source Serif SmText", "Georgia", "Noto Emoji", "Dingbats", serif;
	font-size: 14px;
	line-height: 20px;
}
.game_item a:not(:hover) { text-decoration: none; color: black; }
.game_item a.command { text-decoration: underline; font-weight: bold }
.game_info .is_active { text-decoration: underline }
.game_info .is_invite { opacity: 0.5 }
.game_info div {
	text-indent: -20px;
	padding-left: 20px;
}
.game_main img {
	display: block;
	height: 72px;
	margin: 4px 0 4px 4px;
	border: 1px solid black;
}

.game_head { background-color: gainsboro }
.game_main { background-color: whitesmoke }
.game_main a:hover { color: mediumblue }

.game_item.open .game_head { background-color: lightskyblue }
.game_item.open .game_main { background-color: aliceblue }
.game_item.open a:hover { color: royalblue }

.game_item.ready .game_head { background-color: darkseagreen }
.game_item.ready .game_main { background-color: mintcream }
.game_item.ready a:hover { color: seagreen }

.game_item.replacement .game_head { background-color: thistle }
.game_item.replacement .game_main { background-color: lavenderblush }
.game_item.replacement a:hover { color: purple }

.game_item.active .game_head { background-color: gainsboro }
.game_item.active .game_main { background-color: whitesmoke }
.game_item.active a:hover { color: mediumblue }

.game_item.finished .game_head { background-color: silver }
.game_item.finished .game_main { background-color: gainsboro }
.game_item.finished a:hover { color: mediumblue }

.game_item.archived .game_head { background-color: silver }
.game_item.archived .game_main { background-color: gainsboro }
.game_item.archived a:hover { color: mediumblue }

.game_item.your_turn .game_head { background-color: gold }
.game_item.your_turn .game_main { background-color: lightyellow }
.game_item.your_turn a:hover { color: #860 }

.game_item.unread .game_head div::after { content: " \1f4dd  "; }

/* DARK MODE */
@media (prefers-color-scheme: dark) {
	body { background-color: silver }
	header { background-color: darkgray }
	table, div.post { background-color: gainsboro }
	thead, tfoot, div.post > div.head { background-color: darkgray }
	input, textarea { background-color: gainsboro }
	input:focus, textarea:focus { outline-color: cornflowerblue }
}