style.css

body {
	background: #5d7275;
	margin: 0;
	padding: 0;
	font-size: calc(9px + 2vmin);
	font-family: 'Trebuchet MS', 'Lucida Sans', Arial, sans-serif;
}
main {
	position: fixed;
	width: 100vw;
	height: 100vh;
}

ul {
	padding: 0;
	margin: 0;
}
li {
	display: block;
	padding: calc(0.5em + 1vh) 0;
}
i {
	font-style: normal;
}


#w {
	/* dimensions set in js */
	position: absolute;
	background: #f1e7d9;
	box-shadow: 0 0 5vmin rgba(0, 0, 0, 0.8);
	cursor: grab;
}
.moving #w {
	cursor: grabbing;
}
.creating #w {
	cursor: crosshair;
}
#ws, #wc {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* background: rgba(255, 0, 0, 0.2); */
}
#ws {
	/* background: rgba(0, 0, 255, 0.2); */
}

.ui {
	position: fixed;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	width: 100vw;
	display: flex;
	flex-direction: column;
	/* justify-content: space-around; */
	/* padding: 2vmin; */
	box-sizing: border-box;
}
.uirow {
	display: flex;
	justify-content: space-around;
	padding: 2vmin;
}
#tui {
	top: 0;
}
#bui {
	bottom: 0;
}
.intro .ui {
	display: none;
}

button {
	position: relative;
	border-radius: 1.8em;
	border: solid 2px transparent;
	min-width: 1em;
	background: #e3cfb4;
	color: #2b2821;
	padding: 1.5vmin 3vmin;
	font-size: 120%;
	cursor: pointer;
	box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.25);
}
button:active {
	box-shadow: none;
	border-color: #000;
}
button:hover {
	background: #ffd;
}
button > i {
	font-style: normal;
	text-shadow:
		0 1px 0 #fff,
		1px 0 0 #fff,
		-1px 0 0 #fff,
		0 -1px 0 #fff,
		1px 1px 0 #fff,
		-1px 1px 0 #fff,
		1px -1px 0 #fff,
		-1px -1px 0 #fff,
		0 0 0.3em #624c3c;
}
button > b {
	display: block;
	margin-top: 0.25em;
	width: 100%;
	font-size: 50%;
}
button[disabled] {
	border-color: transparent;
	background: transparent;
	cursor: unset;
	box-shadow: none;
}
button, #blist {
	transition: all ease-in-out 0.15s;
}
#binfo {
	display: flex;
	justify-content: space-between;
	text-shadow: 0 0 0.3em #624c3c;
}
#blist {
	display: block;
	transform: scale(0);
	max-width: 34em;
	min-width: 20em;
	background: rgba(255, 255, 255, 0.9);
	color: #111;
	overflow: hidden;
}
.b-info {
	flex-grow: 1;
}
.b-name {
	font-size: 2em;
}
.bselected #binfo {
	padding: 1vmin;
	border-top: rgba(255,255,255,0.5) solid 1px;
}
.bselected #blist {
	transform: scale(1);
	padding: 0 1vmin;
	margin: 1vmin auto;
}

#createhelp {
	text-align: center;
}

.bselected #build,
.bselected #upgra,
.looping #pause,
.creating #cancel,
.bselected #blist,
.pop #jobs,
.assigning #jass,
.creating #createhelp,
.bselected #binfo {
	transition: all ease-in-out 0.2s;
	transform: scale(1);
	max-height: 100vh;
	max-width: 100vw;
	opacity: 1;
}
#binfo,
#pause, #build, #cancel, #blist, #jobs, #jass, #createhelp, #upgra,
.looping #play,
.creating #build,
.creating #blist,
.creating #upgra,
.pop #restart {
	transition: all ease-in-out 0.2s;
	transform: scale(0.5);
	max-height: 0;
	max-width: 0;
	opacity: 0;
	overflow: hidden;
}

.switch {
	border-radius: 2em;
	/* border: solid 1px rgba(0, 0, 0, 0.2); */
	background: rgba(36, 61, 92, 0.25);
	box-shadow: inset 0 0 1em rgba(0, 0, 0, 0.4);
	font-size: 80%;
	display: flex;
}
.switch button {
	border-radius: 1.9em;
	border-color: transparent;
	background: transparent;
	box-shadow: none;
	color: white;
}
.switch button[disabled],
.switch button.active {
	background: #e3cfb4;
	color: #624c3c;
}
.switch button > i {
	text-shadow: 0 0 0.3em #624c3c;
}

#cd {
	display: block;
	padding: 0.1em 0.5em;
	user-select: none;
}
#cd:hover {
	cursor: pointer;
	background: rgba(0, 0, 0, 0.25);
}
#cd:active {
	color: #b03a48;
}

/* Jobs assignment */
#jass {
	text-align: right;
	padding: 0;
	background: #fff;
	color: #000;
	max-width: 36em;
	margin: 1vmin 1vmin 0 auto;
}
.assigning #jass {
	padding: 3vmin;
}
#jass ul {
	padding: 0;
	margin: 0;
}
#jass li {
	padding: 0.75em 0;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
#jass b {
	display: inline-block;
	width: 3em;
	text-align: center;
}
#jass label {
	display: inline-block;
	min-width: 8em;
	text-align: right;
}
#jass input[type="range"] {
	width: 30vw;
}
.altname {
	opacity: 0.5;
	font-size: 65%;
}
#jass button {
	font-size: 100%;
	padding: 0.2em 0.8em;
	box-shadow: none; 
    border: solid 1px #b1a58d;
}
#jass button:active {
	background: #b1a58d;
	color: white;
}
.jass-ui {
	display: flex;
	align-items: center;
}

.up-action {
	cursor: pointer;
	border-bottom: solid 1px #666;
	padding: 0.5em 1em;
	display: flex;
	justify-content: space-between;
}
.up-action:hover {
	background: #e3cfb4;
}
.up-cost {
	font-size: 85%;
}
.unaffordable,
.unaffordable.up-action:hover {
	cursor: not-allowed;
	opacity: 0.5;
	background: rgba(0,0,0,0.2);
}
.unaffordable .up-cost,
.missing {
	color: #b03a48;
}

#b-up-toggle {
	padding: 1em 2em;
}


/* --- SVG --- */
.meeple-g {
	/* game tick is ~100ms, but a slightly slower animation looks interesting */
	transition: all linear 0.3s;
	pointer-events: none;
}
.meeple {
	stroke: #76969b; /* #5d7275; */
	stroke-width: 3px;
}
.mj-idle {
	fill: #999;
}
.mj-prod {
	fill: #3e6958;
}
.mj-carr {
	fill: #e0c872;
}
.mj-defe {
	fill: #243d5c;
}
.mj-spir {
	fill: #d4804d;
}
.mj-kill {
	fill: #b03a48;
}
.hurt .meeple {
	stroke: #4b3d44;
}

.building, .building-connector {
	fill: #fff;
	stroke: rgba(0, 0, 0, 0.4);
	stroke-width: 3px;
	cursor: pointer;
}
.building:hover {
	stroke: #000;
}

.selectedb > * {
	stroke: #0ff;
	stroke-width: 4px;
}

.road {
	stroke: #b99;
	stroke-width: 4px;
}

.b-emblem {
	stroke: #624c3c;
	stroke-width: 0;
	opacity: 0.2;
	pointer-events: none;
}
.b-prod-circle {
	fill: none;
	stroke: rgba(0, 0, 0, 0.18);
	transition: all linear 0.13s;
}

.b-outpost {
	fill: #e3cfb4;
}
.b-connector {
	fill: #b99; /* #e3cfb4; */
	stroke: #b99;
}
.b-stockpile,
.b-warehouse {
	fill: #e3cfb4;
}
.b-woodCutter,
.b-lumberYard {
	fill: #5b7d73;
}
.b-stoneMine,
.b-stoneMine2 {
	fill: #7b685a; /* #624c3c; */
}
.b-oreMine,
.b-oreMine2,
.b-oreMine3 {
	fill: #8c7c79;
}
.b-tower {
	fill: #5d7275;
}
.b-fortress {
	fill: #5d7275;
}
.b-grainFarm,
.b-grainFarm2 {
	fill: #8e9f7d;
}
.b-riceFarm,
.b-riceFarm2 {
	fill: #aaa25d;
}
.b-shrine {
	fill: #d9ac8b;
}
.b-temple,
.b-temple2,
.b-grandTemple {
	fill: #d9ac8b;
}
.b-farmHouse,
.b-farmHouse2,
.b-farmHouse3 {
	fill: #b1a58d;
}
.b-urbanHouse {
	fill: #ddcf99;
}
.res {
	stroke: #000;
	stroke-width: 1px;
	fill: #5cc;
	pointer-events: none;
}
/* https://lospec.com/palette-list/japanese-woodblock 
https://lospec.com/palette-list/fading-16
*/
.res-grain { fill: #cca87b; stroke: #fff;  }
.res-rice { fill: #ddcf99; stroke: #fff; }
.res-stone { fill: #8c7c79; stroke: #a99c8d; }
.res-wood { fill: #846d59; stroke: #a88a5e; }
.res-ore { fill: #645355; stroke: #a99c8d; }

.selectedb .building,
.selectedb .building:hover {
	stroke: #0ff;
	stroke-width: 6px;
}
.closed .building {
	stroke-dasharray: 2;
}

/* intro */

#intro {
	box-sizing: border-box;
	padding: 10vmin;
	width: 50%;
	height: 100%;
	float: right;
	background: rgba(0, 0, 0, 0.2);
	color: #2b2821;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	opacity: 0;
	transition: all ease-in-out 2s;
	position: relative;
}
.intro #intro {
	opacity: 1;
}
.game #intro {
	transition: all ease-in-out 10s;
	background: rgba(0, 0, 0, 0.1);
	opacity: 0.5;
}
#intro h1 {
	font-size: 2em;
}
#intro svg {
	width: 50vmin;
}
#intro polygon {
	fill: #2b2821;
}
#hist,
#intro b {
	font-size: 80%;
}
#hist {
	color: #624c3c;
	max-width: 40em;
	opacity: 0;
	transition: all ease-in-out 3s;
}
.intro #hist,
.game #hist {
	opacity: 1;
}
.quote {
	/* font-family: Georgia, 'Times New Roman', Times, serif; */
	font-style: italic;
}


#inst {
	transition: all ease-in-out 5s;
	color: #243d5c;
	opacity: 0;
}
.intro #inst {
	opacity: 1;
}
.game #inst {
	transform: scale(0);
}

#ver {
	position: absolute;
	bottom: 1em;
	right: 1em;
	font-size: 50%;
	opacity: 0.5;
}

#flash {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.75);
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	transform: scale(0);
	transition: all 1s;
}
.flash #flash {
	transform: scale(1);
}
#flash > i {
	font-size: 600%;
}
.flash .ui,
.flash #w {
	filter: blur(2px);
}