/* The same crosshair follows the mouse in every UI, including modal backdrops.
   A cursor image keeps the hotspot exact, with no frame lag or top-layer issues. */
html, html * {
  cursor: url("/icons/crosshair.svg") 8 8, crosshair !important;
}

html *::before, html *::after, dialog::backdrop {
  cursor: url("/icons/crosshair.svg") 8 8, crosshair !important;
}

body.pointer-locked, body.pointer-locked * {
  cursor: none !important;
}

#crosshair {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 17px;
  height: 17px;
  transform: translate(-50%, -50%);
  background: url("/icons/crosshair.svg") center / 17px 17px no-repeat;
  pointer-events: none;
  visibility: hidden;
}

#crosshair.saw-ready { background-image: url("/icons/saw-ready.svg"); }
body.pointer-locked #crosshair { visibility: visible; }