/**
 * 广告布局样式
 * 用于在页面左右两侧显示 Monetag 广告
 */

/* 主广告容器 */
.ads-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 10px;
}

/* 左侧栏广告 */
.ads-left-sidebar {
    position: sticky;
    top: 20px;
    width: 160px;
    min-height: 600px;
    margin-right: 20px;
    flex-shrink: 0;
}

/* 右侧栏广告 */
.ads-right-sidebar {
    position: sticky;
    top: 20px;
    width: 160px;
    min-height: 600px;
    margin-left: 20px;
    flex-shrink: 0;
}

/* 主内容区域 */
.ads-main-content {
    flex: 1;
    min-width: 0;
    max-width: 1000px;
}

/* 广告容器样式 */
.ad-container {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.ad-container .monetag-ad-slot {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}

/* In-page 广告 - 顶部 */
.ads-inpage-top {
    margin-bottom: 20px;
}

/* In-page 广告 - 底部 */
.ads-inpage-bottom {
    margin-top: 20px;
}

/* 移动端响应式 */
@media (max-width: 1200px) {
    .ads-wrapper {
        padding: 0 5px;
    }

    .ads-left-sidebar,
    .ads-right-sidebar {
        width: 120px;
    }
}

@media (max-width: 768px) {
    .ads-wrapper {
        flex-direction: column;
        padding: 0 10px;
    }

    .ads-left-sidebar,
    .ads-right-sidebar {
        position: static;
        width: 100%;
        margin: 10px 0;
        min-height: auto;
    }

    .ads-main-content {
        max-width: 100%;
    }

    /* 移动端显示水平横幅 */
    .ads-left-sidebar .ad-container,
    .ads-right-sidebar .ad-container {
        min-height: 60px;
    }
}

/* 游戏页面特殊布局 */
.game-page-with-ads {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.game-ads-left,
.game-ads-right {
    width: 160px;
    flex-shrink: 0;
}

.game-ads-left {
    position: sticky;
    top: 20px;
}

.game-ads-right {
    position: sticky;
    top: 20px;
}

.game-content-with-ads {
    flex: 1;
    min-width: 0;
}

@media (max-width: 1200px) {
    .game-ads-left,
    .game-ads-right {
        width: 120px;
    }
}

@media (max-width: 768px) {
    .game-page-with-ads {
        flex-direction: column;
    }

    .game-ads-left,
    .game-ads-right {
        width: 100%;
        position: static;
    }
}