/* 全局无缝黑底设置 */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow-x: hidden;
}

/* 纵向整体容器布局 */
.main-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 让顶部广告、中间视频、底部广告自动两端对齐，强行把底部广告推到最下端 */
    width: 100%;
    min-height: 100vh; /* 强制整体容器至少占满手机屏幕的 100% 高度 */
    max-width: 600px;  /* 限制在电脑大屏上的最大宽度 */
    margin: 0 auto;    /* 电脑端居中显示 */
    background-color: #000;
    box-sizing: border-box;
}

/* 广告区块统一控制：让 1.png 和 2.png 的宽度完美撑满手机屏幕 */
.ad-box {
    width: 100%;
    display: block;
    line-height: 0; /* 消除图片下方的标准字符空隙，保证绝对无缝 */
}

.ad-box img {
    width: 100%;
    height: auto;
    display: block;
}

/* 中间视频包裹层：控制居中和比例 */
.video-wrapper {
    width: 100%;
    position: relative;
    background-color: #000;
    flex-grow: 1; /* 让视频区域自动撑开，把广告图死死压在最下面 */
    display: flex;
    align-items: center;