/* ===============================
   Ad Layout — minimal overlay version
   =============================== */

body {
    margin: 0;
    background: linear-gradient(135deg, #0b0f1a, #0e1217);
    color: #e5eefc;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* --- Top and bottom ad banners --- */
#top-ad,
#bottom-ad {
    position: fixed;
    left: 0;
    width: 100%;
    height: 70px;
    background: #111;
    color: #7fff00;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    text-transform: uppercase;
    border-top: 1px solid #2979ff;
    border-bottom: 1px solid #2979ff;
    z-index: 50;
}

#top-ad {
    top: 0;
}

#bottom-ad {
    bottom: 0;
}

/* --- Left and right skyscraper ads --- */
/*#left-ad,
#right-ad {
    position: fixed;
    top: 112px;
    bottom: 100px;
    width: 160px;
    background: #111;
    color: #7fff00;
    display: flex;
    justify-content: center;
    align-items: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-weight: 700;
    text-transform: uppercase;
    z-index: 40;
}*/

#left-ad,
#right-ad {
    position: relative; /* part of the grid */
    height: 100%; /* full height of the grid row */
    width: 160px;
    align-self: stretch; /* stretch vertically */
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0d1422;
    border: 2px solid #2979ff;
    border-radius: 10px;
    color: #7fff00;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 0 12px rgba(41, 121, 255, 0.5);
}



#left-ad {
    left: 0;
}

#right-ad {
    right: 0;
}

#left-ad {
    justify-self: start;
    margin-left: 0; /* flush to viewport */
}

#right-ad {
    justify-self: end;
    margin-right: 0; /* flush to viewport */
}

/* --- Responsive breakpoints --- */
@media (max-width: 1400px) {
    #left-ad,
    #right-ad {
        display: none;
    }
}