/* 全局通用样式：作用于所有元素 */
* {
    margin: 0;                    /* 清除所有元素的外边距（元素外部的空白） */
    padding: 0;                   /* 清除所有元素的内边距（元素内部的空白） */
    box-sizing: border-box;       /* 元素的宽高包含边框和内边距（避免布局计算错误） */
    font-family: Verdana, Geneva, Tahoma, sans-serif; /* 设置默认字体为Verdana，备用为无衬线字体 */
}

/* 图片通用样式 */
img {
    max-width: 100%;              /* 图片最大宽度为容器宽度，防止图片溢出父元素 */
}

/* 一级标题样式 */
h1 {
    color: rgb(255, 0, 0);        /* 文字颜色为纯红色 */
    text-align: center;           /* 文字水平居中 */
    padding: 40px;                /* 上下左右内边距均为40像素 */
}

/* 无序列表样式 */
ul {
    list-style: none;             /* 移除列表项前的默认符号（如圆点、方块等） */
}

/* 页眉区域样式 */
.page-header {
    background-color: black;      /* 背景颜色为黑色 */
}

/* 预览区域容器样式 */
.preview {
    max-width: 1400px;            /* 最大宽度限制为1400像素 */
    margin-left: auto;            /* 左外边距自动计算 */
    margin-right: auto;           /* 右外边距自动计算（实现水平居中） */
}

/* 预览区域内的视频样式 */
.preview video {
    background-color: black;      /* 视频背景为黑色（填充视频未播放时的空白区域） */
    width: 100%;                  /* 宽度占满父容器 */
    border: 5px solid black;      /* 边框为5像素宽的黑色实线 */
    margin-top: 80px;             /* 上外边距80像素（与上方元素间隔） */
}

/* 截图列表容器样式（Flex布局） */
.screenshots {
    display: flex;                /* 启用Flex弹性布局 */
    flex-wrap: wrap;              /* 允许子元素换行（超出容器宽度时换行显示） */
    justify-content: center;      /* 子元素水平居中排列 */
    column-gap: 40px;             /* 子元素之间的列间距为40像素 */
    row-gap: 40px;                /* 子元素之间的行间距为40像素 */
    padding-top: 80px;            /* 上内边距80像素 */
    padding-bottom: 80px;         /* 下内边距80像素 */
}

/* 单个截图容器样式 */
.screenshot {
    max-width: 320px;             /* 最大宽度320像素（防止元素过宽） */
    min-width: 280px;             /* 最小宽度280像素（防止元素过窄） */
    border-radius: 20px;          /* 边框圆角20像素（实现圆角矩形效果） */
    border: 5px solid black;      /* 边框为5像素宽的黑色实线 */
}

/* 截图容器内的图片样式 */
.screenshot img {
    width: 100%;                  /* 图片宽度占满父容器 */
    height: 100%;                 /* 图片高度占满父容器 */
    object-fit: cover;            /* 图片填充容器（可能裁剪，保持比例不变形） */
    border-radius: 15px;          /* 图片圆角15像素（略小于容器圆角避免重叠） */
}

/* 游戏画布容器样式 */
.game-wrapper {
    margin-left: auto;            /* 左外边距自动计算 */
    margin-right: auto;           /* 右外边距自动计算（实现水平居中） */
    background-color: black;      /* 背景颜色为黑色 */
    margin-bottom: 80px;          /* 下外边距80像素（与下方元素间隔） */
}

/* Three.js画布样式 */
.webgl {
    outline: none;                /* 移除画布聚焦时的默认轮廓线（如蓝色边框） */
}

/* 页脚段落样式 */
.page-footer p {
    background-color: black;      /* 背景颜色为黑色 */
    color: white;                 /* 文字颜色为白色 */
    padding: 100px;               /* 上下左右内边距均为100像素 */
    text-align: center;           /* 文字水平居中 */
}

  .game-over-screen, .win-screen {
    width: 80%;
    max-width: 600px;
    text-align: center;
    font-family: Arial, sans-serif;
  }
  
  .game-over-screen h1, .win-screen h1 {
    margin-bottom: 20px;
    text-shadow: 0 0 10px rgba(255,255,255,0.5);
  }
  
  .game-over-screen p, .win-screen p {
    margin: 10px 0;
  }