.cake {
	position: relative;
	width: 700px;
	max-width: 90vw;
	height: 250px;
	margin: 10px;
}

.layer {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(180deg, #ffd6e8, #ffb6d6);
	border-radius: 40px;
}

.bottom {
	width: 90%;
	height: 140px;
	bottom: 0;
}

.top {
	width: 80%;
	height: 100px;
	bottom: 70px;
	background: linear-gradient(180deg, #fff5fb, #ffd6e8);
}

.candles {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 170px;
	width: 80%;
	display: flex;
	justify-content: space-between;
	touch-action: none;
}

.candle {
	position: relative;
	width: 10px;
	height: 35px;
}

.wax {
	width: 10px;
	height: 25px;
	background: linear-gradient(180deg, #fff, #ffd9e8);
	border-radius: 3px;
}

.wick {
	position: absolute;
	top: -6px;
	left: 50%;
	transform: translateX(-50%);
	width: 2px;
	height: 6px;
	background: #333;
	border-radius: 1px;
}

.flame {
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
	width: 12px;
	height: 18px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, #fff3c6 0%, #ffeb8a 40%, #ffb14d 70%, transparent 100%);
	animation: flicker .15s infinite alternate;
	transition: opacity .4s ease, transform .4s ease;
}

@keyframes flicker {
	from {
		transform: translateX(-50%) scaleY(1);
	}

	to {
		transform: translateX(-50%) scaleY(.9);
	}
}

.smoke {
	position: absolute;
	top: -15px;
	left: 50%;
	transform: translateX(-50%) scale(0);
	opacity: 0;
	font-size: 14px;
	transition: all .4s ease;
	pointer-events: none;
}

.plate {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: -10px;
	width: 90%;
	height: 20px;
	background: linear-gradient(180deg, #fff, #ffeef6);
	border-radius: 20px;
}

/* stato "spenta" (solo per fallback) */
.candle.off .flame {
	opacity: 0;
	transform: translateX(-50%) scale(.6);
}

.candle.off .smoke {
	opacity: 0;
	transform: translateX(-50%) translateY(-40px) scale(.5);
}

/* responsive */
@media (max-width:420px) {
	.candle {
		width: 8px;
	}

	.wax {
		height: 22px;
	}

	.flame {
		top: -18px;
		width: 12px;
		height: 16px;
	}
}