feat: Add full 4-hero Avengers V-Formation animation engine and sprite endpoints

main.py

@@ -128,6 +128,15 @@ async def serve_cap() -> FileResponse:
     raise HTTPException(status_code=404, detail="Captain America image missing")
 
 
+@app.get("/spider_gwen.png")
+async def serve_spider_gwen() -> FileResponse:
+    """Serve Spider-Gwen sprite image."""
+    img_path = config.BASE_DIR / "web_ui" / "spider_gwen.png"
+    if img_path.exists():
+        return FileResponse(img_path)
+    raise HTTPException(status_code=404, detail="Spider-Gwen image missing")
+
+
 @app.get("/health", response_class=JSONResponse)
 async def health_check() -> Dict[str, Any]:
     """Health check reporting system and index readiness."""

web_ui/index.html

@@ -1429,8 +1429,26 @@
     let mainIronmanLoaded = false;
     mainIronmanImg.onload = () => { mainIronmanLoaded = true; };
 
+    const thorImg = new Image();
+    thorImg.src = "/thor.png";
+    let thorLoaded = false;
+    thorImg.onload = () => { thorLoaded = true; };
+
+    const capImg = new Image();
+    capImg.src = "/cap.png";
+    let capLoaded = false;
+    capImg.onload = () => { capLoaded = true; };
+
+    const gwenImg = new Image();
+    gwenImg.src = "/spider_gwen.png";
+    let gwenLoaded = false;
+    gwenImg.onload = () => { gwenLoaded = true; };
+
     let mainImX = -220;
     const mainThrusterParticles = [];
+    const thorSparks = [];
+    const capSparks = [];
+    const gwenParticles = [];
 
     function drawMainPageIronMan() {
       if (!mainCanvas || !mainCtx) return;
@@ -1755,26 +1773,35 @@
         mainCtx.restore();
       }
 
-      requestAnimationFrame(drawMainPageIronMan);
-    }
-
-    // Captain America Sprite Loader
-    const capImg = new Image();
-    capImg.src = "/cap.png";
-    let capLoaded = false;
-    capImg.onload = () => { capLoaded = true; };
+      // ==========================================
+      // DRAW SPIDER-GWEN FLYING (Center Tail Wing of Avengers V-Formation)
+      // ==========================================
+      const gwenX = mainImX - 410;
+      const gwenY = baseLeaderY;
+      const gwenW = 150;
+      const gwenH = 220;
 
-    let capX = -650;
-    const capSparks = [];
+      if (gwenLoaded) {
+        mainCtx.save();
+        mainCtx.filter = "brightness(1.4) contrast(1.25) saturate(1.3) drop-shadow(0 0 20px rgba(255, 0, 150, 0.95))";
+        mainCtx.drawImage(gwenImg, gwenX, gwenY, gwenW, gwenH);
+        mainCtx.restore();
 
-    // Thor Sprite & Lightning Helper
-    const thorImg = new Image();
-    thorImg.src = "/thor.png";
-    let thorLoaded = false;
-    thorImg.onload = () => { thorLoaded = true; };
+        // Luminous Neon Web Aura Flare
+        mainCtx.save();
+        const webGrad = mainCtx.createRadialGradient(gwenX + gwenW * 0.5, gwenY + gwenH * 0.4, 0, gwenX + gwenW * 0.5, gwenY + gwenH * 0.4, 24);
+        webGrad.addColorStop(0, "rgba(255, 255, 255, 0.95)");
+        webGrad.addColorStop(0.4, "rgba(255, 0, 150, 0.85)");
+        webGrad.addColorStop(1, "rgba(255, 0, 150, 0)");
+        mainCtx.fillStyle = webGrad;
+        mainCtx.beginPath();
+        mainCtx.arc(gwenX + gwenW * 0.5, gwenY + gwenH * 0.4, 24, 0, Math.PI * 2);
+        mainCtx.fill();
+        mainCtx.restore();
+      }
 
-    let thorX = -450;
-    const thorSparks = [];
+      requestAnimationFrame(drawMainPageIronMan);
+    }
 
     function drawLightningArc(c, x1, y1, x2, y2, roughness = 14) {
       const dx = x2 - x1;