/* ==========================================================================
   90s mouse cursors — the arrow, the pointing hand on anything clickable,
   and the hourglass while the machine is busy (app.js sets `is-busy` on the
   body while it boots, verifies and loads Doom). Pixel art in
   assts/cursors/: every art pixel is 2 CSS px, so each comes at 1×, 1.5×, 2×
   and 3× to stay crisp, and none is over 32 × 32 (larger ones fall back to
   the system's near the window's edge). Each is given three times: plain
   (any browser), then -webkit- and standard image-set (whichever the browser
   reads last wins).
   ========================================================================== */

html {
  cursor: url("assts/cursors/arrow.png") 0 0, default;
  cursor: -webkit-image-set(
      url("assts/cursors/arrow.png") 1x,
      url("assts/cursors/arrow@1.5x.png") 1.5x,
      url("assts/cursors/arrow@2x.png") 2x,
      url("assts/cursors/arrow@3x.png") 3x
    ) 0 0, default;
  cursor: image-set(
      url("assts/cursors/arrow.png") 1x,
      url("assts/cursors/arrow@1.5x.png") 1.5x,
      url("assts/cursors/arrow@2x.png") 2x,
      url("assts/cursors/arrow@3x.png") 3x
    ) 0 0, default;
}

/* The fingertip is the hotspot. */
a,
button,
[data-command],
[role="button"] {
  cursor: url("assts/cursors/hand.png") 11 0, pointer;
  cursor: -webkit-image-set(
      url("assts/cursors/hand.png") 1x,
      url("assts/cursors/hand@1.5x.png") 1.5x,
      url("assts/cursors/hand@2x.png") 2x,
      url("assts/cursors/hand@3x.png") 3x
    ) 11 0, pointer;
  cursor: image-set(
      url("assts/cursors/hand.png") 1x,
      url("assts/cursors/hand@1.5x.png") 1.5x,
      url("assts/cursors/hand@2x.png") 2x,
      url("assts/cursors/hand@3x.png") 3x
    ) 11 0, pointer;
}

/* Over everything while busy; its middle is the hotspot. */
body.is-busy,
body.is-busy * {
  cursor: url("assts/cursors/busy.png") 12 16, wait !important;
  cursor: -webkit-image-set(
      url("assts/cursors/busy.png") 1x,
      url("assts/cursors/busy@1.5x.png") 1.5x,
      url("assts/cursors/busy@2x.png") 2x,
      url("assts/cursors/busy@3x.png") 3x
    ) 12 16, wait !important;
  cursor: image-set(
      url("assts/cursors/busy.png") 1x,
      url("assts/cursors/busy@1.5x.png") 1.5x,
      url("assts/cursors/busy@2x.png") 2x,
      url("assts/cursors/busy@3x.png") 3x
    ) 12 16, wait !important;
}

/* Windows high contrast, or "increase contrast": the system's own pointers,
   which may be enlarged or recoloured to be seen. */
@media (forced-colors: active), (prefers-contrast: more) {
  html,
  html * {
    cursor: auto !important;
  }

  a,
  button,
  [data-command],
  [role="button"] {
    cursor: pointer !important;
  }

  body.is-busy,
  body.is-busy * {
    cursor: wait !important;
  }
}