// tiny floating effect (simple) function playFloatingText(msg) const flame = document.getElementById("clickFlame"); const span = document.createElement("div"); span.innerText = msg; span.style.position = "fixed"; span.style.left = "50%"; span.style.bottom = "40%"; span.style.transform = "translateX(-50%)"; span.style.background = "#000000aa"; span.style.color = "#ffd58c"; span.style.padding = "6px 16px"; span.style.borderRadius = "40px"; span.style.fontSize = "0.9rem"; span.style.backdropFilter = "blur(8px)"; span.style.zIndex = "999"; span.style.pointerEvents = "none"; span.style.transition = "opacity 1s ease, transform 0.8s"; document.body.appendChild(span); setTimeout(() => span.style.opacity = "0"; span.style.transform = "translateX(-50%) translateY(-40px)"; setTimeout(() => span.remove(), 1000); , 50);
// event binding function bindEvents() const flame = document.getElementById("clickFlame"); if (flame) flame.addEventListener("click", handleClick); const resetBtn = document.getElementById("resetBtn"); if (resetBtn) resetBtn.addEventListener("click", resetGame);
/* Flame / Essence core */ .essence-core display: flex; flex-direction: column; align-items: center; margin-bottom: 2rem; .flame-btn background: radial-gradient(circle at 30% 20%, #ffb347, #ff6a00); width: 130px; height: 130px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; box-shadow: 0 0 20px #ff884d, inset 0 -5px 0 rgba(0,0,0,0.2); transition: transform 0.05s linear, box-shadow 0.1s; margin-bottom: 1rem; .flame-btn:active transform: scale(0.96); box-shadow: 0 0 30px #ffaa66; .flame-emoji font-size: 4rem; filter: drop-shadow(0 0 6px #ffcc88); .essence-display background: #0b0e16aa; backdrop-filter: blur(8px); padding: 0.6rem 1.5rem; border-radius: 60px; border: 1px solid #c9a87b; font-size: 1.9rem; font-weight: bold; color: #ffdd99; font-family: monospace; letter-spacing: 2px; .essence-label font-size: 0.8rem; color: #bba88a; margin-top: 6px;
