From c92c41230d5c8c957346615a955b31c46435fbac Mon Sep 17 00:00:00 2001
From: Jens Ahrensfeld <jens@jayfield.org>
Date: Fri, 26 Jun 2026 23:02:11 +0200
Subject: [PATCH] Fix fire gap: restore flame positions, increase clip
 topBuffer to 20px

Flames back at y=177 (tips touching pot bottom at y=174), viewBox
back to 255. topBuffer raised from 10 to 20px to cover flicker
overshoot without clipping the tips.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DGKe8JzTM2Gr1fdx9wYXTi
---
 web/app.js     |  6 +++---
 web/index.html | 10 +++++-----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/web/app.js b/web/app.js
index 95fa04f..4a2cd9b 100644
--- a/web/app.js
+++ b/web/app.js
@@ -294,8 +294,8 @@ function updateFireVisualization() {
 	const g        = document.getElementById('fire-group');
 	const clipRect = document.getElementById('fire-clip-rect');
 	if (!g) return;
-	const fireBase = 256; // y of flame base (all paths end here)
-	const fireTip  = 185; // y of tallest flame tip
+	const fireBase = 248; // y of flame base (all paths end here)
+	const fireTip  = 177; // y of tallest flame tip
 	const fireH    = fireBase - fireTip; // 71px total flame height
 	if (heaterPowerIst <= 0) {
 		g.style.opacity = '0';
@@ -304,7 +304,7 @@ function updateFireVisualization() {
 		const intensity = Math.min(1, heaterPowerIst / heaterMaxPower);
 		// Always show the lower 35% (base), scale upper 65% with intensity
 		const visibleH = (0.35 + 0.65 * intensity) * fireH;
-		const topBuffer = 10; // headroom for flicker scaleY overshoot
+		const topBuffer = 20; // headroom for flicker scaleY overshoot (~12% of height)
 		clipRect.setAttribute('y',      (fireBase - visibleH - topBuffer).toFixed(1));
 		clipRect.setAttribute('height', (visibleH + topBuffer + 2).toFixed(1));
 		g.style.opacity = String((0.6 + 0.4 * intensity).toFixed(2));
diff --git a/web/index.html b/web/index.html
index afbfbca..9b13ded 100644
--- a/web/index.html
+++ b/web/index.html
@@ -47,7 +47,7 @@
 </div>
 
 <div id="pot-view">
-  <svg id="pot-svg" viewBox="0 0 290 265" xmlns="http://www.w3.org/2000/svg">
+  <svg id="pot-svg" viewBox="0 0 290 255" xmlns="http://www.w3.org/2000/svg">
     <defs>
       <clipPath id="pot-clip">
         <rect x="63" y="30" width="114" height="142"/>
@@ -59,7 +59,7 @@
         <rect id="water-clip-rect" x="63" y="172" width="114" height="0"/>
       </clipPath>
       <clipPath id="fire-clip">
-        <rect id="fire-clip-rect" x="60" y="256" width="130" height="0"/>
+        <rect id="fire-clip-rect" x="60" y="248" width="130" height="0"/>
       </clipPath>
       <!-- Flame gradients: solid at base (y=1), transparent at tip (y=0) -->
       <linearGradient id="fg-red" x1="0" y1="1" x2="0" y2="0">
@@ -80,15 +80,15 @@
     <g id="fire-group" clip-path="url(#fire-clip)">
       <!-- Outer red flame -->
       <path id="flame-outer" class="flame"
-        d="M76,256 C79,223 92,200 101,216 C106,200 113,185 120,188 C127,185 134,200 139,216 C148,200 161,223 164,256 Z"
+        d="M76,248 C79,215 92,192 101,208 C106,192 113,177 120,180 C127,177 134,192 139,208 C148,192 161,215 164,248 Z"
         fill="url(#fg-red)"/>
       <!-- Middle orange flame -->
       <path id="flame-mid" class="flame"
-        d="M88,256 C91,230 101,212 109,225 C113,212 118,199 122,203 C126,199 131,212 135,225 C143,212 153,230 156,256 Z"
+        d="M88,248 C91,222 101,204 109,217 C113,204 118,191 122,195 C126,191 131,204 135,217 C143,204 153,222 156,248 Z"
         fill="url(#fg-orange)"/>
       <!-- Inner yellow flame -->
       <path id="flame-inner" class="flame"
-        d="M100,256 C102,238 110,223 116,232 C118,223 121,213 124,216 C127,213 130,223 132,232 C138,223 147,238 148,256 Z"
+        d="M100,248 C102,230 110,215 116,224 C118,215 121,205 124,208 C127,205 130,215 132,224 C138,215 147,230 148,248 Z"
         fill="url(#fg-yellow)"/>
     </g>