:root {
	--paper: #f3f0e8;
	--ink: #12151b;
	--blue: #174df5;
	--yellow: #ecff31;
	--coral: #ff715f;
}

html, body {
	background-color: var(--paper);
	background-image: radial-gradient(rgba(18, 21, 27, .1) 1px, transparent 1px);
	background-size: 7px 7px;
	color: var(--ink);
}

body, .tooltip, select.menuBtn {
	font-family: Georgia, "Noto Serif SC", "Songti SC", serif;
	font-size: 15px;
}

div#wrapper {
	padding-top: 24px;
}

div#header {
	padding: 8px 10px 16px;
	height: 28px;
	border-bottom: 2px solid var(--ink);
	font-family: "Arial Narrow", "PingFang SC", "Microsoft YaHei", sans-serif;
	font-weight: 900;
}

div.headerButton {
	border-left: 2px solid var(--ink);
	font-size: 15px;
	letter-spacing: .04em;
}

div.headerButton.selected {
	position: relative;
	text-decoration: none;
}

div.headerButton.selected:after {
	content: "";
	position: absolute;
	left: 8px;
	right: -2px;
	bottom: -5px;
	height: 6px;
	background: var(--yellow);
	z-index: -1;
	transform: rotate(-2deg);
}

div#notifications {
	top: 24px;
	padding: 12px 14px;
	width: 172px;
	height: 650px;
	border: 2px solid var(--ink);
	background: rgba(255, 253, 245, .72);
	font-size: 14px;
	line-height: 1.45;
}

div#notifications:before {
	content: "叙事日志 / LOG";
	display: block;
	margin: -28px -7px 16px;
	width: max-content;
	padding: 5px 8px;
	border: 2px solid var(--ink);
	background: var(--paper);
	font: 900 12px/1 "Arial Narrow", "PingFang SC", sans-serif;
}

div#notifications div.notification {
	margin-bottom: 11px;
}

div#notifications div.notification:last-of-type {
	color: var(--blue);
	font-weight: 700;
}

div#notifyGradient {
	background: linear-gradient(rgba(243, 240, 232, 0), var(--paper));
}

div.button {
	box-sizing: border-box;
	min-height: 34px;
	border: 2px solid var(--ink);
	background: #fffdf5;
	box-shadow: 3px 3px 0 var(--ink);
	font-family: "Arial Narrow", "PingFang SC", "Microsoft YaHei", sans-serif;
	font-weight: 900;
	transition: transform .1s, box-shadow .1s, background-color .1s;
}

div.button:hover {
	background: var(--yellow);
	text-decoration: none;
}

div.button:active {
	transform: translate(3px, 3px);
	box-shadow: none;
}

div.button.disabled, div.button.disabled:hover {
	border-color: #9b9b95;
	background: #dfdcd4;
	box-shadow: 2px 2px 0 #9b9b95;
	color: #8a8882;
}

div.button div.cooldown {
	background-color: #bcd1ff;
}

#lightButton, #stokeButton {
	background: var(--coral);
}

#gatherButton {
	background: var(--blue);
	color: white;
}

div#stores, div#weapons, div#village {
	border: 2px solid var(--ink);
	background: rgba(255, 253, 245, .82);
	box-shadow: 4px 4px 0 var(--ink);
}

div#stores:before, div#weapons:before, div#village:before, div#population {
	background: var(--yellow);
	padding: 2px 5px;
	font-family: "Arial Narrow", "PingFang SC", sans-serif;
	font-weight: 900;
}

div#buildBtns:before, div#craftBtns:before, div#buyBtns:before {
	display: inline-block;
	margin-bottom: 4px;
	padding: 3px 6px;
	border-left: 6px solid var(--blue);
	font-family: "Arial Narrow", "PingFang SC", sans-serif;
	font-weight: 900;
}

.tooltip, #dropMenu {
	border: 2px solid var(--ink);
	background: #fffdf5;
	box-shadow: 4px 4px 0 var(--ink);
}

.eventPanel {
	background: #fffdf5;
	border: 0;
}

.eventPanel:before {
	background: var(--paper);
}

.eventPanel:after {
	border: 3px solid var(--ink);
	box-shadow: 7px 7px 0 var(--ink);
}

.eventTitle {
	font-family: "Arial Narrow", "PingFang SC", sans-serif;
	font-size: 18px;
	font-weight: 1000;
}

.eventTitle:after {
	background: var(--yellow);
}

div#saveNotify {
	top: 8px;
	right: 10px;
	padding: 5px 8px;
	border: 2px solid var(--ink);
	background: var(--yellow);
	font: 800 12px "Arial Narrow", "PingFang SC", sans-serif;
}

.menu {
	right: 14px;
	bottom: 12px;
	font-family: "Arial Narrow", "PingFang SC", sans-serif;
	font-size: 12px;
	font-weight: 800;
}

.logo {
	left: 12px;
	bottom: 8px;
}

.logo-icon {
	height: 28px;
}