/* ============================================================
   Cursor skins — the fruit / owner visuals that ride the .cursor
   dot, plus the upright overlays (owner crown + "me" tag).

   The fruit SVG lives INSIDE the dot so it inherits the dot's
   squish/stretch/bounce for free (see cursor_skins.js). Real
   colours here, so legibility comes from a drop-shadow — NOT the
   blend-difference the plain grey dot uses. Driven by cursor_skins.js.
   ============================================================ */

/* Skinned dot: drop the grey blend so the fruit's true colours show. The base
   .cursor (cursor.css) still owns size + motion; we only retint it. */
.cursor--watermelon,
.cursor--orange,
.cursor--lemon,
.cursor--owner {
  background: transparent;
  mix-blend-mode: normal;
}

/* The fruit SVG, centred on the dot and free to overflow its 18px box. The dot's
   per-frame transform (translate/rotate/scale) carries this along. */
.cursor-skin__svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  overflow: visible;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
}

/* Owner crown — an overlay above the dot, positioned + wobbled by JS. Pivots at
   its band (bottom-centre) so the wobble hinges on the head. */
.cursor-crown {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 10001;                 /* above the dot (10000) */
  transform-origin: 50% 100%;
  will-change: transform;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
}
.cursor-crown__svg { display: block; overflow: visible; }

/* "me" tag — marks the active session's own cursor. Handwritten Caveat, blend-
   difference so it reads on any background (like the doodle notes). */
.cursor-me {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  font-family: var(--font-doodle);
  font-size: 18px;
  line-height: 1;
  color: var(--color-muted);
  mix-blend-mode: difference;
  z-index: 10001;
  white-space: nowrap;
  will-change: transform;
}

/* No skin overlays on touch / no-fine-pointer (the dot itself is already off). */
@media (hover: none), (pointer: coarse) {
  .cursor-crown,
  .cursor-me { display: none; }
}