const storageKey = "dayz-web-map-settings";
const MGRS_STEP = 1000; // 1 km MGRS grid square size in world units
const params = new URLSearchParams(window.location.search);
const password = params.get("password") || "";
const serverOrigin = (params.get("server") || "").replace(/\/$/, "");
const favoriteLootColor = "#ef4444";
const favoriteLootFilterDefinition = { key: "favoriteLoot", label: "Favorites", visibleKey: "showFavoriteLoot", kind: "loot", category: "favorite", color: favoriteLootColor, markerSize: 10, textSize: 14, showLabel: true };
const lootPalette = ["#f43f5e", "#f59e0b", "#22c55e", "#eab308", "#84cc16", "#ec4899", "#0ea5e9", "#14b8a6", "#c084fc", "#f97316", "#d946ef", "#dc2626", "#fbbf24", "#fb923c", "#0891b2", "#64748b"];
const entityFilterDefinitions = [
  { key: "players", label: "Players", visibleKey: "showPlayers", kind: "players", color: "#ff6b35", markerSize: 12, textSize: 14, showLabel: true, directionLength: 28 },
  { key: "zombies", label: "Zombies", visibleKey: "showZombies", kind: "zombies", color: "#65a30d", markerSize: 12, textSize: 14, showLabel: true },
  { key: "animals", label: "Animals", visibleKey: "showAnimals", kind: "animals", color: "#38bdf8", markerSize: 12, textSize: 14, showLabel: true },
  { key: "vehicles", label: "Vehicles", visibleKey: "showVehicles", kind: "vehicles", color: "#a855f7", markerSize: 14, textSize: 14, showLabel: true },
  { key: "bullets", label: "Bullets", visibleKey: "showBullets", kind: "bullets", color: "#facc15", markerSize: 6, textSize: 12, showLabel: false, showTrajectory: true, showPrediction: true, phantomLifetimeMs: 5000, predictionDistance: 250 },
  { key: "otherEntities", label: "Other Entity", visibleKey: "showOtherEntities", kind: "otherEntities", color: "#475569", markerSize: 10, textSize: 14, showLabel: true }
];
const previousDefaultFilterColors = {
  players: "#f97316",
  zombies: "#22c55e",
  animals: "#60a5fa",
  vehicles: "#a855f7",
  bullets: "#f8fafc",
  otherEntities: "#94a3b8",
  isHouse: "#fb7185",
  isWeapon: "#4ade80",
  isAmmo: "#f59e0b",
  isFood: "#a3e635",
  isClothing: "#fde047",
  isBackpack: "#f0abfc",
  isMedical: "#e5e7eb",
  isVehiclePart: "#38bdf8",
  isTool: "#22d3ee",
  isCrafting: "#2dd4bf",
  isConsumables: "#f43f5e",
  isOptics: "#94a3b8",
  isMelee: "#fb7185",
  isWeaponAttachments: "#4ade80",
  isExplosives: "#f59e0b",
  isForBuilding: "#a3e635",
  isOtherLoot: "#fde047"
};
let filterDefinitions = [...entityFilterDefinitions];

const defaultSettings = {
  followPlayer: false,
  showPlayers: true,
  showZombies: true,
  showAnimals: true,
  showLoot: true,
  showVehicles: true,
  showBullets: true,
  showOtherEntities: true,
  showFavoriteLoot: true,
  showLabels: true,
  showPOIs: true,
  showGrid: false,
  showSatellite: false,
  showSatmap: false,
  showDistanceRings: false,
  showMinimap: false,
  isCombatMode: false,
  distanceFilter: 2000,
  textSize: 14,
  ordinaryLootSpread: 2,
  groupedLootSpread: 2,
  sameLootMergeRadius: 110,
  lineAnchorMode: "bottom-center",
  mergeSameLootLabels: true,
  favoriteLootNames: [],
  filterStyles: {},
  filterExpanded: {},
  // v2 UI state
  sidebarState: "full",
  activeTab: "tab-map",
  theme: "dark",
  presets: [null, null, null, null],
  waypoints: [],
  activePreset: null,
  // legacy compat
  settingsCollapsed: false,
  labelSettingsOpen: false,
};

const savedSettings = (() => {
  try {
    const parsed = JSON.parse(localStorage.getItem(storageKey) || "{}");
    const merged = {
      ...defaultSettings,
      ...parsed,
      filterStyles: { ...(defaultSettings.filterStyles || {}), ...(parsed.filterStyles || {}) },
      filterExpanded: { ...(defaultSettings.filterExpanded || {}), ...(parsed.filterExpanded || {}) },
      presets: Array.isArray(parsed.presets)
        ? parsed.presets.slice(0, 4).concat([null, null, null, null]).slice(0, 4)
        : [null, null, null, null],
      waypoints: Array.isArray(parsed.waypoints) ? parsed.waypoints : [],
    };
    if (!parsed.sidebarState && parsed.settingsCollapsed) {
      merged.sidebarState = "icons";
    }
    // migrate old showTopo key
    if ("showTopo" in parsed && !("showSatmap" in parsed)) {
      merged.showSatmap = parsed.showTopo;
    }
    return merged;
  } catch {
    return { ...defaultSettings };
  }
})();

const state = {
  settings: savedSettings,
  scale: 0.6,
  offsetX: 0,
  offsetY: 0,
  dragging: false,
  lastX: 0,
  lastY: 0,
  bootstrap: null,
  lastSnapshot: null,
  tileState: {},
  initialCentered: false,
  eventSource: null,
  fallbackPollTimer: null,
  reconnectTimer: null,
  activePointers: new Map(),
  pinchDistance: 0,
  bulletVisuals: new Map(),
  bulletAnimationFrame: null,
  // v2 additions
  measureMode: false,
  measurePointA: null,
  measurePointB: null,
  knownPlayerAddresses: new Set(),
  wasConnected: false,
  contextMenuWorldPos: null,
  lootSearchText: "",
  listDirty: false,
  tileElements: new Map(),   // key -> img, O(1) tile lookup
  topoElements: new Map(),   // key -> img, O(1) topo lookup
  satElements:  new Map(),   // "z:tx:ty" -> img, O(1) satellite XYZ tile lookup
  tilesRafPending: false,    // throttle updateVisibleTiles to one RAF per frame
  cachedGridKey: null,       // detects when grid needs rebuild
  cachedGridNode: null,      // cached SVG <g> for the grid
};

const elements = {
  status: document.getElementById("status"),
  viewport: document.getElementById("viewport"),
  canvas: document.getElementById("canvas"),
  tiles: document.getElementById("tiles"),
  paths: document.getElementById("paths"),
  itemLabels: document.getElementById("itemLabels"),
  markers: document.getElementById("markers"),
  topoTiles: document.getElementById("topo-tiles"),
  satTiles: document.getElementById("sat-tiles"),
  connectionDot: document.getElementById("connectionDot"),
  serverBadge: document.getElementById("serverBadge"),
  serverInfo: document.getElementById("serverInfo"),
  combatToggle: document.getElementById("combatToggle"),
  sidebarToggle: document.getElementById("sidebarToggle"),
  sidebar: document.getElementById("sidebar"),
  sidebarContent: document.getElementById("sidebarContent"),
  badgePlayers: document.getElementById("badge-players"),
  badgeZombies: document.getElementById("badge-zombies"),
  badgeAnimals: document.getElementById("badge-animals"),
  badgeVehicles: document.getElementById("badge-vehicles"),
  badgeBullets: document.getElementById("badge-bullets"),
  badgeLoot: document.getElementById("badge-loot"),
  followPlayer: document.getElementById("followPlayer"),
  showLabels: document.getElementById("showLabels"),
  showPOIs: document.getElementById("showPOIs"),
  showGrid: document.getElementById("showGrid"),
  showSatellite: document.getElementById("showSatellite"),
  showSatmap: document.getElementById("showSatmap"),
  showDistanceRings: document.getElementById("showDistanceRings"),
  showMinimap: document.getElementById("showMinimap"),
  distanceFilter: document.getElementById("distanceFilter"),
  distanceValue: document.getElementById("distanceValue"),
  entityFilterList: document.getElementById("entityFilterList"),
  playersList: document.getElementById("playersList"),
  lootSearch: document.getElementById("lootSearch"),
  showLoot: document.getElementById("showLoot"),
  lootFilterList: document.getElementById("lootFilterList"),
  lootInfo: document.getElementById("lootInfo"),
  lootList: document.getElementById("lootList"),
  ordinaryLootSpread: document.getElementById("ordinaryLootSpread"),
  ordinaryLootSpreadValue: document.getElementById("ordinaryLootSpreadValue"),
  groupedLootSpread: document.getElementById("groupedLootSpread"),
  groupedLootSpreadValue: document.getElementById("groupedLootSpreadValue"),
  sameLootMergeRadius: document.getElementById("sameLootMergeRadius"),
  sameLootMergeRadiusValue: document.getElementById("sameLootMergeRadiusValue"),
  lineAnchorMode: document.getElementById("lineAnchorMode"),
  mergeSameLootLabels: document.getElementById("mergeSameLootLabels"),
  labelSettingsReset: document.getElementById("labelSettingsReset"),
  textSize: document.getElementById("textSize"),
  textSizeValue: document.getElementById("textSizeValue"),
  minimapEl: document.getElementById("minimapEl"),
  minimapImg: document.getElementById("minimapImg"),
  minimapCanvas: document.getElementById("minimapCanvas"),
  measureLayer: document.getElementById("measureLayer"),
  measureToggle: document.getElementById("measureToggle"),
  coordDisplay: document.getElementById("coordDisplay"),
  gridDisplay: document.getElementById("gridDisplay"),
  zoomDisplay: document.getElementById("zoomDisplay"),
  ctxMenu: document.getElementById("ctxMenu"),
  ctxAddWaypoint: document.getElementById("ctxAddWaypoint"),
  ctxCopyCoords: document.getElementById("ctxCopyCoords"),
  toastStack: document.getElementById("toastStack"),
  toggle3d: document.getElementById("toggle3d"),
  canvas3d: document.getElementById("canvas3d"),
};

let filtersByKey = {};
const filterKeyByKind = {
  players: "players",
  zombies: "zombies",
  animals: "animals",
  vehicles: "vehicles",
  bullets: "bullets",
  otherEntities: "otherEntities"
};
let lootFilterKeyByCategory = {};
const minMapScale = 0.02;
const maxMapScale = 1.5;
const textMeasureCanvas = document.createElement("canvas");
const textMeasureContext = textMeasureCanvas.getContext("2d");

function rebuildFilterCaches() {
  filtersByKey = Object.fromEntries(filterDefinitions.map((definition) => [definition.key, definition]));
  lootFilterKeyByCategory = Object.fromEntries(
    filterDefinitions
      .filter((definition) => definition.kind === "loot")
      .map((definition) => [definition.category, definition.key])
  );
}

function buildLootFilterDefinitions(dynamicFilters) {
  return [favoriteLootFilterDefinition]
    .concat((dynamicFilters || [])
    .filter((definition) => definition.kind === "loot")
    .sort((lhs, rhs) => Number((lhs.key || "").toLowerCase() === "isotherloot") - Number((rhs.key || "").toLowerCase() === "isotherloot"))
    .map((definition, index) => ({
      key: definition.key,
      label: definition.label || definition.key,
      visibleKey: definition.key,
      kind: "loot",
      category: definition.category || definition.key,
      color: definition.color || lootPalette[index % lootPalette.length],
      markerSize: 8,
      textSize: 14,
      showLabel: true
    })));
}

function sanitize(text) {
  return String(text ?? "")
    .replaceAll("&", "&amp;")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;");
}

function renderSafeMultilineHtml(lines) {
  return (Array.isArray(lines) ? lines : [String(lines || "")])
    .filter((line) => String(line || "").trim().length > 0)
    .map((line) => sanitize(line))
    .join("<br>");
}

function normalizeInlineText(value) {
  return String(value || "")
    .replace(/\s*\r?\n\s*/g, " ")
    .replace(/\s+/g, " ")
    .replace(/\s*-\s*/g, "-")
    .trim();
}

function getEntityLabelLines(item) {
  const baseLabel = normalizeInlineText(item?.label || "Unknown");
  const handItem = normalizeInlineText(item?.handItem || "");
  const distanceText = Number.isFinite(Number(item?.distance)) && Number(item.distance) >= 0 ? ` ${Math.round(Number(item.distance))}m` : "";
  const firstLine = item?.dead
    ? `\u{1F480}${baseLabel}${distanceText}\u{1FAA6}`
    : `${baseLabel}${distanceText}`;
  return handItem.length > 0
    ? [firstLine.trim(), `\u{1F91A}${handItem}\u{1F52B}`]
    : [firstLine.trim()];
}

function ensureFilterSettings() {
  for (const definition of filterDefinitions) {
    const current = state.settings.filterStyles[definition.key] || {};
    const currentColor = String(current.color || "").toLowerCase();
    const previousDefaultColor = previousDefaultFilterColors[definition.key];
    state.settings.filterStyles[definition.key] = {
      color: !currentColor || currentColor === previousDefaultColor ? definition.color : current.color,
      markerSize: Number(current.markerSize || definition.markerSize),
      textSize: Number(current.textSize || definition.textSize),
      showLabel: current.showLabel !== false
    };
    if (definition.key === "players") {
      const rawDirectionLength = Number(current.directionLength || definition.directionLength || 28);
      const safeDirectionLength = Number.isFinite(rawDirectionLength) ? rawDirectionLength : 28;
      state.settings.filterStyles[definition.key].directionLength = Math.min(60, Math.max(10, safeDirectionLength));
    }
    if (definition.key === "bullets") {
      const rawPhantomLifetimeMs = Number(current.phantomLifetimeMs || definition.phantomLifetimeMs || 5000);
      const rawPredictionDistance = Number(current.predictionDistance || definition.predictionDistance || 250);
      state.settings.filterStyles[definition.key].showTrajectory = current.showTrajectory !== false;
      state.settings.filterStyles[definition.key].showPrediction = current.showPrediction !== false;
      state.settings.filterStyles[definition.key].phantomLifetimeMs = Math.min(60000, Math.max(0, Number.isFinite(rawPhantomLifetimeMs) ? rawPhantomLifetimeMs : 5000));
      state.settings.filterStyles[definition.key].predictionDistance = Math.min(1000, Math.max(25, Number.isFinite(rawPredictionDistance) ? rawPredictionDistance : 250));
    }
    state.settings.filterExpanded[definition.key] = !!state.settings.filterExpanded[definition.key];
    if (typeof state.settings[definition.visibleKey] !== "boolean") {
      state.settings[definition.visibleKey] = true;
    }
  }
  if (!Array.isArray(state.settings.favoriteLootNames)) {
    state.settings.favoriteLootNames = [];
  }
  state.settings.favoriteLootNames = Array.from(new Set(state.settings.favoriteLootNames.map((value) => String(value || "").trim().toLowerCase()).filter(Boolean)));
  state.settings.ordinaryLootSpread = Math.min(4, Math.max(1, Number(state.settings.ordinaryLootSpread || defaultSettings.ordinaryLootSpread)));
  state.settings.groupedLootSpread = Math.min(4, Math.max(1, Number(state.settings.groupedLootSpread || defaultSettings.groupedLootSpread)));
  state.settings.sameLootMergeRadius = Math.min(240, Math.max(20, Number(state.settings.sameLootMergeRadius || defaultSettings.sameLootMergeRadius)));
  state.settings.lineAnchorMode = ["auto-nearest", "top-left", "top-center", "top-right", "middle-left", "middle-right", "bottom-left", "bottom-center", "bottom-right"].includes(state.settings.lineAnchorMode)
    ? state.settings.lineAnchorMode
    : defaultSettings.lineAnchorMode;
  state.settings.mergeSameLootLabels = state.settings.mergeSameLootLabels !== false;
  // v2 fields
  if (!["full", "icons", "hidden"].includes(state.settings.sidebarState)) {
    state.settings.sidebarState = "full";
  }
  if (!["tab-map", "tab-entities", "tab-loot", "tab-settings"].includes(state.settings.activeTab)) {
    state.settings.activeTab = "tab-map";
  }
  if (!["dark", "darker", "solarized"].includes(state.settings.theme)) {
    state.settings.theme = "dark";
  }
  if (typeof state.settings.showDistanceRings !== "boolean") state.settings.showDistanceRings = false;
  if (typeof state.settings.showMinimap !== "boolean") state.settings.showMinimap = false;
  if (!Array.isArray(state.settings.presets)) state.settings.presets = [null, null, null, null];
  while (state.settings.presets.length < 4) state.settings.presets.push(null);
  if (!Array.isArray(state.settings.waypoints)) state.settings.waypoints = [];
  // Assign IDs to any waypoints missing them
  let nextWpId = state.settings.waypoints.reduce((m, w) => Math.max(m, Number(w.id || 0)), 0) + 1;
  for (const wp of state.settings.waypoints) {
    if (!wp.id) wp.id = nextWpId++;
  }
}

function persistSettings() {
  localStorage.setItem(storageKey, JSON.stringify(state.settings));
}

function normalizeLootName(name) {
  return String(name || "").trim().toLowerCase();
}

function getFavoriteLootNames() {
  return new Set(state.settings.favoriteLootNames || []);
}

function isFavoriteLoot(item) {
  return !!(item && getFavoriteLootNames().has(normalizeLootName(item.label)));
}

function toggleFavoriteLoot(itemName) {
  const normalized = normalizeLootName(itemName);
  if (!normalized) return;
  const favorites = getFavoriteLootNames();
  if (favorites.has(normalized)) {
    favorites.delete(normalized);
  } else {
    favorites.add(normalized);
  }
  state.settings.favoriteLootNames = Array.from(favorites);
  persistSettings();
  state.listDirty = true;
  render();
}

function apiUrl(path) {
  const base = serverOrigin + path;
  return password ? `${base}?password=${encodeURIComponent(password)}` : base;
}

function tileUrl(tileX, tileY, retry = 0) {
  const query = new URLSearchParams({ x: String(tileX), y: String(tileY), retry: String(retry) });
  if (state.bootstrap?.mapId) query.set("mapId", state.bootstrap.mapId);
  if (password) query.set("password", password);
  return `${serverOrigin}/tile?${query.toString()}`;
}

function topoTileUrl(tileX, tileY) {
  const query = new URLSearchParams({ x: String(tileX), y: String(tileY) });
  if (state.bootstrap?.mapId) query.set("mapId", state.bootstrap.mapId);
  if (password) query.set("password", password);
  return `${serverOrigin}/topo-tile?${query.toString()}`;
}

function satTileUrl(z, tx, ty) {
  const base = state.bootstrap?.satUrl || "";
  return `${serverOrigin}${base}/${z}/${tx}/${ty}.webp`;
}

function satZoomForScale() {
  const { mapSize, satMaxZoom = 7 } = state.bootstrap;
  // Target ~300 screen pixels per tile for a good balance of sharpness vs requests.
  const z = Math.round(Math.log2(mapSize * state.scale / 300));
  return Math.max(0, Math.min(satMaxZoom, z));
}

function getViewportMetrics() {
  const rect = elements.viewport.getBoundingClientRect();
  const mapSize = Number(state.bootstrap?.mapSize || 0);
  return {
    width: Math.max(0, rect.width),
    height: Math.max(0, rect.height),
    mapSize
  };
}

function constrainViewState() {
  const metrics = getViewportMetrics();
  if (metrics.mapSize <= 0 || metrics.width <= 0 || metrics.height <= 0) return;
  const minScaleForWidth = metrics.width / metrics.mapSize;
  const minScaleForHeight = metrics.height / metrics.mapSize;
  const effectiveMinScale = Math.max(minMapScale, minScaleForWidth, minScaleForHeight);
  state.scale = Math.min(maxMapScale, Math.max(effectiveMinScale, state.scale));
  const scaledMapWidth = metrics.mapSize * state.scale;
  const scaledMapHeight = metrics.mapSize * state.scale;
  const minOffsetX = metrics.width - scaledMapWidth;
  const minOffsetY = metrics.height - scaledMapHeight;
  state.offsetX = clampNumber(state.offsetX, Math.min(minOffsetX, 0), 0);
  state.offsetY = clampNumber(state.offsetY, Math.min(minOffsetY, 0), 0);
}

function scheduleVisibleTilesUpdate() {
  if (state.tilesRafPending) return;
  state.tilesRafPending = true;
  requestAnimationFrame(() => {
    state.tilesRafPending = false;
    updateVisibleTiles();
  });
}

function applyTransform() {
  constrainViewState();
  elements.canvas.style.transform = `translate(${state.offsetX}px, ${state.offsetY}px) scale(${state.scale})`;
  elements.canvas.style.setProperty("--inv-scale", 1 / state.scale);
  elements.canvas.classList.toggle("grid-labels-visible", state.scale * MGRS_STEP >= 80);
  scheduleVisibleTilesUpdate();
  updateZoomDisplay();
  if (state.measureMode) drawMeasureLayer();
}

function applyMapMetadata(metadata, clearTiles = false) {
  if (!metadata) return false;
  const previous = state.bootstrap;
  const next = {
    ...(previous || {}),
    ...metadata,
    mapId:      metadata.mapId      || previous?.mapId      || "",
    mapName:    metadata.mapName    || previous?.mapName    || "",
    mapSize: Number(metadata.mapSize || previous?.mapSize || 0),
    tileSize: Number(metadata.tileSize || previous?.tileSize || 512),
    tileCountX: Number(metadata.tileCountX || previous?.tileCountX || 0),
    tileCountY: Number(metadata.tileCountY || previous?.tileCountY || 0)
  };
  const changed = !previous
    || previous.mapId !== next.mapId
    || previous.mapName !== next.mapName
    || previous.mapSize !== next.mapSize
    || previous.tileSize !== next.tileSize
    || previous.tileCountX !== next.tileCountX
    || previous.tileCountY !== next.tileCountY;
  state.bootstrap = next;
  elements.canvas.style.width = `${next.mapSize}px`;
  elements.canvas.style.height = `${next.mapSize}px`;
  elements.tiles.style.width = `${next.mapSize}px`;
  elements.tiles.style.height = `${next.mapSize}px`;
  elements.topoTiles.style.width = `${next.mapSize}px`;
  elements.topoTiles.style.height = `${next.mapSize}px`;
  elements.paths.setAttribute("viewBox", `0 0 ${next.mapSize} ${next.mapSize}`);
  elements.paths.setAttribute("width", `${next.mapSize}`);
  elements.paths.setAttribute("height", `${next.mapSize}`);
  elements.itemLabels.style.width = `${next.mapSize}px`;
  elements.itemLabels.style.height = `${next.mapSize}px`;
  elements.markers.style.width = `${next.mapSize}px`;
  elements.markers.style.height = `${next.mapSize}px`;
  if (clearTiles || changed) {
    state.tileState = {};
    for (const img of state.tileElements.values()) img.remove();
    state.tileElements.clear();
    for (const img of state.topoElements.values()) img.remove();
    state.topoElements.clear();
    for (const img of state.satElements.values()) img.remove();
    state.satElements.clear();
    state.cachedGridKey = null;
    state.cachedGridNode = null;
    elements.tiles.replaceChildren();
    elements.topoTiles.replaceChildren();
  }
  applyTransform();
  return changed;
}

function centerOn(point) {
  if (!point) return;
  const rect = elements.viewport.getBoundingClientRect();
  state.offsetX = (rect.width / 2) - (point.x * state.scale);
  state.offsetY = (rect.height / 2) - (point.y * state.scale);
  applyTransform();
}

function clampNumber(value, min, max) {
  return Math.min(max, Math.max(min, value));
}

function clampScale(value) {
  const metrics = getViewportMetrics();
  if (metrics.mapSize <= 0 || metrics.width <= 0 || metrics.height <= 0) {
    return Math.min(maxMapScale, Math.max(minMapScale, value));
  }
  const minScaleForWidth = metrics.width / metrics.mapSize;
  const minScaleForHeight = metrics.height / metrics.mapSize;
  return Math.min(maxMapScale, Math.max(minMapScale, minScaleForWidth, minScaleForHeight, value));
}

function zoomAt(clientX, clientY, nextScale) {
  const rect = elements.viewport.getBoundingClientRect();
  const localPlayer = state.settings.followPlayer && state.lastSnapshot?.hasLocalPlayer && state.lastSnapshot?.localPlayer
    ? state.lastSnapshot.localPlayer
    : null;
  const originX = localPlayer
    ? ((localPlayer.x * state.scale) + state.offsetX)
    : (clientX - rect.left);
  const originY = localPlayer
    ? ((localPlayer.y * state.scale) + state.offsetY)
    : (clientY - rect.top);
  const worldX = (originX - state.offsetX) / state.scale;
  const worldY = (originY - state.offsetY) / state.scale;
  state.scale = clampScale(nextScale);
  state.offsetX = originX - (worldX * state.scale);
  state.offsetY = originY - (worldY * state.scale);
  applyTransform();
}

function screenToWorld(clientX, clientY) {
  const rect = elements.viewport.getBoundingClientRect();
  return {
    x: (clientX - rect.left - state.offsetX) / state.scale,
    y: (clientY - rect.top - state.offsetY) / state.scale,
  };
}

function updateCoordDisplay(worldX, worldY) {
  if (!state.bootstrap || state.bootstrap.mapSize <= 0) return;
  const mapSize = state.bootstrap.mapSize;
  elements.coordDisplay.textContent = `${Math.round(worldX)}, ${Math.round(mapSize - worldY)}`;
  const eastStr  = String(Math.max(0, Math.floor(worldX / 100))).padStart(3, "0");
  const northStr = String(Math.max(0, Math.floor((mapSize - worldY) / 100))).padStart(3, "0");
  elements.gridDisplay.textContent = `${eastStr} ${northStr}`;
}

function updateZoomDisplay() {
  elements.zoomDisplay.textContent = `${Math.round(state.scale * 100)}%`;
}

// ── Sidebar / tab / theme ──────────────────────────────────────────────────

function setSidebarState(newState) {
  state.settings.sidebarState = newState;
  persistSettings();
  document.body.classList.remove("sidebar-icons", "sidebar-hidden");
  if (newState === "icons") document.body.classList.add("sidebar-icons");
  else if (newState === "hidden") document.body.classList.add("sidebar-hidden");
  setTimeout(() => applyTransform(), 200);
}

function switchTab(tabId) {
  state.settings.activeTab = tabId;
  persistSettings();
  for (const btn of document.querySelectorAll(".tab-btn")) {
    btn.classList.toggle("active", btn.dataset.tab === tabId);
  }
  for (const panel of document.querySelectorAll(".tab-panel")) {
    panel.classList.toggle("active", panel.id === tabId);
  }
  state.listDirty = true;
  render();
}

function setTheme(theme) {
  state.settings.theme = theme;
  persistSettings();
  document.documentElement.setAttribute("data-theme", theme);
  for (const btn of document.querySelectorAll(".theme-btn")) {
    btn.classList.toggle("active", btn.dataset.theme === theme);
  }
}

// ── Toast system ───────────────────────────────────────────────────────────

function showToast(message, type) {
  const toasts = elements.toastStack;
  while (toasts.children.length >= 3) {
    toasts.removeChild(toasts.firstChild);
  }
  const el = document.createElement("div");
  el.className = `toast${type ? ` toast-${type}` : ""}`;
  el.textContent = message;
  toasts.appendChild(el);
  requestAnimationFrame(() => el.classList.add("show"));
  setTimeout(() => {
    el.classList.remove("show");
    el.addEventListener("transitionend", () => el.remove(), { once: true });
  }, 4000);
}

// ── Preset system ──────────────────────────────────────────────────────────

function getBuiltinPreset(index) {
  if (index === 0) {
    return { showPlayers: true, showZombies: false, showAnimals: false, showVehicles: false, showBullets: true, showLoot: false, showOtherEntities: false, showFavoriteLoot: false, isCombatMode: true, showDistanceRings: true, showPOIs: false };
  }
  if (index === 1) {
    return { showPlayers: true, showZombies: false, showAnimals: false, showVehicles: false, showBullets: false, showLoot: true, showOtherEntities: false, showFavoriteLoot: true, isCombatMode: false, showDistanceRings: false, showPOIs: true };
  }
  if (index === 2) {
    return { showPlayers: true, showZombies: true, showAnimals: true, showVehicles: true, showBullets: true, showLoot: true, showOtherEntities: true, showFavoriteLoot: true, isCombatMode: false, showDistanceRings: false, showPOIs: true };
  }
  return null;
}

function snapshotCurrentFilterState() {
  const snap = {
    showPlayers: state.settings.showPlayers,
    showZombies: state.settings.showZombies,
    showAnimals: state.settings.showAnimals,
    showVehicles: state.settings.showVehicles,
    showBullets: state.settings.showBullets,
    showLoot: state.settings.showLoot,
    showOtherEntities: state.settings.showOtherEntities,
    showFavoriteLoot: state.settings.showFavoriteLoot,
    isCombatMode: state.settings.isCombatMode,
    showDistanceRings: state.settings.showDistanceRings,
    showPOIs: state.settings.showPOIs,
  };
  for (const def of filterDefinitions.filter((d) => d.kind === "loot")) {
    if (typeof state.settings[def.visibleKey] === "boolean") {
      snap[def.visibleKey] = state.settings[def.visibleKey];
    }
  }
  return snap;
}

function applyFilterState(data) {
  if (!data) return;
  for (const [key, val] of Object.entries(data)) {
    if (key in defaultSettings) {
      state.settings[key] = val;
    }
  }
}

function loadPreset(index) {
  const preset = state.settings.presets[index] || getBuiltinPreset(index);
  if (!preset) return;
  applyFilterState(preset);
  state.settings.activePreset = index;
  persistSettings();
  updateCombatToggleUi();
  syncAllCheckboxes();
  updatePresetButtons();
  state.listDirty = true;
  render();
  const names = ["Combat", "Loot", "Full", "Custom"];
  showToast(`Preset: ${names[index] || ""}`, "");
}

function savePreset(index) {
  state.settings.presets[index] = snapshotCurrentFilterState();
  state.settings.activePreset = index;
  persistSettings();
  updatePresetButtons();
  const names = ["Combat", "Loot", "Full", "Custom"];
  showToast(`Saved: ${names[index] || ""}`, "success");
}

function updatePresetButtons() {
  for (const btn of document.querySelectorAll(".preset-btn")) {
    btn.classList.toggle("active", Number(btn.dataset.preset) === state.settings.activePreset);
  }
}

// ── Measurement tool ───────────────────────────────────────────────────────

function toggleMeasureMode(active) {
  state.measureMode = active;
  state.measurePointA = null;
  state.measurePointB = null;
  document.body.classList.toggle("measure-active", active);
  elements.measureToggle.classList.toggle("active", active);
  resizeMeasureLayer();
  if (!active) {
    const ctx = elements.measureLayer.getContext("2d");
    ctx.clearRect(0, 0, elements.measureLayer.width, elements.measureLayer.height);
  }
}

function resizeMeasureLayer() {
  const rect = elements.viewport.getBoundingClientRect();
  elements.measureLayer.width = Math.max(1, Math.round(rect.width));
  elements.measureLayer.height = Math.max(1, Math.round(rect.height));
}

function drawMeasureLayer(cursorClientX, cursorClientY) {
  resizeMeasureLayer();
  const canvas = elements.measureLayer;
  const ctx = canvas.getContext("2d");
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  if (!state.measureMode) return;

  function wsToScreen(wx, wy) {
    return { x: wx * state.scale + state.offsetX, y: wy * state.scale + state.offsetY };
  }

  if (!state.measurePointA) {
    if (cursorClientX !== undefined) {
      const rect = elements.viewport.getBoundingClientRect();
      const cx = cursorClientX - rect.left;
      const cy = cursorClientY - rect.top;
      ctx.strokeStyle = "rgba(232,160,32,0.6)";
      ctx.lineWidth = 1;
      ctx.beginPath();
      ctx.moveTo(cx - 10, cy); ctx.lineTo(cx + 10, cy);
      ctx.moveTo(cx, cy - 10); ctx.lineTo(cx, cy + 10);
      ctx.stroke();
    }
    return;
  }

  const as = wsToScreen(state.measurePointA.x, state.measurePointA.y);
  ctx.fillStyle = "#e8a020";
  ctx.beginPath();
  ctx.arc(as.x, as.y, 5, 0, Math.PI * 2);
  ctx.fill();

  let ex, ey, endWorld;
  if (state.measurePointB) {
    const bs = wsToScreen(state.measurePointB.x, state.measurePointB.y);
    ex = bs.x; ey = bs.y;
    endWorld = state.measurePointB;
  } else if (cursorClientX !== undefined) {
    const rect = elements.viewport.getBoundingClientRect();
    ex = cursorClientX - rect.left;
    ey = cursorClientY - rect.top;
    endWorld = screenToWorld(cursorClientX, cursorClientY);
  } else {
    return;
  }

  ctx.strokeStyle = "#e8a020";
  ctx.lineWidth = 2;
  ctx.setLineDash([8, 4]);
  ctx.beginPath();
  ctx.moveTo(as.x, as.y);
  ctx.lineTo(ex, ey);
  ctx.stroke();
  ctx.setLineDash([]);

  ctx.fillStyle = "#e8a020";
  ctx.beginPath();
  ctx.arc(ex, ey, 5, 0, Math.PI * 2);
  ctx.fill();

  const dist = Math.hypot(endWorld.x - state.measurePointA.x, endWorld.y - state.measurePointA.y);
  const midX = (as.x + ex) / 2;
  const midY = (as.y + ey) / 2;
  const text = `${Math.round(dist)} m`;
  ctx.font = "bold 13px Arial, sans-serif";
  const tw = ctx.measureText(text).width;
  ctx.fillStyle = "rgba(13,15,18,0.85)";
  ctx.fillRect(midX - tw / 2 - 4, midY - 10, tw + 8, 18);
  ctx.fillStyle = "#e8a020";
  ctx.fillText(text, midX - tw / 2, midY + 4);
}

// ── Context menu ───────────────────────────────────────────────────────────

function findNearestWaypoint(worldX, worldY, radius) {
  let nearest = null;
  let nearestDist = radius;
  for (const wp of (state.settings.waypoints || [])) {
    if (typeof wp.x !== "number" || typeof wp.y !== "number") continue;
    const dist = Math.hypot(wp.x - worldX, wp.y - worldY);
    if (dist < nearestDist) { nearestDist = dist; nearest = wp; }
  }
  return nearest;
}

function showContextMenu(x, y, worldX, worldY) {
  state.contextMenuWorldPos = { x: worldX, y: worldY };
  const old = document.getElementById("ctxRemoveWaypoint");
  if (old) old.remove();
  const near = findNearestWaypoint(worldX, worldY, 30 / state.scale);
  if (near) {
    const removeBtn = document.createElement("button");
    removeBtn.id = "ctxRemoveWaypoint";
    removeBtn.className = "ctx-item";
    removeBtn.textContent = `Remove${near.label ? `: ${near.label}` : " waypoint"}`;
    removeBtn.addEventListener("click", () => {
      state.settings.waypoints = state.settings.waypoints.filter((w) => w.id !== near.id);
      persistSettings();
      hideContextMenu();
      state.listDirty = true;
      render();
    });
    elements.ctxMenu.insertBefore(removeBtn, elements.ctxAddWaypoint);
  }
  elements.ctxMenu.style.left = `${x}px`;
  elements.ctxMenu.style.top = `${y}px`;
  elements.ctxMenu.classList.add("open");
}

function hideContextMenu() {
  elements.ctxMenu.classList.remove("open");
  const old = document.getElementById("ctxRemoveWaypoint");
  if (old) old.remove();
}

// ── Minimap ────────────────────────────────────────────────────────────────

function loadMinimapImage() {
  if (!state.bootstrap?.mapId) return;
  elements.minimapImg.style.display = "";
  elements.minimapImg.src = apiUrl(`/map-image?mapId=${encodeURIComponent(state.bootstrap.mapId)}`);
  elements.minimapImg.addEventListener("error", () => { elements.minimapImg.style.display = "none"; }, { once: true });
}

function updateMinimap() {
  const show = state.settings.showMinimap && !!state.bootstrap && state.bootstrap.mapSize > 0;
  elements.minimapEl.style.display = show ? "" : "none";
  if (!show) return;

  const mm = elements.minimapCanvas;
  const dpr = window.devicePixelRatio || 1;
  const CSS = 160;
  mm.width  = Math.round(CSS * dpr);
  mm.height = Math.round(CSS * dpr);
  const mapSize = state.bootstrap.mapSize;
  const mmScale = CSS / mapSize;

  const ctx = mm.getContext("2d");
  // Work in CSS pixel units so all coordinates stay in [0, 160]
  ctx.scale(dpr, dpr);
  ctx.clearRect(0, 0, CSS, CSS);

  const rect = elements.viewport.getBoundingClientRect();
  if (rect.width > 0 && rect.height > 0) {
    const minX = Math.max(0, -state.offsetX / state.scale) * mmScale;
    const minY = Math.max(0, -state.offsetY / state.scale) * mmScale;
    const maxX = Math.min(mapSize, (-state.offsetX + rect.width)  / state.scale) * mmScale;
    const maxY = Math.min(mapSize, (-state.offsetY + rect.height) / state.scale) * mmScale;
    const vw = maxX - minX;
    const vh = maxY - minY;
    ctx.fillStyle = "rgba(255,255,255,0.07)";
    ctx.fillRect(minX, minY, vw, vh);
    ctx.strokeStyle = "rgba(255,255,255,0.65)";
    ctx.lineWidth = 1 / dpr;
    ctx.strokeRect(minX + 0.5 / dpr, minY + 0.5 / dpr, vw - 1 / dpr, vh - 1 / dpr);
  }

  if (state.lastSnapshot?.hasLocalPlayer && state.lastSnapshot?.localPlayer) {
    const lp = state.lastSnapshot.localPlayer;
    const px = lp.x * mmScale;
    const py = lp.y * mmScale;
    ctx.beginPath();
    ctx.arc(px, py, 3, 0, Math.PI * 2);
    ctx.fillStyle = "#ef4444";
    ctx.fill();
    ctx.strokeStyle = "rgba(255,255,255,0.85)";
    ctx.lineWidth = 1 / dpr;
    ctx.stroke();
  }

  for (const wp of (state.settings.waypoints || [])) {
    if (typeof wp.x !== "number" || typeof wp.y !== "number") continue;
    ctx.beginPath();
    ctx.arc(wp.x * mmScale, wp.y * mmScale, 2, 0, Math.PI * 2);
    ctx.fillStyle = "#e2e8f0";
    ctx.fill();
  }
}

// ── Filter / visibility ────────────────────────────────────────────────────

function getFilterDefinition(kind, item) {
  if (kind === "loot") {
    if (isFavoriteLoot(item)) return filtersByKey.favoriteLoot || null;
    const filterKey = lootFilterKeyByCategory[item.lootCategory || "other"] || "lootOther";
    return filtersByKey[filterKey] || null;
  }
  return filtersByKey[filterKeyByKind[kind]] || null;
}

function getLootCategoryDefinition(item) {
  const filterKey = lootFilterKeyByCategory[item?.lootCategory || "other"] || "lootOther";
  return filtersByKey[filterKey] || null;
}

function getMarkerColor(kind, item) {
  const filterDefinition = getFilterDefinition(kind, item);
  const filterStyle = filterDefinition ? state.settings.filterStyles[filterDefinition.key] : null;
  return filterStyle ? filterStyle.color : (kind === "loot" && isFavoriteLoot(item) ? favoriteLootColor : "#f8fafc");
}

function isLootCategoryEnabled(category) {
  if (!category) return true;
  if (typeof state.settings[category] !== "boolean") state.settings[category] = true;
  return state.settings[category];
}

function isItemVisibleByFilters(kind, item) {
  if (!item) return false;
  if (state.settings.isCombatMode && kind !== "players" && kind !== "bullets") return false;
  if (kind === "loot" && isFavoriteLoot(item)) {
    return state.settings.showFavoriteLoot !== false;
  }
  if (state.settings.distanceFilter > 0 && item.distance > state.settings.distanceFilter) return false;
  if (kind === "loot") {
    if (!state.settings.showLoot) return false;
    if (!isLootCategoryEnabled(item.lootCategory)) return false;
    if (state.lootSearchText.length > 0) {
      if (!normalizeLootName(item.label || "").includes(state.lootSearchText)) return false;
    }
  }
  if (kind === "players" && !state.settings.showPlayers) return false;
  if (kind === "zombies" && !state.settings.showZombies) return false;
  if (kind === "animals" && !state.settings.showAnimals) return false;
  if (kind === "vehicles" && !state.settings.showVehicles) return false;
  if (kind === "bullets" && !state.settings.showBullets) return false;
  if (kind === "otherEntities" && !state.settings.showOtherEntities) return false;
  if (kind === "bullets") {
    const phantomLifetimeMs = Number(state.settings.filterStyles?.bullets?.phantomLifetimeMs || 0);
    if (item.isPhantom && phantomLifetimeMs >= 0) {
      const lastSeenAtUtcMs = Number(item.lastSeenAtUtcMs || 0);
      if (lastSeenAtUtcMs > 0 && (Date.now() - lastSeenAtUtcMs) > phantomLifetimeMs) return false;
    }
  }
  if (kind === "players" && state.lastSnapshot?.localPlayer) {
    const dx = item.x - state.lastSnapshot.localPlayer.x;
    const dy = item.y - state.lastSnapshot.localPlayer.y;
    if ((dx * dx + dy * dy) <= 9.0) return false;
  }
  return true;
}

function getVisibleCollection(kind, list) {
  return (list || []).filter((item) => isItemVisibleByFilters(kind, item));
}

// ── Label layout (PRESERVED VERBATIM) ────────────────────────────────────

function buildLabelText(item) {
  const distanceText = Number.isFinite(Number(item?.distance)) && Number(item.distance) >= 0 ? ` ${Math.round(Number(item.distance))}m` : "";
  if (item?.kind === "player") return getEntityLabelLines(item).join("\n");
  return `${String(item?.label || "Unknown")}${distanceText}`;
}

function isEntityKind(kind) { return kind !== "loot"; }

function getRenderPriority(kind, item) {
  if (isEntityKind(kind)) return 3;
  return isFavoriteLoot(item) ? 2 : 1;
}

function getLayerClass(kind, item) {
  const priority = getRenderPriority(kind, item);
  if (priority === 3) return "layer-entity";
  if (priority === 2) return "layer-favorite";
  return "layer-loot";
}

function getLabelConfig(kind, item) {
  const filterDefinition = getFilterDefinition(kind, item);
  const filterStyle = filterDefinition ? state.settings.filterStyles[filterDefinition.key] : null;
  if (kind === "bullets") {
    return { filterDefinition, filterStyle, showLabel: false, textSize: filterStyle ? filterStyle.textSize : state.settings.textSize };
  }
  const showLabel = !!(state.settings.showLabels && item.label && (!filterStyle || filterStyle.showLabel));
  return { filterDefinition, filterStyle, showLabel, textSize: filterStyle ? filterStyle.textSize : state.settings.textSize };
}

function useFixedScreenLabel(kind, itemOrGroup) {
  if (kind === "players") return true;
  if (kind === "loot") {
    if (Object.prototype.hasOwnProperty.call(itemOrGroup || {}, "priority")) return itemOrGroup?.priority === 2;
    return isFavoriteLoot(itemOrGroup);
  }
  return false;
}

function getActivePointerPair() {
  const pointers = Array.from(state.activePointers.values());
  return pointers.length >= 2 ? [pointers[0], pointers[1]] : null;
}

function getPointerDistance(first, second) {
  const dx = second.clientX - first.clientX;
  const dy = second.clientY - first.clientY;
  return Math.hypot(dx, dy);
}

function getPointerMidpoint(first, second) {
  return { clientX: (first.clientX + second.clientX) / 2, clientY: (first.clientY + second.clientY) / 2 };
}

function updateMapDrag(clientX, clientY) {
  state.offsetX += clientX - state.lastX;
  state.offsetY += clientY - state.lastY;
  state.lastX = clientX;
  state.lastY = clientY;
  applyTransform();
}

function getRectIntersectionArea(first, second) {
  const width = Math.max(0, Math.min(first.right, second.right) - Math.max(first.left, second.left));
  const height = Math.max(0, Math.min(first.bottom, second.bottom) - Math.max(first.top, second.top));
  return width * height;
}

function getPlacementPenalty(rect, occupiedRects, viewportRect) {
  let overlapArea = 0;
  for (const occupied of occupiedRects) {
    overlapArea += getRectIntersectionArea(rect, occupied);
  }
  const overflowX = Math.max(0, viewportRect.left - rect.left) + Math.max(0, rect.right - viewportRect.right);
  const overflowY = Math.max(0, viewportRect.top - rect.top) + Math.max(0, rect.bottom - viewportRect.bottom);
  return (overlapArea * 10) + ((overflowX + overflowY) * 120);
}

function estimateLabelSize(text, fontSize) {
  const safeFontSize = Math.max(10, Number(fontSize) || 14);
  const safeText = String(text || "");
  const lines = safeText.split("\n");
  const lineHeight = Math.max(1, Math.ceil(safeFontSize * 1.15));
  if (textMeasureContext) {
    textMeasureContext.font = `700 ${safeFontSize}px Arial, sans-serif`;
    let width = 1;
    let ascent = Math.ceil(safeFontSize * 0.8);
    let descent = Math.ceil(safeFontSize * 0.2);
    for (const line of lines) {
      const metrics = textMeasureContext.measureText(line || " ");
      width = Math.max(width, Math.ceil(metrics.width));
      ascent = Math.max(ascent, Math.ceil(metrics.actualBoundingBoxAscent || (safeFontSize * 0.8)));
      descent = Math.max(descent, Math.ceil(metrics.actualBoundingBoxDescent || (safeFontSize * 0.2)));
    }
    return { width: Math.max(1, width), height: Math.max(1, ascent + descent + ((lines.length - 1) * lineHeight)) };
  }
  const longestLineLength = lines.reduce((maxLength, line) => Math.max(maxLength, String(line || "").length), 0);
  return { width: Math.max(1, Math.round(longestLineLength * safeFontSize * 0.52)), height: Math.max(1, Math.round(safeFontSize + ((lines.length - 1) * lineHeight))) };
}

function getScaledLabelLayoutSize(kind, itemOrGroup, text, fontSize) {
  const size = estimateLabelSize(text, fontSize);
  if (!useFixedScreenLabel(kind, itemOrGroup)) return size;
  const effectiveScale = Math.max(minMapScale, Number(state.scale) || 1);
  return { width: size.width / effectiveScale, height: size.height / effectiveScale };
}

function buildPinnedLabelCandidates(entry, size) {
  const markerSize = entry.label.filterStyle ? entry.label.filterStyle.markerSize : (entry.kind === "vehicles" ? 14 : 12);
  const radius = Math.max(6, markerSize * 0.7);
  const gap = Math.max(2, Math.round(markerSize * 0.2));
  const sideCandidates = {
    "middle-right": { left: radius + gap, top: -Math.round(size.height / 2), distance: gap },
    "middle-left": { left: -(size.width + radius + gap), top: -Math.round(size.height / 2), distance: gap },
    "top-center": { left: -Math.round(size.width / 2), top: -(size.height + radius + gap), distance: gap },
    "bottom-center": { left: -Math.round(size.width / 2), top: radius + gap, distance: gap }
  };
  return [sideCandidates["middle-left"], sideCandidates["middle-right"], sideCandidates["top-center"], sideCandidates["bottom-center"]];
}

function buildScreenRect(screenX, screenY, candidate, size, scale) {
  return {
    left: screenX + (candidate.left * scale),
    top: screenY + (candidate.top * scale),
    right: screenX + ((candidate.left + size.width) * scale),
    bottom: screenY + ((candidate.top + size.height) * scale)
  };
}

function isPointOutsideViewport(screenX, screenY, viewportRect) {
  return screenX < viewportRect.left || screenX > viewportRect.right || screenY < viewportRect.top || screenY > viewportRect.bottom;
}

function getBlockedViewportRects() {
  return [];
}

function buildViewportEdgeCandidates(screenX, screenY, size, viewportRect) {
  const padding = 10;
  const labelScreenWidth = size.width * state.scale;
  const labelScreenHeight = size.height * state.scale;
  const availableLeft = viewportRect.left + padding;
  const availableTop = viewportRect.top + padding;
  const availableRight = viewportRect.right - labelScreenWidth - padding;
  const availableBottom = viewportRect.bottom - labelScreenHeight - padding;
  const overflowLeft = screenX < viewportRect.left ? viewportRect.left - screenX : Number.POSITIVE_INFINITY;
  const overflowRight = screenX > viewportRect.right ? screenX - viewportRect.right : Number.POSITIVE_INFINITY;
  const overflowTop = screenY < viewportRect.top ? viewportRect.top - screenY : Number.POSITIVE_INFINITY;
  const overflowBottom = screenY > viewportRect.bottom ? screenY - viewportRect.bottom : Number.POSITIVE_INFINITY;
  const edgeCandidates = [
    { edge: "left", overflow: overflowLeft, left: availableLeft, top: clampNumber(screenY - (labelScreenHeight / 2), Math.min(availableTop, availableBottom), Math.max(availableTop, availableBottom)) },
    { edge: "right", overflow: overflowRight, left: availableRight, top: clampNumber(screenY - (labelScreenHeight / 2), Math.min(availableTop, availableBottom), Math.max(availableTop, availableBottom)) },
    { edge: "top", overflow: overflowTop, left: clampNumber(screenX - (labelScreenWidth / 2), Math.min(availableLeft, availableRight), Math.max(availableLeft, availableRight)), top: availableTop },
    { edge: "bottom", overflow: overflowBottom, left: clampNumber(screenX - (labelScreenWidth / 2), Math.min(availableLeft, availableRight), Math.max(availableLeft, availableRight)), top: availableBottom }
  ];
  return edgeCandidates
    .sort((lhs, rhs) => lhs.overflow - rhs.overflow)
    .map((candidate) => ({
      left: (candidate.left - screenX) / state.scale,
      top: (candidate.top - screenY) / state.scale,
      anchorX: 0,
      anchorY: 0,
      distance: Number.isFinite(candidate.overflow) ? candidate.overflow : 100000
    }));
}

function normalizeGroupLootLabel(label) {
  return String(label || "").trim().toLowerCase();
}

function getLootGroupingKey(item) {
  return `${normalizeGroupLootLabel(item?.label)}:${String(item?.lootCategory || "other").trim().toLowerCase()}`;
}

function canUsePriorityGrouping(entry) {
  return getRenderPriority(entry.kind, entry.item) >= 2 && entry.kind !== "players";
}

function buildPriorityLabelGroups(entries) {
  const groups = [];
  const groupableEntries = entries
    .filter((entry) => canUsePriorityGrouping(entry) && entry.label.showLabel)
    .map((entry) => ({
      entry,
      key: `${entry.kind}:${getRenderPriority(entry.kind, entry.item)}:${entry.kind === "loot" ? getLootGroupingKey(entry.item) : normalizeGroupLootLabel(entry.item.label)}`,
      screenX: (entry.item.x * state.scale) + state.offsetX,
      screenY: (entry.item.y * state.scale) + state.offsetY
    }))
    .sort((lhs, rhs) => {
      const byKey = lhs.key.localeCompare(rhs.key);
      if (byKey !== 0) return byKey;
      if (lhs.screenY !== rhs.screenY) return lhs.screenY - rhs.screenY;
      return lhs.screenX - rhs.screenX;
    });

  const clusterDistance = Math.max(24, Math.round(Number(state.settings.sameLootMergeRadius || defaultSettings.sameLootMergeRadius) * 0.55));

  for (const candidate of groupableEntries) {
    let bestGroup = null;
    let bestDistance = Number.POSITIVE_INFINITY;
    for (const group of groups) {
      if (group.key !== candidate.key) continue;
      const dx = candidate.screenX - group.screenX;
      const dy = candidate.screenY - group.screenY;
      const distance = Math.hypot(dx, dy);
      if (distance <= clusterDistance && distance < bestDistance) { bestDistance = distance; bestGroup = group; }
    }
    if (!bestGroup) {
      groups.push({
        key: candidate.key,
        kind: candidate.entry.kind,
        priority: getRenderPriority(candidate.entry.kind, candidate.entry.item),
        entries: [candidate.entry],
        label: candidate.entry.label,
        markerColor: candidate.entry.markerColor,
        baseText: String(candidate.entry.item.label || "Unknown"),
        anchorX: candidate.entry.item.x,
        anchorY: candidate.entry.item.y,
        screenX: candidate.screenX,
        screenY: candidate.screenY,
        labelText: String(candidate.entry.item.label || "Unknown"),
        labelPlacement: null
      });
      continue;
    }
    bestGroup.entries.push(candidate.entry);
    const count = bestGroup.entries.length;
    bestGroup.anchorX = ((bestGroup.anchorX * (count - 1)) + candidate.entry.item.x) / count;
    bestGroup.anchorY = ((bestGroup.anchorY * (count - 1)) + candidate.entry.item.y) / count;
    bestGroup.screenX = ((bestGroup.screenX * (count - 1)) + candidate.screenX) / count;
    bestGroup.screenY = ((bestGroup.screenY * (count - 1)) + candidate.screenY) / count;
  }

  for (const group of groups) {
    let maxWorldRadius = 0;
    for (const entry of group.entries) {
      const worldDx = entry.item.x - group.anchorX;
      const worldDy = entry.item.y - group.anchorY;
      maxWorldRadius = Math.max(maxWorldRadius, Math.hypot(worldDx, worldDy));
    }
    group.clusterRadiusWorld = maxWorldRadius;
    group.labelText = group.entries.length > 1 ? `${group.baseText} x${group.entries.length}` : group.baseText;
  }

  return {
    groups: groups.filter((group) => group.entries.length > 1),
    groupedEntries: new Set(groups.filter((group) => group.entries.length > 1).flatMap((group) => group.entries))
  };
}

function buildOrdinaryLootLabelGroups(entries) {
  if (!state.settings.mergeSameLootLabels) {
    return entries
      .filter((entry) => getRenderPriority(entry.kind, entry.item) === 1 && entry.label.showLabel)
      .map((entry) => ({
        labelKey: getLootGroupingKey(entry.item),
        entries: [entry],
        label: entry.label,
        markerColor: entry.markerColor,
        baseText: String(entry.item.label || "Unknown"),
        anchorX: entry.item.x,
        anchorY: entry.item.y,
        screenX: (entry.item.x * state.scale) + state.offsetX,
        screenY: (entry.item.y * state.scale) + state.offsetY,
        clusterRadiusScreen: 0,
        clusterRadiusWorld: 0,
        labelText: String(entry.item.label || "Unknown"),
        labelPlacement: null
      }));
  }

  const groups = [];
  const groupableEntries = entries
    .filter((entry) => getRenderPriority(entry.kind, entry.item) === 1 && entry.label.showLabel)
    .map((entry) => ({
      entry,
      labelKey: getLootGroupingKey(entry.item),
      screenX: (entry.item.x * state.scale) + state.offsetX,
      screenY: (entry.item.y * state.scale) + state.offsetY
    }))
    .sort((lhs, rhs) => {
      const byLabel = lhs.labelKey.localeCompare(rhs.labelKey);
      if (byLabel !== 0) return byLabel;
      if (lhs.screenY !== rhs.screenY) return lhs.screenY - rhs.screenY;
      return lhs.screenX - rhs.screenX;
    });

  const clusterDistance = Number(state.settings.sameLootMergeRadius || defaultSettings.sameLootMergeRadius);

  for (const candidate of groupableEntries) {
    let bestGroup = null;
    let bestDistance = Number.POSITIVE_INFINITY;
    for (const group of groups) {
      if (group.labelKey !== candidate.labelKey) continue;
      const dx = candidate.screenX - group.screenX;
      const dy = candidate.screenY - group.screenY;
      const distance = Math.hypot(dx, dy);
      if (distance <= clusterDistance && distance < bestDistance) { bestDistance = distance; bestGroup = group; }
    }
    if (!bestGroup) {
      groups.push({
        labelKey: candidate.labelKey,
        entries: [candidate.entry],
        label: candidate.entry.label,
        markerColor: candidate.entry.markerColor,
        baseText: String(candidate.entry.item.label || "Unknown"),
        anchorX: candidate.entry.item.x,
        anchorY: candidate.entry.item.y,
        screenX: candidate.screenX,
        screenY: candidate.screenY
      });
      continue;
    }
    bestGroup.entries.push(candidate.entry);
    const count = bestGroup.entries.length;
    bestGroup.anchorX = ((bestGroup.anchorX * (count - 1)) + candidate.entry.item.x) / count;
    bestGroup.anchorY = ((bestGroup.anchorY * (count - 1)) + candidate.entry.item.y) / count;
    bestGroup.screenX = ((bestGroup.screenX * (count - 1)) + candidate.screenX) / count;
    bestGroup.screenY = ((bestGroup.screenY * (count - 1)) + candidate.screenY) / count;
  }

  for (const group of groups) {
    let maxScreenRadius = 0;
    let maxWorldRadius = 0;
    for (const entry of group.entries) {
      const screenDx = ((entry.item.x * state.scale) + state.offsetX) - group.screenX;
      const screenDy = ((entry.item.y * state.scale) + state.offsetY) - group.screenY;
      maxScreenRadius = Math.max(maxScreenRadius, Math.hypot(screenDx, screenDy));
      const worldDx = entry.item.x - group.anchorX;
      const worldDy = entry.item.y - group.anchorY;
      maxWorldRadius = Math.max(maxWorldRadius, Math.hypot(worldDx, worldDy));
    }
    group.clusterRadiusScreen = maxScreenRadius;
    group.clusterRadiusWorld = maxWorldRadius;
    group.labelText = group.entries.length > 1 ? `${group.baseText} x${group.entries.length}` : group.baseText;
    group.labelPlacement = null;
  }

  return groups;
}

function buildOrdinaryGroupLabelCandidates(group, size) {
  const spreadMultiplier = Number(state.settings.ordinaryLootSpread || 1) * Number(state.settings.groupedLootSpread || 1);
  const radius = Math.max(8, group.clusterRadiusWorld + 8);
  const primaryGap = Math.round(14 * spreadMultiplier);
  const secondaryGap = Math.round(26 * spreadMultiplier);
  return [
    { left: radius + primaryGap, top: 2, anchorX: 2, anchorY: 0, distance: primaryGap },
    { left: radius + primaryGap, top: -size.height - 2, anchorX: 2, anchorY: size.height, distance: primaryGap },
    { left: -(size.width + radius + primaryGap), top: 2, anchorX: size.width - 2, anchorY: 0, distance: primaryGap },
    { left: -(size.width + radius + primaryGap), top: -size.height - 2, anchorX: size.width - 2, anchorY: size.height, distance: primaryGap },
    { left: radius + secondaryGap, top: secondaryGap, anchorX: 2, anchorY: 0, distance: secondaryGap + 6 },
    { left: radius + secondaryGap, top: -(size.height + secondaryGap), anchorX: 2, anchorY: size.height, distance: secondaryGap + 6 },
    { left: -(size.width + radius + secondaryGap), top: secondaryGap, anchorX: size.width - 2, anchorY: 0, distance: secondaryGap + 6 },
    { left: -(size.width + radius + secondaryGap), top: -(size.height + secondaryGap), anchorX: size.width - 2, anchorY: size.height, distance: secondaryGap + 6 }
  ];
}

function getLabelAnchorPoints(labelPlacement, labelSize) {
  const width = labelSize.width;
  const height = labelSize.height;
  const left = labelPlacement.left;
  const top = labelPlacement.top;
  const middleX = left + (width / 2);
  const middleY = top + (height / 2);
  const right = left + width;
  const bottom = top + height;
  return {
    "top-left": { x: left, y: top },
    "top-center": { x: middleX, y: top },
    "top-right": { x: right, y: top },
    "middle-left": { x: left, y: middleY },
    "middle-right": { x: right, y: middleY },
    "bottom-left": { x: left, y: bottom },
    "bottom-center": { x: middleX, y: bottom },
    "bottom-right": { x: right, y: bottom }
  };
}

function getLabelLineTarget(labelPlacement, labelSize, sourceX = 0, sourceY = 0) {
  const anchorPoints = getLabelAnchorPoints(labelPlacement, labelSize);
  if (state.settings.lineAnchorMode !== "auto-nearest") {
    return anchorPoints[state.settings.lineAnchorMode] || anchorPoints[defaultSettings.lineAnchorMode];
  }
  let bestPoint = anchorPoints["bottom-center"];
  let bestDistance = Number.POSITIVE_INFINITY;
  for (const point of Object.values(anchorPoints)) {
    const dx = point.x - sourceX;
    const dy = point.y - sourceY;
    const distance = (dx * dx) + (dy * dy);
    if (distance < bestDistance) { bestDistance = distance; bestPoint = point; }
  }
  return bestPoint;
}

function computeLabelPlacements(entries) {
  const viewportRect = { left: 0, top: 0, right: elements.viewport.clientWidth, bottom: elements.viewport.clientHeight };
  const occupiedRects = [...getBlockedViewportRects()];
  const priorityGrouping = buildPriorityLabelGroups(entries);

  for (const entry of entries) entry.labelPlacement = null;

  for (const entry of entries) {
    if (!entry.label.showLabel) continue;
    const priority = getRenderPriority(entry.kind, entry.item);
    const nearAnchor = priority >= 2;
    const size = getScaledLabelLayoutSize(entry.kind, entry.item, entry.labelText, entry.label.textSize);
    const screenX = (entry.item.x * state.scale) + state.offsetX;
    const screenY = (entry.item.y * state.scale) + state.offsetY;
    const useViewportEdgePlacement = entry.kind === "players" && isPointOutsideViewport(screenX, screenY, viewportRect);
    if (!nearAnchor) continue;
    if (priorityGrouping.groupedEntries.has(entry)) continue;
    const candidates = useViewportEdgePlacement
      ? buildViewportEdgeCandidates(screenX, screenY, size, viewportRect)
      : buildPinnedLabelCandidates(entry, size);
    let bestPlacement = null;
    let bestScore = Number.POSITIVE_INFINITY;
    for (const candidate of candidates) {
      const rect = buildScreenRect(screenX, screenY, candidate, size, state.scale);
      const penalty = getPlacementPenalty(rect, occupiedRects, viewportRect);
      const score = penalty + (candidate.distance * (nearAnchor ? 16 : 8));
      if (score < bestScore) { bestScore = score; bestPlacement = { ...candidate, rect }; }
    }
    if (!bestPlacement) { entry.labelPlacement = null; continue; }
    if (!nearAnchor && bestScore > 1400) { entry.labelPlacement = null; continue; }
    occupiedRects.push(bestPlacement.rect);
    entry.labelPlacement = { left: bestPlacement.left, top: bestPlacement.top, anchorX: bestPlacement.anchorX, anchorY: bestPlacement.anchorY };
  }

  for (const group of priorityGrouping.groups) {
    const size = getScaledLabelLayoutSize(group.kind, group, group.labelText, group.label.textSize);
    const groupEntry = group.entries[0];
    const candidates = buildPinnedLabelCandidates(groupEntry, size);
    let bestPlacement = null;
    let bestScore = Number.POSITIVE_INFINITY;
    for (const candidate of candidates) {
      const rect = buildScreenRect(group.screenX, group.screenY, candidate, size, state.scale);
      const penalty = getPlacementPenalty(rect, occupiedRects, viewportRect);
      const score = penalty + (candidate.distance * 20);
      if (score < bestScore) { bestScore = score; bestPlacement = { ...candidate, rect }; }
    }
    if (!bestPlacement) { group.labelPlacement = null; continue; }
    occupiedRects.push(bestPlacement.rect);
    group.labelPlacement = { left: bestPlacement.left, top: bestPlacement.top, anchorX: bestPlacement.anchorX, anchorY: bestPlacement.anchorY };
  }

  const groups = buildOrdinaryLootLabelGroups(entries);
  for (const group of groups) {
    const size = estimateLabelSize(group.labelText, group.label.textSize);
    const candidates = buildOrdinaryGroupLabelCandidates(group, size);
    let bestPlacement = null;
    let bestScore = Number.POSITIVE_INFINITY;
    for (const candidate of candidates) {
      const rect = buildScreenRect(group.screenX, group.screenY, candidate, size, state.scale);
      const penalty = getPlacementPenalty(rect, occupiedRects, viewportRect);
      const score = penalty + (candidate.distance * 8);
      if (score < bestScore) { bestScore = score; bestPlacement = { ...candidate, rect }; }
    }
    if (!bestPlacement) { group.labelPlacement = null; continue; }
    occupiedRects.push(bestPlacement.rect);
    group.labelPlacement = { left: bestPlacement.left, top: bestPlacement.top, anchorX: bestPlacement.anchorX, anchorY: bestPlacement.anchorY };
  }

  return { ordinaryGroups: groups, priorityGroups: priorityGrouping.groups };
}

// ── Filter card rendering ──────────────────────────────────────────────────

function renderFilterCards() {
  const buildEntityCard = (definition) => {
    const style = state.settings.filterStyles[definition.key];
    const visible = !!state.settings[definition.visibleKey];
    const expanded = !!state.settings.filterExpanded[definition.key];

    const directionControl = definition.key === "players" ? `
      <label class="mini-control">
        <span>View line</span>
        <input class="range-direction" type="range" min="10" max="60" step="1" value="${style.directionLength || 28}">
        <strong class="value-direction">${style.directionLength || 28}px</strong>
      </label>` : "";
    const bulletControls = definition.key === "bullets" ? `
      <label class="mini-toggle bullet-toggle-trajectory">
        <input type="checkbox" ${style.showTrajectory !== false ? "checked" : ""}>
        <span>Show trajectory</span>
      </label>
      <label class="mini-toggle bullet-toggle-prediction">
        <input type="checkbox" ${style.showPrediction !== false ? "checked" : ""}>
        <span>Show prediction</span>
      </label>
      <label class="mini-control">
        <span>Phantom</span>
        <input class="range-phantom" type="range" min="0" max="60000" step="250" value="${style.phantomLifetimeMs || 5000}">
        <strong class="value-phantom">${style.phantomLifetimeMs || 5000}ms</strong>
      </label>
      <label class="mini-control">
        <span>Prediction</span>
        <input class="range-prediction" type="range" min="25" max="1000" step="25" value="${style.predictionDistance || 250}">
        <strong class="value-prediction">${style.predictionDistance || 250}m</strong>
      </label>` : "";
    const textSizeControl = definition.key !== "bullets" ? `
      <label class="mini-control">
        <span>Text size</span>
        <input class="range-text" type="range" min="10" max="24" step="1" value="${style.textSize}">
        <strong class="value-text">${style.textSize}px</strong>
      </label>` : "";
    const showLabelControl = definition.key !== "bullets" ? `
      <label class="mini-toggle toggle-show-label">
        <input type="checkbox" ${style.showLabel ? "checked" : ""}>
        <span>Show label</span>
      </label>` : "";

    const card = document.createElement("section");
    card.className = `filter-card${expanded ? " expanded" : ""}`;
    card.innerHTML = `
      <div class="filter-row">
        <input type="checkbox" ${visible ? "checked" : ""}>
        <span class="filter-swatch" style="background:${style.color}"></span>
        <span class="filter-name">${definition.label}</span>
        <span class="filter-count" data-count-key="${definition.key}">–</span>
        <button class="filter-gear" type="button" aria-label="Configure ${definition.label}">⚙</button>
      </div>
      <div class="filter-extra">
        <label class="mini-control">
          <span>Color</span>
          <input type="color" value="${style.color}">
        </label>
        <label class="mini-control">
          <span>Marker size</span>
          <input class="range-marker" type="range" min="4" max="26" step="1" value="${style.markerSize}">
          <strong class="value-marker">${style.markerSize}px</strong>
        </label>
        ${textSizeControl}
        ${directionControl}
        ${bulletControls}
        ${showLabelControl}
      </div>`;

    const visibleInput = card.querySelector(".filter-row input[type='checkbox']");
    const gearButton = card.querySelector(".filter-gear");
    const colorInput = card.querySelector('input[type="color"]');
    const markerRange = card.querySelector(".range-marker");
    const textRange = card.querySelector(".range-text");
    const labelInput = card.querySelector(".toggle-show-label input");
    const markerValue = card.querySelector(".value-marker");
    const textValue = card.querySelector(".value-text");
    const directionRange = card.querySelector(".range-direction");
    const directionValue = card.querySelector(".value-direction");
    const swatch = card.querySelector(".filter-swatch");
    const trajectoryInput = card.querySelector(".bullet-toggle-trajectory input");
    const predictionInput = card.querySelector(".bullet-toggle-prediction input");
    const phantomRange = card.querySelector(".range-phantom");
    const phantomValue = card.querySelector(".value-phantom");
    const predictionRange = card.querySelector(".range-prediction");
    const predictionValue = card.querySelector(".value-prediction");

    visibleInput.addEventListener("change", () => {
      state.settings[definition.visibleKey] = visibleInput.checked;
      state.settings.activePreset = null;
      updatePresetButtons();
      updateCountBadges();
      persistSettings();
      state.listDirty = true;
      render();
    });
    gearButton.addEventListener("click", () => {
      state.settings.filterExpanded[definition.key] = !state.settings.filterExpanded[definition.key];
      persistSettings();
      renderFilterCards();
    });
    colorInput.addEventListener("input", () => {
      state.settings.filterStyles[definition.key].color = colorInput.value;
      if (swatch) swatch.style.background = colorInput.value;
      persistSettings();
      render();
    });
    markerRange.addEventListener("input", () => {
      state.settings.filterStyles[definition.key].markerSize = Number(markerRange.value);
      markerValue.textContent = `${markerRange.value}px`;
      persistSettings();
      render();
    });
    if (textRange && textValue) {
      textRange.addEventListener("input", () => {
        state.settings.filterStyles[definition.key].textSize = Number(textRange.value);
        textValue.textContent = `${textRange.value}px`;
        persistSettings();
        render();
      });
    }
    if (labelInput) {
      labelInput.addEventListener("change", () => {
        state.settings.filterStyles[definition.key].showLabel = labelInput.checked;
        persistSettings();
        render();
      });
    }
    if (directionRange && directionValue) {
      directionRange.addEventListener("input", () => {
        state.settings.filterStyles[definition.key].directionLength = Number(directionRange.value);
        directionValue.textContent = `${directionRange.value}px`;
        persistSettings();
        render();
      });
    }
    if (trajectoryInput) {
      trajectoryInput.addEventListener("change", () => {
        state.settings.filterStyles[definition.key].showTrajectory = trajectoryInput.checked;
        persistSettings();
        render();
      });
    }
    if (predictionInput) {
      predictionInput.addEventListener("change", () => {
        state.settings.filterStyles[definition.key].showPrediction = predictionInput.checked;
        syncBulletVisuals(state.lastSnapshot?.bullets || []);
        ensureBulletAnimation();
        persistSettings();
        render();
      });
    }
    if (phantomRange && phantomValue) {
      phantomRange.addEventListener("input", () => {
        state.settings.filterStyles[definition.key].phantomLifetimeMs = Number(phantomRange.value);
        phantomValue.textContent = `${phantomRange.value}ms`;
        persistSettings();
        render();
      });
    }
    if (predictionRange && predictionValue) {
      predictionRange.addEventListener("input", () => {
        state.settings.filterStyles[definition.key].predictionDistance = Number(predictionRange.value);
        predictionValue.textContent = `${predictionRange.value}m`;
        syncBulletVisuals(state.lastSnapshot?.bullets || []);
        ensureBulletAnimation();
        persistSettings();
        render();
      });
    }
    return card;
  };

  const buildLootCard = (definition) => {
    const style = state.settings.filterStyles[definition.key];
    const visible = !!state.settings[definition.visibleKey];
    const card = document.createElement("section");
    card.className = "filter-card";
    card.innerHTML = `
      <div class="filter-row">
        <input type="checkbox" ${visible ? "checked" : ""}>
        <span class="filter-swatch" style="background:${style.color}; cursor:pointer"></span>
        <span class="filter-name">${definition.label}</span>
        <span class="filter-count" data-count-key="${definition.key}">–</span>
      </div>`;

    const visibleInput = card.querySelector("input[type='checkbox']");
    const swatch = card.querySelector(".filter-swatch");
    visibleInput.addEventListener("change", () => {
      state.settings[definition.visibleKey] = visibleInput.checked;
      persistSettings();
      state.listDirty = true;
      render();
    });
    // Clicking the swatch opens a native color picker
    swatch.addEventListener("click", () => {
      const picker = document.createElement("input");
      picker.type = "color";
      picker.value = style.color;
      picker.style.position = "fixed";
      picker.style.opacity = "0";
      picker.style.pointerEvents = "none";
      document.body.appendChild(picker);
      picker.addEventListener("input", () => {
        state.settings.filterStyles[definition.key].color = picker.value;
        swatch.style.background = picker.value;
        persistSettings();
        render();
      });
      picker.addEventListener("change", () => picker.remove());
      picker.click();
    });
    return card;
  };

  elements.entityFilterList.replaceChildren(...filterDefinitions.filter((d) => d.kind !== "loot").map(buildEntityCard));
  elements.lootFilterList.replaceChildren(...filterDefinitions.filter((d) => d.kind === "loot").map(buildLootCard));
}

// ── Player / loot list rendering ───────────────────────────────────────────

function renderPlayersList() {
  if (!state.lastSnapshot) {
    elements.playersList.innerHTML = '<div class="players-empty">No players</div>';
    return;
  }

  const players = Array.isArray(state.lastSnapshot.playerList) ? state.lastSnapshot.playerList.slice() : [];
  const visibleOnMapByFilters = (player) => {
    if (!player.visibleOnMap) return false;
    if (!state.settings.showPlayers) return false;
    if (state.settings.distanceFilter > 0 && player.distance >= 0 && player.distance > state.settings.distanceFilter) return false;
    return true;
  };

  const sortVisiblePlayers = (lhs, rhs) => {
    if ((lhs.distance || 0) !== (rhs.distance || 0)) return (lhs.distance || 0) - (rhs.distance || 0);
    return String(lhs.steamId || "").localeCompare(String(rhs.steamId || ""));
  };
  const sortHiddenPlayers = (lhs, rhs) => {
    const byLabel = String(lhs.label || "").localeCompare(String(rhs.label || ""), undefined, { sensitivity: "base" });
    if (byLabel !== 0) return byLabel;
    return String(lhs.steamId || "").localeCompare(String(rhs.steamId || ""));
  };

  const getThreatColor = (player) => {
    if (!player.visibleOnMap || player.distance < 0) return "#94a3b8";
    if (player.distance < 200) return "#ef4444";
    if (player.distance < 500) return "#f97316";
    return "#22c55e";
  };

  const renderPlayerRow = (player) => {
    const nameColor = getThreatColor(player);
    const steamId = player.steamId && String(player.steamId).trim().length > 0 ? String(player.steamId) : "unknown";
    const steamUrl = steamId !== "unknown" ? `https://steamcommunity.com/profiles/${encodeURIComponent(steamId)}` : "";
    const distText = player.visibleOnMap && player.distance >= 0 ? `${Math.round(player.distance)}m` : "–";
    return `
      <div class="players-row">
        <div class="players-name" style="color:${nameColor}">${renderSafeMultilineHtml(getEntityLabelLines(player))}</div>
        <div class="players-detail">
          <span>${distText}</span>
          <span class="players-steam">${steamUrl ? `<a href="${steamUrl}" target="_blank" rel="noopener noreferrer">${sanitize(steamId)}</a>` : sanitize(steamId)}</span>
        </div>
      </div>`;
  };

  const visibleRows = players.filter(visibleOnMapByFilters).sort(sortVisiblePlayers).map(renderPlayerRow).join("");
  const hiddenRows = players.filter((p) => !visibleOnMapByFilters(p)).sort(sortHiddenPlayers).map(renderPlayerRow).join("");

  let rows = "";
  if (visibleRows.length > 0) {
    rows += '<div class="players-section-title">On Map</div>';
    rows += visibleRows;
  }
  if (hiddenRows.length > 0) {
    rows += `<div class="players-section-title">${rows.length > 0 ? "Off Map" : "Players"}</div>`;
    rows += hiddenRows;
  }

  elements.playersList.innerHTML = rows || '<div class="players-empty">No players</div>';
}

function renderLootList() {
  if (!state.lastSnapshot) {
    elements.lootList.innerHTML = '<div class="players-empty">No loot</div>';
    elements.lootInfo.textContent = "Loot: waiting for snapshot…";
    return;
  }

  const categoryOrder = new Map(filterDefinitions.filter((d) => d.kind === "loot").map((d, i) => [d.category || "other", i]));
  const sortLootItems = (lhs, rhs) => {
    const lhsCat = String(lhs.lootCategory || "other");
    const rhsCat = String(rhs.lootCategory || "other");
    const byCategory = (categoryOrder.get(lhsCat) ?? 999) - (categoryOrder.get(rhsCat) ?? 999);
    if (byCategory !== 0) return byCategory;
    if ((lhs.distance || 0) !== (rhs.distance || 0)) return (lhs.distance || 0) - (rhs.distance || 0);
    const byLabel = String(lhs.label || "").localeCompare(String(rhs.label || ""));
    if (byLabel !== 0) return byLabel;
    return String(lhs.id || "").localeCompare(String(rhs.id || ""));
  };

  const lootItems = getVisibleCollection("loot", state.lastSnapshot.loot || []).slice().sort(sortLootItems);
  const favoriteItems = lootItems.filter(isFavoriteLoot);
  const regularItems = lootItems.filter((item) => !isFavoriteLoot(item));

  const searchSuffix = state.lootSearchText ? ` matching "${state.lootSearchText}"` : "";
  elements.lootInfo.textContent = `${lootItems.length} item${lootItems.length === 1 ? "" : "s"}${searchSuffix}`;

  const renderRow = (item) => {
    const favorite = isFavoriteLoot(item);
    const color = getMarkerColor("loot", item);
    const categoryLabel = getLootCategoryDefinition(item)?.label || "Other";
    return `
      <button class="loot-row${favorite ? " favorite" : ""}" type="button" data-loot-name="${sanitize(item.label || "")}" style="--loot-color:${color}">
        <span class="loot-name">${sanitize(item.label || "Unknown")}</span>
        <span class="loot-distance">${Math.round(Number(item.distance || 0))}m</span>
        <span class="loot-meta">${sanitize(categoryLabel)}${favorite ? " • ★" : ""}</span>
      </button>`;
  };

  let rows = "";
  if (favoriteItems.length > 0) {
    let currentCategory = "";
    rows += '<div class="loot-section-title">Favorites</div>';
    for (const item of favoriteItems) {
      const category = String(item.lootCategory || "other");
      if (category !== currentCategory) {
        currentCategory = category;
        rows += `<div class="loot-group-title">${sanitize(getLootCategoryDefinition(item)?.label || "Other")}</div>`;
      }
      rows += renderRow(item);
    }
  }
  if (regularItems.length > 0) {
    let currentCategory = "";
    if (rows.length > 0) rows += '<div class="loot-section-title">Loot</div>';
    for (const item of regularItems) {
      const category = String(item.lootCategory || "other");
      if (category !== currentCategory) {
        currentCategory = category;
        rows += `<div class="loot-group-title">${sanitize(getLootCategoryDefinition(item)?.label || "Other")}</div>`;
      }
      rows += renderRow(item);
    }
  }
  elements.lootList.innerHTML = rows || '<div class="players-empty">No loot matches filters</div>';
}

// ── Count badges and filter counts ─────────────────────────────────────────

function updateCountBadges() {
  if (!state.lastSnapshot) return;
  const s = state.lastSnapshot;
  const counts = {
    showPlayers: (s.players || []).length,
    showZombies: (s.zombies || []).length,
    showAnimals: (s.animals || []).length,
    showVehicles: (s.vehicles || []).length,
    showBullets: (s.bullets || []).length,
    showLoot: (s.loot || []).length,
  };
  for (const badge of document.querySelectorAll(".count-badge[data-key]")) {
    const key = badge.dataset.key;
    const span = badge.querySelector("span");
    if (span && key && counts[key] !== undefined) span.textContent = String(counts[key]);
    badge.classList.toggle("disabled", !state.settings[key]);
  }
}

function updateFilterCounts() {
  if (!state.lastSnapshot) return;
  const s = state.lastSnapshot;
  const counts = {
    players: (s.players || []).length,
    zombies: (s.zombies || []).length,
    animals: (s.animals || []).length,
    vehicles: (s.vehicles || []).length,
    bullets: (s.bullets || []).length,
    otherEntities: (s.otherEntities || []).length,
    favoriteLoot: (s.loot || []).filter(isFavoriteLoot).length,
  };
  for (const item of (s.loot || [])) {
    const cat = item.lootCategory || "other";
    counts[cat] = (counts[cat] || 0) + 1;
  }
  for (const el of document.querySelectorAll(".filter-count[data-count-key]")) {
    const key = el.dataset.countKey;
    el.textContent = counts[key] !== undefined ? String(counts[key]) : "–";
  }
}

// ── Entity marker creation ─────────────────────────────────────────────────

function createMarker(entry) {
  const { kind, item, markerColor, labelText, label } = entry;
  const filterStyle = label.filterStyle;
  const markerSize = filterStyle ? filterStyle.markerSize : (kind === "vehicles" ? 14 : 12);
  const borderSize = Math.max(1, Math.round(markerSize * 0.16));
  const favorite = kind === "loot" && isFavoriteLoot(item);
  const labelPlacement = entry.labelPlacement;

  const marker = document.createElement("div");
  marker.className = `entity ${getLayerClass(kind, item)}${kind === "players" ? " player-entity" : ""}${kind === "bullets" && item.isPhantom ? " bullet-phantom" : ""}${kind === "bullets" && item.isCompleted ? " bullet-completed" : ""}`;
  marker.style.left = `${item.x}px`;
  marker.style.top = `${item.y}px`;

  const glyph = document.createElement("div");
  glyph.className = `marker ${kind}${favorite ? " favorite" : ""}`;
  glyph.style.width = `${markerSize}px`;
  glyph.style.height = `${markerSize}px`;
  glyph.style.background = markerColor;
  glyph.style.borderWidth = `${borderSize}px`;
  glyph.style.color = markerColor;

  if (kind === "players") {
    const direction = document.createElement("div");
    direction.className = "direction entity-direction";
    direction.style.transform = `translate(-50%, -100%) rotate(${180 - (item.rotation || 0)}deg)`;
    direction.style.color = markerColor;
    direction.style.height = `${Math.max(10, Number(filterStyle?.directionLength || 28))}px`;
    marker.appendChild(direction);
  }

  marker.appendChild(glyph);

  if (label.showLabel && labelPlacement && getRenderPriority(kind, item) >= 2) {
    const labelNode = document.createElement("span");
    labelNode.className = `label${favorite ? " favorite" : ""}`;
    labelNode.textContent = labelText;
    labelNode.style.fontSize = `${label.textSize}px`;
    labelNode.style.color = markerColor;
    labelNode.style.left = `${labelPlacement.left}px`;
    labelNode.style.top = `${labelPlacement.top}px`;
    if (useFixedScreenLabel(kind, item)) {
      const effectiveScale = Math.max(minMapScale, Number(state.scale) || 1);
      labelNode.style.transformOrigin = "0 0";
      labelNode.style.transform = `scale(${1 / effectiveScale})`;
    }
    marker.appendChild(labelNode);
  }

  return marker;
}

function createPriorityLabelGroup(group) {
  const labelPlacement = group.labelPlacement;
  if (!labelPlacement) return null;

  const marker = document.createElement("div");
  marker.className = `entity ${group.priority >= 3 ? "layer-entity" : "layer-favorite"}`;
  marker.style.left = `${group.anchorX}px`;
  marker.style.top = `${group.anchorY}px`;

  const labelNode = document.createElement("span");
  labelNode.className = `label${group.priority === 2 ? " favorite" : ""}`;
  labelNode.textContent = group.labelText;
  labelNode.style.fontSize = `${group.label.textSize}px`;
  labelNode.style.color = group.markerColor;
  labelNode.style.left = `${labelPlacement.left}px`;
  labelNode.style.top = `${labelPlacement.top}px`;
  if (useFixedScreenLabel(group.kind, group)) {
    const effectiveScale = Math.max(minMapScale, Number(state.scale) || 1);
    labelNode.style.transformOrigin = "0 0";
    labelNode.style.transform = `scale(${1 / effectiveScale})`;
  }
  marker.appendChild(labelNode);

  const labelSize = getScaledLabelLayoutSize(group.kind, group, group.labelText, group.label.textSize);
  for (const entry of group.entries) {
    const labelLine = document.createElement("span");
    labelLine.className = `label-line${group.priority === 2 ? " favorite" : ""}`;
    const itemDx = entry.item.x - group.anchorX;
    const itemDy = entry.item.y - group.anchorY;
    const lineTarget = getLabelLineTarget(labelPlacement, labelSize, itemDx, itemDy);
    const startX = itemDx;
    const startY = itemDy;
    const drawX = lineTarget.x - startX;
    const drawY = lineTarget.y - startY;
    const angle = Math.atan2(drawY, drawX) * (180 / Math.PI);
    const length = Math.hypot(drawX, drawY);
    labelLine.style.left = `${startX}px`;
    labelLine.style.top = `${startY}px`;
    labelLine.style.width = `${Math.max(4, length)}px`;
    labelLine.style.transform = `rotate(${angle}deg)`;
    labelLine.style.color = group.markerColor;
    marker.appendChild(labelLine);
  }

  return marker;
}

function createLootLabelGroup(group) {
  const labelPlacement = group.labelPlacement;
  if (!labelPlacement) return null;
  const labelSize = estimateLabelSize(group.labelText, group.label.textSize);

  const marker = document.createElement("div");
  marker.className = "item-label-anchor";
  marker.style.left = `${group.anchorX}px`;
  marker.style.top = `${group.anchorY}px`;

  const labelNode = document.createElement("span");
  labelNode.className = "label loot-label";
  labelNode.textContent = group.labelText;
  labelNode.style.fontSize = `${group.label.textSize}px`;
  labelNode.style.color = group.markerColor;
  labelNode.style.left = `${labelPlacement.left}px`;
  labelNode.style.top = `${labelPlacement.top}px`;
  marker.appendChild(labelNode);

  for (const entry of group.entries) {
    const labelLine = document.createElement("span");
    labelLine.className = "label-line loot-line";
    const itemDx = entry.item.x - group.anchorX;
    const itemDy = entry.item.y - group.anchorY;
    const lineTarget = getLabelLineTarget(labelPlacement, labelSize, itemDx, itemDy);
    const startX = itemDx;
    const startY = itemDy;
    const drawX = lineTarget.x - startX;
    const drawY = lineTarget.y - startY;
    const angle = Math.atan2(drawY, drawX) * (180 / Math.PI);
    const length = Math.hypot(drawX, drawY);
    labelLine.style.left = `${startX}px`;
    labelLine.style.top = `${startY}px`;
    labelLine.style.width = `${Math.max(4, length)}px`;
    labelLine.style.transform = `rotate(${angle}deg)`;
    labelLine.style.color = group.markerColor;
    marker.appendChild(labelLine);
  }

  return marker;
}

function buildRenderEntries() {
  const collections = [
    { kind: "players", items: getVisibleCollection("players", state.lastSnapshot?.players || []) },
    { kind: "vehicles", items: getVisibleCollection("vehicles", state.lastSnapshot?.vehicles || []) },
    { kind: "zombies", items: getVisibleCollection("zombies", state.lastSnapshot?.zombies || []) },
    { kind: "animals", items: getVisibleCollection("animals", state.lastSnapshot?.animals || []) },
    { kind: "bullets", items: getVisibleCollection("bullets", state.lastSnapshot?.bullets || []) },
    { kind: "otherEntities", items: getVisibleCollection("otherEntities", state.lastSnapshot?.otherEntities || []) },
    { kind: "loot", items: getVisibleCollection("loot", state.lastSnapshot?.loot || []) }
  ];
  const entries = [];
  for (const collection of collections) {
    for (const item of collection.items) {
      entries.push({
        kind: collection.kind,
        item,
        markerColor: getMarkerColor(collection.kind, item),
        labelText: buildLabelText(item),
        label: getLabelConfig(collection.kind, item)
      });
    }
  }
  entries.sort((lhs, rhs) => {
    const priorityDiff = getRenderPriority(rhs.kind, rhs.item) - getRenderPriority(lhs.kind, lhs.item);
    if (priorityDiff !== 0) return priorityDiff;
    return Number(lhs.item?.distance || 0) - Number(rhs.item?.distance || 0);
  });
  return entries;
}

// ── SVG helpers ────────────────────────────────────────────────────────────

function createSvgNode(tagName) {
  return document.createElementNS("http://www.w3.org/2000/svg", tagName);
}

function getBulletFilterStyle() {
  return state.settings.filterStyles?.bullets || {};
}

function syncBulletVisuals(bullets) {
  const now = performance.now();
  const visibleIds = new Set();
  const bulletStyle = getBulletFilterStyle();
  const predictionLimit = bulletStyle.showPrediction === false ? 0 : Number(bulletStyle.predictionDistance || 250);

  for (const bullet of bullets || []) {
    visibleIds.add(bullet.id);
    const visual = state.bulletVisuals.get(bullet.id) || { revealedDistance: 0, lastTick: now, targetDistance: 0, speed: 0 };
    visual.lastTick = now;
    visual.speed = Math.max(30, Number(bullet.predictionSpeed || 0));
    visual.targetDistance = bullet.isCompleted ? 0 : predictionLimit;
    if (visual.revealedDistance > visual.targetDistance) visual.revealedDistance = visual.targetDistance;
    state.bulletVisuals.set(bullet.id, visual);
  }

  for (const id of Array.from(state.bulletVisuals.keys())) {
    if (!visibleIds.has(id)) state.bulletVisuals.delete(id);
  }
}

function advanceBulletVisuals(now) {
  let needsFrame = false;
  let changed = false;
  for (const visual of state.bulletVisuals.values()) {
    const elapsedSeconds = Math.max(0, (now - visual.lastTick) / 1000);
    visual.lastTick = now;
    if (visual.revealedDistance < visual.targetDistance) {
      const nextDistance = Math.min(visual.targetDistance, visual.revealedDistance + (visual.speed * elapsedSeconds));
      if (nextDistance !== visual.revealedDistance) { visual.revealedDistance = nextDistance; changed = true; }
    }
    if (visual.revealedDistance + 0.5 < visual.targetDistance) needsFrame = true;
  }
  return { needsFrame, changed };
}

function ensureBulletAnimation() {
  if (state.bulletAnimationFrame) return;
  const hasPendingPrediction = Array.from(state.bulletVisuals.values()).some((v) => v.revealedDistance + 0.5 < v.targetDistance);
  if (!hasPendingPrediction) return;
  const tick = (now) => {
    state.bulletAnimationFrame = null;
    const { needsFrame, changed } = advanceBulletVisuals(now);
    if (changed) render();
    if (needsFrame) state.bulletAnimationFrame = window.requestAnimationFrame(tick);
  };
  state.bulletAnimationFrame = window.requestAnimationFrame(tick);
}

function buildClippedLine(points, maxDistance) {
  if (!Array.isArray(points) || points.length < 2 || maxDistance <= 0) return [];
  const clipped = [points[0]];
  let remaining = maxDistance;
  for (let index = 1; index < points.length; index += 1) {
    const previous = points[index - 1];
    const current = points[index];
    const dx = Number(current.x || 0) - Number(previous.x || 0);
    const dy = Number(current.y || 0) - Number(previous.y || 0);
    const segmentLength = Math.hypot(dx, dy);
    if (segmentLength <= 0) continue;
    if (remaining >= segmentLength) { clipped.push(current); remaining -= segmentLength; continue; }
    const ratio = remaining / segmentLength;
    clipped.push({ x: Number(previous.x || 0) + (dx * ratio), y: Number(previous.y || 0) + (dy * ratio) });
    break;
  }
  return clipped;
}

function buildBulletPathNodes(bullets) {
  const style = getBulletFilterStyle();
  if (style.showTrajectory === false && style.showPrediction === false) return [];
  const nodes = [];
  for (const bullet of bullets || []) {
    const color = getMarkerColor("bullets", bullet);
    if (style.showTrajectory !== false && Array.isArray(bullet.path) && bullet.path.length >= 2) {
      const actual = createSvgNode("polyline");
      actual.setAttribute("class", `bullet-path-actual${bullet.isPhantom ? " bullet-path-phantom" : ""}`);
      actual.setAttribute("stroke", color);
      actual.setAttribute("points", bullet.path.map((p) => `${p.x},${p.y}`).join(" "));
      nodes.push(actual);
    }
    if (style.showPrediction !== false && !bullet.isCompleted && Array.isArray(bullet.predictedPath) && bullet.predictedPath.length >= 2) {
      const visual = state.bulletVisuals.get(bullet.id);
      const clippedPoints = buildClippedLine(bullet.predictedPath, Number(visual?.revealedDistance || 0));
      if (clippedPoints.length >= 2) {
        const predicted = createSvgNode("polyline");
        predicted.setAttribute("class", `bullet-path-predicted${bullet.isPhantom ? " bullet-path-phantom" : ""}`);
        predicted.setAttribute("stroke", color);
        predicted.setAttribute("points", clippedPoints.map((p) => `${p.x},${p.y}`).join(" "));
        nodes.push(predicted);
      }
    }
  }
  return nodes;
}

function buildGridLayer() {
  if (!state.settings.showGrid || !state.bootstrap) return [];
  const { mapSize } = state.bootstrap;

  const gridKey = `mgrs:${mapSize}`;
  if (state.cachedGridKey === gridKey && state.cachedGridNode) {
    return [state.cachedGridNode];
  }

  const g = createSvgNode("g");
  g.setAttribute("id", "grid-layer");

  const addLine = (x1, y1, x2, y2, cls) => {
    const l = createSvgNode("line");
    l.setAttribute("x1", x1); l.setAttribute("y1", y1);
    l.setAttribute("x2", x2); l.setAttribute("y2", y2);
    l.setAttribute("class", cls);
    g.appendChild(l);
  };

  for (let wx = 0; wx <= mapSize; wx += MGRS_STEP) addLine(wx, 0, wx, mapSize, "grid-major");
  for (let py = 0; py <= mapSize; py += MGRS_STEP) addLine(0, py, mapSize, py, "grid-major");

  state.cachedGridKey = gridKey;
  state.cachedGridNode = g;
  return [g];
}

// Grid labels are HTML divs so they can use var(--inv-scale) for constant screen size.
// Visibility at low zoom is handled via the grid-labels-visible CSS class toggled in applyTransform().
function buildGridLabels() {
  if (!state.settings.showGrid || !state.bootstrap) return [];
  const { mapSize } = state.bootstrap;
  const sqCount = Math.ceil(mapSize / MGRS_STEP);
  const nodes = [];

  for (let ty = 0; ty < sqCount; ty++) {
    for (let tx = 0; tx < sqCount; tx++) {
      const wx = tx * MGRS_STEP;
      const py = ty * MGRS_STEP;

      // MGRS 6-figure: easting and northing of the NW corner (top-left on screen) in 100 m units
      const eastStr  = String(tx * 10).padStart(3, "0");
      const northStr = String(Math.max(0, Math.floor((mapSize - ty * MGRS_STEP) / 100))).padStart(3, "0");

      const el = document.createElement("div");
      el.className = "grid-label-wrapper";
      el.style.left = `${wx + 3}px`;
      el.style.top  = `${py + 3}px`;

      const inner = document.createElement("div");
      inner.className = "grid-label-inner";
      inner.style.cssText = "position:absolute;left:0;top:0;transform:scale(var(--inv-scale));transform-origin:0 0";
      inner.textContent = `${eastStr} ${northStr}`;

      el.appendChild(inner);
      nodes.push(el);
    }
  }
  return nodes;
}

function buildCombatRings(localPlayer) {
  if ((!state.settings.isCombatMode && !state.settings.showDistanceRings) || !localPlayer) return [];
  const g = createSvgNode("g");
  g.setAttribute("id", "combat-rings");
  for (const dist of [100, 200, 300, 500]) {
    const c = createSvgNode("circle");
    c.setAttribute("cx", localPlayer.x);
    c.setAttribute("cy", localPlayer.y);
    c.setAttribute("r", dist);
    c.setAttribute("class", "combat-ring");
    g.appendChild(c);
    const t = createSvgNode("text");
    t.setAttribute("x", localPlayer.x);
    t.setAttribute("y", localPlayer.y - dist - 4);
    t.setAttribute("class", "combat-ring-label");
    t.textContent = `${dist}m`;
    g.appendChild(t);
  }
  return [g];
}

// ── Tile loading (PRESERVED VERBATIM) ─────────────────────────────────────

function updateVisibleTiles() {
  if (!state.bootstrap) return;
  const rect = elements.viewport.getBoundingClientRect();
  const left   = Math.max(0, Math.floor((-state.offsetX) / state.scale));
  const top    = Math.max(0, Math.floor((-state.offsetY) / state.scale));
  const right  = Math.min(state.bootstrap.mapSize, Math.ceil((rect.width  - state.offsetX) / state.scale));
  const bottom = Math.min(state.bootstrap.mapSize, Math.ceil((rect.height - state.offsetY) / state.scale));

  const tileSize     = state.bootstrap.tileSize;
  const tileCountX   = state.bootstrap.tileCountX;
  const tileCountY   = state.bootstrap.tileCountY;
  const preloadMargin = 2;
  const keepMargin    = Math.max(tileCountX, tileCountY);
  const satKeepMargin = 4;
  const minTileX = Math.max(0, Math.floor(left   / tileSize) - preloadMargin);
  const minTileY = Math.max(0, Math.floor(top    / tileSize) - preloadMargin);
  const maxTileX = Math.min(tileCountX - 1, Math.floor(right  / tileSize) + preloadMargin);
  const maxTileY = Math.min(tileCountY - 1, Math.floor(bottom / tileSize) + preloadMargin);

  const keepMinX = Math.max(0, minTileX - keepMargin);
  const keepMinY = Math.max(0, minTileY - keepMargin);
  const keepMaxX = Math.min(tileCountX - 1, maxTileX + keepMargin);
  const keepMaxY = Math.min(tileCountY - 1, maxTileY + keepMargin);

  const satmapOn = state.settings.showSatmap;
  elements.canvas.classList.toggle("satmap-active", satmapOn);
  elements.tiles.style.display = satmapOn ? "none" : "";
  elements.topoTiles.style.display = satmapOn ? "" : "none";

  // ── Base tiles (skipped when satmap is active) ───────────────────────────
  if (!satmapOn) for (let tileY = minTileY; tileY <= maxTileY; tileY++) {
    for (let tileX = minTileX; tileX <= maxTileX; tileX++) {
      const key = `${tileX}:${tileY}`;
      if (state.tileElements.has(key)) {
        const img = state.tileElements.get(key);
        if (img.classList.contains("failed")) {
          const nextRetry = Number(img.dataset.retry || "0") + 1;
          if (nextRetry <= 4) {
            img.dataset.retry = String(nextRetry);
            img.classList.remove("failed");
            img.classList.add("loading");
            img.src = tileUrl(tileX, tileY, nextRetry);
          }
        }
        continue;
      }

      const img = document.createElement("img");
      img.className = "map-tile loading";
      img.dataset.key = key;
      img.dataset.retry = "0";
      img.draggable = false;
      img.style.cssText = `left:${tileX * tileSize}px;top:${tileY * tileSize}px;width:${tileSize + 1}px;height:${tileSize + 1}px`;

      const loadTile = (retryCount) => {
        img.dataset.retry = String(retryCount);
        img.classList.remove("failed", "loaded");
        img.classList.add("loading");
        img.src = tileUrl(tileX, tileY, retryCount);
      };

      img.addEventListener("load", () => {
        state.tileState[key] = "loaded";
        img.classList.remove("loading", "failed");
        img.classList.add("loaded");
      });

      img.addEventListener("error", () => {
        const nextRetry = Number(img.dataset.retry || "0") + 1;
        state.tileState[key] = "failed";
        img.classList.remove("loading");
        img.classList.add("failed");
        if (nextRetry <= 4) {
          window.setTimeout(() => {
            if (state.tileElements.has(key)) loadTile(nextRetry);
          }, 300 * nextRetry);
        }
      });

      loadTile(0);
      state.tileElements.set(key, img);
      elements.tiles.appendChild(img);
    }
  }

  // Evict base tiles outside keep margin; skip when satmap is active so tiles survive mode switches
  if (!satmapOn) {
    for (const [key, img] of state.tileElements) {
      const [tx, ty] = key.split(":").map(Number);
      if (tx < keepMinX || tx > keepMaxX || ty < keepMinY || ty > keepMaxY) {
        delete state.tileState[key];
        img.remove();
        state.tileElements.delete(key);
      }
    }
  }

  // ── Satmap tiles (loaded when satmap is active) ─────────────────────────
  if (satmapOn) {
    for (let tileY = minTileY; tileY <= maxTileY; tileY++) {
      for (let tileX = minTileX; tileX <= maxTileX; tileX++) {
        const key = `${tileX}:${tileY}`;
        if (state.topoElements.has(key)) continue;

        const img = document.createElement("img");
        img.className = "map-tile loaded";
        img.draggable = false;
        img.style.cssText = `left:${tileX * tileSize}px;top:${tileY * tileSize}px;width:${tileSize + 1}px;height:${tileSize + 1}px`;
        img.addEventListener("error", () => {
          img.remove();
          // keep key in state.topoElements as a "do not retry" sentinel
        });
        img.src = topoTileUrl(tileX, tileY);
        state.topoElements.set(key, img);
        elements.topoTiles.appendChild(img);
      }
    }

    // Evict satmap tiles outside keep margin
    for (const [key, img] of state.topoElements) {
      const [tx, ty] = key.split(":").map(Number);
      if (tx < keepMinX || tx > keepMaxX || ty < keepMinY || ty > keepMaxY) {
        img.remove();
        state.topoElements.delete(key);
      }
    }
  }
  // When satmap is inactive, topoTiles stays hidden (display:none set above) but tiles remain
  // in state.topoElements so mode switches are instant without reloading.

  // ── Satellite XYZ tiles ─────────────────────────────────────────────────
  const satVisible = state.settings.showSatellite && !!state.bootstrap.satUrl;
  elements.satTiles.style.display = satVisible ? "" : "none";

  if (satVisible) {
    const z = satZoomForScale();
    const n = 1 << z;
    const tileWorldSize = state.bootstrap.mapSize / n;  // world units per XYZ tile

    const satMinTX = Math.max(0, Math.floor(left   / tileWorldSize) - preloadMargin);
    const satMinTY = Math.max(0, Math.floor(top    / tileWorldSize) - preloadMargin);
    const satMaxTX = Math.min(n - 1, Math.floor(right  / tileWorldSize) + preloadMargin);
    const satMaxTY = Math.min(n - 1, Math.floor(bottom / tileWorldSize) + preloadMargin);

    const satKeepMinX = Math.max(0, satMinTX - satKeepMargin);
    const satKeepMinY = Math.max(0, satMinTY - satKeepMargin);
    const satKeepMaxX = Math.min(n - 1, satMaxTX + satKeepMargin);
    const satKeepMaxY = Math.min(n - 1, satMaxTY + satKeepMargin);

    for (let ty = satMinTY; ty <= satMaxTY; ty++) {
      for (let tx = satMinTX; tx <= satMaxTX; tx++) {
        const key = `${z}:${tx}:${ty}`;
        if (state.satElements.has(key)) continue;

        const img = document.createElement("img");
        img.className = "map-tile loaded";
        img.draggable = false;
        img.style.cssText = `left:${tx * tileWorldSize}px;top:${ty * tileWorldSize}px;width:${tileWorldSize + 1}px;height:${tileWorldSize + 1}px`;
        img.addEventListener("error", () => {
          img.remove();
          state.satElements.delete(key);
        });
        img.src = satTileUrl(z, tx, ty);
        state.satElements.set(key, img);
        elements.satTiles.appendChild(img);
      }
    }

    // Evict sat tiles at wrong zoom or outside keep margin
    for (const [key, img] of state.satElements) {
      const [kz, ktx, kty] = key.split(":").map(Number);
      if (kz !== z || ktx < satKeepMinX || ktx > satKeepMaxX || kty < satKeepMinY || kty > satKeepMaxY) {
        img.remove();
        state.satElements.delete(key);
      }
    }
  } else {
    for (const img of state.satElements.values()) img.remove();
    state.satElements.clear();
  }
}

// ── Main render ────────────────────────────────────────────────────────────

function render() {
  if (!state.lastSnapshot || !state.bootstrap) return;

  if (state.settings.followPlayer && state.lastSnapshot.hasLocalPlayer && state.lastSnapshot.localPlayer) {
    centerOn(state.lastSnapshot.localPlayer);
  }

  const markerNodes = [];
  const itemLabelNodes = [];
  const pathNodes = buildBulletPathNodes(getVisibleCollection("bullets", state.lastSnapshot?.bullets || []));

  const localPlayer = state.lastSnapshot.hasLocalPlayer ? state.lastSnapshot.localPlayer : null;
  if (localPlayer) {
    const marker = document.createElement("div");
    marker.className = "entity local-player-entity";
    marker.style.left = `${localPlayer.x}px`;
    marker.style.top = `${localPlayer.y}px`;
    const pulse = document.createElement("div");
    pulse.className = "local-player-pulse";
    const glyph = document.createElement("div");
    glyph.className = "marker local-player";
    const direction = document.createElement("div");
    direction.className = "direction entity-direction local-direction";
    direction.style.transform = `translate(-50%, -100%) rotate(${180 - (localPlayer.cameraRotation || localPlayer.rotation || 0)}deg)`;
    direction.style.height = `${Math.max(10, Number(state.settings.filterStyles?.players?.directionLength || 28))}px`;
    marker.appendChild(pulse);
    marker.appendChild(direction);
    marker.appendChild(glyph);
    markerNodes.push(marker);
  }

  const entries = buildRenderEntries();
  const labelGroups = computeLabelPlacements(entries);

  for (const entry of entries) {
    markerNodes.push(createMarker(entry));
  }

  for (const group of labelGroups.priorityGroups || []) {
    const markerNode = createPriorityLabelGroup(group);
    if (markerNode) markerNodes.push(markerNode);
  }

  for (const group of labelGroups.ordinaryGroups || []) {
    const itemLabelNode = createLootLabelGroup(group);
    if (itemLabelNode) itemLabelNodes.push(itemLabelNode);
  }

  // POIs — inner scaler keeps marker + label at constant screen size regardless of zoom.
  // Uses CSS var(--inv-scale) set by applyTransform() so updates instantly on every zoom,
  // not just on data-driven re-renders.
  if (state.settings.showPOIs) {
    for (const poi of (state.bootstrap.pois || [])) {
      const wrapper = document.createElement("div");
      wrapper.className = "entity poi-entity";
      wrapper.style.left = `${poi.x}px`;
      wrapper.style.top = `${poi.y}px`;
      const inner = document.createElement("div");
      inner.style.cssText = "position:absolute;left:0;top:0;transform:scale(var(--inv-scale));transform-origin:0 0";
      const dot = document.createElement("div");
      dot.className = `marker poi ${sanitize(poi.type || "")}`;
      inner.appendChild(dot);
      if (poi.label) {
        const lbl = document.createElement("span");
        lbl.className = "poi-label";
        lbl.textContent = poi.label;
        inner.appendChild(lbl);
      }
      wrapper.appendChild(inner);
      markerNodes.push(wrapper);
    }
  }

  // Waypoints — same approach
  for (const wp of (state.settings.waypoints || [])) {
    if (typeof wp.x !== "number" || typeof wp.y !== "number") continue;
    const wrapper = document.createElement("div");
    wrapper.className = "entity waypoint-entity";
    wrapper.style.left = `${wp.x}px`;
    wrapper.style.top = `${wp.y}px`;
    const inner = document.createElement("div");
    inner.style.cssText = "position:absolute;left:0;top:0;transform:scale(var(--inv-scale));transform-origin:0 0";
    const dot = document.createElement("div");
    dot.className = "marker waypoint";
    inner.appendChild(dot);
    if (wp.label) {
      const lbl = document.createElement("span");
      lbl.className = "waypoint-label";
      lbl.textContent = wp.label;
      inner.appendChild(lbl);
    }
    wrapper.appendChild(inner);
    markerNodes.push(wrapper);
  }

  const gridNodes = buildGridLayer();
  const gridLabelNodes = buildGridLabels();
  const combatNodes = buildCombatRings(localPlayer);

  elements.itemLabels.replaceChildren(...itemLabelNodes);
  elements.paths.replaceChildren(...pathNodes, ...gridNodes, ...combatNodes);
  elements.markers.replaceChildren(...markerNodes, ...gridLabelNodes);

  // Update side-panel lists only when dirty (avoids 60fps DOM churn during bullet animation)
  if (state.listDirty) {
    state.listDirty = false;
    renderPlayersList();
    renderLootList();
    updateCountBadges();
    updateFilterCounts();
  }

  updateMinimap();
}

// ── Network ────────────────────────────────────────────────────────────────

function stopFallbackPolling() {
  if (state.fallbackPollTimer) { window.clearInterval(state.fallbackPollTimer); state.fallbackPollTimer = null; }
}

function startFallbackPolling() {
  if (state.fallbackPollTimer) return;
  const poll = () => {
    fetch(apiUrl("/api/state"), { cache: "no-store" })
      .then((response) => {
        if (!response.ok) throw new Error(response.status === 401 ? "Unauthorized" : `HTTP ${response.status}`);
        return response.json();
      })
      .then((snapshot) => applySnapshot(snapshot))
      .catch((error) => {
        elements.status.textContent = error?.message || String(error);
        elements.connectionDot.className = "conn-dot disconnected";
      });
  };
  poll();
  state.fallbackPollTimer = window.setInterval(poll, 3000);
}

function clearReconnectTimer() {
  if (state.reconnectTimer) { window.clearTimeout(state.reconnectTimer); state.reconnectTimer = null; }
}

function scheduleReconnect() {
  if (state.reconnectTimer) return;
  state.reconnectTimer = window.setTimeout(() => {
    state.reconnectTimer = null;
    connectEvents();
  }, 3000);
}

function applySnapshot(snapshot) {
  const previousSnapshot = state.lastSnapshot;
  state.lastSnapshot = snapshot;

  const mapChanged = applyMapMetadata({
    mapId: snapshot.mapId,
    mapName: snapshot.mapName,
    serverMapName: snapshot.serverMapName,
    mapSize: snapshot.mapSize,
    tileSize: snapshot.tileSize,
    tileCountX: snapshot.tileCountX,
    tileCountY: snapshot.tileCountY
  });
  if (snapshot.mapId) clearMapNotice();
  if (mapChanged) state.initialCentered = false;

  syncBulletVisuals(snapshot?.bullets || []);
  ensureBulletAnimation();

  // Forward snapshot to 3D engine when active
  if (engine3d.active && engine3d.pushEntities) {
    try { engine3d.pushEntities(JSON.stringify(snapshot)); } catch (_) {}
  }

  // New player detection
  const prevAddresses = state.knownPlayerAddresses;
  const currentAddresses = new Set((snapshot.players || []).map((p) => p.steamId || p.address).filter(Boolean));
  if (prevAddresses.size > 0 && state.wasConnected) {
    let newCount = 0;
    for (const player of (snapshot.players || [])) {
      const id = player.steamId || player.address;
      if (id && !prevAddresses.has(id)) {
        if (newCount < 2) showToast(`New player: ${player.label || "Unknown"}`, "info");
        newCount++;
      }
    }
    if (newCount > 2) showToast(`+${newCount - 2} more players`, "info");
  }
  state.knownPlayerAddresses = currentAddresses;

  const snapshotChanged = !previousSnapshot
    || previousSnapshot.cacheRefreshSequence !== snapshot.cacheRefreshSequence
    || previousSnapshot.fastCacheRefreshSequence !== snapshot.fastCacheRefreshSequence
    || previousSnapshot.slowCacheRefreshSequence !== snapshot.slowCacheRefreshSequence
    || previousSnapshot.status !== snapshot.status
    || previousSnapshot.serverName !== snapshot.serverName
    || previousSnapshot.mapName !== snapshot.mapName
    || previousSnapshot.serverMapName !== snapshot.serverMapName
    || previousSnapshot.gameVersion !== snapshot.gameVersion
    || previousSnapshot.hasLocalPlayer !== snapshot.hasLocalPlayer
    || mapChanged;

  if (!state.initialCentered && snapshot.hasLocalPlayer && snapshot.localPlayer) {
    centerOn(snapshot.localPlayer);
    state.initialCentered = true;
  }

  const serverTitle = snapshot.serverName && snapshot.serverName.length > 0 ? snapshot.serverName : "Unavailable";
  const versionText = snapshot.gameVersion && snapshot.gameVersion.length > 0 ? snapshot.gameVersion : "n/a";
  const mapText = snapshot.serverMapName && snapshot.serverMapName.length > 0 ? snapshot.serverMapName : snapshot.mapName;

  elements.serverInfo.textContent = `${serverTitle} | ${mapText} | v${versionText}`;
  elements.serverBadge.textContent = serverTitle;

  const connected = snapshot.hasLocalPlayer;
  elements.status.textContent = connected ? `Live: ${snapshot.mapName}` : "Waiting to detect LocalPlayer…";
  elements.connectionDot.className = `conn-dot ${connected ? "connected" : "waiting"}`;

  if (!state.wasConnected) {
    showToast("Connected", "success");
    state.wasConnected = true;
  }

  if (!snapshotChanged) return;

  state.listDirty = true;
  render();
}

function showMapNotice(msg) {
  const existing = document.getElementById("map-notice");
  if (existing) existing.remove();
  const el = document.createElement("div");
  el.id = "map-notice";
  el.style.cssText = "position:fixed;top:var(--header-h);left:0;right:0;background:#b91c1c;color:#fff;padding:10px 16px;font-size:13px;z-index:9999;text-align:center;cursor:pointer";
  el.textContent = msg + "  (click to dismiss)";
  el.addEventListener("click", () => el.remove());
  document.body.prepend(el);
}

function clearMapNotice() {
  const el = document.getElementById("map-notice");
  if (el) el.remove();
}

// ── 3D engine ─────────────────────────────────────────────────────────────────

const engine3d = {
  module: null,       // WASM module instance (set after first load)
  loading: false,     // guard against concurrent loads
  active: false,      // true when 3D mode is displayed
  mapId: null,        // mapId the engine was last loaded with
  pushEntities: null, // cached ccall wrapper
  manifestUrl: null,  // populated from bootstrap response
};

async function toggle3DMode() {
  engine3d.active = !engine3d.active;
  document.body.classList.toggle("mode-3d", engine3d.active);
  elements.toggle3d.classList.toggle("active", engine3d.active);

  if (!engine3d.active) return;

  const mapId = state.bootstrap?.mapId;
  if (!mapId || !engine3d.manifestUrl) return;

  if (!engine3d.module && !engine3d.loading) {
    engine3d.loading = true;
    try {
      await new Promise((resolve, reject) => {
        const script = document.createElement("script");
        script.src = "engine.js";
        script.onload  = resolve;
        script.onerror = () => reject(new Error("engine.js failed to load"));
        document.head.appendChild(script);
      });

      const canvas = elements.canvas3d;
      const mod = await window.createEngine({ canvas });
      engine3d.module = mod;

      const init = mod.cwrap("engine_init", null, ["number", "number"]);
      init(canvas.clientWidth, canvas.clientHeight);

      const resize = mod.cwrap("engine_resize", null, ["number", "number"]);
      window.addEventListener("resize", () => {
        resize(canvas.clientWidth, canvas.clientHeight);
      });

      engine3d.pushEntities = mod.cwrap("engine_push_entities", null, ["string"]);

      const loadMap = mod.cwrap("engine_load_map", null, ["string", "string"]);
      loadMap(mapId, serverOrigin || window.location.origin);
      engine3d.mapId = mapId;
    } catch (err) {
      console.error("[3D] Engine load failed:", err);
      showToast("3D engine failed to load", "danger");
      engine3d.active = false;
      engine3d.loading = false;
      document.body.classList.remove("mode-3d");
      elements.toggle3d.classList.remove("active");
      return;
    }
    engine3d.loading = false;
  } else if (engine3d.module && mapId !== engine3d.mapId) {
    const loadMap = engine3d.module.cwrap("engine_load_map", null, ["string", "string"]);
    loadMap(mapId, serverOrigin || window.location.origin);
    engine3d.mapId = mapId;
  }

  if (state.lastSnapshot && engine3d.pushEntities) {
    engine3d.pushEntities(JSON.stringify(state.lastSnapshot));
  }
}

async function bootstrap() {
  const response = await fetch(apiUrl("/api/bootstrap"), { cache: "no-store" });
  if (!response.ok) throw new Error(response.status === 401 ? "Unauthorized" : `HTTP ${response.status}`);
  const bootstrapData = await response.json();
  applyMapMetadata(bootstrapData, true);

  const mapsWithImages = (bootstrapData.maps || []).filter((m) => m.hasImage);
  if (!bootstrapData.mapId) {
    if (mapsWithImages.length === 0) {
      showMapNotice("No map PNG found — place a PNG named after a map ID in a maps/ folder next to the exe.");
    } else {
      showMapNotice(`Map PNGs exist (${mapsWithImages.map((m) => m.id).join(", ")}) but server returned no mapId — open /api/debug for details.`);
    }
  }

  filterDefinitions = [...entityFilterDefinitions, ...buildLootFilterDefinitions((state.bootstrap.filters || []).filter((d) => d.kind === "loot"))];
  rebuildFilterCaches();
  ensureFilterSettings();
  renderFilterCards();
  centerOn({ x: state.bootstrap.mapSize / 2, y: state.bootstrap.mapSize / 2 });
  setSidebarState(state.settings.sidebarState);
  switchTab(state.settings.activeTab);
  setTheme(state.settings.theme);
  syncLabelSettingsUi();
  loadMinimapImage();

  // Enable/disable satellite checkbox based on whether tiles exist.
  const hasSat = !!bootstrapData.satUrl;
  elements.showSatellite.disabled = !hasSat;
  elements.showSatellite.title = hasSat ? "" : "No satellite data — run: py -m dayzmap satellite --map <mapId>";

  // Enable 3D button when processed data exists for the current map.
  engine3d.manifestUrl = bootstrapData.manifestUrl || null;
  elements.toggle3d.disabled = !engine3d.manifestUrl;
  if (!engine3d.manifestUrl) {
    elements.toggle3d.title = "3D map (no processed data — run: py -m dayzmap fakedata)";
  } else {
    elements.toggle3d.title = "Toggle 3D map mode";
  }
}

function connectEvents() {
  if (typeof window.EventSource !== "function") { startFallbackPolling(); return; }
  clearReconnectTimer();
  if (state.eventSource) state.eventSource.close();

  const source = new EventSource(apiUrl("/events"));
  state.eventSource = source;

  source.addEventListener("state", (event) => {
    stopFallbackPolling();
    applySnapshot(JSON.parse(event.data));
  });

  source.onerror = () => {
    if (state.eventSource === source) { state.eventSource.close(); state.eventSource = null; }
    elements.status.textContent = "Connection lost";
    elements.connectionDot.className = "conn-dot disconnected";
    if (state.wasConnected) {
      showToast("Connection lost", "danger");
      state.wasConnected = false;
    }
    startFallbackPolling();
    scheduleReconnect();
  };
}

// ── UI sync helpers ────────────────────────────────────────────────────────

function syncLabelSettingsUi() {
  elements.ordinaryLootSpread.value = String(state.settings.ordinaryLootSpread);
  elements.ordinaryLootSpreadValue.textContent = `${Number(state.settings.ordinaryLootSpread).toFixed(1)}x`;
  elements.groupedLootSpread.value = String(state.settings.groupedLootSpread);
  elements.groupedLootSpreadValue.textContent = `${Number(state.settings.groupedLootSpread).toFixed(1)}x`;
  elements.sameLootMergeRadius.value = String(state.settings.sameLootMergeRadius);
  elements.sameLootMergeRadiusValue.textContent = `${Math.round(Number(state.settings.sameLootMergeRadius))} px`;
  elements.lineAnchorMode.value = state.settings.lineAnchorMode;
  elements.mergeSameLootLabels.checked = !!state.settings.mergeSameLootLabels;
}

function resetLabelSettings() {
  state.settings.ordinaryLootSpread = defaultSettings.ordinaryLootSpread;
  state.settings.groupedLootSpread = defaultSettings.groupedLootSpread;
  state.settings.sameLootMergeRadius = defaultSettings.sameLootMergeRadius;
  state.settings.lineAnchorMode = defaultSettings.lineAnchorMode;
  state.settings.mergeSameLootLabels = defaultSettings.mergeSameLootLabels;
}

function updateCombatToggleUi() {
  elements.combatToggle.classList.toggle("active", !!state.settings.isCombatMode);
}

function syncAllCheckboxes() {
  const map = {
    followPlayer: elements.followPlayer,
    showLabels: elements.showLabels,
    showPOIs: elements.showPOIs,
    showGrid: elements.showGrid,
    showSatellite: elements.showSatellite,
    showSatmap: elements.showSatmap,
    showDistanceRings: elements.showDistanceRings,
    showMinimap: elements.showMinimap,
    showLoot: elements.showLoot,
  };
  for (const [key, el] of Object.entries(map)) {
    if (el) el.checked = !!state.settings[key];
  }
  updateCombatToggleUi();
}

// ── Keyboard shortcuts ─────────────────────────────────────────────────────

function toggleSetting(key) {
  state.settings[key] = !state.settings[key];
  state.settings.activePreset = null;
  persistSettings();
  updatePresetButtons();
  updateCountBadges();
  syncAllCheckboxes();
  state.listDirty = true;
  render();
}

function toggleCombatMode() {
  state.settings.isCombatMode = !state.settings.isCombatMode;
  persistSettings();
  updateCombatToggleUi();
  state.listDirty = true;
  render();
}

function bindKeyboard() {
  document.addEventListener("keydown", (event) => {
    const tag = event.target.tagName;
    if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") {
      if (event.key === "Escape" && event.target === elements.lootSearch) {
        elements.lootSearch.value = "";
        state.lootSearchText = "";
        state.listDirty = true;
        render();
        elements.lootSearch.blur();
      }
      return;
    }

    switch (event.key.toLowerCase()) {
      case "p": toggleSetting("showPlayers"); break;
      case "z": toggleSetting("showZombies"); break;
      case "a": toggleSetting("showAnimals"); break;
      case "v": toggleSetting("showVehicles"); break;
      case "l": toggleSetting("showLoot"); break;
      case "b": toggleSetting("showBullets"); break;
      case "c": toggleCombatMode(); break;
      case "f":
        state.settings.followPlayer = !state.settings.followPlayer;
        persistSettings();
        elements.followPlayer.checked = state.settings.followPlayer;
        render();
        break;
      case "g":
        state.settings.showGrid = !state.settings.showGrid;
        persistSettings();
        elements.showGrid.checked = state.settings.showGrid;
        updateVisibleTiles();
        render();
        break;
      case "m":
        toggleMeasureMode(!state.measureMode);
        event.preventDefault();
        break;
      case " ":
        if (state.lastSnapshot?.hasLocalPlayer && state.lastSnapshot?.localPlayer) {
          centerOn(state.lastSnapshot.localPlayer);
        }
        event.preventDefault();
        break;
      case "escape":
        if (state.measureMode) {
          toggleMeasureMode(false);
        } else {
          const sideStates = ["full", "icons", "hidden"];
          const idx = sideStates.indexOf(state.settings.sidebarState);
          setSidebarState(sideStates[(idx + 1) % sideStates.length]);
        }
        hideContextMenu();
        event.preventDefault();
        break;
      case "1": loadPreset(0); break;
      case "2": loadPreset(1); break;
      case "3": loadPreset(2); break;
      case "4": loadPreset(3); break;
    }
  });
}

// ── UI binding ─────────────────────────────────────────────────────────────

function bindUi() {
  // Sidebar toggle (cycle full → icons → hidden → full)
  elements.sidebarToggle.addEventListener("click", () => {
    const states = ["full", "icons", "hidden"];
    const idx = states.indexOf(state.settings.sidebarState);
    setSidebarState(states[(idx + 1) % states.length]);
  });

  // Tab navigation
  for (const btn of document.querySelectorAll(".tab-btn")) {
    btn.addEventListener("click", () => switchTab(btn.dataset.tab));
  }

  // Combat toggle
  elements.combatToggle.addEventListener("click", () => toggleCombatMode());

  // 3D mode toggle
  elements.toggle3d.addEventListener("click", () => toggle3DMode());

  // Header count badges
  for (const badge of document.querySelectorAll(".count-badge[data-key]")) {
    badge.addEventListener("click", () => {
      const key = badge.dataset.key;
      if (key) toggleSetting(key);
    });
  }

  // Preset buttons
  for (const btn of document.querySelectorAll(".preset-btn")) {
    btn.addEventListener("click", (event) => {
      const idx = Number(btn.dataset.preset);
      if (event.shiftKey) savePreset(idx);
      else loadPreset(idx);
    });
  }

  // Quick all/none
  document.getElementById("showAllEntities").addEventListener("click", () => {
    for (const def of filterDefinitions) state.settings[def.visibleKey] = true;
    state.settings.showLoot = true;
    state.settings.showFavoriteLoot = true;
    persistSettings();
    syncAllCheckboxes();
    state.listDirty = true;
    render();
  });
  document.getElementById("hideAllEntities").addEventListener("click", () => {
    for (const def of filterDefinitions) state.settings[def.visibleKey] = false;
    state.settings.showLoot = false;
    state.settings.showFavoriteLoot = false;
    persistSettings();
    syncAllCheckboxes();
    state.listDirty = true;
    render();
  });

  // Map tab checkboxes
  for (const [key, el] of Object.entries({
    followPlayer: elements.followPlayer,
    showLabels: elements.showLabels,
    showPOIs: elements.showPOIs,
    showGrid: elements.showGrid,
    showSatellite: elements.showSatellite,
    showSatmap: elements.showSatmap,
    showDistanceRings: elements.showDistanceRings,
    showMinimap: elements.showMinimap,
  })) {
    el.addEventListener("change", () => {
      state.settings[key] = el.checked;
      persistSettings();
      if (key === "showSatmap") updateVisibleTiles();
      else if (key === "showMinimap") updateMinimap();
      else render();
    });
  }

  // Loot tab show-all toggle
  elements.showLoot.addEventListener("change", () => {
    state.settings.showLoot = elements.showLoot.checked;
    persistSettings();
    state.listDirty = true;
    render();
  });

  // Distance filter
  elements.distanceFilter.value = String(state.settings.distanceFilter);
  elements.distanceValue.textContent = `${state.settings.distanceFilter} m`;
  elements.distanceFilter.addEventListener("input", () => {
    state.settings.distanceFilter = Number(elements.distanceFilter.value);
    elements.distanceValue.textContent = `${state.settings.distanceFilter} m`;
    persistSettings();
    state.listDirty = true;
    render();
  });

  // Text size
  elements.textSize.value = String(state.settings.textSize);
  elements.textSizeValue.textContent = `${state.settings.textSize} px`;
  elements.textSize.addEventListener("input", () => {
    state.settings.textSize = Number(elements.textSize.value);
    elements.textSizeValue.textContent = `${state.settings.textSize} px`;
    persistSettings();
    render();
  });

  // Label settings
  syncLabelSettingsUi();

  elements.ordinaryLootSpread.addEventListener("input", () => {
    state.settings.ordinaryLootSpread = Number(elements.ordinaryLootSpread.value);
    elements.ordinaryLootSpreadValue.textContent = `${Number(state.settings.ordinaryLootSpread).toFixed(1)}x`;
    persistSettings();
    render();
  });
  elements.groupedLootSpread.addEventListener("input", () => {
    state.settings.groupedLootSpread = Number(elements.groupedLootSpread.value);
    elements.groupedLootSpreadValue.textContent = `${Number(state.settings.groupedLootSpread).toFixed(1)}x`;
    persistSettings();
    render();
  });
  elements.sameLootMergeRadius.addEventListener("input", () => {
    state.settings.sameLootMergeRadius = Number(elements.sameLootMergeRadius.value);
    elements.sameLootMergeRadiusValue.textContent = `${Math.round(Number(state.settings.sameLootMergeRadius))} px`;
    persistSettings();
    render();
  });
  elements.lineAnchorMode.addEventListener("change", () => {
    state.settings.lineAnchorMode = elements.lineAnchorMode.value;
    persistSettings();
    render();
  });
  elements.mergeSameLootLabels.addEventListener("change", () => {
    state.settings.mergeSameLootLabels = elements.mergeSameLootLabels.checked;
    persistSettings();
    render();
  });
  elements.labelSettingsReset.addEventListener("click", () => {
    resetLabelSettings();
    ensureFilterSettings();
    syncLabelSettingsUi();
    persistSettings();
    render();
  });

  // Theme buttons
  for (const btn of document.querySelectorAll(".theme-btn")) {
    btn.addEventListener("click", () => setTheme(btn.dataset.theme));
  }

  // Loot search
  elements.lootSearch.addEventListener("input", () => {
    state.lootSearchText = elements.lootSearch.value.toLowerCase().trim();
    state.listDirty = true;
    render();
  });
  elements.lootSearch.addEventListener("keydown", (e) => {
    if (e.key === "Escape") {
      elements.lootSearch.value = "";
      state.lootSearchText = "";
      state.listDirty = true;
      render();
      elements.lootSearch.blur();
    }
  });

  // Loot list favorites
  elements.lootList.addEventListener("click", (event) => {
    const row = event.target.closest(".loot-row");
    if (!row) return;
    toggleFavoriteLoot(row.dataset.lootName || "");
  });

  // Sidebar wheel stop
  elements.sidebar.addEventListener("wheel", (e) => e.stopPropagation(), { passive: true });

  // Viewport pointer events
  elements.viewport.addEventListener("pointerdown", (event) => {
    if (event.pointerType === "mouse" && event.button !== 0) return;
    elements.viewport.setPointerCapture(event.pointerId);
    state.activePointers.set(event.pointerId, { clientX: event.clientX, clientY: event.clientY });
    if (state.activePointers.size === 1) {
      state.dragging = !state.settings.followPlayer && !state.measureMode;
      state.lastX = event.clientX;
      state.lastY = event.clientY;
      state.pinchDistance = 0;
      return;
    }
    const pair = getActivePointerPair();
    if (pair) { state.dragging = false; state.pinchDistance = getPointerDistance(pair[0], pair[1]); }
  });

  elements.viewport.addEventListener("pointermove", (event) => {
    // Track coords for non-dragging hover
    if (!state.activePointers.has(event.pointerId)) {
      if (state.bootstrap && state.bootstrap.mapSize > 0) {
        const w = screenToWorld(event.clientX, event.clientY);
        updateCoordDisplay(w.x, w.y);
      }
      if (state.measureMode) drawMeasureLayer(event.clientX, event.clientY);
      return;
    }

    state.activePointers.set(event.pointerId, { clientX: event.clientX, clientY: event.clientY });
    const pair = getActivePointerPair();
    if (pair) {
      const nextDistance = getPointerDistance(pair[0], pair[1]);
      if (state.pinchDistance > 0 && nextDistance > 0) {
        const mid = getPointerMidpoint(pair[0], pair[1]);
        zoomAt(mid.clientX, mid.clientY, state.scale * (nextDistance / state.pinchDistance));
      }
      state.pinchDistance = nextDistance;
      return;
    }

    if (!state.dragging) return;
    updateMapDrag(event.clientX, event.clientY);
    if (state.bootstrap && state.bootstrap.mapSize > 0) {
      const w = screenToWorld(event.clientX, event.clientY);
      updateCoordDisplay(w.x, w.y);
    }
    if (state.measureMode) drawMeasureLayer(event.clientX, event.clientY);
  });

  const stopPointerGesture = (event) => {
    state.activePointers.delete(event.pointerId);
    if (state.activePointers.size === 0) { state.dragging = false; state.pinchDistance = 0; return; }
    const [remaining] = state.activePointers.values();
    if (remaining) { state.dragging = true; state.lastX = remaining.clientX; state.lastY = remaining.clientY; }
    state.pinchDistance = 0;
  };

  elements.viewport.addEventListener("pointerup", stopPointerGesture);
  elements.viewport.addEventListener("pointercancel", stopPointerGesture);

  // Click for measure mode
  elements.viewport.addEventListener("click", (event) => {
    if (!state.measureMode) return;
    const world = screenToWorld(event.clientX, event.clientY);
    if (!state.measurePointA) {
      state.measurePointA = world;
      state.measurePointB = null;
    } else if (!state.measurePointB) {
      state.measurePointB = world;
    } else {
      state.measurePointA = world;
      state.measurePointB = null;
    }
    drawMeasureLayer(event.clientX, event.clientY);
  });

  // Wheel zoom
  elements.viewport.addEventListener("wheel", (event) => {
    if (event.target.closest("#ctxMenu")) return;
    event.preventDefault();
    zoomAt(event.clientX, event.clientY, state.scale * (event.deltaY < 0 ? 1.1 : 0.9));
    if (state.measureMode) drawMeasureLayer();
  }, { passive: false });

  // Mouse leave coord reset
  elements.viewport.addEventListener("mouseleave", () => {
    elements.coordDisplay.textContent = "–";
    elements.gridDisplay.textContent = "–";
  });

  // Right-click context menu
  elements.viewport.addEventListener("contextmenu", (event) => {
    event.preventDefault();
    const world = screenToWorld(event.clientX, event.clientY);
    const rect = elements.viewport.getBoundingClientRect();
    showContextMenu(event.clientX - rect.left, event.clientY - rect.top, world.x, world.y);
  });

  elements.ctxAddWaypoint.addEventListener("click", () => {
    if (!state.contextMenuWorldPos) { hideContextMenu(); return; }
    const label = (window.prompt("Waypoint label (optional):") ?? "").trim();
    const maxId = (state.settings.waypoints || []).reduce((m, w) => Math.max(m, Number(w.id || 0)), 0);
    if (!Array.isArray(state.settings.waypoints)) state.settings.waypoints = [];
    state.settings.waypoints.push({ id: maxId + 1, x: state.contextMenuWorldPos.x, y: state.contextMenuWorldPos.y, label });
    persistSettings();
    hideContextMenu();
    state.listDirty = true;
    render();
  });

  elements.ctxCopyCoords.addEventListener("click", () => {
    if (!state.contextMenuWorldPos) { hideContextMenu(); return; }
    const mapSize = state.bootstrap?.mapSize || 0;
    const wx = Math.round(state.contextMenuWorldPos.x);
    const wz = Math.round(mapSize - state.contextMenuWorldPos.y);
    navigator.clipboard?.writeText(`${wx}, ${wz}`).catch(() => {});
    hideContextMenu();
    showToast(`Copied: ${wx}, ${wz}`, "");
  });

  document.addEventListener("click", (event) => {
    if (elements.ctxMenu.classList.contains("open") && !elements.ctxMenu.contains(event.target)) {
      hideContextMenu();
    }
  });

  // Measure toggle button
  elements.measureToggle.addEventListener("click", () => toggleMeasureMode(!state.measureMode));

  // Resize
  window.addEventListener("resize", () => {
    resizeMeasureLayer();
    if (state.settings.followPlayer && state.lastSnapshot?.hasLocalPlayer && state.lastSnapshot.localPlayer) {
      centerOn(state.lastSnapshot.localPlayer);
      return;
    }
    applyTransform();
  });

  // Init UI values from state
  syncAllCheckboxes();
  updatePresetButtons();
  updateZoomDisplay();
  bindKeyboard();
}

// ── Bootstrap & init ───────────────────────────────────────────────────────

rebuildFilterCaches();
ensureFilterSettings();
renderFilterCards();
bindUi();

bootstrap()
  .then(() => fetch(apiUrl("/api/state"), { cache: "no-store" }))
  .then((response) => {
    if (!response.ok) throw new Error("Unauthorized");
    return response.json();
  })
  .then((snapshot) => {
    applySnapshot(snapshot);
    connectEvents();
  })
  .catch((err) => {
    const msg = (err && err.message) || "unknown error";
    if (msg === "Unauthorized") {
      document.body.innerHTML = '<div class="unauthorized">Unauthorized — check password</div>';
    } else {
      document.body.innerHTML =
        `<div class="unauthorized">Failed to connect: ${msg}.<br>` +
        `Is the server running? Open <a href="/api/debug" style="color:#93c5fd">/api/debug</a> for diagnostics.</div>`;
    }
  });