/**
 * Pixel Art - Interactive / Background-Reflect Version
 *
 * Mouse-activated grid squares are filled with the INVERTED colour sampled
 * from the background image or video at that exact grid position.
 *
 * Selectors:
 *   id="pixel-art-interactive"   or   class="pixel-art-interactive"
 *
 * Layer order (low → high):
 *   0 – container bg / Elementor bg image/video
 *   2 – interactive canvas  (transparent, pointer-events: none)
 *   3 – Elementor content columns
 */

#pixel-art-interactive,
.pixel-art-interactive {
    position: relative;
    cursor: none !important;
    overflow: hidden;
}

#pixel-art-interactive canvas,
.pixel-art-interactive canvas {
    display: block; position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 2;
}

#pixel-art-interactive > .bg-media,
.pixel-art-interactive > .bg-media {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; z-index: 0; pointer-events: none;
}

#pixel-art-interactive > *:not(canvas):not(.bg-media),
.pixel-art-interactive > *:not(canvas):not(.bg-media) {
    position: relative; z-index: 3; pointer-events: auto;
}

#pixel-art-interactive .elementor-background-overlay,
.pixel-art-interactive .elementor-background-overlay,
#pixel-art-interactive .elementor-background-video-container,
.pixel-art-interactive .elementor-background-video-container { z-index: 0 !important; }

#pixel-art-interactive .elementor-container,
#pixel-art-interactive .elementor-row,
#pixel-art-interactive .elementor-column,
#pixel-art-interactive .elementor-widget-wrap,
#pixel-art-interactive .e-con-inner,
.pixel-art-interactive .elementor-container,
.pixel-art-interactive .elementor-row,
.pixel-art-interactive .elementor-column,
.pixel-art-interactive .elementor-widget-wrap,
.pixel-art-interactive .e-con-inner { position: relative; z-index: 3; pointer-events: auto; }