#dark-veil-container {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    min-height: 100vh;
    min-height: 100dvh;
}

@media (max-width: 1279px) {
    #dark-veil-container {
        top: calc(-72px - var(--jei-safe-area-top));
        right: calc(-28px - var(--jei-safe-area-right));
        bottom: calc(-112px - var(--jei-safe-area-bottom));
        left: calc(-28px - var(--jei-safe-area-left));
        min-width: calc(100vw + 56px + var(--jei-safe-area-left) + var(--jei-safe-area-right));
        min-height: calc(100dvh + 184px + var(--jei-safe-area-top) + var(--jei-safe-area-bottom));
    }
}

/* Canvas background - white in light mode, dark in dark mode */
.darkveil-canvas {
    width: 100%;
    height: 100%;
    display: block;
    background: #ffffff;
}

/* Dark mode - black background for shader */
html.dark-mode .darkveil-canvas {
    background: #000000;
}