* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    overflow: hidden;
    background: #0a0a14;
    font-family: monospace;
}

.scene {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

/* Dark Sky - Gotham aesthetic */
.sky {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, 
        #05050a 0%, 
        #0a0a12 30%, 
        #0d0d18 60%,
        #10101d 100%);
    z-index: 1;
}

/* Canvas layers */
canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#lightning {
    z-index: 3;
    pointer-events: none;
}

#rain {
    z-index: 5;
    pointer-events: none;
}

/* Cityscape */
.cityscape {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0;
    gap: 0px;
    z-index: 4;
}

/* Buildings - More Pixelated Gotham Style */
.building {
    position: relative;
    background: #080810;
    box-shadow: 
        inset -2px 0 4px rgba(0, 0, 0, 0.9),
        -10px 10px 30px rgba(0, 0, 0, 0.95);
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    flex-shrink: 0;
}

/* Building styles will be generated dynamically by JavaScript */

.building-16 {
    width: 28px;
    height: 145px;
    background: 
        radial-gradient(2px 2px at 7px 21px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 18px 48px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 7px 82px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 18px 115px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        #070710;
}

.building-17 {
    width: 40px;
    height: 185px;
    background: 
        radial-gradient(2px 2px at 10px 26px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 26px 26px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 10px 64px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 26px 105px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 10px 145px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        #050508;
}

.building-18 {
    width: 26px;
    height: 125px;
    background: 
        radial-gradient(2px 2px at 6px 18px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 17px 42px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 6px 72px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 17px 100px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        #060609;
}

.building-19 {
    width: 35px;
    height: 205px;
    background: 
        radial-gradient(2px 2px at 9px 29px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 23px 29px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 9px 70px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 23px 115px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 9px 165px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        #080810;
}

.building-20 {
    width: 30px;
    height: 155px;
    background: 
        radial-gradient(2px 2px at 8px 22px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 19px 50px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 8px 88px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 19px 125px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        #0a0a0f;
}

.building-21 {
    width: 38px;
    height: 230px;
    background: 
        radial-gradient(2px 2px at 9px 32px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 24px 32px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 9px 76px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 24px 125px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 9px 175px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 24px 205px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        #070710;
}

.building-22 {
    width: 27px;
    height: 135px;
    background: 
        radial-gradient(2px 2px at 7px 20px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 17px 46px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 7px 78px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 17px 108px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        #050508;
}

.building-23 {
    width: 42px;
    height: 195px;
    background: 
        radial-gradient(2px 2px at 10px 27px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 27px 27px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 10px 71px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 27px 115px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 10px 160px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        #060609;
}

.building-24 {
    width: 29px;
    height: 160px;
    background: 
        radial-gradient(2px 2px at 7px 23px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 18px 52px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 7px 90px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 18px 130px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        #080811;
}

.building-25 {
    width: 34px;
    height: 215px;
    background: 
        radial-gradient(2px 2px at 8px 30px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 22px 30px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 8px 74px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 22px 120px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 8px 170px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        #090912;
}

.building-26 {
    width: 31px;
    height: 140px;
    background: 
        radial-gradient(2px 2px at 8px 20px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 20px 44px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 8px 75px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 20px 110px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        #070710;
}

.building-27 {
    width: 37px;
    height: 180px;
    background: 
        radial-gradient(2px 2px at 9px 25px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 24px 25px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 9px 66px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 24px 108px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 9px 150px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        #050508;
}

.building-28 {
    width: 25px;
    height: 150px;
    background: 
        radial-gradient(2px 2px at 6px 21px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 16px 50px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 6px 85px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 16px 120px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        #0a0a10;
}

.building-29 {
    width: 39px;
    height: 200px;
    background: 
        radial-gradient(2px 2px at 10px 28px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 25px 28px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 10px 69px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 25px 112px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 10px 158px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        #060609;
}

.building-30 {
    width: 33px;
    height: 165px;
    background: 
        radial-gradient(2px 2px at 8px 23px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 21px 54px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 8px 92px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 21px 132px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        #080810;
}

.building-31 {
    width: 28px;
    height: 190px;
    background: 
        radial-gradient(2px 2px at 7px 27px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 18px 60px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 7px 100px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 18px 145px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 7px 170px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        #070710;
}

.building-32 {
    width: 36px;
    height: 128px;
    background: 
        radial-gradient(2px 2px at 9px 19px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 23px 19px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 9px 52px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 23px 88px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        #050508;
}

.building-33 {
    width: 41px;
    height: 210px;
    background: 
        radial-gradient(2px 2px at 10px 29px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 26px 29px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 10px 73px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 26px 118px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 10px 168px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        #0a0a0f;
}

.building-34 {
    width: 30px;
    height: 175px;
    background: 
        radial-gradient(2px 2px at 7px 24px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 19px 56px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 7px 95px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 19px 138px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        #060609;
}

.building-35 {
    width: 32px;
    height: 145px;
    background: 
        radial-gradient(2px 2px at 8px 21px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 20px 21px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 8px 58px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 20px 95px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 8px 125px, rgba(255, 200, 80, 0.8) 0%, transparent 100%),
        #080811;
}



/* Flash effect for lightning */
.flash {
    animation: lightning-flash 0.2s ease-out;
}

@keyframes lightning-flash {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(2.5);
    }
}