* {
    padding: 0;
    margin: 0;
}

/* 全局字体：余繁真素体 + 98-Bottles-of-Beer-Bold */
@font-face {
    font-family: "余繁真素体";
    src: url("../media/余繁真素体.otf") format("opentype");
    font-display: swap;
}

@font-face {
    font-family: "98-Bottles-of-Beer-Bold";
    src: url("../media/98bottlesbold.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "三极行楷简体-粗";
    src: url("../media/三极行楷简体-粗.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "A-Charming-Font-Expanded";
    src: url("../media/Achafexp.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Amethast-Stones";
    src: url("../media/Amethast-Stones/AmethastStones-Regular.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Minecraft";
    src: url("../media/minecraft_fixed.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "思源臻宋";
    src: url("../media/思源屏显臻宋.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "萌神手写体";
    src: url("../media/萌神手写体.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "霞鹜臻楷";
    src: url("../media/霞鹜臻楷.ttf") format("truetype");
    font-display: swap;
}

body,
button,
input {
    font-family: "余繁真素体", "Microsoft YaHei", sans-serif;
}

/* 网页背景图：锁定 主城.png 原始长宽比 1915:1080，铺满视口且不拉伸变形；右下角锁定以保留图片自带的右下角水印 */
.bg-photo {
    position: fixed;
    right: 0;
    bottom: 0;
    /* 保持覆盖视口的同时严格维持原图长宽比 */
    width: max(100vw, 177.315vh); /* 177.315vh = 1915 / 1080 * 100vh */
    aspect-ratio: 1915 / 1080;
    background-image: url("../media/主城.png");
    background-size: 100% 100%; /* 元素本身已是原图比例，故不会变形 */
    background-repeat: no-repeat;
    z-index: -1;
}

/* 中心介绍区 */
.hero {
    position: relative;
    min-height: 100vh;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
    color: #ffffff;
}

/* 大标题 + 副标题：定位到浏览器页面正中心（基于视口高度 50vh）*/
.hero-heading {
    position: absolute;
    top: 50vh;
    left: 0;
    right: 0;
    transform: translateY(-50%);
}

/* 介绍区整体：位于标题下方，相对视口中心再向下 520px（下移使渐变区在顶部不可见） */
.hero-intro {
    padding-top: calc(50vh + 520px);
}

/* 白色区块：位于 town.png 背景下方，包裹“社区简介”及以下所有文本 */
.intro-sheet {
    position: relative;  /* 为内部大字 INTRODUCTION 提供定位基准 */
    background-color: #ffffff;
    padding: 60px 20px 80px;
    box-sizing: border-box;
    color: #231815;  /* 区块内所有文字颜色 */
}

/* town.png 与白色区块交界处的平滑渐变：由透明渐变到白色，融合过渡 */
.intro-sheet::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;  /* 紧贴白色区块上边界的上方 */
    height: 160px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff);
    pointer-events: none;
}

/* 正文与分隔区位于大字上方，保证可读 */
.intro-sheet .hero-divider,
.intro-sheet .hero-body {
    position: relative;
    z-index: 1;
}

.intro-sheet .divider-zh,
.intro-sheet .divider-en,
.intro-sheet .hero-body p {
    color: #231815;
    text-shadow: none;  /* 深色文字不再需要阴影 */
}

/* 湖水蓝区块：位于白色区块下方，标题格式与布局参考社区简介 / INTRODUCTION */
.scenery-sheet {
    position: relative;  /* 为交界渐变带提供定位基准 */
    min-height: 700px;   /* 适当厚度，保证倾斜图片与倒影完整显示，同时缩短底部空白 */
    background-color: #B0D5DF;
    padding: 60px 20px 40px;
    box-sizing: border-box;
    text-align: center;
    color: #231815;
}

/* 两区块分界线上的渐变带：由白色平滑过渡到湖水蓝，跨越分界线 */
.scenery-sheet::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -80px;   /* 向上延伸至白色区块，使渐变带居中于分界线 */
    height: 160px;
    background: linear-gradient(to bottom, #ffffff, #B0D5DF);
    pointer-events: none;
    z-index: 0;
}

/* 标题位于渐变带之上 */
.scenery-sheet .hero-divider {
    position: relative;
    z-index: 1;
}

/* 标题颜色与白色区块保持一致（深色、无阴影） */
.scenery-sheet .divider-zh,
.scenery-sheet .divider-en {
    color: #231815;
    text-shadow: none;
}

/* 时光定影画廊 */
.gallery {
    position: relative;
    z-index: 1;
    margin-top: 24px;
    padding-top: 70px;   /* 为倾斜图片的透视高度溢出与悬停上浮预留空间，保证图片完整显示 */
    overflow: hidden;    /* 裁剪伸出区块的左右倾斜图片，避免水平滚动条 */
}

/* 3D 舞台：透视容器，预留图片 + 倒影的高度 */
.gallery-stage {
    position: relative;
    height: 430px;
    perspective: 1200px;
}

/* 画廊单元：绝对定位居中，位置切换时平滑过渡 */
.gallery-item {
    position: absolute;
    left: 50%;
    top: 0;
    margin: 0;
    transform-style: preserve-3d;
    transition: transform 0.6s ease, opacity 0.6s ease;
}

/* 图片：固定高度、宽度自适应，保持长宽比不变；附水面倒影 */
.gallery-item img {
    display: block;
    height: 260px;
    width: auto;
    border: 4px solid #ffffff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
    -webkit-box-reflect: below 10px linear-gradient(rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.4));
    transition: transform 0.3s ease;
}

/* 鼠标悬停：图片向上浮动 */
.gallery-item:hover img {
    transform: translateY(-14px);
}

/* 中间图片：水平放置 */
.gallery-item.is-center {
    transform: translateX(-50%);
    z-index: 3;
}

/* 左侧图片：向内倾斜，与右侧对称 */
.gallery-item.is-left {
    transform: translateX(calc(-50% - 400px)) rotateY(45deg);
    z-index: 2;
    cursor: pointer;
}

/* 右侧图片：向内倾斜，与左侧对称 */
.gallery-item.is-right {
    transform: translateX(calc(-50% + 400px)) rotateY(-45deg);
    z-index: 2;
    cursor: pointer;
}

/* 未展示的图片：隐藏在中心后方 */
.gallery-item.is-hidden {
    transform: translateX(-50%) scale(0.6);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

/* 图片下方小字标题：仅中间图片显示 */
.gallery-item figcaption {
    margin-top: 14px;
    font-size: 13px;
    letter-spacing: 1px;
    color: #231815;
    text-align: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.gallery-item.is-center figcaption {
    opacity: 1;
}

/* PREV / NEXT 按钮：无边框无背景，花图 + 文本构成整体；各自居中到左/右倾斜图片中心（±400px） */
.gallery-nav {
    position: relative;
    height: 44px;
    margin-top: -44px;   /* 上移 PREV / NEXT 约 60px，使其紧贴水面倒影下缘下方，不与倒影重叠 */
}

.gallery-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    display: flex;
    align-items: center;
    gap: 50px;
    padding: 0;
    background: none;
    border: 0;
    font-family: "A-Charming-Font-Expanded", serif;
    font-size: 25px;
    letter-spacing: 3px;
    color: #231815;
    cursor: pointer;
    transition: transform 0.2s ease;
}

/* PREV 中心对齐左侧倾斜图片中心 */
#galleryPrev {
    transform: translate(calc(-50% - 400px), -50%);
}

/* NEXT 中心对齐右侧倾斜图片中心 */
#galleryNext {
    transform: translate(calc(-50% + 400px), -50%);
}

.gallery-btn-flower {
    height: 30px;
    width: auto;
}

#galleryPrev:hover {
    transform: translate(calc(-50% - 400px), -50%) scale(1.08);
}

#galleryNext:hover {
    transform: translate(calc(-50% + 400px), -50%) scale(1.08);
}

/* ===== 社区活动（GATHERING）区块 ===== */
.gathering-sheet {
    position: relative;
    background-color: #B0D5DF;
    padding: 40px 20px 50px;
    box-sizing: border-box;
    text-align: center;
    color: #231815;
    overflow: hidden;   /* 裁剪满屏（100vw）元素，避免水平滚动条 */
}

/* 标题颜色与湖蓝区块一致（深色、无阴影） */
.gathering-sheet .divider-zh,
.gathering-sheet .divider-en {
    color: #231815;
    text-shadow: none;
}

/* 画廊容器：横向擑满可视内容区（从左边界到右边界），上下留出经典胶卷带高度 */
.marquee-gallery {
    position: relative;
    margin-left: -20px;    /* 抵消 .gathering-sheet 的左右 20px 内边距，擑满内容区宽（不含滚动条） */
    margin-right: -20px;
    margin-top: 28px;
    margin-bottom: 0;
    padding: 36px 0;   /* 上下为经典胶卷带预留高度 */
    box-sizing: border-box;
    overflow: hidden;  /* 裁剪水平滚动的轨道 */
}

/* 水面倒影：镜像复制上方画廊，用渐变遮罩淡出；跨浏览器（含 Edge）可用 */
.marquee-reflection {
    height: 130px;              /* 仅保留贴近画廊的一段倒影，控制占位高度 */
    margin: 6px -20px 60px;     /* 顶部留出水面缝隙；左右抵消区块内边距使其满宽 */
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.marquee-gallery--mirror {
    transform: scaleY(-1);   /* 垂直翻转形成镜像倒影 */
    margin: 0;               /* 覆盖原画廊外边距，倒影定位交给 .marquee-reflection */
}

/* 经典胶卷带：跨视口宽，分别贴紧画廊上、下边；横向平铺、静态 */
.film-strip {
    position: absolute;
    left: 0;
    width: 100%;
    height: 36px;
    background-image: url("../media/经典胶卷带_条.png");
    background-repeat: repeat-x;
    background-size: 120px auto;   /* 瓦片宽 120px */
    z-index: 5;
    pointer-events: none;
}
.film-top {
    top: 0;
}
.film-bottom {
    bottom: 0;
}

/* 轨道：横向排列卡片，从右向左缓速循环滚动 */
.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee-scroll 42s linear infinite;
}

@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }   /* 卡片双份，位移半程完成无缝拼接 */
}

/* 单张卡片：白底立体格子（偷移阴影），图片在上、文字在下 */
.marquee-card {
    flex: 0 0 auto;
    width: 300px;
    margin-right: 30px;   /* 用 margin 而非 gap，保证半程 = 一整组，循环无跳变 */
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22), 6px 8px 0 rgba(70, 112, 126, 0.28);
    overflow: hidden;
    text-align: left;
}

.marquee-card img {
    display: block;
    width: 100%;
    height: 172px;
    object-fit: cover;
}

.marquee-card-body {
    padding: 12px 14px 16px;
}

.marquee-card-title {
    margin: 0 0 8px;
    font-family: "三极行楷简体-粗", "Microsoft YaHei", sans-serif;
    font-size: 17px;
    color: #231815;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.marquee-card-date {
    margin: 0 0 10px;
    font-size: 13px;
    color: #6b6b6b;
}

.marquee-status {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 4px;
    font-size: 12px;
    letter-spacing: 1px;
}

.status-ongoing { background: #d8f0dd; color: #2e7d46; }
.status-ended { background: #fbe2cf; color: #b5642a; }

/* 加入我们区块：湖水蓝背景，白色面板距上右下边界 60px，左边界重合 */
.community-sheet {
    position: relative;
    background-color: #B0D5DF;
    padding: 30px 120px 60px 0;
    box-sizing: border-box;
    text-align: center;
    color: #231815;
    overflow: hidden;   /* 隐藏滑入前位于区块左侧外的白色面板 */
}

/* 白色面板：3D 立体感，初始位于区块左侧之外，浏览到时从左向右平滑滑入 */
.join-panel {
    position: relative;
    background-color: #ffffff;
    padding: 60px 20px 80px;
    box-shadow: 14px 14px 0 rgba(70, 112, 126, 0.35), 14px 22px 36px rgba(0, 0, 0, 0.25);
    transform: translateX(-120%);
    transition: transform 1s ease-out;
}

/* 滑动结束：面板到位 */
.join-panel.is-visible {
    transform: translateX(0);
}

/* 白色面板左上角书签图标：自面板顶部向下悬挂 */
.join-bookmark {
    position: absolute;
    top: 0;
    left: 110px;
    height: 152px;
    width: auto;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.25));
}

/* 面板内标题与正文：深色、无阴影，与白色区块一致 */
.join-panel .divider-zh,
.join-panel .divider-en,
.join-panel .hero-body p {
    color: #231815;
    text-shadow: none;
}

/* QQ 审核群号：数字中心与“欢迎加入我们的审核群：”中心同垂线（均居面板中心），QQ 图标绝对定位悬于数字左侧不影响居中 */
.join-qq {
    text-align: center;
}

.join-qq-num {
    position: relative;
    display: inline-block;
    font-size: 34px;
    color: #3a90c9;
    text-decoration: underline;
    text-underline-offset: 6px;
    transition: color 0.2s ease;
}

.join-qq-num:hover {
    color: #2b6fa0;
}

.join-qq-icon {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 12px;
    height: 42px;
    width: auto;
}

/* 白色面板与湖蓝区块交界处：竖直悬挂的 JOIN US */
.join-vertical {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(50%, calc(-50% - 15px));  /* 垂直居中基础上再上移 15px */
    writing-mode: vertical-rl;   /* 字母顺时针旋转 90°，自上而下悬挂 */
    font-family: "Minecraft", "A-Charming-Font-Expanded", serif;
    font-size: 58px;
    line-height: 1;
    letter-spacing: 6px;
    color: #328cc7;
    opacity: 0.9;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    white-space: nowrap;
    pointer-events: none;
}

/* 区块内大字 INTRODUCTION：绝对定位，允许与正文重叠，起点与正文中的 INTRODUCTION 等高 */
.intro-marquee {
    position: absolute;
    left: 0;
    top: 104px;  /* 回退值；JS 会精确对齐到 .divider-en 高度 */
    width: 100%;
    overflow: hidden;  /* 超出浏览器范围的文字被裁切 */
    z-index: 0;  /* 位于正文下方作为水印 */
}

.intro-marquee-text {
    font-family: "A-Charming-Font-Expanded", serif;
    font-size: 100px;
    line-height: 1.05;
    color: #eaf2f8;
    opacity: 0.5;
    white-space: nowrap;
    text-align: left;  /* 以左上方为起点 */
    will-change: transform;
}

/* 右下角 INTRODUCTION 水印：与左上角对角对称 */
.intro-marquee-bottom {
    position: absolute;
    right: 0;
    bottom: 0;  /* 回退值；JS 会精确对齐到正文底部 */
    width: 100%;
    overflow: hidden;
    z-index: 0;
}

.intro-marquee-text-bottom {
    font-family: "A-Charming-Font-Expanded", serif;
    font-size: 100px;
    line-height: 1.05;
    color: #eaf2f8;
    opacity: 0.5;
    white-space: nowrap;
    text-align: right;  /* 以右下方为起点 */
    will-change: transform;
}

.hero-title {
    font-family: "三极行楷简体-粗", "Microsoft YaHei", sans-serif;
    font-size: 52px;
    font-weight: normal;
    line-height: 1.3;
    margin: 0 0 12px;
    /* 白→淡湖蓝渐变文字，呼应站点湖水蓝主色调 */
    background-image: linear-gradient(180deg, #ffffff 45%, #cfe9f2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* 渐变文字用 drop-shadow 代替 text-shadow，避免透出阴影 */
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
    letter-spacing: 2px;
}

.hero-sub {
    font-family: "三极行楷简体-粗", "Microsoft YaHei", sans-serif;
    font-size: 20px;
    font-weight: normal;
    margin: 0 0 40px;
    /* 与主标题同款：白→淡湖蓝渐变文字 */
    background-image: linear-gradient(180deg, #ffffff 45%, #cfe9f2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
    letter-spacing: 6px;
}

/* 滚动浮现：标题与文本到达视口时淡入并轻微上移；渐进增强——无 JS 时元素默认可见 */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: opacity, transform;
}
.reveal.reveal-in {
    opacity: 1;
    transform: none;
}
/* 仅淡入变体：用于自身已有定位 transform 的元素（如 PREV / NEXT），不做位移以免覆盖定位 */
.reveal-fade {
    opacity: 0;
    transition: opacity 0.8s ease;
    will-change: opacity;
}
.reveal-fade.reveal-in {
    opacity: 1;
}
/* 尊重系统“减少动画”偏好：直接显示，不做位移动画 */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        transition: none;
        transform: none;
    }
}

/* 副标题下方的两个长方形按钮 */
.hero-actions {
    display: flex;
    justify-content: center;
    gap: 28px;  /* 两按钮间隔 */
}

.hero-btn {
    width: 180px;
    height: 52px;
    border-radius: 6px;
    font-family: "三极行楷简体-粗", "Microsoft YaHei", sans-serif;
    font-size: 22px;
    letter-spacing: 2px;
    color: #ffffff;
    cursor: pointer;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, filter 0.2s ease;
}

.hero-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
}

.hero-btn:active {
    transform: translateY(1px);
}

/* “了解更多”：磨砂玻璃质感，简约通透 */
.hero-btn-gray {
    background-color: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 14px rgba(0, 0, 0, 0.2);
}

.hero-btn-gray:hover {
    background-color: rgba(255, 255, 255, 0.26);
}

/* “加入我们”：嫩绿渐变 + 柔光，主行动按钮更显眼 */
.hero-btn-green {
    background-image: linear-gradient(180deg, #8fd06f, #3f9142);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 6px 16px rgba(63, 145, 66, 0.45);
}

.hero-btn-green:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 20px rgba(63, 145, 66, 0.6);
}

.hero-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 32px;
}

/* 介绍 + 左右百合花纹横向排列 */
.divider-zh-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 100px;
}

.divider-flower {
    height: 36px;
    width: auto;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
}

.divider-zh {
    font-family: "三极行楷简体-粗", "Microsoft YaHei", sans-serif;
    font-size: 32px;
    font-weight: normal;
    letter-spacing: 4px;
    opacity: 0.9;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.divider-en {
    font-family: "A-Charming-Font-Expanded", serif;
    font-size: 22px;
    letter-spacing: 8px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.hero-body {
    max-width: 680px;
    margin: 0 auto;
    font-family: "三极行楷简体-粗", "Microsoft YaHei", sans-serif;
    font-size: 20px;
    font-weight: normal;
    line-height: 1.9;
    text-align: center;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.hero-body p {
    margin: 0 0 20px;
}

.hero-body p:last-child {
    margin-bottom: 0;
}

/* 背景作者水印：锁定在第一屏右下角的文档位置，随页面一起滚动 */
.bg-credit {
    position: absolute;
    right: 12px;
    top: calc(100vh - 23px);   /* 第一屏底部（较之前下移 5px），滚动时随页面上移离开 */
    display: flex;
    gap: 10px;
    font-family: "思源臻宋", serif;
    font-size: 12px;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.5);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    user-select: none;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.bg-credit.is-hidden {
    opacity: 0;
}

/* 顶部区块：固定于窗口上边缘下方，厚 125px；默认透明，向下滚动时变为 20% 透明度深色 */
.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 125px;
    background-color: transparent;
    transition: background-color 0.3s ease;
    z-index: 9997;
}

.top-bar.is-scrolled {
    background-color: rgba(39, 40, 42, 0.95);  /* #27282a 20% 透明度 */
}

/* ===== logo 折叠开关：点击 logo 收起 / 展开 top-bar 与侧边按钮 ===== */
/* top-bar 文本与按钮：折叠时向右滚动收回 logo，再次展开时向左滚出 */
.site-title,
.nav-group,
.search-btn {
    transition: transform 0.55s ease, opacity 0.55s ease;
}

/* 折叠态：top-bar 完全透明 */
body.is-collapsed .top-bar {
    background-color: transparent !important;
}

/* 折叠态：文本与按钮向左滚动收回（淡出） */
body.is-collapsed .site-title,
body.is-collapsed .nav-group,
body.is-collapsed .search-btn {
    transform: translateX(-80px);
    opacity: 0;
    pointer-events: none;
}

/* 折叠态：侧边四按钮整体向上滚动收回（淡出） */
body.is-collapsed .side-actions {
    transform: translateY(-60px);
    opacity: 0;
    pointer-events: none;
}

/* 品牌区：logo + 标题，与搜索按钮同高度对称（位于 top-bar 左侧） */
.site-brand {
    position: absolute;
    top: 35px;   /* 与搜索按钮同一垂直线 */
    left: 35px;  /* 与搜索按钮对称 */
    display: flex;
    align-items: center;
    gap: 14px;
    height: 80px;
    z-index: 9999;
}

.site-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
    display: block;
    cursor: pointer;   /* 作为折叠开关按钮 */
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}

.site-title {
    font-size: 28px;
    font-weight: normal;
    line-height: 1;
    color: #f8d5b5;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    margin: 0;
    cursor: pointer;   /* 作为“回到主页顶部”的按钮 */
}

/* 标题按钮悬停反馈 */
.site-title:hover {
    filter: brightness(1.12);
}

/* 中文使用余繁真素体 */
.title-zh {
    font-family: "余繁真素体", "Microsoft YaHei", sans-serif;
}

/* 分隔符跟随中文 */
.title-sep {
    font-family: "余繁真素体", "Microsoft YaHei", sans-serif;
    opacity: 0.85;
}

/* 英文使用 98-Bottles-of-Beer-Bold */
.title-en {
    font-family: "98-Bottles-of-Beer-Bold", "Impact", sans-serif;
    letter-spacing: 1px;
}

/* 顶部导航按钮组：位于 top-bar 内，与搜索按钮中心对齐 */
.nav-group {
    position: absolute;
    top: 35px;   /* 与搜索按钮同一垂直线 */
    z-index: 9999;
}

/* 三个主按钮从右向左依次排列，紧挨搜索按钮左侧（加 emoji 后按钮变宽，拉大间距避免重叠） */
.nav-about { right: 485px; }
.nav-guide { right: 310px; }
.nav-events { right: 135px; }

/* 主按钮样式 */
.nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;  /* 文字与展开符号间距 */
    height: 80px;
    padding: 0 20px;
    border: 0;
    background: transparent;
    color: #f8d5b5;
    font-size: 18px;
    cursor: pointer;
    white-space: nowrap;
}

.nav-text {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.nav-icon {
    width: 14px;
    height: 14px;
    transition: transform 0.25s ease;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

/* 子按钮菜单：默认隐藏，悬停或点击锁定后展开；多个子按钮竖直堆叠 */
.nav-sub-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: -14px;   /* 上移子按钮，缩短与主按钮文字的间距 */
    display: flex;
    flex-direction: column;
    align-items: stretch;   /* 同组子按钮等宽（拉伸到最宽者） */
    gap: 6px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.nav-group.is-hover .nav-sub-menu,
.nav-group.is-locked .nav-sub-menu {
    opacity: 1;
    visibility: visible;
}

/* 子按钮 */
.nav-sub {
    padding: 8px 16px;
    border: 0;
    background: rgba(0, 0, 0, 0.55);
    color: #f8d5b5;
    font-size: 15px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
}

/* 展开图标在展开时旋转 180° */
.nav-group.is-hover .nav-icon,
.nav-group.is-locked .nav-icon {
    transform: rotate(180deg);
}

/* 悬停时主按钮文字加亮 */
.nav-group.is-hover .nav-text,
.nav-group.is-locked .nav-text {
    color: #f8d5b5;
    text-shadow: 0 0 8px rgba(248, 213, 181, 0.6);
}

/* 搜索按钮：位于 top-bar 内，中心距上边缘 75px、距右边缘 75px，80px 正方形 */
.search-btn {
    position: absolute;
    top: 35px;   /* 中心 75px − 尺寸一半 40px */
    right: 35px; /* 中心 75px − 尺寸一半 40px */
    width: 80px;
    height: 80px;
    padding: 0;
    border: 0;
    background-color: transparent;
    background-image: url("../media/偷瞄.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    z-index: 10000;
}

/* 悬停时、或搜索页面打开时显示感叹图标 */
.search-btn:hover,
.search-btn.is-open {
    background-image: url("../media/感叹.png");
}

/* 搜索页面（遮罩层） */
.search-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 10001;
}

.search-overlay[hidden] {
    display: none;
}

.search-panel {
    position: relative;
    width: 360px;
    max-width: 80vw;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 11px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.search-close {
    position: absolute;
    top: 8px;
    right: 12px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.search-input {
    box-sizing: border-box;
    width: 100%;
    margin-top: 8px;
    padding: 8px 10px;
    font-size: 14px;
    border: 1px solid #e7e7e7;
    border-radius: 6px;
}

.search-results {
    margin: 12px 0 0;
    max-height: 240px;
    list-style: none;
    overflow-y: auto;
}

.search-results li {
    padding: 8px 10px;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
}

.search-results li:hover {
    background-color: #f2f2f2;
}

.search-results li.search-empty {
    color: #999999;
    cursor: default;
}

/* 左侧操作组：位于 logo 正下方竖直线，包含主页按钮与目录按钮 */
.side-actions {
    position: fixed;
    left: 75px;  /* logo 水平中心（35 + 80/2 = 75） */
    top: 0;
    opacity: 0.5;  /* 默认半透明 */
    transition: opacity 0.3s ease, transform 0.55s ease;
    z-index: 9999;
}

/* 向下滚动后变为完全不透明 */
.side-actions.is-scrolled {
    opacity: 1;
}

/* QQ 按钮：位于目录按钮下方 */
.qq-btn {
    position: absolute;
    left: 50%;
    top: calc(50vh + 40px);  /* 目录按钮下方 80px */
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    border: 0;
    padding: 0;
    background: transparent;
    background-image: url("../media/QQ边框.png");
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.qq-btn:hover {
    transform: translateX(-50%) translateY(-2px);
}

/* 哔哩哔哩按钮：位于目录按钮下方 */
.bili-btn {
    position: absolute;
    left: 50%;
    top: calc(50vh + 120px);  /* 目录按钮下方 80px */
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    border: 0;
    padding: 0;
    background: transparent;
    background-image: url("../media/哔哩哔哩.png");
    background-size: 26px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.bili-btn:hover {
    transform: translateX(-50%) translateY(-2px);
}

/* 置顶按钮：图标为 置顶.png */
.home-btn {
    position: absolute;
    left: 50%;
    top: calc(50vh - 120px);  /* 视口中心上方 120px */
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    border: 0;
    padding: 0;
    background: transparent;
    background-image: url("../media/置顶.png");
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.home-btn:hover {
    transform: translateX(-50%) translateY(-2px);
}

/* 目录按钮：内部两条平行线 */
.cross-btn {
    position: absolute;
    left: 50%;
    top: calc(50vh - 40px);  /* 主页按钮下方 80px */
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.cross-btn:hover {
    transform: translateX(-50%) translateY(-2px);
}

/* 两条平行横线：厚度 2px，长 20px，颜色 #000000 */
.cross-btn .bar {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 2px;
    background: #000000;
    transition: transform 0.3s ease;
}

/* 两线间距 7px（各偏离中心 4px，间隙 7px） */
.cross-btn .bar-top {
    transform: translate(-50%, -4px);
}

.cross-btn .bar-bottom {
    transform: translate(-50%, 4px);
}

/* 点击后两线交叉，上夹角 120°（各偏离水平 30°） */
.cross-btn.is-active .bar-top {
    transform: translate(-50%, 0) rotate(30deg);
}

.cross-btn.is-active .bar-bottom {
    transform: translate(-50%, 0) rotate(-30deg);
}

/* ===== 目录抽屉：从左向右滑出的 50% 宽度面板 + 右侧变暗遮罩 ===== */
/* 抽屉面板：固定于左侧，占据视口左半部，默认隐藏在左侧外 */
.catalog-panel {
    position: fixed;
    left: 0;
    top: 0;
    width: 50vw;
    height: 100vh;
    background-color: #eaf3f9;
    transform: translateX(-100%);
    transition: transform 0.4s ease;
    box-shadow: 6px 0 24px rgba(0, 0, 0, 0.25);
    overflow-y: auto;
    z-index: 9998;
}

/* 右侧变暗遮罩：覆盖剩余右半部，亮度降低 50% */
.catalog-dim {
    position: fixed;
    right: 0;
    top: 0;
    width: 50vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    cursor: pointer;
    z-index: 9998;
}

/* 开启态：面板滑入到位，右侧遮罩浮现 */
body.catalog-open .catalog-panel {
    transform: translateX(0);
}

body.catalog-open .catalog-dim {
    opacity: 1;
    visibility: visible;
}

/* 目录内容：参考大号衷线竖排菜单——整体水平 + 垂直居中，标题在上、子项在下，均居中（区块背景色保持不变） */
.catalog-nav {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 34px;
    padding: 80px 8%;
    padding-left: calc(8% + 70px);   /* 为左侧竖线与图标列预留空间，使菜单居中偏右 */
    box-sizing: border-box;
    text-align: center;
}
.catalog-section {
    margin: 0;
}
.catalog-title {
    font-family: "思源臻宋", serif;
    font-size: 22px;
    font-weight: normal;
    letter-spacing: 3px;
    color: #8a97a2;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
}
.catalog-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.catalog-links li {
    margin: 0;
}
.catalog-link {
    display: inline-block;
    border: 0;
    background: none;
    padding: 4px 10px;
    font-family: "思源臻宋", serif;
    font-size: 30px;
    letter-spacing: 4px;
    line-height: 1.2;
    color: #2b3138;
    cursor: pointer;
    transition: color 0.25s ease;
}
.catalog-link::before {
    content: none;   /* 参考图无项目符号 */
}
.catalog-link:hover {
    color: #3f7fbf;   /* 悬停高亮为参考图的蓝色 */
}

/* 左侧竖直分隔线：呼应参考图（位于左侧图标列右侧），仅在目录展开时显示 */
body.catalog-open .catalog-panel::before {
    content: "";
    position: fixed;
    left: 110px;
    top: 0;
    height: 100vh;
    width: 1px;
    background: rgba(35, 24, 21, 0.22);
    z-index: 9998;
}

/* 页脚：深色底条，居中版权声明 */
.site-footer {
    background-color: #27282a;
    text-align: center;
    padding: 18px 16px;
}

.site-footer .copyright {
    font-family: "Amethast-Stones", "A-Charming-Font-Expanded", serif;
    font-size: 13px;
    letter-spacing: 1px;
    color: rgba(248, 213, 181, 0.85);
}

/* ===== 入场特效：白底遮罩 + 居中欢迎文本（仅 index.html 存在该元素时生效） ===== */
/* 全站文本不可被选中/复制（user-select 可继承，施于 html 即应用于所有后代） */
html {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* 全站图片：禁止拖拽保存与移动端长按存图（配合脚本禁用右键“另存为”） */
img {
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}
/* 入场动画未播完前锁定滚动：右侧滚动条不可滑动（scrollbar-gutter 预留条宽，避免解锁瞬间布局跳动） */
html.intro-lock {
    overflow: hidden;
    scrollbar-gutter: stable;
}
html.intro-lock body {
    overflow: hidden;
}
/* 全屏白底：页面加载即盖住全部；先保持不透明展示文本，随后整体淡出 */
.intro-splash {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    z-index: 10000;   /* 高于侧栏(9999)与目录(9998)，确保最顶层 */
    animation: introSplashOut 2.8s ease forwards;
}

/* 欢迎文本：字体同 hero-heading（三极行楜简体-粗），颜色 #231815，淡入并轻微上浮 */
.intro-splash-text {
    margin: 0;
    padding: 0 24px;
    text-align: center;
    font-family: "三极行楷简体-粗", "Microsoft YaHei", sans-serif;
    font-size: 52px;
    font-weight: normal;
    line-height: 1.3;
    letter-spacing: 2px;
    color: #231815;
    opacity: 0;
    animation: introSplashTextIn 1.1s ease 0.3s both;
}

/* 遮罩：前 60% 时长保持不透明（展示文本），后段整体淡出并隐藏 */
@keyframes introSplashOut {
    0%, 60% { opacity: 1; visibility: visible; }
    100% { opacity: 0; visibility: hidden; }
}

/* 文本：从透明下方浮现到位 */
@keyframes introSplashTextIn {
    0% { opacity: 0; transform: translateY(14px); }
    100% { opacity: 1; transform: none; }
}

/* 尊重“减少动画”偏好：直接隐藏入场特效 */
@media (prefers-reduced-motion: reduce) {
    .intro-splash {
        display: none;
    }
}