AI feedback regarding src/_includes/game-stats.njk #492

high
The logic for rendering achievement badges has inconsistent indentation and a visibility bug on desktop screens.

Indentation: The added lines (119, 124, 132) use inconsistent spacing (4 and 12 spaces) compared to the 2-space standard used in the rest of the file.
Visibility Bug: The badgeContainer element in the HTML includes the sm:flex utility. In Tailwind CSS, media query utilities (like sm:flex) have higher specificity than base utilities (like hidden). Consequently, badgeContainer.classList.toggle("hidden", true) will fail to hide the element on screens wider than the sm breakpoint because display: flex will override display: none.
To fix this while maintaining the responsive behavior (hidden on mobile, flex on desktop if badges exist), you should toggle the sm:flex class instead of hidden.

  badgeContainer.innerHTML = "";
  var earned = {};
  try { earned = JSON.parse(localStorage.getItem("gameAchievements") || "{}"); } catch (_) {}
  var icons = { first_blood: "🩸", code_wizard: "🧙", duelist: "⚔️" };
  var labels = { first_blood: "First Blood", code_wizard: "Code Wizard", duelist: "Duelist" };
  var badgeCount = 0;
  Object.keys(icons).forEach(function (id) {
    if (earned[id]) {
      var badge = document.createElement("span");
      badge.title = labels[id];
      badge.className = "text-sm cursor-help";
      badge.textContent = icons[id];
      badgeContainer.appendChild(badge);
      badgeCount += 1;
    }
  });
  badgeContainer.classList.toggle("sm:flex", badgeCount > 0);