/* ==========================================================
   layout.css — SITE LAYOUT + AD SLOTS
   ==========================================================
   Ye file header.php/footer.php ke sath use hoti hai.
   main.css ke BAAD load honi chahiye (variables use karti hai).

   Layout structure:
     ┌─────────────── ad-top (banner) ───────────────┐
     │  ┌────────┐  ┌──────────────────────────────┐ │
     │  │ Left   │  │                              │ │
     │  │ Ad     │  │   Game Content (constrained  │ │
     │  │ Sidebar│  │   width — FULL SCREEN nahi)  │ │
     │  │        │  │                              │ │
     │  └────────┘  └──────────────────────────────┘ │
     └─────────────── ad-footer (banner) ─────────────┘
   ========================================================== */

/* ---------- Poori site ka outer wrapper ---------- */
.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ---------- Ad slot ka generic container ---------- */
.ad-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-panel);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: 12px;
    overflow: hidden;
}

/* ---------- Top banner ad (leaderboard style) ---------- */
.ad-top-wrapper {
    display: flex;
    justify-content: center;
    padding: var(--space-sm) 0;
    background: var(--color-bg-deep);
}
.ad-top {
    width: 100%;
    max-width: 728px;
    min-height: 90px;
}

/* ---------- Footer banner ad ---------- */
.ad-footer-wrapper {
    display: flex;
    justify-content: center;
    padding: var(--space-md) 0;
    background: var(--color-bg-deep);
    border-top: 1px solid var(--color-border);
}
.ad-footer {
    width: 100%;
    max-width: 728px;
    min-height: 90px;
}

/* ---------- Main layout: sidebar + game content ---------- */
.layout-with-sidebar {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    padding: var(--space-lg) var(--space-md);
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* ---------- Left sidebar (ads) ---------- */
.ad-sidebar-left {
    flex-shrink: 0;
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    position: sticky;
    top: var(--space-md);
    align-self: flex-start;
}
.ad-slot-300x600 {
    width: 300px;
    height: 600px;
}
.ad-slot-300x250 {
    width: 300px;
    height: 250px;
}

/* ---------- GAME CONTENT AREA — jaan-boojh kar constrained ---------- */
/* "Full screen" nahi rakha — taake sidebar ads ke liye jagah bane
   aur content bhi zyada bikhra hua na lage (jaise Habbo/IMVU jaisi
   games mein hota hai — game area hamesha ek fixed box mein hoti hai) */
.game-content-area {
    width: 100%;
    max-width: 760px;
    min-height: 70vh;
}

/* ---------- Responsive: chhoti screens pe sidebar ads chhupana ---------- */
/* 300px sidebar + 760px content = ~1100px+ chahiye, warna squeeze ho jata hai */
@media (max-width: 1150px) {
    .ad-sidebar-left {
        display: none;
    }
    .layout-with-sidebar {
        padding: var(--space-md);
    }
}

@media (max-width: 480px) {
    .ad-top, .ad-footer {
        min-height: 60px;
    }
}