/* Tree nodes — printed circuit marks: ink circles, red for actionable, dead ink for locked */
.treeNode, .treeButton {
	height: 96px;
	width: 96px;
	border: 2px solid var(--ink);
	border-radius: 50%;
	background: var(--paper);
	box-shadow: none;
	font-size: 26px;
	font-weight: 600;
	font-family: "IBM Plex Mono", Consolas, monospace;
	color: var(--ink);
	text-shadow: none;
	padding: 0;
	margin: 0 10px 0 10px;
	transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}

.treeButton {
	border-radius: 12px;
}

.nodeLabel {
	font: inherit;
	font-family: inherit;
}

/* actionable node — press red */
.treeNode.can, .treeButton.can {
	background: var(--red);
	border-color: var(--ink);
	color: var(--paper);
}

.treeNode.can:hover, .treeButton.can:hover {
	transform: none;
	background: var(--ink);
	border-color: var(--red);
}

/* locked — dead ink outline */
.treeNode.locked, .treeButton.locked {
	background: transparent;
	border: 1.5px dashed #a89f88;
	color: #6d675a;
}

.smallNode {
	height: 60px;
	width: 60px;
	font-size: 18px;
}

/* something to collect — solid red ring */
.resetNotify {
	box-shadow: 0 0 0 3px var(--red) !important;
	border-color: var(--red);
}

.notify {
	transform: none;
	border: 2px solid var(--red);
	color: var(--red);
	background: var(--paper);
	box-shadow: none;
}

.mark, .star {
	display: none;
}