/**
 * Custom cursor + click/tap sparks.
 *
 * Cursor: pure CSS via `cursor: url(...)` - OS-rendered, click-accurate,
 * never lags behind the actual mouse position. Hover variants on
 * interactive elements give natural affordance feedback.
 *
 * Sparks: see `/js/cursor.js`. Six teal dots burst from the contact point
 * on click or tap, then fade. Hardware-accelerated CSS animation only;
 * the JS just spawns the elements and lets CSS run.
 */

/* ── CUSTOM CURSOR ─────────────────────────────────────────────────────── */
/* The PNG is 64×80 (high-DPI source). image-set() with `2.86x` renders it at
   roughly 22×28 CSS pixels - small enough not to feel oversized, sharp on
   Hi-DPI displays. Hotspot at (3, 3) ≈ (8, 8) in source pixels divided by
   the resolution factor. Browsers without image-set fall back to the system
   cursor. -webkit-image-set retained for older Safari. */
/* `!important` is intentional: the custom cursor is a site-wide brand
   decision (like the theme color or favicon). Many component CSS files
   declare `cursor: pointer` on buttons/links/etc and load AFTER this
   file in the cascade - without !important they'd revert the cursor to
   the OS hand pointer over those elements. Text inputs are exempt
   because the I-beam is part of the typing UX. */
@media (hover: hover) and (pointer: fine) {
  body {
    cursor: -webkit-image-set(url('/images/website_cursor_type2.png') 2.86x) 3 3, auto !important;
    cursor:         image-set(url('/images/website_cursor_type2.png') 2.86x) 3 3, auto !important;
  }
  a, button, [role="button"], [onclick], summary, label,
  .btn, .admin-btn, [data-track] {
    cursor: -webkit-image-set(url('/images/website_cursor_type2.png') 2.86x) 3 3, auto !important;
    cursor:         image-set(url('/images/website_cursor_type2.png') 2.86x) 3 3, auto !important;
  }
  input[type="text"], input[type="email"], input[type="search"],
  input[type="url"], input[type="tel"], input[type="password"],
  input[type="number"], input[type="date"], textarea {
    /* Native I-beam stays on text inputs - typing UX expects it */
    cursor: text;
  }
  input[type="checkbox"], input[type="radio"], input[type="submit"],
  input[type="button"], input[type="file"], select {
    cursor: -webkit-image-set(url('/images/website_cursor_type2.png') 2.86x) 3 3, auto !important;
    cursor:         image-set(url('/images/website_cursor_type2.png') 2.86x) 3 3, auto !important;
  }
}

/* ── TEXT SELECTION DISCIPLINE ──────────────────────────────────────────── */
/* Default: no text selection (game-site convention; reduces accidental
   highlights when users interact with cards/buttons/scrolling). */
html, body {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

/* Re-enable selection where copying is legitimate UX:
   - form fields (typing)
   - mailto links (copying email addresses on legal/privacy)
   - readonly text inputs that display URLs / tokens (confirmation pages)
   - <code>, <pre> (developer-style copying) */
input, textarea, [contenteditable="true"],
a[href^="mailto:"],
.field-input[readonly],
.legal-link,
code, pre {
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
}

/* Prevent drag-to-save on images (not strictly anti-selection, but pairs
   with the same "interactive feel" intent - image dragging is rarely
   desired on a game site). Comment this out if you want to allow it. */
img {
  -webkit-user-drag: none;
}

/* ── ADMIN PAGES: opt back into normal browser behavior ─────────────────
   Admin operators legitimately need to copy/paste subscriber emails,
   agreement tokens, content keys, wiki names, IDs from logs, etc.
   Re-enable text selection AND image drag site-wide on admin pages.
   The custom cursor + click sparks intentionally stay (consistent feel). */
body.admin-body,
body.admin-body * {
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
}
body.admin-body img {
  -webkit-user-drag: auto;
}

/* ── CLICK / TAP SPARKS ────────────────────────────────────────────────── */
.click-spark {
  position: fixed;
  width: 4px; height: 4px;
  margin: -2px 0 0 -2px; /* center on the click point */
  border-radius: 50%;
  background: var(--teal-bright, #51e9b6);
  box-shadow:
    0 0 4px rgba(81, 233, 182, 0.8),
    0 0 10px rgba(81, 233, 182, 0.45);
  pointer-events: none;
  z-index: 9999;
  /* --sx / --sy are set inline by JS and define the radial direction */
  animation: spark-burst 480ms cubic-bezier(0.2, 0.7, 0.4, 1) forwards;
}

@keyframes spark-burst {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  60% {
    opacity: 0.85;
  }
  100% {
    transform: translate(var(--sx), var(--sy)) scale(0.25);
    opacity: 0;
  }
}