/* ========================================
   页面容器基础样式
   ======================================== */

.page-container {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 100;
}

/* 激活的页面 */
.page-container.active {
    opacity: 1;
    visibility: visible;
}

/* 第一页特殊处理 */
#page-1 {
    z-index: 1;
}

#page-1.active {
    z-index: 100;
}


/* ========================================
   第二页样式 - 皮影列表页
   ======================================== */

#page-2 {
    z-index: 101;
}

/* 资料库页面标题 */
.materials-page-title {
    position: absolute;
    left: 158px;
    top: 80px;
    font-size: 48px;
    font-weight: bold;
    color: #333;
    font-family: 'SimSun', '宋体', serif;
    z-index: 110;
    margin: 0;
    padding: 0;
}

/* 标题下方横线 */
.materials-title-divider {
    position: absolute;
    left: 158px; /* 与标题左对齐 */
    top: 160px; /* 标题下方 */
    width: 1604px; /* 延伸到矩形右边界 (158px + 1446px) */
    height: 0.7px;
    background-color: #0000009c;
    z-index: 110;
}

/* 筛选器样式 */
.materials-filters {
    position: absolute;
    left: 158px; /* 与标题左对齐 */
    top: 180px; /* 横线下方 */
    display: flex;
    gap: 40px;
    z-index: 110;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-label {
    font-size: 16px;
    color: #333;
    font-family: 'SimSun', '宋体', serif;
}

.filter-select {
    padding: 6px 10px;
    font-size: 16px;
    font-family: 'SimSun', '宋体', serif;
    background: #000000c2;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    min-width: 120px;
}

.filter-select:focus {
    outline: none;
    background: #777;
}

.filter-select option {
    background: #666;
    color: white;
}

/* 资料库内容矩形 */
.materials-content-rectangle {
    position: absolute;
    left: 632px;
    top: 290px;
    width: 1130px;
    height: 616px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    z-index: 2; /* 移到网格图片下面，背景图片上面 */
}

/* 左侧放大图片显示区域 */
.large-image-display {
    position: absolute;
    top: calc(58%);
    left: calc(19%);
    transform: translate(-50%, -50%);
    z-index: 10;
}

.large-image-container {
    position: relative;
    width: 450px; /* 增加宽度 */
    height: 620px; /* 增加高度 */
    border-radius: 8px;
    overflow: hidden; /* 改为hidden，防止图片超出容器 */
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}

.large-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* 红色圆角矩形标签 */
.character-label {
    position: absolute;
    top: 45px;
    left: 45px;
    background: #AC0800;
    color: white;
    width: 32px; /* 宽度自适应 */
    min-width: 32px;
    height: auto; 
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    font-family: 'SimSun', '宋体', serif;
    writing-mode: vertical-rl;
    text-orientation: upright;
    box-shadow: 0 2px 8px rgba(172, 8, 0, 0.4);
    z-index: 11;
    padding: 12px 8px; /* 增加上下内边距，保持左右内边距 */
}

/* 背景容器 - 全屏展示 second_page.png */
.background-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1030px;
    z-index: 1;
}

.background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 网格容器 - 支持滚动 */
.grid-container {
    position: absolute;
    top: calc(60% - 20px);  /* 整体向上移动20px */
    left: 62.5%;  /* 保持水平居中 */
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-columns: repeat(5, 188px);  /* 恢复原来的列宽 */
    grid-auto-rows: 265px;     /* 恢复原来的行高 */
    column-gap: 35px;  /* 恢复原来的左右间距 */
    row-gap: 39px;     /* 恢复原来的上下间距 */
    padding: 15px 20px 0 0;  /* 上边距15px，右侧增加20px内边距（比之前再右移10px） */
    z-index: 2;
    width: auto;  /* 改为auto，让容器根据内容自适应 */
    max-height: 600px; /* 恢复原来的最大高度 */
    overflow-y: auto;  /* 垂直滚动 */
    overflow-x: hidden; /* 隐藏水平滚动 */
    
    /* 自定义滚动条样式 */
    scrollbar-width: thin;
    scrollbar-color: #ff9800 #f5f5f5;
}

/* Webkit浏览器滚动条样式 */
.grid-container::-webkit-scrollbar {
    width: 8px;
}

.grid-container::-webkit-scrollbar-track {
    background: #f5f5f5;
    border-radius: 4px;
}

.grid-container::-webkit-scrollbar-thumb {
    background: #ff9800;
    border-radius: 4px;
}

.grid-container::-webkit-scrollbar-thumb:hover {
    background: #f57c00;
}

/* 每个网格项 */
.grid-item {
    border-radius: 5px;
    padding: 0;  /* 移除内边距 */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    box-shadow: none;
    background: transparent;
    width: 188px;  /* 恢复原来的宽度 */
    height: 265px; /* 恢复原来的高度 */
    box-sizing: border-box; /* 确保边框包含在尺寸内 */
    position: relative; /* 确保定位正确 */
}

/* Hover 效果 - 所有项都有 */
/* 统一的hover效果 - 所有网格项都显示橙色边框 */
.grid-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(255, 165, 0, 0.5);
    border: 3px solid #ff9800;
    border-radius: 8px;  /* 为hover状态添加圆角 */
    box-sizing: border-box; /* 确保边框包含在尺寸内 */
}

/* 只有第一个可以点击 */
.grid-item.clickable {
    cursor: pointer;
}

/* 其他不可点击的项 */
.grid-item:not(.clickable) {
    cursor: pointer; /* 改为pointer，让所有项都有交互感 */
}

.grid-item img {
    width: 188px;  /* 固定宽度，不缩放 */
    height: 265px; /* 固定高度，不缩放 */
    object-fit: contain; /* 保持图片比例 */
}

/* 网格项容器 - 用于正片叠底效果 */
.grid-item-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    overflow: hidden; /* 确保内容不会超出容器边界 */
    box-sizing: border-box; /* 确保尺寸计算包含边框 */
    justify-items: center; /* 确保水平居中 */
    align-items: center; /* 确保垂直居中 */
}

/* 网格项底图 */
.grid-item-base {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 1;
    justify-self: center; /* 确保水平居中 */
    align-self: center; /* 确保垂直居中 */
}

/* 网格项叠加图 */
.grid-item-overlay {
    grid-area: 1 / 1;
    max-width: 70%; /* 进一步限制最大宽度，防止超出容器 */
    max-height: 70%; /* 进一步限制最大高度，防止超出容器 */
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    z-index: 2;
    mix-blend-mode: multiply; /* 正片叠底效果 */
    justify-self: center; /* 确保水平居中 */
    align-self: center; /* 确保垂直居中 */
}

/* 左侧大图显示区域 - 正片叠底效果 */
.large-image-stack {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}

/* 左侧大图底图 */
.large-image-base {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    z-index: 1;
}

/* 左侧大图叠加图 */
.large-image-overlay {
    grid-area: 1 / 1;
    max-width: 75%; /* 进一步限制最大宽度，防止超出容器 */
    max-height: 75%; /* 进一步限制最大高度，防止超出容器 */
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    z-index: 2;
    mix-blend-mode: multiply; /* 正片叠底效果 */
}

/* ========================================
   第三页样式 - 详情页
   ======================================== */

#page-3 {
    z-index: 102;
    background: #f5f5f5;
}

/* 详情页加载过渡，避免初始布局闪烁 */
body.detail-loading #page-3 * {
    transition: none !important;
}

/* 加载判定期间隐藏左侧放大区，避免从默认位置到目标位置的闪烁 */
body.detail-loading .detail-left-image-display {
    visibility: hidden;
}

/* 全屏容器 */
.fullscreen-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1030px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.detail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ========================================
   第四页样式 - AI创作页面（iframe）
   ======================================== */

#page-4 {
    z-index: 103;
    background: #000;
}

/* iframe 容器 */
.iframe-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1030px;
    z-index: 1;
}

#external-website {
    width: 100%;
    height: 100%;
    border: none;
}

/* ========================================
   导航按钮样式（第二页和第三页共用）
   ======================================== */

.nav-buttons {
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 10;
    display: flex;
    gap: 15px;
}


.nav-btn {
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid white;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.nav-btn:hover {
    background: rgba(255, 165, 0, 0.8);
    border-color: #ff9800;
    transform: scale(1.05);
}

.nav-btn:active {
    transform: scale(0.98);
}

/* ========================================
   详情页面内容样式
   ======================================== */

/* 左侧图片显示区域 */
.detail-left-image-display {
    position: absolute;
    top: 182px; /* 向上移动8px */
    left: 126px;
    z-index: 100; /* 提高z-index，确保在背景图片之上 */
}

.detail-left-image-container {
    position: relative; /* 保持相对定位，用于红色标签 */
    height: 712px; /* 与右侧矩形高度一致 */
    width: auto; /* 宽度自动调整，适应图片尺寸 */
    border-radius: 8px;
    overflow: hidden; /* 改为hidden，防止图片超出容器边界 */
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
    display: grid; /* 启用Grid布局 */
    place-items: center; /* 居中Grid项 */
}

/* 背景图片 */
.detail-left-image-base {
    /* 移除绝对定位，让它参与Grid布局 */
    grid-area: 1 / 1; /* 放置在Grid的第一个单元格 */
    height: 712px; /* 与右边矩形高度一致 */
    width: auto; /* 宽度按图片比例自动调整 */
    object-fit: contain; /* 保持原始长宽比例，不拉伸变形 */
    display: block;
    z-index: 1;
}

/* 叠加图片 */
.detail-left-image-overlay {
    /* 移除绝对定位和居中变换，让Grid布局处理 */
    grid-area: 1 / 1; /* 放置在Grid的第一个单元格，实现叠加 */
    height: 85%; /* 进一步缩小到85%，确保不溢出 */
    width: auto;
    max-width: 85%; /* 限制最大宽度 */
    object-fit: contain; /* 保持原始长宽比例，不拉伸变形 */
    display: block;
    z-index: 2;
    mix-blend-mode: multiply; /* 添加正片叠底效果 */
}

/* 详情页面红色圆角矩形标签 */
.detail-character-label {
    position: absolute;
    top: 45px;
    left: 50px; /* 向右移动5px */
    background: #AC0800;
    color: white;
    width: auto;
    min-width: 32px;
    height: auto; 
    border-radius: 20px; /* 加大圆角 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    font-family: 'SimSun', '宋体', serif;
    writing-mode: vertical-rl;
    text-orientation: upright;
    box-shadow: 0 2px 8px rgba(172, 8, 0, 0.4);
    z-index: 200; /* 确保在最顶层 */
    padding: 12px 8px;
}

/* ========================================
   导航按钮高亮样式
   ======================================== */

/* 导航按钮高亮状态 */
.nav-button.active {
    color: #E7C045 !important; /* 与五天晴·皮影一致的黄色 */
    font-weight: bold;
}

/* ========================================
   圆形缩略图画廊样式
   ======================================== */

/* 缩略图画廊容器 */
.detail-thumbnail-gallery {
    position: absolute;
    top: 182px; /* 与左侧图片和右侧内容框对齐 */
    left: 630px; /* 向右移动20px (从610px改为630px) */
    width: 220px; /* 扩大宽度，从200px改为220px */
    height: 712px; /* 与右侧矩形高度一致 */
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* 右对齐 */
    overflow: visible; /* 允许内容溢出，防止hover时被裁剪 */
    visibility: hidden; /* 默认隐藏，防止从有到无的闪烁 */
}

/* 当确认存在 part 后再显示，避免初始闪烁 */
.parts-ready .detail-thumbnail-gallery {
    visibility: visible;
}

/* 滚动容器 */
.thumbnail-scroll-container {
    width: 180px; /* 扩大宽度，从144px改为180px */
    height: 100%; /* 占满容器高度 */
    overflow-y: auto; /* 垂直滚动 */
    overflow-x: visible; /* 允许水平溢出，防止悬停时被裁剪 */
    scrollbar-width: none; /* Firefox隐藏滚动条 */
    -ms-overflow-style: none; /* IE隐藏滚动条 */
    display: flex;
    flex-direction: column;
    gap: 20px; /* 圆形之间的间距 */
    padding: 20px 15px; /* 增加左右padding，为hover效果留出空间 */
}

/* 隐藏滚动条 */
.thumbnail-scroll-container::-webkit-scrollbar {
    display: none;
}

/* 单个圆形缩略图 */
.thumbnail-circle {
    width: 144px;
    height: 144px;
    background: #FFFFFF;
    border-radius: 50%; /* 圆形 */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0; /* 防止收缩 */
    cursor: pointer;
}

/* 圆形缩略图悬停效果 */
.thumbnail-circle:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    z-index: 150; /* 提高z-index，确保悬停时显示在最顶层 */
}

/* 圆形缩略图选中状态 */
.thumbnail-circle.selected {
    border: 3px solid #ff9800;
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(255, 152, 0, 0.4);
}

/* 圆形内的图片 */
.thumbnail-circle img {
    width: 100%; /* 完全填充圆形，取消内边框 */
    height: 100%;
    object-fit: contain; /* 完整显示图片，保持比例，可能有留白 */
    border-radius: 50%; /* 圆形 */
}

/* 滚动控制按钮容器 */
.thumbnail-controls {
    position: absolute;
    bottom: 20px;
    right: -20px; /* 向右移动20px */
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 101;
}

/* 滚动控制按钮 */
.thumbnail-btn {
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* 滚动控制按钮悬停效果 */
.thumbnail-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.1);
}

/* 滚动控制按钮禁用状态 */
.thumbnail-btn:disabled {
    background: rgba(128, 128, 128, 0.5);
    cursor: not-allowed;
    transform: none;
}

/* 箭头样式 */
.arrow-up, .arrow-down {
    font-size: 12px;
    font-weight: bold;
    color: white;
    display: block;
    line-height: 1;
}

.arrow-up {
    margin-bottom: 1px; /* 微调向上箭头位置 */
}

.arrow-down {
    margin-top: 1px; /* 微调向下箭头位置 */
}

/* 白色矩形背景框 */
.detail-content-box {
    position: absolute;
    left: 992px;
    top: 182px; /* 向上移动8px */
    width: 764px;
    height: 712px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    padding: 30px;
    box-sizing: border-box;
    z-index: 100; /* 提高z-index，确保在背景图片之上 */
    overflow-y: auto;
}

/* 详情页面标题 */
.detail-title {
    font-size: 36px;
    font-weight: bold;
    color: #000;
    margin: 0 0 15px 0;
    font-family: 'SimSun', '宋体', serif;
    line-height: 1.2;
}

/* 详情页面属性 */
.detail-attributes {
    font-size: 16px;
    color: #9B9B9B;
    margin: 0 0 20px 0;
    font-family: 'SimSun', '宋体', serif;
    line-height: 1.4;
}

/* 详情页面分割线 */
.detail-divider {
    width: 100%;
    height: 1px;
    background-color: #E0E0E0;
    margin: 0 0 25px 0;
}

/* 详情页面介绍 */
.detail-description {
    font-size: 16px;
    color: #333;
    line-height: 1.6;
    font-family: 'SimSun', '宋体', serif;
}

.detail-description p {
    margin: 0 0 18px 0;
    text-indent: 2em;
}

.detail-description p:last-child {
    margin-bottom: 0;
}

/* ========================================
   下载按钮样式
   ======================================== */

.download-container {
    position: absolute;
    left: 1580px;
    top: 220px; /* 与左侧红色标签上边缘对齐（182px + 45px = 227px） */
    z-index: 100;
}

.download-btn {
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid white;
    border-radius: 25px;
    color: white;
    padding: 12px 24px;
    font-size: 16px;
    font-family: 'SimSun', '宋体', serif;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.download-btn:hover {
    background: rgba(255, 255, 255, 0.9);
    color: black;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.download-btn:disabled {
    background: rgba(128, 128, 128, 0.5);
    border-color: rgba(128, 128, 128, 0.5);
    color: rgba(255, 255, 255, 0.5);
    cursor: not-allowed;
    transform: none;
}

.download-icon {
    font-size: 18px;
}

.download-text {
    font-size: 16px;
}

/* 下载成功提示样式 */
.download-success {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    animation: fadeIn 0.3s ease;
}

.download-success-content {
    background: rgba(255, 255, 255, 0.9);
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    position: relative;
    animation: slideIn 0.3s ease;
}

.download-success h3 {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 24px;
    font-family: 'SimSun', '宋体', serif;
}

.download-success p {
    margin: 0 0 20px 0;
    color: #666;
    font-size: 16px;
    font-family: 'SimSun', '宋体', serif;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { 
        opacity: 0;
        transform: translateY(-20px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}