Allow child div to be clicked through a parent div without messing with the parent div's ::before property

I have this blue opaque box with a "flashlight" effect to see through the box for a game. The game involves looking for circles that move inside the box through a "flashlight" area.

I want to be able to have the "flashlight" effect work but allow clicks to pass through the box (parent div) in order to fire an onclick event with the circles (child divs).

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function updateCursor(e) {
var x = e.offsetX
var y = e.offsetY
document.getElementById("puzzle3bg").style.setProperty('--cursorX', x + 'px')
document.getElementById("puzzle3bg").style.setProperty('--cursorY', y + 'px')
}
document.getElementById("puzzle3bg").addEventListener('mousemove', updateCursor)
document.getElementById("puzzle3bg").addEventListener('touchmove', updateCursor)
// I took this from someone else's codepen so I'm not sure how to modify it

<!-- language: lang-css -->

#puzzle3 {
display: inline-block;
text-align: center;
}
#puzzle3bg {
display: block;
width: 750px;
height: 750px;
--cursorX: 375px;
--cursorY: 375px;
}
#puzzle3bg::before {
content: "";
display: block;
width: 750px;
height: 750px;
position: relative;
background: radial-gradient(
circle 100px at var(--cursorX) var(--cursorY),
rgba(170,255,255,.3) 0%,
rgba(170,255,255,.6) 80%,
rgba(170,255,255,1) 100%
);
z-index: 10;
}
.p3correctCircle {
display: inline-block;
position: absolute;
background: #00FF00;
border-radius: 50%;
width: 50px;
height: 50px;
transition-duration: 600ms;
z-index: 0;
}
.p3wrongCircle {
display: inline-block;
position: absolute;
background: #FF0000;
border-radius: 50%;
width: 50px;
height: 50px;
transition-duration: 600ms;
z-index: 0;
}

<!-- language: lang-html -->

<div id="puzzle3">
<div id="puzzle3box">
<div class="p3correctCircle"></div>
<div class="p3correctCircle"></div>
<div class="p3correctCircle"></div>
<div class="p3wrongCircle"></div>
<div class="p3wrongCircle"></div>
<div class="p3wrongCircle"></div>
<div class="p3wrongCircle"></div>
<div class="p3wrongCircle"></div>
</div>
<div id="puzzle3bg"></div>
</div>

<!-- end snippet -->

Whenever I try the pointer-event stuff, either the "flashlight" effect doesn't work or the child divs are still not working. But maybe I've been doing it wrong, so I'd appreciate any help.

As you mentioned, pointer-events: none breaks everything, that's because your flashlight follows the cursor only when you move your mouse over the flashlight itself. Meaning the flashlight is on top of all other elements and blocks you from clicking them.

You can mitigate that by disabling pointer-events on your flashlight element:

#puzzle3bg {
  display: block;
  width: 750px;
  height: 750px;
  --cursorX: 375px;
  --cursorY: 375px;
  pointer-events: none; // Disables all click functionality
}

AND listening to mousemove/touchmove events on an element that is clickable, like the parent element #puzzle3:

document.getElementById("puzzle3").addEventListener('mousemove', updateCursor)
document.getElementById("puzzle3").addEventListener('touchmove', updateCursor)

That way you will be able to click the target circles through the flashlight, and the flashlight will move after your mouse because it's position is tracked on an element that has pointer-events enabled.