/* Global things */
body {
	color: var(--color);
	overflow: hidden;
	--background: #0f0f0f;
	--color: #dfdfdf;
	--points: #ffffff;
	background: var(--background)
}

/* General text */
h1, h2, h3, b, input {
	display: inline;
	font-family: "Lucida Console", "Courier New", monospace
}

/* These are styles for different states of components. You can make layer-specific versions with .c.locked, for example */
.locked {
	background-color: #bf8f8f;
	cursor: not-allowed;
}

/* Can meens can be clicked/bought/etc */
.can {
	cursor: pointer;
}

.can:hover {
	transform: scale(1.15, 1.15);
	box-shadow: 0 0 20px var(--points)
}

.bought {
	background-color: #77bf5f;
	cursor: default;
}

#points {
	color: var(--points);
	text-shadow: 0 0 10px var(--points);
}
.custom-achievement {
	background-color: #bc8a88 !important;
    border-radius: 25px !important;
    height: 120px !important;
    width: 120px !important;
    color: #ffffff !important;
    font-weight: bold !important;
    border: 2px solid #5a3c3b !important;
}
.custom-achievement-highlight {
    border: 3px solid #ff0000 !important;
    box-shadow: 0 0 8px #ff0000;
}

@keyframes SmoothGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.common-node-gradient {
    background: linear-gradient(270deg, #ffffff, #e0e0e0, #a0a0a0, #606060, #a0a0a0, #e0e0e0, #ffffff) !important;
    background-size: 400% 400% !important;
    animation: SmoothGradient 6s ease infinite !important;
    color: #111111 !important; /* Testo scuro per leggibilità sul chiaro */
    border-color: #ffffff !important;
}