/* COLORS */

.want {
	color: firebrick;
}

.reify {
	color: forestgreen;
}

.mentalize {
	color: navy;
}

.pulverize {
	color: DimGray;
}

.recursion {
	color: magenta;
}

.machineU, .technology {
	color: Brown;
}

.unlock, .progress {
	color: MediumSeaGreen;
}

.mind {
	color: DodgerBlue;
}

.matter {
	color: LimeGreen;
}

.strength {
	color: BlueViolet;
}

.idealSubstance,
.mentAll {
	color: CadetBlue;
}

.respect {
	color: Blue;
}

.will {
	color: MediumVioletRed;
}

.thought {
	color: DarkTurquoise;
}

.primaMateria {
	color: OliveDrab;
}

.shadow,
.shadow .counter {
	color: transparent;
	text-shadow: 0 0 1.5px rgba(10,10,10,1);
}

.purity {
	color: gold;
	animation: glow 1s ease-in-out infinite alternate;
}

@keyframes glow {
	from {
		text-shadow: 0 0 1px gold;
	}
	to {
		text-shadow: 0 0 3px gold;
	}
}

.purify {
	color: Goldenrod;

}

.fire {
	color: OrangeRed;
}

.water {
	color: DeepSkyBlue;
}

.earth {
	color: Sienna;
}

.air {
	color: Azure;
	text-shadow: 0 0 5px LightSkyBlue;
}

.luck {
	color: rgb(0, 205, 103);
}

.destroy {
	color: rgb(84, 79, 72);
}

.entropy {
	color: rgb(81, 20, 105)
}

.entropy .name,
.entropy .counter {
	background: linear-gradient(to right, rgb(81, 20, 105), transparent);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.alchemize {
	color: rgb(2, 35, 14)
}

.purify .button {
	text-shadow: none;
}

#pure .name,
#pure .counter,
#artifact .name,
#artifact .counter,
#liquids .name,
#liquids .counter,
#alchemized1 .name,
#alchemized1 .counter,
#alchemized2 .name,
#alchemized2 .counter,
#essences .name,
#essences .counter,
#prestige .name,
#prestige .counter {
	font-weight: 900;
}

/* Linear gradients for ingredient combinations */

.fortitude {
	background: linear-gradient(DodgerBlue, BlueViolet);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.madness {
	background: linear-gradient(DodgerBlue, magenta);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.loyalty {
	background: linear-gradient(BlueViolet, Blue);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.problemSolving {
	background: linear-gradient(DarkTurquoise, magenta);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.divinity {
	background: linear-gradient(DarkTurquoise, OliveDrab);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.idea {
	background: linear-gradient(CadetBlue, DarkTurquoise);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.faith {
	background: linear-gradient(Blue, OliveDrab);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.spark {
	background: linear-gradient(DarkTurquoise, OliveDrab);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.philosophy {
	background: linear-gradient(DarkTurquoise, CadetBlue);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.void {
	background: radial-gradient(white 45%, black);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.creation {
	background: linear-gradient(OliveDrab, CadetBlue);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.evil {
	background: linear-gradient(rgb(0, 0, 0), rgb(226, 14, 84));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.death {
	background: linear-gradient(darkgrey, black);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.destruction {
	background: linear-gradient(BlueViolet, MediumVioletRed);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.awe {
	background: linear-gradient(Blue, DodgerBlue);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.dream {
	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%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: dream-shift 4s ease-in-out infinite;
}

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

.spark-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: visible;
}

.spark-particle {
	position: absolute;
	border-radius: 50%;
	animation: spark-flare 0.6s ease-out forwards;
	box-shadow: 0 0 3px 1px rgba(255, 200, 50, 0.8);
}

@keyframes spark-flare {
	0% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: 0.8;
		transform: scale(1.5);
	}
	100% {
		opacity: 0;
		transform: scale(0) translateY(-4px);
	}
}

.decay {
	color: rgb(81, 20, 105);
}

.decay .name,
.decay .counter,
.decay.option,
.decay.selected {
	position: relative;
	display: inline-block;
}


.decay .dust-canvas {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
}

.magma .name,
.magma .counter,
.magma.option,
.magma.selected,
.magma#result,
.magma#text {
	background: linear-gradient(90deg,
		#1a0000,
		#8B0000,
		#FF4500,
		#FF8C00,
		#FF4500,
		#8B0000,
		#1a0000
	);
	background-size: 300% 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: magma-flow 4s ease-in-out infinite;
}

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

.fear {
	color: #4B0082;
	animation: fear-tremble 0.1s linear infinite;
}

@keyframes fear-tremble {
	0%, 100% { transform: translate(0, 0); }
	25% { transform: translate(-0.5px, 0.5px); }
	50% { transform: translate(0.5px, -0.5px); }
	75% { transform: translate(-0.5px, -0.5px); }
}

.light {
	background: linear-gradient(90deg,
		#ff6666,
		#ffaa33,
		#ffee44,
		#44dd44,
		#4499ff,
		#9955ff,
		#ff6666
	);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: light-prismatic 6s linear infinite;
}

@keyframes light-prismatic {
	0% { background-position: 0% 50%; }
	100% { background-position: 200% 50%; }
}

/* Things */
.steam { color: #B0C4DE; }
.mud { color: #8B6914; }
.storm { color: #4A6FA5; }
.blood { color: #8B0000; }
.marrow { color: #D2B48C; }
.breath { color: #A8D8EA; }
.flesh { color: #E8BEAC; }

/* Ideas */
.consciousness { color: #7B68EE; }
.reason { color: #5F9EA0; }
.imagination { color: #DA70D6; }
.corruption { color: #556B2F; }
.passion { color: #DC143C; }
.innocence { color: #FFD700; }
.devotion { color: #4169E1; }
.grief { color: #696969; }
.sacrifice { color: #800020; }

/* Souls & Minds */
.rationalMind { color: #4682B4; }
.creativeMind { color: #FF6347; }
.madMind { color: #9932CC; }
.braveSoul { color: #B22222; }
.lovingSoul { color: #FF69B4; }
.darkSoul { color: #2F2F2F; }

.separate { color: OliveDrab; }
.abstraction { color: CadetBlue; }

.life {
	background: linear-gradient(CadetBlue, OliveDrab, MediumVioletRed);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Liquids */
.liquor {
	background: linear-gradient(navy, OliveDrab);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.mana {
	background: linear-gradient(Goldenrod, rgb(2, 35, 14));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.preserver {
	background: linear-gradient(forestgreen, rgb(84, 79, 72));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Tier 1 alchemized things */
.crystal {
	background: linear-gradient(gold, Sienna);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.obsidian {
	background: linear-gradient(#444, OrangeRed);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.clay {
	background: linear-gradient(MediumVioletRed, Sienna);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.incense {
	background: linear-gradient(DarkTurquoise, OrangeRed);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.relic {
	background: linear-gradient(rgb(81, 20, 105), Sienna);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.stone {
	background: linear-gradient(BlueViolet, Sienna);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.wax {
	background: linear-gradient(gold, OrangeRed);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.lightning {
	background: linear-gradient(OrangeRed, LightSkyBlue);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.dust {
	background: linear-gradient(Sienna, LightSkyBlue);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Tier 2 alchemized things */
.lens {
	background: linear-gradient(DarkTurquoise, rgba(200, 170, 255, 0.8));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.vessel {
	background: linear-gradient(rgb(81, 20, 105), gold);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.monolith {
	background: linear-gradient(BlueViolet, gold);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* New alchemized things/ideas */
.ash {
	background: linear-gradient(OrangeRed, #444);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.resonance {
	background: linear-gradient(LightSkyBlue, DarkTurquoise);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.soil {
	background: linear-gradient(Sienna, rgb(81, 20, 105));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.dew {
	background: linear-gradient(DeepSkyBlue, gold);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.splinter {
	background: linear-gradient(Sienna, #444);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.glyph {
	background: linear-gradient(DarkTurquoise, MediumVioletRed);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.halo {
	background: linear-gradient(OrangeRed, gold);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.mist {
	background: linear-gradient(DeepSkyBlue, LightSkyBlue);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.seed {
	background: linear-gradient(Sienna, MediumVioletRed);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Book crafting */
.plant {
	background: linear-gradient(OliveDrab, DeepSkyBlue);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.paper {
	background: linear-gradient(AntiqueWhite, Tan);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.ink {
	background: linear-gradient(#1a1a2e, #444);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.book { color: Tan; }
.boundBook { color: SaddleBrown; }
.bookDistillery, .boundBookDistillery { color: DeepSkyBlue; }
.bookMind, .boundBookMind { color: DarkTurquoise; }
.bookSoul, .boundBookSoul { color: MediumVioletRed; }
.bookFlesh, .boundBookFlesh { color: IndianRed; }
.bookArtifacts, .boundBookArtifacts { color: Gold; }

/* Artifacts */
.wreath {
	background: linear-gradient(#6B8E23, #3A5F0B, #2E8B57);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.ember {
	background: linear-gradient(#FF4500, #CC3300, #5C1A00);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.echo {
	background: linear-gradient(#B0C4DE, #8899AA, #A8B8C8);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.root {
	background: linear-gradient(#6B4226, #8B5E3C, #4A2F1A);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.tear {
	background: linear-gradient(#87CEEB, #5B9BD5, #B0D4E8);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.shard {
	background: linear-gradient(#7B68EE, #4B0082, #9370DB);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.sigil {
	background: linear-gradient(#8B0000, #4A0010, #2A0008);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.crown {
	background: linear-gradient(#DAA520, #B8860B, #6A0DAD);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.veil {
	background: linear-gradient(#C8C8DC, #9A8FBF, #B0A8C8);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Prestige resources */
.clarity {
	color: #87CEEB;
	text-shadow: 0 0 4px rgba(135, 206, 235, 0.6);
}
.courage {
	color: #DAA520;
	text-shadow: 0 0 4px rgba(218, 165, 32, 0.6);
}
.leather {
	color: #8B4513;
}
.elixir {
	background: linear-gradient(#2E86C1, #48C9B0);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.canvas {
	color: #F5F5DC;
	text-shadow: 0 0 2px #999;
}
.paint {
	background: linear-gradient(90deg, OrangeRed, #7D3C98, DodgerBlue, LimeGreen);
	background-size: 300% 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: paint-shift 3s ease-in-out infinite;
}
@keyframes paint-shift {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}
.masterpiece {
	background: linear-gradient(90deg, #7D3C98, gold, #7D3C98);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: masterpiece-shimmer 4s linear infinite;
}
@keyframes masterpiece-shimmer {
	0% { background-position: 0% 50%; }
	100% { background-position: 200% 50%; }
}
.blessedOil {
	background: linear-gradient(#17A589, gold);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.spirit {
	color: #17A589;
	text-shadow: 0 0 6px rgba(23, 165, 137, 0.5);
}
.gold {
	color: gold;
	text-shadow: 0 0 4px rgba(255, 215, 0, 0.8);
}
.beads {
	background: linear-gradient(90deg, #6C7A3A, #DAA520, #6C7A3A);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: beads-roll 2s linear infinite;
}
@keyframes beads-roll {
	0% { background-position: 0% 50%; }
	100% { background-position: 200% 50%; }
}
.goo {
	color: #556B2F;
	text-shadow: 0 0 3px rgba(85, 107, 47, 0.7);
}
.failAlchemize {
	color: #8B0000;
}
.failure {
	color: #8B0000;
	text-shadow: 0 0 3px rgba(139, 0, 0, 0.5);
}
.sin {
	background: linear-gradient(#000, #8B0000, #000);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Trickster modal */
/* Oracle Divination Modal */
#oracleModal {
	display: none;
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0, 0, 0, 0.9);
	z-index: 10000;
	justify-content: center;
	align-items: center;
}
#oracleModal .oracle-modal-content {
	background: #0d0d1a;
	border: 2px solid #6a0dad;
	border-radius: 8px;
	padding: 30px 40px;
	text-align: center;
	max-width: 420px;
	color: #ccc;
	font-family: 'EB Garamond', serif;
}
#oracleModal .oracle-modal-title {
	font-size: 1.4em;
	color: #6a0dad;
	margin-bottom: 20px;
}
#oracleModal .oracle-modal-riddle {
	font-size: 1.2em;
	font-style: italic;
	line-height: 1.6;
	color: #e0d0f0;
	margin: 20px 0;
}
#oracleModal .oracle-modal-buttons {
	margin-top: 25px;
}
#oracleModalClose {
	padding: 8px 20px;
	cursor: pointer;
	border: 1px solid #6a0dad;
	border-radius: 4px;
	background: #1a0a2e;
	color: #ccc;
}

#tricksterModal {
	display: none;
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0, 0, 0, 0.85);
	z-index: 10000;
	display: none;
	justify-content: center;
	align-items: center;
}
#tricksterModal .trickster-content {
	background: #1a1a1a;
	border: 2px solid #6C7A3A;
	border-radius: 8px;
	padding: 30px;
	text-align: center;
	max-width: 400px;
	color: #ccc;
	font-family: 'EB Garamond', serif;
}
#tricksterModal .trickster-title {
	font-size: 1.4em;
	color: #6C7A3A;
	margin-bottom: 15px;
}
#tricksterModal .trickster-offer {
	margin: 15px 0;
	font-size: 1.1em;
}
#tricksterModal .trickster-buttons {
	display: flex;
	gap: 15px;
	justify-content: center;
	margin-top: 20px;
}
#tricksterModal .trickster-buttons .button {
	padding: 8px 20px;
	cursor: pointer;
	border: 1px solid #666;
	border-radius: 4px;
}
#tricksterAccept {
	background: #2F4F2F;
	color: #ccc;
}
#tricksterDecline {
	background: #4F2F2F;
	color: #ccc;
}