/* Singularity Effect (Black Hole Gradient) */

#bgCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: auto;
    /* MUST interact with mouse/touch */
}

/* Mobile-only fallback controls (hidden on desktop — HUD has the controls) */
.controls-panel {
    display: none;
}

@media (max-width: 768px) {

    /* Fallback mobile background when canvas is paused */
    body {
        background-color: #0d1117;
        background-image: repeating-linear-gradient(0deg,
                transparent,
                transparent 2px,
                rgba(0, 255, 65, 0.03) 2px,
                rgba(0, 255, 65, 0.03) 4px);
    }

    #bgCanvas {
        display: none !important;
        /* Hide canvas entirely on mobile */
    }

    .controls-panel {
        display: none !important;
        /* Force hide controls on mobile as well */
    }
}

/* Base styles for control panel (moved outside media query to fix syntax error) */
.controls-panel {
    display: none;
    /* Default hidden on desktop */
}

@media (max-width: 768px) {

    /* Only keeping this block if we ever need it visible on mobile, but currently it's hidden above.
       To avoid duplicate display rules and keep syntax clean, I am overriding the block that broke */
    .controls-panel-mobile-override {
        position: fixed;
        bottom: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        z-index: 100;
        width: auto;
        padding: 0;
    }

    .controls-panel input[type=range] {
        writing-mode: bt-lr;
        -webkit-appearance: slider-vertical;
        appearance: slider-vertical;
        width: 40px;
        height: 300px;
        background: transparent;
        cursor: ns-resize;
        margin: 0;
    }

    .controls-panel input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 40px;
        height: 40px;
        background: linear-gradient(to bottom, #238636, #000000);
        border: none;
        border-radius: 0;
    }

    .controls-panel input[type=range]::-moz-range-thumb {
        width: 40px;
        height: 40px;
        background: linear-gradient(to bottom, #238636, #000000);
        border: none;
        border-radius: 0;
    }

    .controls-panel button.reset-btn {
        width: 60px;
        height: 60px;
        background: #f85149;
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;
        margin: 0;
    }

    .controls-panel button.reset-btn:hover {
        transform: scale(1.5);
    }