var evalLabel = document.createElement("span");
evalLabel.style = `font-size:12px;font-weight:bold;color:#94a3b8;min-width:38px;text-align:right;font-family:monospace;`;
evalLabel.textContent = "0.0";

var evalTrack = document.createElement("div");
evalTrack.style = `flex:1;height:6px;border-radius:4px;background:#0f172a;overflow:hidden;`;

var evalFill = document.createElement("div");
evalFill.style = `height:100%;width:50%;background:#e2e8f0;transition:width 0.4s ease;border-radius:4px;`;
evalTrack.appendChild(evalFill);

var evalPercent = document.createElement("span");
evalPercent.style = `font-size:11px;color:#64748b;min-width:34px;font-family:monospace;`;
evalPercent.textContent = "50%";

function cpToWinPercent(cp) {
  return 50 + 50 * (2 / (1 + Math.exp(-0.00368208 * cp)) - 1);
}

function updateEvalBar(cp, isMate, sideToMove) {
  let whiteCP = sideToMove === "w" ? cp : -cp;
  let whitePercent, labelText;

  if (isMate) {
    if (cp === 0) {
      // Position IS checkmate — the side to move has already been mated
      whitePercent = sideToMove === "b" ? 98 : 2;
      labelText    = sideToMove === "b" ? "M0" : "-M0";
    } else {
      whitePercent = whiteCP > 0 ? 98 : 2;
      labelText    = whiteCP > 0 ? `M${Math.abs(cp)}` : `-M${Math.abs(cp)}`;
    }
  } else {
    whitePercent = cpToWinPercent(whiteCP);
    let v = (whiteCP / 100).toFixed(1);
    labelText = whiteCP >= 0 ? `+${v}` : `${v}`;
  }

  evalFill.style.width = `${whitePercent}%`;
  evalLabel.textContent = labelText;
  evalPercent.textContent = `${Math.round(whitePercent)}%`;
}