/* === 通用 PC 样式 === */
body {
    background: linear-gradient(135deg, #1a0033, #330066, #660099); /* 页面背景渐变 */
    font-family: 'Courier New', monospace; /* 字体 */
    color: #ff66cc; /* 默认文字颜色 */
    margin: 0; /* 去除默认外边距 */
    padding: 50px; /* 页面内边距 */
    text-align: center; /* 文本居中 */
    position: relative; /* 方便加覆盖层 */
}

/* === Index 页面额外设置 === */
body.index-page {
    margin-top: 25px; /* 精准控制首页上边距 */
    --pc-bullet-spacing: 15px; /* 新增：PC端 bullet 间距控制变量（默认15px） */
}
body.index-page::before {
    content: ""; /* 伪元素作为覆盖层 */
    position: fixed; /* 固定覆盖整个屏幕 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* 覆盖全屏，包括下半部分 */
    background: rgba(255, 255, 255, 0.05); /* 半透明亮色覆盖层 */
    pointer-events: none; /* 不影响点击 */
    z-index: 0; /* 在内容下方 */
}

/* 保持标题、段落的发光效果 */
h1, h2, p {
    text-shadow: 0 0 10px #ff66cc, 0 0 20px #ff33cc;
}

/* 列表样式 */
ul {
    list-style-type: square;
    padding: 10px;
    position: relative; /* 列表在覆盖层上方 */
    z-index: 1;
}

li {
    margin: var(--pc-bullet-spacing, 15px) 0; /* 新增：PC端使用的间距变量 */
    font-size: 1.5em;
}

a {
    color: #66ffff;
    text-decoration: none;
    transition: color 0.3s;
}
a:hover {
    color: #ffcc00;
}

/* === 播放页面样式 === */
.video-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    margin-top: -8px; /* 精准控制播放页整体上边距 */
    position: relative;
    z-index: 1;
}

/* 播放页面标题（如 Video 1）字号调大 */
.video-container h2 {
    font-size: 1.8em; /* 比默认大一号，可自行调整 */
    margin-bottom: 30px;
}

video {
    max-width: 80%;
    border: 3px solid #ff66cc;
    border-radius: 10px;
    box-shadow: 0 0 20px #ff33cc;
}

/* 播放页面按钮容器，让按钮并排并等宽 */
.video-container div {
    display: flex;
    justify-content: center;
    gap: 35px; /* 按钮之间的间距 */
    flex-wrap: wrap;
}

.video-container div button {
    flex: 1; /* 平分容器宽度 */
    min-width: 150px; /* 最小宽度 */
    background-color: #ff66cc;
    color: black;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 1em;
    margin: 20px 0;
    border-radius: 5px;
}
.video-container div button:hover {
    background-color: #ffcc00;
}

/* 播放页面简介文字调大 */
.video-container p {
    font-size: 1.35em; /* 简介文字大小 */
    margin-top: 20px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
	/* 首页优化 */
	body {
		font-size: 14.5px;
		padding: 10px 30px 30px 30px; /* 左右30px，下方30px，上方用单独的 margin 控制 */
		margin-top: 70px; /* 精准控制上边距 */
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start; /* 从顶部开始排列 */
		min-height: 100vh;
	}

    body.index-page {
        --mobile-bullet-spacing: 12px; /* 新增：移动端 bullet 间距控制变量（默认12px） */
    }

    ul {
        padding: 0;
        list-style-position: inside;
        margin-top: 15px; /* 列表顶部间距缩小 */
    }
    li {
        font-size: 1.45em;
        margin: var(--mobile-bullet-spacing, 12px) 0; /* 新增：移动端使用的间距变量 */
        line-height: 1.6em;
    }

    /* 播放页面优化 */
    .video-container {
        height: auto;
        padding: 10px 0; /* 缩小上下留白 */
        margin-top: 35px; /* 播放器整体更靠上 */
    }
    .video-container h2 {
        font-size: 1.45em;
        margin-top: 5px; /* 缩小标题与顶部的间距 */
    }
    .video-container p {
        font-size: 1.15em;
        margin-top: 13.5px;
    }
    video {
        max-width: 100%;
        height: auto;
    }

    /* 按钮并排显示 */
    .video-container div {
        display: flex;
        justify-content: center;
        gap: 23px;
        flex-wrap: wrap;
        margin-top: 12px; /* 缩小按钮与视频之间的距离 */
    }
	.video-container div button {
		flex: 1; /* 平分行宽 */
		min-width: 120px; /* 防止太窄 */
		font-size: 0.95em;
		margin: 0;
	}
}

/* 仅 PC 端（宽度大于 768px）隐藏 bullet 符号 */
@media (min-width: 769px) {
    body.index-page ul {
        list-style: none; /* 去掉列表符号 */
        padding-left: 0; /* 去掉左侧缩进 */
    }
}