/* MOUSE_TRAP_MODE — hidden OS cursor, fake dot, top capture strip */

#top-chrome-trap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  z-index: 2147483645;
  pointer-events: auto;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.42) 0%,
    rgba(0, 0, 0, 0.12) 70%,
    transparent 100%
  );
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#top-chrome-trap[hidden] {
  display: none !important;
}

html.os-mac #top-chrome-trap {
  background: linear-gradient(
    180deg,
    rgba(30, 30, 30, 0.55) 0%,
    rgba(30, 30, 30, 0.08) 75%,
    transparent 100%
  );
}

html.os-win #top-chrome-trap {
  background: linear-gradient(
    180deg,
    rgba(12, 45, 74, 0.5) 0%,
    rgba(12, 45, 74, 0.1) 75%,
    transparent 100%
  );
}

#mouse-trap-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 18px;
  height: 22px;
  margin: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  z-index: 2147483647;
  pointer-events: none;
  will-change: transform;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
}

/* macOS arrow */
html.os-mac #mouse-trap-cursor {
  width: 20px;
  height: 24px;
  margin: -2px 0 0 -2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='24' viewBox='0 0 20 24'%3E%3Cpath fill='%23fff' stroke='%23000' stroke-width='1.2' d='M2 2 L2 18 L7 13 L11 22 L14 21 L10 12 L17 12 Z'/%3E%3C/svg%3E");
}

/* Windows pointer */
html.os-win #mouse-trap-cursor {
  width: 18px;
  height: 22px;
  margin: -2px 0 0 -2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='22' viewBox='0 0 18 22'%3E%3Cpath fill='%23fff' stroke='%23000' stroke-width='1' d='M1 1 L1 16 L6 11 L9 19 L12 18 L8 10 L15 10 Z'/%3E%3C/svg%3E");
}

#mouse-trap-cursor[hidden] {
  display: none !important;
}

html.mouse-trap-mode #prank-shell,
html.mouse-trap-mode #prank-shell * {
  cursor: none !important;
}

html.mouse-trap-mode.gate-phase #gate-dialog,
html.mouse-trap-mode.gate-phase #gate-dialog * {
  cursor: default !important;
}

html.mouse-trap-mode.gate-phase #gate-dialog button,
html.mouse-trap-mode.gate-phase #gate-dialog [role='button'] {
  cursor: pointer !important;
}

html.mouse-trap-mode .esc-warning-overlay,
html.mouse-trap-mode .esc-warning-overlay * {
  cursor: auto !important;
}