body {
	margin: 10px;
	box-sizing: border-box;
	background-color: #F1F1F0;
	user-select: none;
	font-family: 'EB Garamond';
	color: #333;
}

#header {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 30px;
}

#headerButtons {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	gap: 10px;
	align-items: center;
}

#container {
	box-sizing: border-box;
	width: 100%;
	display: flex;
	gap: 10px;
	flex-direction: column;
}

#wrapper {
	box-sizing: border-box;
	display: flex;
	width: 100%;
	gap: 10px;
	position: relative;
}

.box {
	border: 1px solid #333;
	border-radius: 2px;
	margin-top: 10px;
	padding: 15px;
	box-sizing: border-box;
	background-color: #FAFBFA;
	position: relative;
}

#wrapper .box:not(.finalMachine) {
	width: 33.33%;
	overflow-y: scroll;
	height: calc(100vh - 215px - 70px);
	position: relative;
}

.has-final-machines #wrapper .box:not(.finalMachine) {
	height: calc(100vh - 215px - 70px - 440px);
}

#wrapper .column {
	width: 33.33%;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 10px;
	height: calc(100vh - 215px - 70px);
}

#wrapper .column > .box.main {
	width: 100% !important;
	flex: 1;
	min-height: 0;
	height: auto !important;
	margin-top: 0;
}

#wrapper .column > .finalMachine {
	flex: 0 0 420px;
	width: 100%;
	order: 99;
	margin-top: 0;
}

#wrapper .column > .finalMachine.fm-collapsed {
	flex: 0 0 60px;
}


#wrapper .box.log {
	order: 1;
}
#wrapper .box.ideas {
	order: 2;
}
#wrapper .box.things {
	order: 3;
}

.section {
	margin-bottom: 10px;
}

.section:not(:has(.item)) {
	margin-bottom: 0;
}

.section .title {
	color: #ccc;
	font-size: 14px;
	font-variant: small-caps;
	font-weight: 700;
	margin-bottom: 10px;
	border-bottom: 1px solid #ccc;
}

.section .title:only-child {
	display: none;
}

#machines {
	width: 100%;
	margin-left: 0px;
	height: 215px;
	overflow: hidden;
}

#machines .content {
	display: flex;
	height: 100%;
	gap: 10px;
}

.machineUnlock.box {
	width: 33.33%;
	text-align: center;
	cursor: pointer;
	margin-top: 0;
	padding-top: 80px;
}

.machine.box {
	width: 33.33%;
	text-align: center;
	padding: 10px;
	margin-top: 0;
	transition: width 0.5s;
	overflow-y: hidden;
	overflow-x: scroll;
}

.machine.box .container {
	display: flex;
	gap: 10px;
}

.machine.box:hover,
.machine.box.dropdown-open {
	width: 100%;
	transition: width 0.5s;
}


.machineUnlock.box .title,
.machine.box .title  {
	font-weight: 900;
	margin-bottom: 15px;
}

.machine.box .title  {
	color: #FFF;
	text-align: left;
}

.box.machine.mentalize {
	background: linear-gradient(0deg, dodgerblue 0%, navy 100%)
}

.box.machine.reify {
	background: linear-gradient(0deg, limegreen 0%, forestgreen 100%)
}

.box.machine.want {
	background: linear-gradient(0deg, MediumVioletRed 0%, firebrick 100%)
}

.box .header {
	margin-bottom: 10px;
	border-bottom: 1px solid #333;
	padding-bottom: 10px;
	display: flex;
	justify-content: space-between;
}

.box .header strong {
	font-size: 20px;
	font-variant: small-caps;
}

.box .header .right {
	display: flex;
	gap: 10px;
}

.box .header .infoButton {
	width: 24px;
	height: 24px;
	cursor: pointer;
	font-size: 24px;
}

.box .header .infoButton:after {
	font-family: 'Material Symbols Outlined';
	font-variation-settings:
	'FILL' 0,
	'wght' 200,
	'GRAD' 0,
	'opsz' 24
}

.infoButton.info:after {
	content: "\e88e";
}

.infoButton.back:after {
	content: '\e5cd';
}

.infobox {
	background-color: #eee;
}

.infobox .title {
	font-weight: 700;
}

.infobox .infosection {
	margin-bottom: 15px;
}

.infobox .infosection span {
	font-weight: 700;
}

.box .header .buttons {
	display: flex;
	gap: 5px;
}

.button {
	display: inline-block;
	border: 1px solid #333;
	border-radius: 2px;
	padding: 4px 7px;
	cursor: pointer;
	background: #FFF;
	font-size: 13px;
	transition: 0.2s ease-in-out;
}

#btn-tooltip {
	position: absolute;
	background: #FAFBFA;
	border: 1px solid #333;
	border-radius: 2px;
	padding: 5px 9px;
	white-space: nowrap;
	z-index: 1000;
	font-size: 12px;
	line-height: 1.6;
	pointer-events: none;
}

#btn-tooltip::before {
	content: '';
	position: absolute;
	right: 100%;
	top: 50%;
	transform: translateY(-50%);
	border: 5px solid transparent;
	border-right-color: #333;
}

#btn-tooltip::after {
	content: '';
	position: absolute;
	right: calc(100% - 1px);
	top: 50%;
	transform: translateY(-50%);
	border: 5px solid transparent;
	border-right-color: #FAFBFA;
}

.btn-tooltip-spend,
.btn-tooltip-produce {
	color: #333;
}

.btn-tooltip-spend.cant-afford,
.cost-number.cant-afford {
	color: #c33;
}

.tile.cant-afford .cost,
.machineUnlock .cost > span.cant-afford,
.tile.cant-afford .cost-number,
.machineUnlock .cost > span.cant-afford .cost-number {
	text-decoration: dotted underline #c33;
}

#btn-tooltip.cant-afford {
	border-color: #c33;
}

#btn-tooltip.cant-afford::before {
	border-right-color: #c33;
}

.item .button {
	margin-left: 5px;
}



#header .button {
	font-size: 16px;
	color: #333;
}

.button:hover {
	background: #F2F2F2;
}

.button:active {
	background: #E4E4E4;
}

.button .counter {
	font-size: 14px;
}

.stripContainer {
	display: flex;
	gap: 10px;
}

.submachineContainer {
	display: flex;
	gap: 10px;
}

.submachine {
  background-color: transparent;
  width: 180px;
  min-width: 180px;
  height: 145px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

.envelope {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
	background-color: #FFF;
	border-radius: 2px;
	outline: 1px solid;
	outline-offset: -5px;
}

.submachine.flip .envelope {
  transform: rotateY(180deg);
}

.card-front, .card-back {
  position: absolute;
 	padding: 10px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

.card-front {
	text-align: center;
	display: flex;
	flex-direction: column;
}

.card-front .machinery {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.card-front .machinery > .button:last-child {
	margin-top: auto;
}

.card-back {
  transform: rotateY(180deg);
}

.submachine .head {
	display: flex;
  justify-content: space-between;
}

.submachine .name {
	font-weight: 900;
	margin-bottom: 1px;
}

.submachine .collapse {
	display: block;
	width: 20px;
	height: 20px;
	cursor: pointer;
}

.submachine .collapse:after {
	font-family: 'Material Symbols Outlined';
	content: '\f717';

	font-variation-settings:
	'FILL' 0,
	'wght' 200,
	'GRAD' 0,
	'opsz' 24
}

.submachine .settings {
	display: block;
	width: 20px;
	height: 20px;
	cursor: pointer;
}

.submachine .settings:after {
	font-family: 'Material Symbols Outlined';
	content: '\e88e';

	font-variation-settings:
	'FILL' 0,
	'wght' 200,
	'GRAD' 0,
	'opsz' 24
}

.submachine.collapsed .settings {
	display: none;
}

.submachine.collapsed .collapse {
	height: 100px;
	position: absolute;
}

.submachine.collapsed .collapse:after {
	content: '';
}

.submachine .text {
	font-size: 14px;
}

.submachine.separator .text span {
	font-weight: 700;
}

.submachine.collapsed {
	width: 40px !important;
	min-width: 40px !important;
	height: 145px;
	cursor: pointer;
	position: relative;
}

.submachine.collapsed .card-front,
.submachine.collapsed .card-back {
	width: 40px !important;
	min-width: 40px !important;
}

.submachine.collapsed .machinery > * {
	display: none;
}

.submachine.collapsed .name {
	writing-mode: vertical-rl;
}

.submachine.collapsed .gaugeDraw {
	display: block !important;
	transform: rotateZ(-90deg);
	pointer-events: none;
	position: absolute;
  width: 122px;
  height: 32px;
  top: 45px;
  left: -41px;
  border-color: transparent;
}

.submachine.collapsed .fuelDraw {
	opacity: 0.4;
	transition: 1s;
}

.submachine.collapsed .button {
	display: none;
}


.strip {
	display: flex;
	height: 100%;
	gap: 10px;
}

.strip.small {
	flex-direction: column;
	display: flex;
}

.tile {
	width: 100px;
	height: 60px;
	padding: 10px;
	cursor: pointer;
	background-color: #FFF;
	border-radius: 2px;
}

.tile.small {
	width: 72px;
	height: 30px;
	padding: 10px;
	cursor: pointer;
	background-color: #FFF;
	font-size: 14px;
	margin-right: 0px;
}

.tile:hover {
	background: #efefef;
}

.tile span {
	display: inline-block;
}

.tile .cost {
	font-size: 12px;
}

.tile.small .cost {
	font-size: 10px;
	width: 100%;
}

.item {
	margin-bottom: 5px;
	position: relative;
}

.count {
	color: #ccc;
}


.rate {
	color: #ccc;
}


.counter {
	float: right;
}

.item.technology:after,
.item.progress:after {
	content:'*';
}

.item.technology:hover:after,
.item.progress:hover:after {
	content:'non-renewable';
	font-size: 10px;
	position: absolute;
	margin-left: 5px;
}

.gaugeDraw {
	display: inline-block;
	width: 100%;
	height: 10px;
	border: 1px solid #333;
	border-radius: 2px;
	margin: 5px auto;
	box-sizing: border-box;
	background-color: white;
}

.fuelDraw {
	display: inline-block;
	width: 0%;
	height: 100%;
	float: left;
	transition: 1s;
}

.mentalize .fuelDraw {
	background-color: navy;
}

.reify .fuelDraw {
	background-color: forestgreen;
}

.will .fuelDraw {
	background-color: firebrick;
}

.strength .fuelDraw {
	background-color: firebrick;
}

.distillery .fuelDraw {
	background-color: DeepSkyBlue;
}

.clicker.on:after {
	content: ' On';
}

.clicker.off:after {
	content: ' Off';
}

.clicker.mentalize.on {
	background-color: navy;
	color: #FFF;
}

.clicker.reify.on {
	background-color: forestgreen;
	color: #FFF;
}

.clicker.pulverize.on {
	background-color: darkgrey;
	color: #FFF;
}

.clicker.purify.on {
	background-color: khaki;
	color: #FFF;
}

.custom-select {
	position: relative;
	display: inline-block;
	min-width: 70px;
	max-width: 120px;
	font-family: 'EB Garamond';
	cursor: pointer;
	vertical-align: middle;
}

.custom-select.inline {
	display: inline-block;
}

.custom-select .selected {
	padding: 2px 16px 2px 4px;
	border-bottom: 1px solid #999;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	position: relative;
	font-weight: 700;
	font-size: 14px;
}

.custom-select .selected.placeholder {
	color: #aaa;
	font-weight: 400;
}

.custom-select .selected::after {
	content: '\25BE';
	position: absolute;
	right: 3px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 10px;
	color: #999;
}

.selectors {
	display: flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}

.custom-select .options {
	display: none;
}

.options.open {
	display: block;
	position: fixed;
	top: auto;
	min-width: 100px;
	max-height: 150px;
	overflow-y: auto;
	background: white;
	border: 1px solid black;
	z-index: 2147483647;
}

.options .option {
	padding: 3px 6px;
	white-space: nowrap;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}

.options .option:hover {
	background: #eee;
	-webkit-text-fill-color: initial;
	background-clip: initial;
	-webkit-background-clip: initial;
}

#result {
	font-weight: 700;
	font-size: 14px;
	margin: 3px 5px;
}

/* Athenaeum */
.athenaeum .selectors {
	justify-content: center;
}

.athenaeum-result {
	font-weight: 700;
	font-size: 14px;
	margin: 3px 5px;
}

.athenaeum-label {
	font-weight: normal;
	max-height: 120px;
	overflow-y: auto;
}

.athenaeum-gauge {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0px 4px;
	font-size: 10px;
	padding: 0 10px;
	margin-top: 0;
}

.athenaeum-gauge .gaugeDraw {
	flex: 1;
	min-width: 60%;
	height: 6px;
	margin: 0;
	border-width: 1px;
}

.athenaeum-gauge .button.small {
	padding: 0px 6px;
	font-size: 10px;
	margin: 0;
}

.athenaeum .fuelDraw {
	background-color: navy;
}

/* The Oracle */
.oracle-selectors {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 4px 0;
}

.oracle-plus {
	font-size: 12px;
	opacity: 0.6;
}

.oracle-select {
	min-width: 70px;
}

.oracle-gauge {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0px 4px;
	font-size: 10px;
	padding: 0 10px;
	margin-top: 0;
}

.oracle-gauge .gaugeDraw {
	flex: 1 1 calc(100% - 45px);
	height: 6px;
	margin: 0;
	border-width: 1px;
}

.oracle-gauge .button.small {
	flex-shrink: 0;
	padding: 0px 6px;
	font-size: 10px;
	margin: 0;
	white-space: nowrap;
}

.oracle .fuelDraw {
	background: linear-gradient(90deg,
		rgba(173, 216, 255, 0.8),
		rgba(200, 170, 255, 0.7),
		rgba(255, 180, 220, 0.6),
		rgba(180, 255, 230, 0.7),
		rgba(173, 216, 255, 0.8)
	);
	background-size: 300% 100%;
	animation: dream-shift 4s ease-in-out infinite;
}

#settingsButton {
	width: 24px;
	height: 24px;
	cursor: pointer;
	font-family: 'Material Symbols Outlined';
	font-size: 24px;

	font-variation-settings:
	'FILL' 0,
	'wght' 200,
	'GRAD' 0,
	'opsz' 24
}

#settingsButton.settings:after {
	content: '\e8b8';
}

#settingsButton.back:after {
	content: '\e5cd';
}

#treeButton {
	width: 24px;
	height: 24px;
	cursor: pointer;
	font-family: 'Material Symbols Outlined';
	font-size: 24px;

	font-variation-settings:
	'FILL' 0,
	'wght' 200,
	'GRAD' 0,
	'opsz' 24
}

#treeButton.tree:after {
	content: '\e0ad';
}

#treeButton.back:after {
	content: '\e5cd';
}

#treePage {
	position: relative;
	width: 100%;
	height: calc(100vh - 60px);
	max-height: calc(100vh - 60px);
	background: #F1F1F0;
	border: 1px solid #333;
	border-radius: 2px;
	margin-top: 10px;
	overflow: hidden;
	box-sizing: border-box;
}

#treeCanvas {
	width: 100%;
	height: 100%;
	display: block;
}

#treePanel {
	display: none;
	position: absolute;
	bottom: 15px;
	right: 15px;
	width: 260px;
	max-height: calc(100% - 30px);
	overflow-y: auto;
	background: rgba(250,251,250,0.95);
	border: 1px solid #333;
	border-radius: 2px;
	padding: 14px 16px;
	font-family: 'EB Garamond';
	font-size: 13px;
	color: #333;
	z-index: 50;
	line-height: 1.5;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	pointer-events: none;
}

.panelType {
	color: #bbb;
	font-size: 10px;
}

.panelLabel {
	color: #888;
	font-size: 11px;
}

.panelHeader {
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 2px;
}

.panelCat {
	font-size: 10px;
	font-variant: small-caps;
	color: #999;
	margin-bottom: 10px;
}

.panelSection {
	font-size: 10px;
	font-variant: small-caps;
	color: #aaa;
	margin-top: 8px;
	margin-bottom: 4px;
	border-bottom: 1px solid #eee;
}

.panelItem {
	padding: 2px 0;
	font-size: 12px;
}

#treeLegend {
	position: absolute;
	bottom: 15px;
	left: 15px;
	background: rgba(250,251,250,0.92);
	border: 1px solid #ddd;
	border-radius: 3px;
	padding: 10px 14px;
	font-family: 'EB Garamond';
	font-size: 12px;
	color: #555;
}

.legendTitle {
	font-size: 10px;
	font-variant: small-caps;
	color: #aaa;
	margin-bottom: 2px;
}

.legendItem {
	margin: 3px 0;
	display: flex;
	align-items: center;
	gap: 6px;
}

.legendRect {
	width: 16px;
	height: 10px;
	border-radius: 2px;
	border: 1.5px solid;
	display: inline-block;
	flex-shrink: 0;
}

.legendLine {
	width: 20px;
	height: 2px;
	display: inline-block;
	flex-shrink: 0;
}

.legendLine.dashed {
	background: repeating-linear-gradient(
		to right,
		currentColor 0px,
		currentColor 4px,
		transparent 4px,
		transparent 7px
	) !important;
	height: 2px;
}

#settings {
	box-sizing: border-box;
	display: flex;
	width: 100%;
	gap: 10px;
}

#settings .box {
	flex: 1;
	min-width: 0;
	overflow-y: scroll;
	height: calc(100vh - 70px);
	position: relative;
	display: flex;
	flex-direction: column;
}

.abstraction-letter {
	display: inline-block;
	color: magenta;
	animation: abstractionColor 1s infinite;
	font-weight: 700;
}

@keyframes abstractionColor {
	0%, 80% {
		color: magenta;
	}
	85%, 95% {
		color: cyan;
	}
	100% {
		color: magenta;
	}
}


body.no-animations *,
body.no-animations *::before,
body.no-animations *::after {
	animation-duration: 0s !important;
	transition-duration: 0s !important;
}

body.no-animations .fuelDraw {
	transition: none !important;
}

#settingspanel .setting {
	margin-bottom: 8px;
}

#settingspanel select {
	font-family: 'EB Garamond';
	font-size: 13px;
}

#settingspanel label {
	cursor: pointer;
	font-size: 14px;
}

#wipeSave {
	border-color: firebrick;
	color: firebrick;
}

.dialog-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2000;
}

.dialog-box {
	background: #FAFBFA;
	border: 1px solid #333;
	border-radius: 2px;
	padding: 20px 24px;
	max-width: 340px;
	font-family: 'EB Garamond';
	font-size: 15px;
	color: #333;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.dialog-message {
	margin-bottom: 16px;
	line-height: 1.5;
}

.dialog-buttons {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

.dialog-cancel {
	border-color: #ccc;
	color: #888;
}

.dialog-confirm {
	border-color: #333;
}

#importExportArea {
	width: 100%;
	font-family: monospace;
	font-size: 11px;
	resize: vertical;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 2px;
	padding: 5px;
}

#stats .stat {
	margin-bottom: 5px;
}

#stats .stat .counter {
	float: right;
}

#settings #credits .content {
	display: flex;
	align-items:center;
	justify-content:center;
	text-align: center;
	flex-grow: 1;
}

#creditsWant {
	color: #000;
	font-size: 16px;
	margin-bottom: 20px;
}

#settings #credits .content img.high {
	display: inline;
	width: 60px;
	vertical-align: middle;
}

.credits-links {
	display: flex;
	gap: 8px;
	margin-top: 15px;
}

.credits-link {
	color: #000;
	text-decoration: none;
	font-size: 13px;
}


#finalMachines {
	display: flex;
	gap: 10px;
	width: 100%;
	position: relative;
}

#particleCanvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 10;
}

.finalMachine {
	flex: 1;
	display: none;
}

.finalMachine.fm-done {
	pointer-events: none;
}

.finalMachine.fm-done > .header {
	pointer-events: auto;
}

.finalMachine.fm-done .fm-gauge-side,
.finalMachine.fm-done .fm-bottom-gauge,
.finalMachine.fm-done .fm-triangle-content,
.finalMachine.fm-done .fm-triangle-btn {
	display: none;
}

.finalMachine.fm-done .fm-gauge-circle-side .fm-gauge-label,
.finalMachine.fm-done .fm-gauge-circle-side .fm-gauge-name,
.finalMachine.fm-done .fm-gauge-circle-side .button {
	display: none;
}

.finalMachine.fm-done .fm-triangle-shape {
	fill: transparent;
}

.finalMachine.fm-done .fm-circle-gauge {
	background: transparent;
}

.finalMachine .header {
	justify-content: center;
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 5px;
	position: relative;
	z-index: 1;
}

.fm-collapse {
	display: inline-block;
	cursor: pointer;
	font-size: 20px;
	user-select: none;
}

.fm-collapse:after {
	font-family: 'Material Symbols Outlined';
	content: '\e5cf';
	font-variation-settings:
	'FILL' 0,
	'wght' 200,
	'GRAD' 0,
	'opsz' 24;
}

.finalMachine.fm-collapsed .fm-collapse:after {
	content: '\e5ce';
}


.finalMachine.box {
	height: 420px;
	overflow: hidden;
	margin-top: 0;
	position: relative;
}

#enminder.box { background-color: #eef0fa; }
#slab.box, #altar.box { background-color: #eefaef; }
#ensouler.box { background-color: #faeeee; }

.finalMachine.fm-collapsed {
	height: 60px !important;
	min-height: 0 !important;
	overflow: hidden !important;
	align-self: flex-start;
	cursor: pointer;
}

#enminder.fm-collapsed > .content,
#altar.fm-collapsed > .content,
#ensouler.fm-collapsed > .content {
	display: none !important;
}

#enminder.fm-collapsed > .header,
#altar.fm-collapsed > .header,
#ensouler.fm-collapsed > .header {
	margin-bottom: 0;
}

.finalMachine .content {
	height: calc(100% - 35px);
}

.fm-layout {
	display: flex;
	align-items: center;
	height: 100%;
	gap: 10px;
	padding: 0 50px;
	box-sizing: border-box;
}

#enminder .fm-layout,
#ensouler .fm-layout {
	justify-content: center;
	padding: 0;
}

#enminder .fm-layout > *,
#ensouler .fm-layout > * {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fm-action-side {
	display: flex;
	align-items: center;
	justify-content: center;
}

#altar .fm-layout {
	padding-left: 15px;
	padding-right: 15px;
	justify-content: center;
}


.fm-gauge-side {
	position: absolute;
	top: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 30px;
	padding: 10px 0;
	box-sizing: border-box;
}

.fm-gauge-side:first-child,
.fm-gauge-circle-side:first-child {
	left: 15px;
}

.fm-gauge-side:last-child,
.fm-gauge-circle-side:last-child {
	right: 15px;
}

.fm-gauge-circle-side {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.fm-gauge-circle-side::before {
	content: '';
	height: 85px;
}

.fm-circle-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	white-space: nowrap;
}

.fm-circle-gauge {
	width: 90px;
	height: 90px;
	min-width: 90px;
	min-height: 90px;
	border-radius: 50%;
	border: 1.5px solid #333;
	background: white;
	box-sizing: border-box;
	flex-shrink: 0;
	overflow: hidden;
	position: relative;
	clip-path: circle(50%);
}

.fm-circle-fill {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0%;
	transition: height 1s;
	animation: liquid-slosh 2s ease-in-out infinite;
}

@keyframes liquid-slosh {
	0%   { border-radius: 30% 50% 0 0 / 4px 6px 0 0; }
	50%  { border-radius: 50% 30% 0 0 / 6px 4px 0 0; }
	100% { border-radius: 30% 50% 0 0 / 4px 6px 0 0; }
}



.liquor-fill {
	background-color: gold;
}

.mana-fill {
	background-color: #9b59b6;
}

.fm-bottom-gauge {
	position: absolute;
	bottom: 15px;
	left: 15px;
	right: 15px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
}

.fm-bottom-gauge.right {
	flex-direction: row;
}

.fm-bottom-gauge.left {
	flex-direction: row;
}

.fm-bottom-gauge-bar {
	flex: 1;
}

.fm-bottom-gauge-bar .gaugeDraw {
	width: 100%;
	height: 10px;
	margin: 0;
}

.fm-bottom-gauge.right .fuelDraw {
	float: right;
}

.fm-bottom-gauge.left .fuelDraw {
	float: left;
}

.fm-bottom-gauge-info {
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.fm-preserver-tube {
	position: absolute;
	height: 6px;
	background: white;
	border: 1.5px solid black;
	z-index: 0;
	transform-origin: left center;
	overflow: hidden;
}

.fm-tube-flow-fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 0%;
	height: 100%;
	background-color: sienna;
}

.fm-flesh-controls {
	position: absolute;
	bottom: 15px;
	left: 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 13px;
}

.fm-create-controls {
	position: absolute;
	top: 15px;
	right: 15px;
	z-index: 2;
}

.fm-artifact-slot {
	position: absolute;
	top: 75px;
	right: 45px;
	z-index: 2;
}

.altar-artifact-hex {
	width: 96px;
	height: 80px;
	cursor: pointer;
	position: relative;
}

.altar-artifact-hex .hex-svg {
	width: 100%;
	height: 100%;
	overflow: visible;
	position: absolute;
	top: 0;
	left: 0;
}

.altar-artifact-hex .hex-artifact-canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.altar-artifact-hex .hex-border {
	fill: white;
	stroke: #333;
	stroke-width: 1.8;
}

.altar-artifact-hex .hex-circle {
	fill: white;
	stroke: #333;
	stroke-width: 1.8;
}

.altar-artifact-hex.placed .hex-circle {
	display: none;
}


.altar-stickman-canvas {
	display: block;
	width: 100%;
}

.altar-human-info {
	position: absolute;
	right: calc(15% - 30px);
	top: calc(50% + 90px);
	transform: translateY(-50%);
	text-align: center;
	z-index: 20;
}

.altar-human-name {
	font-size: 22px;
	font-weight: bold;
	font-variant: small-caps;
	margin-bottom: 6px;
}

.altar-human-essence {
	font-size: 14px;
	color: #999;
	margin-bottom: 8px;
}

.altar-human-modifiers {
	font-size: 13px;
	color: #bbb;
	font-style: italic;
	margin-bottom: 15px;
	max-width: 220px;
}

.fm-create-progress {
	font-size: 36px;
	font-weight: bold;
	color: #333;
}

.fm-tank-gauge {
	position: absolute;
	top: 15px;
	left: 45px;
	display: flex;
	flex-direction: column;
	z-index: 2;
	align-items: center;
}

.fm-tank {
	width: 90px;
	height: 55px;
	border-radius: 12px;
	border: 1.5px solid #333;
	background: white;
	overflow: hidden;
	position: relative;
}

.fm-tank-fill {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0%;
	background-color: sienna;
	transition: height 1s;
}

.fm-bowl-gauge {
	position: absolute;
	bottom: 15px;
	right: 45px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#dustParticles {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#dustParticles canvas {
	width: 100% !important;
	height: 100% !important;
}


.fm-bowl {
	width: 80px;
	height: 40px;
	border-radius: 0 0 40px 40px;
	border: 1.5px solid #333;
	border-top: none;
	background: white;
	overflow: hidden;
	position: relative;
}


.fm-bowl-gauge .fm-gauge-label,
.fm-bowl-gauge .fm-gauge-name,
.fm-tank-gauge .fm-gauge-label,
.fm-tank-gauge .fm-gauge-name {
	white-space: nowrap;
}

.fm-gauge-bar {
	flex: 1;
	width: 100%;
	min-height: 0;
}

.fm-gauge-bar .gaugeDraw.vertical {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	position: relative;
}

.fm-gauge-bar .gaugeDraw.vertical .fuelDraw {
	display: block;
	width: 100%;
	height: 0%;
	float: none;
	position: absolute;
	bottom: 0;
	left: 0;
	transition: height 1s;
}

.fm-gauge-label {
	font-size: 12px;
	margin-top: 6px;
	white-space: nowrap;
}

.fm-gauge-name {
	font-size: 14px;
	font-weight: bold;
	margin-top: 1px;
}

.fm-gauge-side .button,
.fm-circle-info .button,
.fm-flesh-controls .button,
.fm-tank-gauge .button,
.fm-bowl-gauge .button {
	margin-top: 8px;
}

.fm-triangle-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
	white-space: nowrap;
}

.fm-center {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
}

.fm-center > .button {
	margin-top: 10px;
}

.fm-slot-side {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 60px;
	min-width: 60px;
	font-size: 12px;
}

.fm-connector {
	position: absolute;
	height: 12px;
	background-color: white;
	border: 1.5px solid black;
	z-index: 0;
	overflow: hidden;
	transform-origin: left center;
}

.fm-connector-flow {
	position: absolute;
	top: 0;
	width: 0%;
	height: 100%;
	transition: width 1s;
}

.mind-flow {
	left: 0;
}

.soul-flow {
	right: 0;
}

.fm-slot {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 1.5px solid #333;
	background-color: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 11px;
	line-height: 1.2;
	position: relative;
	z-index: 1;
}

.fm-slot-label {
	font-weight: bold;
	font-size: 10px;
}

.fm-flesh-gauge {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 0;
	position: relative;
	z-index: 1;
	transform: translateY(20px) scale(1.2);
}

.fm-flesh-silhouette {
	flex: 1;
	width: 110px;
	min-height: 0;
}

.fm-flesh-pedestal {
	fill: #e8e8e8;
	stroke: black;
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
}

.fm-flesh-bg {
	fill: white;
}

.fm-flesh-fill {
	fill: #c4756b;
}

.fm-flesh-clip {
	transition: y 1s, height 1s;
}

.fm-flesh-decay {
	fill: #5a7a3a;
}

.fm-flesh-outline {
	fill: none;
	stroke: black;
	vector-effect: non-scaling-stroke;
	stroke-width: 1;
}


.fm-triangle-wrap {
	position: relative;
	height: 220px;
	aspect-ratio: 87 / 104;
}

.fm-triangle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 100%;
	overflow: visible;
}

.fm-triangle-fill {
	fill: #b8c4e0;
}

#ensouler .fm-triangle-fill {
	fill: #e0b8b8;
}

.fm-triangle-shape {
	fill: #e8e0d8;
	stroke: #333;
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
}

.fm-triangle-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
}

.fm-triangle.right ~ .fm-triangle-content {
	left: 38%;
}

.fm-triangle.left ~ .fm-triangle-content {
	left: 62%;
}

.fm-section {
	margin-bottom: 8px;
	width: 100%;
	text-align: center;
}

.fm-label {
	font-size: 13px;
	margin-bottom: 4px;
}

.enminder-fuel {
	background-color: purple;
}

.enminder-lightning {
	background-color: #e8a317;
	position: relative;
	overflow: visible;
}

.enminder-lightning canvas {
	position: absolute;
	top: -10px;
	left: -4px;
	pointer-events: none;
}

#enminder .fm-bottom-gauge-bar,
#enminder .fm-bottom-gauge-bar .gaugeDraw,
#enminder .fm-bottom-gauge,
#finalMachines #enminder.box,
#finalMachines .box {
	overflow: visible;
}

.ensouler-fuel {
	background-color: gold;
}

.ensouler-life {
	background-color: limegreen;
}

.altar-fuel {
	background-color: sienna;
}

.altar-dust {
	background-color: tan;
}

.oracle-gauge.water .fuelDraw { background-color: DeepSkyBlue; }
.oracle-gauge.mentalize .fuelDraw { background-color: navy; }
.oracle-gauge.pulverize .fuelDraw { background-color: DimGray; }
.oracle-gauge.purify .fuelDraw { background-color: Goldenrod; }
.oracle-gauge.alchemize .fuelDraw { background-color: rgb(2, 35, 14); }
.oracle-gauge.imagination .fuelDraw { background-color: #DA70D6; }
.oracle-gauge.blessedOil .fuelDraw { background-color: #17A589; }
.oracle-gauge.evil .fuelDraw { background-color: rgb(226, 14, 84); }
.oracle-gauge.separate .fuelDraw { background-color: OliveDrab; }
.oracle-gauge.ink .fuelDraw { background-color: #1a1a2e; }

.submachine.forge {
	width: 360px;
	min-width: 360px;
}

.submachine.forge .card-front,
.submachine.forge .card-back {
	width: 100%;
}

.submachine.forge .custom-select {
	flex: 1;
	min-width: 0;
	max-width: none;
}

.submachine.articrafter {
	width: 460px;
	min-width: 460px;
}

.submachine.articrafter .card-front,
.submachine.articrafter .card-back {
	width: 100%;
}

.submachine.articrafter .custom-select {
	flex: 1;
	min-width: 0;
	max-width: none;
}

.submachine.market {
	width: 240px;
	min-width: 240px;
}

.submachine.market .card-front,
.submachine.market .card-back {
	width: 220px;
}

.distill-pct {
	font-size: 11px;
	color: #999;
}

.selector.disabled,
.button.disabled {
	opacity: 0.4;
	pointer-events: none;
}

#humansButton {
	width: 24px;
	height: 24px;
	cursor: pointer;
	font-family: 'Material Symbols Outlined';
	font-size: 24px;

	font-variation-settings:
	'FILL' 0,
	'wght' 200,
	'GRAD' 0,
	'opsz' 24
}

#humansButton.humansIcon:after {
	content: '\e84e';
}

#humansButton.back:after {
	content: '\e5cd';
}

#libraryButton {
	width: 24px;
	height: 24px;
	cursor: pointer;
	font-family: 'Material Symbols Outlined';
	font-size: 24px;
	font-variation-settings:
	'FILL' 0,
	'wght' 200,
	'GRAD' 0,
	'opsz' 24
}

#libraryButton.libraryIcon:after {
	content: '\e865';
}

#libraryButton.back:after {
	content: '\e5cd';
}

/* Book Page Modal (study reveal) */
/* Book Page Modal (parchment style) */
#bookPageModal {
	display: none;
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0, 0, 0, 0.85);
	z-index: 10000;
	justify-content: center;
	align-items: center;
}
#bookPageModal .book-page-content {
	background: #f4e8c1;
	border: none;
	border-radius: 2px;
	padding: 48px 40px 36px;
	text-align: left;
	width: 300px;
	min-height: 420px;
	max-height: 80vh;
	color: #2a1f0e;
	font-family: 'EB Garamond', serif;
	box-shadow:
		0 0 0 1px #c8b484,
		4px 4px 20px rgba(0, 0, 0, 0.6),
		inset 0 0 40px rgba(139, 109, 56, 0.15);
	display: flex;
	flex-direction: column;
	position: relative;
	overflow-y: auto;
}
#bookPageModal .book-page-content::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background:
		linear-gradient(to right, rgba(0,0,0,0.06) 0%, transparent 3%, transparent 97%, rgba(0,0,0,0.06) 100%),
		linear-gradient(to bottom, rgba(139,109,56,0.08) 0%, transparent 5%, transparent 95%, rgba(139,109,56,0.08) 100%);
	pointer-events: none;
}
#bookPageModal .book-page-topic {
	font-size: 0.85em;
	color: #8b6d38;
	margin-bottom: 12px;
	text-transform: uppercase;
	letter-spacing: 3px;
	text-align: center;
	border-bottom: 1px solid #c8b484;
	padding-bottom: 10px;
}
#bookPageModal .book-page-title {
	font-size: 1.6em;
	margin-bottom: 20px;
	text-align: center;
	color: #2a1f0e;
}
#bookPageModal .book-page-desc {
	font-size: 1.15em;
	line-height: 1.8;
	color: #3d2e14;
	margin: 0 0 24px;
	flex: 1;
	text-indent: 1.5em;
}
#bookPageModal .book-page-number {
	font-size: 0.85em;
	color: #8b6d38;
	text-align: center;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid #c8b484;
}
#bookPageModal .book-page-buttons {
	margin-top: 16px;
	text-align: center;
}
#bookPageClose {
	padding: 6px 16px;
	cursor: pointer;
	border: 1px solid #c8b484;
	border-radius: 2px;
	background: #e8dbb8;
	color: #5a4520;
	font-family: 'EB Garamond', serif;
	font-size: 0.9em;
}

/* Library Page */
#libraryPage {
	display: none;
	position: relative;
	width: 100%;
	height: calc(100vh - 60px);
	max-height: calc(100vh - 60px);
	background: #FAFBFA;
	border: 1px solid #333;
	border-radius: 2px;
	margin-top: 10px;
	overflow: hidden;
	box-sizing: border-box;
}

/* Bookcase */
.bookcase {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 24px;
	height: 100%;
	padding: 0 40px 80px;
}
.bookcase-book {
	width: 70px;
	height: 220px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	position: relative;
	transition: transform 0.2s;
}
.bookcase-book:hover {
	transform: translateY(-8px);
}
.bookcase-spine {
	width: 50px;
	height: 200px;
	border-radius: 3px 6px 6px 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 2px 2px 8px rgba(0,0,0,0.5), inset -2px 0 4px rgba(0,0,0,0.2);
	position: relative;
}
.bookcase-spine-title {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	font-family: 'EB Garamond', serif;
	font-size: 0.85em;
	color: rgba(255,255,255,0.85);
	letter-spacing: 1px;
	text-transform: uppercase;
	white-space: nowrap;
}
.bookcase-label {
	font-family: 'EB Garamond', serif;
	font-size: 0.75em;
	color: #333;
	margin-top: 8px;
	text-align: center;
}
.bookcase-progress {
	font-family: 'EB Garamond', serif;
	font-size: 0.65em;
	color: #666;
	margin-top: 2px;
	text-align: center;
}
.bookcase-shelf {
	position: absolute;
	bottom: 60px;
	left: 20px;
	right: 20px;
	height: 8px;
	background: linear-gradient(to bottom, #5a3e1b, #3d2a10);
	border-radius: 2px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}

/* Open book view */
.library-book-view {
	display: none;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.5);
	justify-content: center;
	align-items: center;
	z-index: 100;
}
.library-book-view.open {
	display: flex;
}
.library-book-page {
	background: #f4e8c1;
	width: 300px;
	min-height: 420px;
	max-height: 80vh;
	padding: 20px 40px 36px;
	border-radius: 2px;
	font-family: 'EB Garamond', serif;
	color: #2a1f0e;
	display: flex;
	flex-direction: column;
	position: relative;
	box-shadow:
		0 0 0 1px #c8b484,
		4px 4px 20px rgba(0,0,0,0.6),
		inset 0 0 40px rgba(139,109,56,0.15);
	overflow-y: auto;
}
.library-book-page::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background:
		linear-gradient(to right, rgba(0,0,0,0.06) 0%, transparent 3%, transparent 97%, rgba(0,0,0,0.06) 100%),
		linear-gradient(to bottom, rgba(139,109,56,0.08) 0%, transparent 5%, transparent 95%, rgba(139,109,56,0.08) 100%);
	pointer-events: none;
}
.library-book-topic {
	font-size: 0.85em;
	color: #8b6d38;
	margin-bottom: 12px;
	text-transform: uppercase;
	letter-spacing: 3px;
	text-align: center;
	border-bottom: 1px solid #c8b484;
	padding-bottom: 10px;
}
.library-book-title {
	font-size: 1.6em;
	margin-bottom: 20px;
	text-align: center;
	color: #2a1f0e;
}
.library-book-desc {
	font-size: 1.15em;
	line-height: 1.8;
	color: #3d2e14;
	margin: 0;
	flex: 1;
	text-indent: 1.5em;
}
.library-book-empty {
	font-size: 1.1em;
	color: #8b6d38;
	text-align: center;
	font-style: italic;
	margin: auto 0;
}
.library-book-footer {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid #c8b484;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.library-book-pagenum {
	font-size: 0.85em;
	color: #8b6d38;
}
.library-book-nav {
	display: flex;
	gap: 12px;
}
.library-book-nav .btn {
	padding: 4px 12px;
	cursor: pointer;
	border: 1px solid #c8b484;
	border-radius: 2px;
	background: #e8dbb8;
	color: #5a4520;
	font-family: 'EB Garamond', serif;
	font-size: 0.85em;
}
.library-book-nav .btn.disabled {
	opacity: 0.3;
	cursor: default;
}
.library-book-close {
	padding: 4px 10px;
	cursor: pointer;
	border: 1px solid #c8b484;
	border-radius: 2px;
	background: #e8dbb8;
	color: #5a4520;
	font-family: 'EB Garamond', serif;
	font-size: 0.9em;
	align-self: flex-end;
	flex-shrink: 0;
	z-index: 3;
	line-height: 1;
	margin-bottom: 8px;
}

#humansPage {
	position: relative;
	width: 100%;
	height: calc(100vh - 60px);
	max-height: calc(100vh - 60px);
	background: #FAFBFA;
	border: 1px solid #333;
	border-radius: 2px;
	margin-top: 10px;
	overflow: hidden;
	box-sizing: border-box;
}

#humansCanvas {
	width: 100%;
	height: 100%;
	display: block;
}

#artifactsButton {
	width: 24px;
	height: 24px;
	cursor: pointer;
	font-family: 'Material Symbols Outlined';
	font-size: 24px;
	font-variation-settings:
	'FILL' 0,
	'wght' 200,
	'GRAD' 0,
	'opsz' 24
}

#artifactsButton.artifactsIcon:after {
	content: '\eb39';
}

#artifactsButton.back:after {
	content: '\e5cd';
}

#artifactsPage {
	position: relative;
	width: 100%;
	height: calc(100vh - 60px);
	max-height: calc(100vh - 60px);
	background: #FAFBFA;
	border: 1px solid #333;
	border-radius: 2px;
	margin-top: 10px;
	overflow: hidden;
	box-sizing: border-box;
}

#artifactsCanvas {
	width: 100%;
	height: 100%;
	display: block;
}