Replace duplicate spotlight with AI vs Physics panel

index.html

@@ -58,7 +58,7 @@ svg{width:100%;height:auto;display:block}.lg{display:flex;flex-wrap:wrap;gap:6px
 <div id="status">Loading forecasts and observations…</div>
 <div class="grid">
   <div class="pn"><h2 id="h1">Most accurate model</h2><div id="champ"></div></div>
-  <div class="pn dw"><h2>Darwin-Prediction-Weather</h2><div id="dwc"></div></div>
+  <div class="pn dw"><h2>AI vs Physics (Supercomputer)</h2><div id="dwc"></div></div>
 </div>
 <div class="pn" style="margin-top:14px"><h2>Champions at a glance: who is no. 1</h2>
 <h3 class="h3">By period and forecast day, 24 cities</h3><div class="tw"><table class="wt" id="wper"></table></div>
@@ -153,9 +153,10 @@ function render(){
   else{
     $("status").textContent=`All models scored as issued, on the cases every listed model covers.${R.OUT.length?" Not listed for this selection (insufficient coverage): "+R.OUT.map(m=>MODELS[m][0]).join(", ")+".":""}${rows[0].n<30?" Small sample: results for a single day or city vary widely.":""}`;
     const c=rows[0],M=inf(c.m);
-    $("champ").innerHTML=`<div class="champ"><div class="medal">1</div><div><div class="cn">${M[0]}</div><div class="sub" style="margin:6px 0">${flag(M[3],M[4])}${M[1]} &nbsp; ${tyb(c.m)}</div><div class="big">${c.r.toFixed(2)}<small>°C RMSE</small></div><div class="sub">${c.n.toLocaleString()} verified forecasts, ${span}</div></div></div>`+
+    $("champ").innerHTML=`<div class="champ"><div class="medal">1</div><div><div class="cn">${M[0]}</div><div class="sub" style="margin:6px 0">${flag(M[3],M[4])}${M[1]} &nbsp; ${tyb(c.m)}</div><div class="big">${c.r.toFixed(2)}<small>°C RMSE</small></div>${rows[1]&&c.r<rows[1].r?`<div class="gain" style="margin:8px 0 6px">${((1-c.r/rows[1].r)*100).toFixed(1)}% lower error than no. 2</div>`:""}<div class="sub">${c.n.toLocaleString()} verified forecasts, ${span}</div></div></div>`+
       `<div class="run">${rows.slice(1,3).map(x=>`<div class="rn"><div class="k">NO. ${x.rk}</div><div class="v">${inf(x.m)[0]}</div><div class="sub">${flag(inf(x.m)[3],inf(x.m)[4])}${x.r.toFixed(2)} °C</div></div>`).join("")}</div>`;
-    $("dwc").innerHTML=fin(R.dw)?`<div class="sub" style="margin-bottom:6px">${flag("kr","South Korea")}VIDRAFT &nbsp; <span class="ty ai">AI</span> &nbsp; fusion engine</div><div class="big">${R.dw.toFixed(2)}<small>°C RMSE</small></div><div class="gain">${R.dw<best?((1-R.dw/best)*100).toFixed(1)+"% lower error than the best public model":"Level with the best public model"}</div><div class="sub" style="margin-top:10px">${R.dn.toLocaleString()} verified forecasts, ${D}-day lead</div>`:"<p class='note'>Fusion needs at least three models with 30 days of history for this selection.</p>";
+    const bAI=rows.find(x=>inf(x.m)[2]==="AI"),bPH=rows.find(x=>inf(x.m)[2]!=="AI"),vs=(x,lab)=>x?`<div class="rn" style="margin-bottom:10px"><div class="k">BEST ${lab} · NO. ${x.rk} OVERALL</div><div class="v">${inf(x.m)[0]}</div><div class="sub">${flag(inf(x.m)[3],inf(x.m)[4])}${inf(x.m)[1]} &nbsp; <b style="color:#fff;font-size:18px">${x.r.toFixed(2)} °C</b></div></div>`:"";
+    $("dwc").innerHTML=vs(bAI,"AI")+vs(bPH,"PHYSICS (SUPERCOMPUTER)")+(bAI&&bPH?`<div class="gain">${bAI.r<bPH.r?"AI leads by "+((1-bAI.r/bPH.r)*100).toFixed(1)+"%":"Physics leads by "+((1-bPH.r/bAI.r)*100).toFixed(1)+"%"}</div><div class="sub" style="margin-top:10px">${rows.filter(x=>inf(x.m)[2]==="AI").length} AI models and ${rows.filter(x=>inf(x.m)[2]!=="AI").length} physics models on this board</div>`:"");
     const mx=Math.max(...rows.map(x=>x.r));let h="";
     rows.forEach(x=>{const M=inf(x.m),d=x.m==="darwin";h+=`<div class="bar ${x.rk===1?"f":""} ${d?"dwr":""}"><div class="rk">${x.rk}</div><div class="nm">${M[0]}<span class="d">${flag(M[3],M[4])}${M[1]} &nbsp; ${tyb(x.m)}${d?" &nbsp; fusion":""}</span></div><div class="trk"><i style="width:${x.r/mx*100}%;background:${d?"linear-gradient(90deg,#35d0ff,#9be9ff)":M[5]}"></i></div><div class="val">${x.r.toFixed(2)}</div></div>`});
     $("bars").innerHTML=h;