/**
 * TinyTaleWorld Element Layer
 * Layer 4: Elements
 * Visual overlays for all 12 element types
 */

/* ============================
   None (no overlay)
   ============================ */
body.element-none::after {
	opacity: 0;
}

/* ============================
   Fire
   Warm orange gradient from bottom
   ============================ */
body.element-fire::after {
	background: linear-gradient(0deg, rgba(255, 80, 0, 0.15) 0%, transparent 60%);
	opacity: 1;
}

/* ============================
   Water
   Blue gradient from top
   ============================ */
body.element-water::after {
	background: linear-gradient(180deg, rgba(0, 119, 182, 0.15) 0%, transparent 60%);
	opacity: 1;
}

/* ============================
   Ice
   Radial cold gradient from top
   ============================ */
body.element-ice::after {
	background: radial-gradient(ellipse at 50% 0%, rgba(180, 230, 255, 0.2) 0%, transparent 70%);
	opacity: 1;
}

/* ============================
   Lightning
   Subtle yellow tinge from top
   ============================ */
body.element-lightning::after {
	background: linear-gradient(180deg, rgba(255, 255, 100, 0.12) 0%, transparent 50%);
	opacity: 1;
}

/* ============================
   Wind
   Transparent (effect in fx layer only)
   ============================ */
body.element-wind::after {
	opacity: 0;
}

/* ============================
   Earth
   Warm brown tinge from bottom
   ============================ */
body.element-earth::after {
	background: linear-gradient(0deg, rgba(139, 90, 43, 0.15) 0%, transparent 60%);
	opacity: 1;
}

/* ============================
   Shadow
   Dark vignette from edges
   ============================ */
body.element-shadow::after {
	background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.4) 100%);
	opacity: 1;
}

/* ============================
   Light
   Bright white radial from center, very low opacity
   ============================ */
body.element-light::after {
	background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
	opacity: 1;
}

/* ============================
   Poison
   Sickly green tinge
   ============================ */
body.element-poison::after {
	background: linear-gradient(135deg, rgba(100, 200, 50, 0.12) 0%, transparent 60%);
	opacity: 1;
}

/* ============================
   Cosmic
   Deep purple with faint star texture
   ============================ */
body.element-cosmic::after {
	background: 
		radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,0.3), transparent),
		radial-gradient(1px 1px at 50px 70px, rgba(255,255,255,0.2), transparent),
		radial-gradient(1px 1px at 80px 40px, rgba(255,255,255,0.4), transparent),
		radial-gradient(1px 1px at 110px 90px, rgba(255,255,255,0.25), transparent),
		linear-gradient(180deg, rgba(75, 0, 130, 0.2) 0%, transparent 70%);
	background-size: 150px 100px;
	opacity: 1;
}

/* ============================
   Nature Bloom
   Soft green from bottom
   ============================ */
body.element-nature-bloom::after {
	background: linear-gradient(0deg, rgba(100, 200, 100, 0.15) 0%, transparent 60%);
	opacity: 1;
}