/* Reset and base styles */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Common lightning background - applied to body and loader */
.lightning-background {
    position: relative;
    background-color: #1E1E1E;
    overflow: hidden;
}

/* Lightning images as pseudo-elements - matches BoundedScreen desktop layout */
.lightning-background::before,
.lightning-background::after {
    content: '';
    position: absolute;
    background-image: url('assets/assets/images/lightning.png');
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: -1;
}

/* Right lightning image - normal */
.lightning-background::after {
    top: 5%;
    right: 0%;
    width: 96%;
    height: 96%;
    background-position: top right;
}

/* Left lightning image - flipped and scaled down (scale -0.5, 0.5) */
.lightning-background::before {
    top: 6.5%;
    left: -15%;
    width: 47%;
    height: 47%;
    background-position: top left;
    transform: scaleX(-1);
    opacity: 1;
}

/* Mobile adjustments - matches BoundedScreen mobile layout */
@media (max-width: 600px) {
    /* Hide left lightning on mobile */
    .lightning-background::before {
         top: 6.5%;
            width: 47%;
            height: 47%;
            left: 0%;
            background-position: top center;
            transform: scaleX(-1);
            opacity: 1;
    }

    /* Adjust right lightning for mobile - scaled up like in BoundedScreen (scale: 10) */
    .lightning-background::after {
        width: 100%;
        height: 100%;
        right: -10%;
        background-position: center right;
    }
}