/* 全局样式重置 */
* {
    margin: 0; /* 清除所有元素的默认外边距 */
    padding: 0; /* 清除所有元素的默认内边距 */
    box-sizing: border-box; /* 使用怪异盒模型，让 border 和 padding 不会撑大元素的宽高 */
    -webkit-tap-highlight-color: transparent; /* 移除 iOS 和安卓上点击链接或按钮时自带的半透明灰色高亮背景 */
} /* 结束全局重置 */

/* 页面基础样式 */
html, body {
    width: 100%; /* 宽度填满屏幕 */
    height: 100%; /* 高度填满屏幕 */
    overflow: hidden; /* 彻底禁用整个网页的原生上下滚动条 */
    position: fixed; /* 强行固定视口，彻底防止 iOS 浏览器的橡皮筋下拉回弹效果 */
    background: #000; /* 设置底层背景颜色为纯黑色，防止多媒体加载间隙白屏闪烁 */
} /* 结束视口固定 */

/* 页面容器样式 */
.page {
    width: 100vw; /* 视口宽度 100% */
    height: 100vh; /* 视口高度 100% */
    position: fixed; /* 固定定位，脱离文档流 */
    left: 0; /* 紧贴屏幕左侧 */
    top: 0; /* 紧贴屏幕顶部 */
    display: none; /* 默认全部隐藏，后续通过 JS 的控制来显示 */
} /* 结束通用页面样式 */

/* 视频图层样式 */
.video-layer {
    position: absolute; /* 绝对定位 */
    left: 0; /* 紧贴左侧 */
    top: 0; /* 紧贴顶部 */
    width: 100%; /* 宽度撑满父级 */
    height: 100%; /* 高度撑满父级 */
    z-index: 1; /* 层级设置为 1，使其置于页面的最底层作为背景图 */
} /* 结束视频图层样式 */

/* 背景视频样式 */
.bg-video {
    width: 100%; /* 宽度撑满 */
    height: 100%; /* 高度撑满 */
    object-fit: cover; /* 核心属性：保持视频原有宽高比进行裁剪，完美铺满全屏，不拉伸变形 */
} /* 结束背景视频样式 */

/* 视频封面图样式 */
.video-cover {
    position: absolute; /* 绝对定位覆盖在视频上 */
    left: 0; /* 紧贴左侧 */
    top: 0; /* 紧贴顶部 */
    width: 100%; /* 宽度撑满 */
    height: 100%; /* 高度撑满 */
    object-fit: cover; /* 保持比例裁剪铺满 */
    z-index: 2; /* 层级高于视频(1)，低于UI */
    pointer-events: none; /* 点击穿透，不影响视频交互 */
    transition: opacity 0.3s ease; /* 淡出动画 */
} /* 结束视频封面图样式 */

/* 封面图隐藏状态 */
.video-cover.hide {
    opacity: 0; /* 透明隐藏 */
    visibility: hidden; /* 不可见 */
} /* 结束封面图隐藏状态样式 */

/* UI容器样式 */
.ui-container {
    position: absolute; /* 绝对定位 */
    left: 50%; /* 定位在屏幕水平居中位置 */
    bottom: 10%; /* 距离底部 10% 的位置 */
    transform: translate(-50%, -50%) scale(2); /* translate 配合居中，scale(2) 将首页的UI大小整体放大两倍 */
    z-index: 100; /* 交互层级设置为 100，使其悬浮在视频之上 */
    text-align: center; /* 容器内部的所有图片和文字居中对齐 */
    pointer-events: none; /* 【关键】点击穿透：允许用户的点击直接穿透本容器，用来触发底下黑幕封面的点击事件 */
} /* 结束UI容器样式 */

/* UI容器子元素样式 */
.ui-container * {
    pointer-events: auto; /* 恢复 UI 容器内部所有子元素的点击能力 */
} /* 结束UI子元素点击恢复 */

/* 介绍图样式 */
.intro-img {
    width: 40%; /* 宽度占父级 80% */
    display: block; /* 转为块级元素 */
    margin: 0 auto 10px; /* 居中并设置下边距 30px */
} /* 结束介绍图样式 */

/* 开始按钮样式 */
.start-btn-img {
    width: 80%; /* 宽度占父级 80% */
    display: block; /* 转为块级元素 */
    margin: 0 auto; /* 左右自动外边距实现块级居中 */
    cursor: pointer; /* 鼠标悬浮时变为手型 */
} /* 结束开始按钮样式 */

/* 封面遮罩层样式 */
.cover-layer {
    position: absolute; /* 绝对定位 */
    left: 0; /* 紧贴左侧 */
    top: 0; /* 紧贴顶部 */
    width: 100%; /* 宽度撑满 */
    height: 100%; /* 高度撑满 */
    z-index: 9999; /* 最高层级：必须绝对盖住屏幕上的所有元素 */
    background: #000; /* 纯黑背景，确保加载期间用户不会看到底层瞬间移位的UI */
    overflow: hidden; /* 超出部分隐藏 */
} /* 结束封面层样式 */

/* 封面图片样式 */
.cover-img {
    width: 100%; /* 宽度撑满 */
    height: 100%; /* 高度撑满 */
    object-fit: cover; /* 保持比例裁剪铺满 */
    display: block; /* 转为块级元素消除间隙 */
} /* 结束封面图片样式 */

/* 返回按钮样式 */
.back-btn {
    position: absolute; /* 绝对定位 */
    left: 20px; /* 距离左侧 20px */
    top: 20px; /* 距离顶部 20px */
    width: 50px; /* 固定宽度 50px */
    z-index: 9999; /* 极高层级防止被遮挡 */
    cursor: pointer; /* 鼠标手型 */
} /* 结束返回按钮样式 */

/* 答题容器样式 */
.question-container {
    position: absolute; /* 绝对定位 */
    left: 50%; /* 水平定位在 50% */
    bottom: 1%; /* 距离底部 1% */
    transform: translate(-50%, 0%) scale(1); /* 水平居中，大小不进行放大 */
    width: 95%; /* 宽度占据 95% */
    text-align: center; /* 内部元素居中 */
    z-index: 120; /* 盖在视频之上 */
} /* 结束答题容器样式 */

/* 重播按钮样式 */
.play-btn {
    width: 85%; /* 宽度占据 85% */
    margin: 0 auto 20px; /* 左右自动居中，下边距 20px */
    cursor: pointer; /* 鼠标手型 */
    display: block; /* 设为块级元素 */
} /* 结束重播按钮样式 */

/* 答题大盒样式 */
.question-box {
    position: relative; /* relative定位：为内部绝对定位的 A B C D 文本提供排列基准盒子 */
    width: 100%; /* 宽度撑满 */
} /* 结束答题大盒样式 */

/* 答题背景图样式 */
.question-bg {
    width: 100%; /* 宽度 100% 铺满大盒 */
} /* 结束答题背景图样式 */

/* 选项容器样式 */
.options {
    position: absolute; /* 绝对定位 */
    left: 0; /* 紧贴盒子左侧 */
    top: 24%; /* 距离盒子顶部 24% 位置 */
    width: 100%; /* 宽度 100% */
    height: 100%; /* 高度 100% */
    display: flex; /* 开启弹性盒布局 */
    flex-direction: column; /* 规定主轴方向为垂直向下排列 */
    align-items: center; /* 在侧轴上居中对齐所有选项 */
    padding-top: 7%; /* 顶部内边距 7% */
    gap: 2px; /* 每个选项之间保持 2 像素的间距 */
} /* 结束选项容器样式 */

/* 单选项样式 */
.option-item {
    position: relative; /* 相对定位，为里面的勾选状态图提供定位基准 */
    width: 100%; /* 宽度 100% */
    cursor: pointer; /* 鼠标手型 */
} /* 结束单选项样式 */

/* 选项图片样式 */
.option-img {
    width: 100%; /* 选项大图宽度 100% */
} /* 结束选项图片样式 */

/* 选项状态图样式 */
.option-state {
    position: absolute; /* 绝对定位 */
    left: 8%; /* 距离左侧 8% */
    top: 40%; /* 距离顶部 40% */
    transform: translateY(-50%); /* 垂直居中修正 */
    width: 10%; /* 宽度占父选项盒子 10% 比例大小 */
    height: auto; /* 高度自适应 */
    pointer-events: none; /* 静止对其进行点击，防止干扰父级点击 */
} /* 结束选项状态图样式 */

/* 模态弹窗样式 */
.modal {
    position: fixed; /* 固定定位罩住全屏 */
    left: 0; /* 紧贴最左 */
    top: 0; /* 紧贴最顶 */
    width: 100vw; /* 宽度满视口 */
    height: 100vh; /* 高度满视口 */
    background: rgba(0, 0, 0, 0.7); /* 使用黑色半透明背景罩住全屏 */
    z-index: 99999; /* 极高层级，处于答题页面之上 */
    display: none; /* 默认隐藏 */
    align-items: center; /* 垂直居中弹窗内容 */
    justify-content: center; /* 水平居中弹窗内容 */
} /* 结束模态弹窗样式 */

/* 弹窗实体样式 */
.modal-content {
    position: relative; /* 相对定位，为内部定位按钮提供基准 */
    width: 80%; /* 宽度占屏幕 80% */
} /* 结束弹窗实体样式 */

/* 弹窗背景样式 */
.modal-bg {
    width: 100%; /* 弹窗背景图宽度 100% */
    display: block; /* 设为块级消除间隙 */
} /* 结束弹窗背景样式 */

/* 弹窗按钮组样式 */
.modal-buttons {
    position: absolute; /* 绝对定位 */
    left: 50%; /* 水平居中起点 */
    transform: translate(-50%, -50%); /* 配合实现完全居中 */
    bottom: 0; /* 紧贴底部 */
    width: 60%; /* 宽度占卡片 60% */
    display: flex; /* 开启弹性布局 */
    flex-direction: column; /* 垂直向下排列 */
    gap: 25px; /* 按钮间距 25px */
} /* 结束弹窗按钮组样式 */

/* 单个弹窗按钮样式 */
.modal-btn {
    width: 100%; /* 按钮宽度 100% 撑满 */
    display: block; /* 块级显示 */
    cursor: pointer; /* 鼠标手型 */
} /* 结束单个弹窗按钮样式 */

/* 结果页特有样式 */
#pageResult {
    display: none; /* 默认隐藏 */
    overflow-y: auto !important; /* 【核心重要】允许结果页在垂直方向上可以上下滑动 */
    -webkit-overflow-scrolling: touch; /* 让 iOS 设备在滚动长图时具备丝滑的原生硬件加速和滚动回弹感 */
    background: #000; /* 纯黑背景色 */
    position: absolute !important; /* 绝对定位 */
    left: 0 !important; /* 紧贴左侧 */
    top: 0 !important; /* 紧贴顶部 */
    width: 100vw !important; /* 宽度 100% 视口 */
    height: 100vh !important; /* 高度 100% 视口 */
    z-index: 100; /* 处于合适层级 */
} /* 结束结果页特有样式 */