/*
 * Hand control overlay — camera-driven pointer for the live game.
 * The wrist drives a cursor ring; a thumb→index pinch is the mouse button.
 * Opt-in via the floating toggle (bottom-right) or Alt+H. The camera <video>
 * is hidden (the SDK only needs frames, not a visible feed).
 */

/* Floating toggle button */
#cwl-hand-toggle {
  position: fixed; right: 14px; bottom: 14px; z-index: 2147483646;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid #28406b; background: rgba(8, 14, 28, 0.82); color: #9fb4d6;
  font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
#cwl-hand-toggle.active { color: #042; background: #14b8a6; border-color: #14b8a6; }
#cwl-hand-toggle.loading { opacity: 0.6; cursor: default; }

/* Cursor ring — pointer-events:none so elementFromPoint hits the real UI. */
#cwl-hand-cursor {
  position: fixed; left: 0; top: 0; z-index: 2147483647;
  width: 48px; height: 48px; margin: -24px 0 0 -24px;
  border: 3px solid #5eead4; border-radius: 50%;
  box-shadow: 0 0 16px rgba(94, 234, 212, 0.7), inset 0 0 8px rgba(94, 234, 212, 0.35);
  pointer-events: none; opacity: 0; transition: opacity 0.15s;
}
#cwl-hand-cursor::after {
  content: ""; position: absolute; inset: 19px; border-radius: 50%; background: #5eead4;
}
#cwl-hand-cursor.lost { border-color: #f87171; box-shadow: 0 0 16px rgba(248, 113, 113, 0.6); }
#cwl-hand-cursor.lost::after { background: #f87171; }
/* Pinch held = button down. */
#cwl-hand-cursor.down { border-color: #fbbf24; box-shadow: 0 0 18px rgba(251, 191, 36, 0.85); }
#cwl-hand-cursor.down::after { background: #fbbf24; }
/* Long-press progress arc (driven by --p 0..100). */
#cwl-hand-cursor::before {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  background: conic-gradient(#a78bfa calc(var(--p, 0) * 1%), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  opacity: 0; transition: opacity 0.1s;
}
#cwl-hand-cursor.progress::before { opacity: 1; }

/* Help text that trails the cursor ring (fades after the first click). */
#cwl-hand-hint {
  position: fixed; left: 0; top: 0; z-index: 2147483647; pointer-events: none;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 9px; border-radius: 8px;
  background: rgba(8, 14, 28, 0.82); border: 1px solid #28406b;
  font: 12px/1.3 system-ui, sans-serif; color: #cdd9ee; white-space: nowrap;
  opacity: 0; transition: opacity 0.3s;
}
#cwl-hand-hint b { color: #5eead4; font-weight: 700; }

/* Hidden camera feed — present + playing, but not shown. */
#cwl-hand-video {
  position: fixed; left: -10px; bottom: -10px; width: 2px; height: 2px;
  opacity: 0; pointer-events: none; z-index: -1;
}

/* Tiny status readout above the toggle */
#cwl-hand-status {
  position: fixed; right: 14px; bottom: 66px; z-index: 2147483646;
  background: rgba(8, 14, 28, 0.82); border: 1px solid #1e2c44; border-radius: 8px;
  padding: 4px 8px; font: 11px/1.4 ui-monospace, monospace; color: #9fb4d6;
  max-width: 210px; display: none; white-space: pre;
}
#cwl-hand-status.show { display: block; }