<section class="mtg-wrap">
  <span class="mtg-tag">event.touches · live debug view</span>
  <h1>Touch point visualizer</h1>
  <p id="mtgStatus">On a touchscreen, place multiple fingers on the pad below \u2014 each gets a live numbered marker. On desktop, drag the mouse to simulate a single point.</p>

  <div class="mtg-pad" id="mtgPad">
    <p class="mtg-pad-hint" id="mtgPadHint">Touch or click-drag here</p>
  </div>

  <div class="mtg-legend">
    <span class="mtg-count" id="mtgCount">0 active points</span>
    <span class="mtg-mode" id="mtgMode">Waiting for input\u2026</span>
  </div>
</section>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:radial-gradient(120% 90% at 50% 0%,#1a1030,#050308 60%);color:#fff;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:26px}
.mtg-wrap{width:100%;max-width:600px;text-align:center}
.mtg-tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#f0abfc;background:rgba(240,171,252,.1);border:1px solid rgba(240,171,252,.3);padding:5px 12px;border-radius:99px;margin-bottom:14px}
.mtg-wrap h1{font-size:clamp(24px,5.5vw,32px);font-weight:800;letter-spacing:-.02em}
.mtg-wrap p{font-size:13.5px;color:#b7a9d1;margin-top:8px;line-height:1.6}

.mtg-pad{position:relative;margin:22px 0 14px;height:280px;border-radius:16px;overflow:hidden;border:1.5px dashed rgba(240,171,252,.28);background:#0a0712;touch-action:none;-webkit-user-select:none;user-select:none;cursor:crosshair}
.mtg-pad-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#4d4361;font-size:13px;font-weight:600;pointer-events:none}

.mtg-point{position:absolute;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:800 16px system-ui;color:#1a0620;pointer-events:none;box-shadow:0 0 0 3px rgba(255,255,255,.15),0 10px 26px -8px rgba(0,0,0,.6)}
.mtg-point .mtg-id{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font-size:10px;color:#c9b8e0;font-weight:700;white-space:nowrap}

.mtg-legend{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12px;color:#8a7ea6}
.mtg-count{font-weight:700;color:#f0abfc}

var pad = document.getElementById('mtgPad');
var padHint = document.getElementById('mtgPadHint');
var statusEl = document.getElementById('mtgStatus');
var countEl = document.getElementById('mtgCount');
var modeEl = document.getElementById('mtgMode');

var COLORS = ['#f0abfc', '#38bdf8', '#4ade80', '#fbbf24', '#fb7185', '#a78bfa', '#f472b6', '#22d3ee'];
var markers = {}; // id -> DOM element, keyed by touch identifier (or 'mouse')

function markerFor(id) {
  if (markers[id]) return markers[id];
  var el = document.createElement('div');
  el.className = 'mtg-point';
  var colorIndex = Object.keys(markers).length % COLORS.length;
  el.style.background = COLORS[colorIndex];
  el.innerHTML = '\u2022<span class="mtg-id">#' + id + '</span>';
  pad.appendChild(el);
  markers[id] = el;
  padHint.style.display = 'none';
  return el;
}

function positionMarker(id, x, y) {
  var rect = pad.getBoundingClientRect();
  var el = markerFor(id);
  el.style.left = (x - rect.left) + 'px';
  el.style.top = (y - rect.top) + 'px';
}

function removeMarker(id) {
  var el = markers[id];
  if (el) { el.remove(); delete markers[id]; }
  if (Object.keys(markers).length === 0) padHint.style.display = 'flex';
}

function updateLegend() {
  var n = Object.keys(markers).length;
  countEl.textContent = n + ' active point' + (n === 1 ? '' : 's');
}

// --- Real multi-touch tracking ---
// event.touches is the live list of every finger currently on the surface;
// each Touch object carries a stable .identifier across touchmove events for
// that same finger, which is what lets each marker track one specific finger
// rather than jumping between whichever touch happened to be reported first.
function onTouchStart(e) {
  modeEl.textContent = 'Real touch input (' + e.touches.length + ' finger' + (e.touches.length === 1 ? '' : 's') + ')';
  for (var i = 0; i < e.changedTouches.length; i++) {
    var t = e.changedTouches[i];
    positionMarker(t.identifier, t.clientX, t.clientY);
  }
  updateLegend();
}

function onTouchMove(e) {
  e.preventDefault();
  for (var i = 0; i < e.touches.length; i++) {
    var t = e.touches[i];
    positionMarker(t.identifier, t.clientX, t.clientY);
  }
  modeEl.textContent = 'Real touch input (' + e.touches.length + ' finger' + (e.touches.length === 1 ? '' : 's') + ')';
}

function onTouchEnd(e) {
  for (var i = 0; i < e.changedTouches.length; i++) {
    removeMarker(e.changedTouches[i].identifier);
  }
  updateLegend();
  if (e.touches.length === 0) modeEl.textContent = 'Waiting for input\u2026';
}

pad.addEventListener('touchstart', onTouchStart, { passive: true });
pad.addEventListener('touchmove', onTouchMove, { passive: false });
pad.addEventListener('touchend', onTouchEnd);
pad.addEventListener('touchcancel', onTouchEnd);

// --- Desktop fallback: a single mouse-driven point, since a normal desktop
// has no real multi-touch hardware to visualize. Uses the same marker/legend
// functions as the touch path so the rendering logic is identical either way.
var mouseDown = false;
pad.addEventListener('mousedown', function (e) {
  mouseDown = true;
  modeEl.textContent = 'Mouse simulation (single point \u2014 desktop has no multi-touch)';
  positionMarker('mouse', e.clientX, e.clientY);
  updateLegend();
});
window.addEventListener('mousemove', function (e) {
  if (!mouseDown) return;
  positionMarker('mouse', e.clientX, e.clientY);
});
window.addEventListener('mouseup', function () {
  if (!mouseDown) return;
  mouseDown = false;
  removeMarker('mouse');
  updateLegend();
  modeEl.textContent = 'Waiting for input\u2026';
});