/* BoredKid.com - ad slot layout.
 *
 * Every slot is hidden until ads.js switches ads on (or you add ?adpreview=1 to a page URL to
 * see the reserved boxes). Nothing here ever sits on top of a game.
 *
 * Rails: tall boxes to the left and right of the page content, only on wide screens.
 * Inline: one box below the content, only where there is no room for rails (phones, tablets,
 * small laptop windows).
 *
 * To switch the rails from 160px to 300px wide: set --ad-rail-w to 300px and raise the two
 * min-width breakpoints below to 1400px (game pages) and 1840px (homepage).
 */
:root { --ad-rail-w: 160px; --ad-gap: 20px; }

body { position: relative; }

/* ---------- shared slot look ---------- */
.ad-slot { text-align: center; }
.ad-slot::before {
    content: 'Advertisement';
    display: block;
    margin-bottom: 4px;
    font: 10px/1.4 Arial, Helvetica, sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #8a8aa0;
}
.ad-slot.ad-empty { display: none !important; }

/* ---------- side rails ---------- */
.ad-rails {
    display: none;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    pointer-events: none;
    z-index: 1;
}
.ad-track {
    position: absolute;
    top: 0; bottom: 0;
    width: var(--ad-rail-w);
    padding-top: var(--ad-top, 90px);
    pointer-events: none;
}
.ad-track-left  { left: calc(50% - var(--ad-half, 360px) - var(--ad-gap) - var(--ad-rail-w)); }
.ad-track-right { left: calc(50% + var(--ad-half, 360px) + var(--ad-gap)); }
.ad-rail {
    position: sticky;      /* follows the page while you scroll; if a browser ignores it, it just stays put */
    top: 16px;
    width: var(--ad-rail-w);
    min-height: 600px;
    pointer-events: auto;
}

/* ---------- inline slot (below the content) ---------- */
.ad-inline { display: none; }
html.ads-on .ad-inline,
html.ads-preview .ad-inline {
    display: block;
    width: 100%;
    max-width: 728px;
    min-height: 280px;
    margin: 26px auto 0;
    padding: 0 12px;
    position: relative;
    z-index: 1;
}

/* ---------- when the rails have room ---------- */
/* game pages (content about 720px wide) */
@media (min-width: 1120px) {
    html.ads-on .ad-rails.ad-narrow,
    html.ads-preview .ad-rails.ad-narrow { display: block; }
    html.ads-on .ad-inline.ad-narrow,
    html.ads-preview .ad-inline.ad-narrow { display: none; }
}
/* homepage (content about 1180px wide) */
@media (min-width: 1560px) {
    html.ads-on .ad-rails.ad-wide,
    html.ads-preview .ad-rails.ad-wide { display: block; }
    html.ads-on .ad-inline.ad-wide,
    html.ads-preview .ad-inline.ad-wide { display: none; }
}

/* ---------- preview mode (?adpreview=1) ---------- */
html.ads-preview .ad-slot {
    border: 2px dashed rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
}
html.ads-preview .ad-slot::after {
    content: attr(data-size);
    display: block;
    margin-top: 40px;
    font: 700 13px/1.5 Arial, Helvetica, sans-serif;
    color: #cfd0e0;
}