/* =========================================
   1. 基础设定 & 全局排版
   ========================================= */
body {
    /* 把咱们的 ZhaoyuanSong 放在最前面，如果加载失败再用后面的备用字体 */
    font-family: 'ZhaoyuanSong', "Noto Serif SC", STSong, serif;
    color: #333;
    line-height: 1.8; /* 稍微调大一点行距，宋体阅读会更舒服 */
    background-color: #fff;
    margin: 0;
    padding: 40px 20px;
}

.main-content {
    max-width: 900px;
    margin: 0 auto;
}

/* =========================================
   2. 顶部标题区 & 大头像 (封面图)
   ========================================= */
.site-header {
    text-align: center;
    margin-bottom: 40px;
}
.site-logo {
    width: 120px;       /* 控制顶部封面大头像的宽度 */
    height: 120px;      /* 控制顶部封面大头像的高度 */
    border-radius: 50%; /* 让大头像变成完美圆形 */
    object-fit: cover;  /* 防止图片被拉伸变形 */
    margin-bottom: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* =========================================
   折叠式互动引导框
   ========================================= */
.comment-notice-wrapper {
    margin: 20px 0 40px 0;
}

.comment-guide {
    background-color: #f7f7f5;
    border-left: 4px solid #def9ff; /* 左侧加一条你人物卡悬浮时的粉色装饰线 */
    border-radius: 8px;
    padding: 12px 18px;
    border: 1px solid #eee;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.comment-guide summary {
    font-size: 0.95em;
    color: #444;
    cursor: pointer;
    user-select: none;
    margin: 0; /* 抵消原有的margin */
    padding: 4px 0;
}

.comment-guide summary:hover {
    color: #a6bfd7; /* 鼠标悬浮变蓝色 */
}

/* 展开后的具体步骤内容 */
.guide-content {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #ccc; /* 虚线分割线，显得精致 */
    font-size: 0.9em;
    color: #555;
    line-height: 1.7;
}

.guide-content ol {
    padding-left: 20px;
    margin-bottom: 20px;
}

.guide-content li {
    margin-bottom: 8px;
}

/* 重点警告的邮箱验证文字 */
.warning-text {
    color: #220403;
    background-color: #def9ff;
    padding: 2px 6px;
    border-radius: 4px;
}

/* 前往加入的按钮 */
.join-group-btn {
    display: inline-block;
    background-color: #def9ff;
    color: white !important;
    padding: 8px 18px;
    border-radius: 20px;
    text-decoration: none !important;
    font-weight: bold;
    transition: all 0.2s;
}
.join-group-btn:hover {
    background-color: #def9ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(100, 149, 237, 0.4);
}


/* =========================================
   3. 首页两栏布局 (电脑端)
   ========================================= */
.homepage-container {
    display: flex !important;
    flex-direction: row; /* 强制水平横排 */
    flex-wrap: nowrap;   /* 绝对不允许换行！右边掉不下去 */
    gap: 40px;
}

.left-column, .right-column {
    flex: 1 1 50%; /* 强制它们各占一半的空间 */
    min-width: 0;  /* 【核心魔法】防止左栏的图片/长文字撑破宽度！ */
    display: flex;
    flex-direction: column;
    gap: 30px;
}


/* =========================================
   4. 各种框体 & 列表样式
   ========================================= */
.intro-box, .toc-box {
    padding: 20px 25px;
    border-radius: 8px;
}
.intro-box { background-color: #eaf2fb; }
.toc-box { background-color: #f7f7f5; }

details { margin-bottom: 10px; }
summary {
    cursor: pointer;
    font-weight: bold;
    padding: 5px 0;
    user-select: none;
}
summary:hover { color: #666; }

.chapter-list {
    list-style: none;
    padding-left: 20px;
}
.chapter-list li { margin: 8px 0; }
.chapter-list a { text-decoration: none; color: #333; }
.chapter-list a:hover { text-decoration: underline; }

/* =========================================
   5. 人物卡 & 小头像
   ========================================= */
.character-list {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

/* --- 新增这部分代码，控制卡片内部排版 --- */
.character-card {
    display: flex;
    flex-direction: column; /* 关键：让图片和文字垂直居中排列 */
    align-items: center;    /* 关键：让图片和文字水平居中对齐 */
    gap: 8px;               /* 图片和文字之间的间距 */
    text-decoration: none;  /* 顺手去掉链接自带的下划线，会更好看 */
    color: #333;            /* 改一下字体颜色，不想要默认的蓝色可以改这里 */
}
/* ---------------------------------------- */

/* 你原来的头像代码保留 */
.avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #eee;
    transition: transform 0.2s;
}

.avatar:hover { 
    transform: scale(1.05); 
}

/* 你可以给名字也单独加点样式（可选） */
.character-name {
    font-size: 14px;
}


/* =========================================
   6. 小说正文页样式
   ========================================= */
.chapter-content { max-width: 700px; margin: 0 auto; }
.content-body { font-size: 1.1em; margin-bottom: 50px; }
.pagination {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #eee;
    padding-top: 20px;
}
.pagination a { text-decoration: none; color: #0066cc; }


/* =========================================
   正文插画展示优化
   ========================================= */
.content-body img {
    max-width: 100%;      /* 图片绝不超出屏幕宽度 */
    height: auto;         /* 保持原图比例 */
    border-radius: 12px;  /* 唯美的圆角 */
    box-shadow: 0 8px 20px rgba(0,0,0,0.08); /* 高级感的画框阴影 */
    display: block;
    margin: 20px auto;    /* 图片自动居中 */
}
/* =========================================
   游戏级画廊卡片 (人设页专属)
   ========================================= */
.game-gallery {
    display: flex;
    gap: 20px;
    overflow-x: auto; /* 核心：超出宽度允许横向滑动 */
    padding: 10px 0 30px 0;
    scroll-snap-type: x mandatory; /* 手机上滑动时会有吸附停顿感 */
}

/* 美化横向滚动条 */
.game-gallery::-webkit-scrollbar { height: 8px; }
.game-gallery::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
.game-gallery::-webkit-scrollbar-thumb { background: #def9ff; border-radius: 4px; }

/* 卡片样式 */
.game-card {
    flex: 0 0 280px; /* 卡片宽度固定，不管放几张图都不会挤压变形 */
    background: #fdfdfd;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    border: 1px solid #eee;
    scroll-snap-align: start; 
    display: flex;
    flex-direction: column;
}

/* 图片外框（解决尺寸不一的核心） */
.card-img-box {
    height: 380px; /* 把所有图片强制卡在这个高度 */
    cursor: zoom-in;
    overflow: hidden;
}

.card-img-box img {
    width: 100%;
    height: 100%;
    /* object-fit: cover 是真正的神！
       长图扁图它都能自动按比例填满这个框，多余的部分隐藏，绝不拉伸变形！ */
    object-fit: cover; 
    transition: transform 0.3s ease;
}
.card-img-box:hover img { transform: scale(1.05); }

/* 文字介绍区 */
.card-info {
    padding: 15px;
    font-size: 0.9em;
    color: #444;
    border-top: 3px solid #eee; /* 卡片中间的一抹粉色分割线 */
}
.card-info p { margin: 5px 0; }

/* =========================================
   全屏大图模式 (Lightbox)
   ========================================= */
.lightbox {
    display: none; /* 默认隐藏 */
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.85); /* 黑色半透明遮罩 */
    z-index: 9999; /* 保证盖住所有东西 */
    justify-content: center; align-items: center;
    cursor: zoom-out;
}
.lightbox img {
    max-width: 90%; max-height: 90%;
    /* 这里用 contain，保证点开大图时，不论你画得多长多宽，都会完整显示不裁剪！ */
    object-fit: contain; 
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.close-btn { position: absolute; top: 20px; right: 40px; color: white; font-size: 50px; }


/* =========================================
   7. 手机端深度适配优化 (核心排序魔法)
   ========================================= */
@media (max-width: 1000px) {
    .homepage-container {
        flex-direction: column !important; /*  关键：强制手机端变回上下竖排！ */
        gap: 20px; 
    }
    
    /* 打破左右两栏限制 */
    .left-column, .right-column {
        display: contents !important;      /*  关键：强制手机端解除左右限制 */
    }

    /* 手机端独家顺序：简介 -> 目录 -> 人设 -> 世界观 */
    .intro-box { order: 1; }
    .toc-box { order: 2; }
    .character-section { order: 3; }
    .worldview-box { order: 4; }
    
    body { padding: 20px 15px; }
    .intro-box, .toc-box, .worldview-box { padding: 15px; }
    .character-list { flex-wrap: wrap; justify-content: flex-start; }
    
    .pagination {
        flex-direction: column; 
        align-items: center;    
        gap: 20px;              
        text-align: center;
        padding-bottom: 30px;
    }
}