:root {
    --ruc-red: #A61C26;
    --paper-bg: #F4F1EA;
    --text-primary: #2B2B2B;
    --rope-color: #8D6E63;
}

/* === 1. 背景升级：纸纹 + 呼吸光晕 === */
/* 替换原有的 body 背景设置 */
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* 禁止原生滚动 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
    background-color: #F4F1EA;
    /* 增加一个径向渐变，模拟老照片的暗角 */
    background-image: radial-gradient(circle at center, #fffcf5 0%, #eaddcf 100%);
}

/* 优化纹理层 (保留原有的 svg 噪点，但调整透明度) */
.texture-bg {
    opacity: 0.15; /* 稍微加深一点纹理 */
    mix-blend-mode: multiply;
}

/* 新增：漂浮的尘埃/光点动画 */
.dust-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 1; overflow: hidden;
}
.dust {
    position: absolute;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255,255,255,0.2);
    animation: floatDust linear infinite;
}
@keyframes floatDust {
    0% { transform: translateY(110vh) translateX(0); opacity: 0; }
    20% { opacity: 0.8; }
    80% { opacity: 0.5; }
    100% { transform: translateY(-10vh) translateX(20px); opacity: 0; }
}

/* === 2. 盖章按钮动画升级 === */
.btn-seal-wrapper {
    position: relative; width: 120px; height: 120px; margin: 20px auto;
}

.btn-seal {
    width: 100%; height: 100%; border-radius: 50%;
    border: 4px solid var(--ruc-red);
    color: var(--ruc-red);
    background: rgba(255, 250, 240, 0.95);
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(166,28,38,0.15), inset 0 0 10px rgba(166,28,38,0.05);
    transition: transform 0.2s;
    position: relative; z-index: 2;
    /* 初始带有轻微旋转 */
    transform: rotate(-15deg);
}

/* 按下时的盖章动画 */
.seal-active {
    animation: stamp-press 0.4s cubic-bezier(0.1, 1.2, 0.3, 1) forwards;
}

/* 盖章后的红色印记（文字变化） */
.seal-ink {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    border-radius: 50%;
    background: rgba(166, 28, 38, 0.9);
    color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; letter-spacing: 2px;
    font-family: "KaiTi", serif;
    opacity: 0; transform: scale(1.5);
    pointer-events: none; z-index: 3;
    border: 2px dashed rgba(255,255,255,0.3);
}

.ink-visible {
    animation: ink-splash 0.3s cubic-bezier(0, 0, 0.2, 1) forwards 0.2s;
}

@keyframes stamp-press {
    0% { transform: rotate(-15deg) scale(1); }
    40% { transform: rotate(0deg) scale(0.85); box-shadow: 0 0 5px rgba(166,28,38,0.4); }
    100% { transform: rotate(0deg) scale(1); box-shadow: 0 0 0 rgba(0,0,0,0); } /* 按到底 */
}

@keyframes ink-splash {
    0% { opacity: 0; transform: scale(1.5); }
    100% { opacity: 1; transform: scale(1) rotate(-5deg); }
}


/* === 2. 首页漂浮照片动画 (新增部分) === */
.bg-floating-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1; pointer-events: none; overflow: hidden;
}
.float-photo {
    position: absolute; width: 120px;
    background: #fff; padding: 6px 6px 25px 6px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    opacity: 0; top: 110%; /* 初始在屏幕下方 */
    filter: sepia(0.3) contrast(0.9);
}
.float-photo img { width: 100%; display: block; filter: grayscale(0.2); }

@keyframes floatUp {
    0% { transform: translateY(0) rotate(5deg); opacity: 0; }
    15% { opacity: 0.8; }
    85% { opacity: 0.6; }
    100% { transform: translateY(-120vh) rotate(-8deg); opacity: 0; }
}

/* 定义不同的漂浮轨迹 */
.fp-1 { left: 10%; animation: floatUp 10s linear infinite; animation-delay: 0s; width: 100px; }
.fp-2 { right: 5%; animation: floatUp 14s linear infinite; animation-delay: 2s; width: 130px; }
.fp-3 { left: 50%; animation: floatUp 12s linear infinite; animation-delay: 5s; width: 90px; margin-left: -45px; z-index: 0;}
.fp-4 { left: 70%; animation: floatUp 16s linear infinite; animation-delay: 4s; width: 110px; margin-left:-55px; }
.fp-5 { left: 30%; animation: floatUp 13s linear infinite; animation-delay: 7s; width: 95px;  margin-left:-47px; }
.fp-6 { right: 18%; animation: floatUp 18s linear infinite; animation-delay: 9s; width: 120px; }


/* === 3. Swiper & 容器 === */
.swiper-v { width: 100%; height: 100%; z-index: 10; }
.swiper-slide {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.5s; position: relative; overflow: hidden;
}
.swiper-slide-active { opacity: 1; }
.ani { visibility: hidden; }

/* 通用卡片样式 - 增加 z-index 保证在飘浮照片之上 */
.paper-card {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    padding: 40px 30px;
    width: 80%; max-width: 340px;
    box-shadow: 0 15px 35px rgba(166, 28, 38, 0.1);
    border: 1px solid #fff;
    position: relative; z-index: 5;
    outline: 1px dashed rgba(166, 28, 38, 0.3); outline-offset: -10px;
}

/* === 新增：伙伴墙样式 === */
.partner-container {
    width: 100%;
    max-height: 350px; /* 限制高度，太多名字时可以滚动 */
    overflow-y: auto;  /* 允许内部滚动 */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    padding: 10px;
    /* 隐藏滚动条但保留功能 */
    scrollbar-width: none;
}
.partner-container::-webkit-scrollbar { display: none; }

.partner-name {
    display: inline-block;
    margin: 4px 6px;
    color: #555;
    font-family: "KaiTi", serif; /* 楷体更有书写感 */
    transition: all 0.3s ease;
    cursor: default;
}
/* 偶数个名字稍微红一点，增加层次 */
.partner-name:nth-child(even) { color: #8d4b4b; }
.partner-name:hover {
    color: var(--ruc-red);
    transform: scale(1.2);
    text-shadow: 0 0 5px rgba(166,28,38,0.3);
}

.sub-text {
    font-size: 0.8rem; color: #888; text-align: center; margin-top: 15px; font-family: 'KaiTi';
}


/* === 4. 功能组件样式 === */
.input-line {
    width: 100%; border: none; border-bottom: 1px solid #999;
    background: transparent; padding: 8px 0; margin-bottom: 20px;
    font-size: 1.1rem; outline: none; text-align: center;
}
.input-line:focus { border-bottom: 2px solid var(--ruc-red); }


.rope-scene { width: 100%; height: 60%; position: relative; display: flex; flex-direction: column; justify-content: center; }
.rope-svg { position: absolute; top: 15%; left: -10%; width: 120%; height: 80px; z-index: 1; pointer-events: none; }

.swiper-h { width: 100%; height: 320px; z-index: 2; padding-top: 20px; }
.swiper-h .swiper-slide {
    width: 240px; opacity: 1; display: flex; justify-content: flex-start; align-items: center;
    transform-origin: top center; transition: transform 0.3s;
}
.hanging-photo {
    width: 200px; background: #fff; padding: 10px 10px 35px 10px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15); margin: 0 auto;
    position: relative;
}
.wood-clip {
    position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
    width: 12px; height: 35px; background: #8D6E63; border-radius: 2px; z-index: 10;
}
.tag-item {
    padding: 6px 14px; border: 1px solid var(--ruc-red); color: var(--ruc-red);
    border-radius: 50px; font-size: 0.9rem; background: rgba(255,255,255,0.6);
    display: inline-block; margin: 5px;
}

/* === 5. 海报生成专用 === */

/* 1. 弹窗容器 */
#poster-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.poster-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
}

.poster-wrapper {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: scale(0.95); /* 微调缩放 */
    transform-origin: center center;
}

/* 2. 海报卡片主体 */
/* 修改 #poster-card 样式 */
#poster-card {
    width: 320px;
    height: 600px;
    background: #FDFBF7; /* 必须要有明确背景色 */

    /* 必须加 hidden，否则圆角外的图片部分在截图时会变成黑色/杂色 */
    overflow: hidden;
    border-radius: 16px;

    /* 边框保持不变 */
    border-top: 12px solid #A61C26;
    border-bottom: 12px solid #A61C26;

    /* 这里的 shadow 只在预览时生效，生成图片时已被 JS 移除 */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);

    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;

    /* 新增：强制字体抗锯齿，防止截图文字模糊 */
    -webkit-font-smoothing: antialiased;
}

/* 建议新增：图片容器防止溢出 */
.poster-img-bg {
    /* ...原有样式... */
    /* 增加这一行，防止图片比容器大导致截图出现溢出 */
    background-origin: content-box;
}

/* --- 内部布局调整 --- */

/* 顶部标题栏 */
.poster-header-new {
    /* 减少下方 padding，让图片往上提一点 */
    padding: 25px 20px 5px 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-shrink: 0; /* 防止被压缩 */
}
.poster-title-cn {
    font-size: 1.3rem;
    font-weight: bold;
    color: #333;
    letter-spacing: 1px;
}
.poster-year-cn {
    font-size: 1.1rem;
    color: #A61C26;
    font-weight: 900;
}

/* 图片容器 */
/* --- 图片容器 (优化：稍微调小高度) --- */
.poster-img-box {
    width: 280px;
    height: 210px; /* 修改：从 230px 减小到 210px，给下方文字腾位置 */
    margin: 15px auto 15px auto; /* 上下间距微调 */
    background: #eee;
    border-radius: 8px; /* 修改：圆角稍微加大 */
    position: relative;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

.poster-img-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.5s;
    border-radius: 8px;
}
.poster-img-box:hover .poster-img-bg {
    transform: scale(1.05);
}

/* 图片标签 */
.poster-tag-label {
    position: absolute;
    top: 10px;
    left: -4px;
    z-index: 5;
    background: #A61C26;
    color: #fff;
    padding: 4px 10px;
    font-size: 0.85rem;
    font-weight: bold;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

/* 相机图标 */
.edit-hint-icon {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    pointer-events: none;
    backdrop-filter: blur(2px);
}
#image-upload-input { display: none; }

/* 数据区域 (Flex 1 自动撑满中间) */
.poster-data-row {
    padding: 0 24px; /* 修改：左右内边距稍微加大，文字不贴边 */
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* 志愿者姓名 */
.poster-user-line {
    font-size: 1.1rem;
    margin-bottom: 10px;
    color: #333;
    letter-spacing: 0.5px;
}

/* 寄语 */
.poster-desc-line {
    font-size: 0.95rem; /* 稍微加大字号 */
    color: #555;
    line-height: 1.6; /* 增加行高，提升可读性 */
    font-family: "KaiTi", "STKaiti", serif;
    margin-bottom: 15px;
    white-space: pre-wrap;
    text-align: center;
    /* 限制最大高度，防止文字过多撑破布局 (可选) */
    max-height: 80px;
    overflow: hidden;
}

/* 分隔线 */
.poster-divider {
    width: 30px;
    height: 2px;
    background: #ddd;
    margin: 0 auto 12px auto;
}

/* 统计数据网格 (自动填补剩余垂直空间并居中) */
.poster-stat-grid {
    display: flex;
    justify-content: center;
    gap: 40px; /* 修改：拉大两个数据之间的距离 */
    margin-top: auto;
    padding-bottom: 15px; /* 修改：增加底部留白，不紧贴 Footer */
    border-top: 1px dashed #e0e0e0; /* 可选：增加一条虚线分割，增加层次感 */
    padding-top: 15px;
}

.stat-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.stat-num-cn {
    font-family: 'Impact', sans-serif;
    font-size: 2.0rem; /* 修改：从 2.2 调至 2.0，避免过于突兀 */
    color: #A61C26;
    line-height: 1;
    margin-bottom: 4px;
}

.stat-label-cn {
    font-size: 0.75rem;
    color: #888;
    margin-top: 4px;
}

/* 底部二维码区域 */
.poster-footer-new {
    background: #F4F1EA;
    padding: 10px 20px; /* 稍微减小高度 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.footer-left { text-align: left; }
.footer-slogan {
    font-size: 0.85rem;
    color: #A61C26;
    font-weight: bold;
}
.footer-sub {
    font-size: 0.65rem;
    color: #999;
    margin-top: 2px;
}
.footer-qr {
    width: 50px;
    height: 50px;
    border: 2px solid #fff;
}

/* 操作栏 */
.poster-actions {
    margin-top: 20px;
    text-align: center;
    width: 100%;
}
.action-tip {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    margin-bottom: 15px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.btn-save-img {
    background: #A61C26;
    color: white; border: none;
    padding: 12px 35px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: bold;
    box-shadow: 0 5px 15px rgba(166, 28, 38, 0.4);
    cursor: pointer;
    margin-right: 15px;
    transition: transform 0.2s;
}
.btn-save-img:active { transform: scale(0.95); }

.btn-close-modal {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #eee;
    padding: 12px 25px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 0.9rem;
}

/* 结果覆盖层 */
#final-result-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
}
#final-image {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* === 新增：温暖星图 (Canvas 动画页) === */
.constellation-slide {
    position: relative;
    width: 100%; height: 100%;
    overflow: hidden;
}

/* 画布层：放置在底层 */
#partnerCanvas {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
}

/* 数据浮层：放置在顶层，半透明卡片 */
/* === 修正后的数据卡片样式 === */
.data-overlay {
    position: absolute;
    /* 垂直位置 */
    bottom: 15%;

    /* === 核心修改：新的居中方案 === */
    left: 0;
    right: 0;
    margin: 0 auto; /* 配合 left:0 和 right:0 实现水平绝对居中 */

    width: 85%;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(5px);
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(166, 28, 38, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.8);
    z-index: 5;
    text-align: center;
    pointer-events: none;
}


.highlight-num {
    font-size: 2.2rem;
    font-weight: bold;
    color: var(--ruc-red);
    font-family: 'Impact', sans-serif;
    margin: 0 5px;
}

/* === style.css 更新部分 === */

/* 1. 独家记忆-滚动容器 (替代原有的 flex 布局) */
.film-container {
    position: relative;
    width: 86%;            /* 宽度适中 */
    height: 68vh;          /* 固定高度，占据屏幕主要区域 */
    margin: 85px auto 0;   /* 顶部留出标题空间 */
    padding: 10px 10px 80px 35px; /* 左侧留出时间轴线的空间，底部留白 */

    /* 核心：允许垂直滚动 */
    overflow-y: auto;

    /* 交互优化：防止滚动穿透与原生回弹 */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;

    /* 视觉：左侧虚线轴 */
    border-left: 2px dashed #8D6E63;
    box-sizing: border-box;
}

/* 隐藏滚动条但保留功能 (美观) */
.film-container::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

/* 2. 单个记忆卡片样式优化 */
.film-item {
    position: relative;
    margin-bottom: 25px;   /* 卡片间距 */
    background: #fff;      /* 改为浅色背景，更像日记 */
    color: #333;
    padding: 15px 15px 15px 20px;
    border-radius: 8px;

    /* 增加纸张质感阴影 */
    box-shadow: 2px 4px 12px rgba(0,0,0,0.08);
    border: 1px solid rgba(141, 110, 99, 0.2); /* 淡淡的边框 */

    /* 确保初始状态 */
    opacity: 0;
    animation-fill-mode: forwards; /* 保持动画结束状态 */
}

/* 3. 时间轴上的圆点 */
.film-dot {
    position: absolute;
    left: -42px; /* 调整圆点位置对齐虚线 */
    top: 20px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #A61C26; /* 主题红 */
    border: 3px solid #F4F1EA; /* 外圈同背景色，制造间隔感 */
    box-shadow: 0 0 0 1px #A61C26;
    z-index: 2;
}

/* 4. 卡片内的时间日期 */
.film-date {
    display: inline-block;
    background: rgba(166, 28, 38, 0.1);
    color: #A61C26;
    font-size: 0.8rem;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
    font-weight: bold;
}

/* 5. 标题与内容 */
.film-title {
    font-size: 1.05rem;
    font-weight: bold;
    color: #2B2B2B;
    margin-bottom: 6px;
}
.film-content {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
    text-align: justify; /* 两端对齐更整齐 */
}

/* === 新增页面 2: 热力日历 (Heatmap) === */
.heatmap-grid {
    /* 改为 4 列，共 12 个格子代表 12 个月 */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    width: 85%;
    max-width: 280px;
    margin: 20px auto;
}

.heatmap-cell {
    width: 100%;
    aspect-ratio: 1; /* 保持正方形 */
    border-radius: 6px; /*稍微圆润一点*/
    background: rgba(166, 28, 38, 0.05);
    transition: transform 0.2s, background 0.3s;
    cursor: pointer;

    /* 让月份数字居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: #ccc;
    font-family: 'Impact', sans-serif;
    position: relative;
}

/* 激活状态 */
.heatmap-cell.active {
    box-shadow: 0 4px 10px rgba(166,28,38,0.3);
    color: white !important; /* 激活时数字变白 */
    border: 1px solid rgba(255,255,255,0.5);
}

.heatmap-cell:hover { transform: scale(1.1); z-index: 10; }


/* 弹出气泡 */
.heatmap-tooltip {
    position: absolute; top: 60%; left: 50%; transform: translateX(-50%);
    background: #fff; padding: 15px; border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    width: 80%; text-align: center; opacity: 0; transition: opacity 0.3s;
    pointer-events: none; border: 1px solid var(--ruc-red);
}
.heatmap-tooltip.show { opacity: 1; pointer-events: auto; }

/* === 新增页面 3: 见字如面 (Envelope) - 移动端适配版 === */

.envelope-wrapper {
    /* 1. 宽度响应式：占屏幕宽度的 82%，但最大不超过 340px */
    width: 82vw;
    max-width: 340px;
    height: 190px; /* 稍微加高一点 */
    position: relative;
    /* 2. 居中定位：加大顶部 margin (80px) 为信纸弹出留出空间 */
    margin: 80px auto 0;
    cursor: pointer;
    /* 消除移动端点击高亮背景 */
    -webkit-tap-highlight-color: transparent;
    /* 增加透视感 */
    perspective: 1000px;
}

.envelope-body {
    position: absolute; width: 100%; height: 100%;
    background: #e0d0b0;
    border-radius: 6px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    z-index: 2;
    transform-origin: bottom;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s;
}

.envelope-flap {
    position: absolute; top: 0; left: 0; width: 100%;
    height: 100px; /* 保持比例 */
    background: #d4c4a4;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    transform-origin: top;
    transition: transform 0.6s 0.1s, z-index 0s 0.3s; /* 优化 z-index 切换时机 */
    z-index: 4;
}

.envelope-letter {
    position: absolute;
    /* 3. 信纸居中：左右各留 5% */
    top: 10px; left: 5%; width: 90%;
    /* 高度适中，避免太长超出屏幕 */
    height: 260px;
    background: #fffdf9; /* 柔和米白 */
    /* 4. 布局保护：防止 padding 撑大盒子 */
    padding: 20px 20px;
    box-sizing: border-box;
    font-family: 'KaiTi', "STKaiti", serif;
    font-size: 1rem; /* 字体稍微加大 */
    line-height: 1.6; color: #333;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);

    transform: translateY(0);
    transition: transform 0.8s 0.4s;
    z-index: 1;
    display: flex; flex-direction: column;
    border-radius: 4px;
}

.wax-seal {
    position: absolute; top: 85px; left: 50%;
    transform: translateX(-50%);
    width: 44px; height: 44px; border-radius: 50%;
    /* 兼容性处理：如果没有 var 变量则回退红色 */
    background: var(--ruc-red, #a61c26);
    border: 2px dashed rgba(255,255,255,0.4);
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
    z-index: 5;
    transition: opacity 0.4s;
    /* 增加一点火漆质感 */
    display: flex; align-items: center; justify-content: center;
}
.wax-seal::after {
    content: '';
    width: 30px; height: 30px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
}

/* === 开信动画状态优化 === */

/* 封口翻开 */
.envelope-open .envelope-flap {
    transform: rotateX(180deg);
    z-index: 1; /* 翻开后层级降低 */
}

/* 火漆消失 */
.envelope-open .wax-seal {
    opacity: 0;
    transition-delay: 0s;
}

/* 5. 关键调整：信纸上移距离减少 (-110px)，防止顶部溢出 */
/* 同时 z-index 提升，确保可交互 */
.envelope-open .envelope-letter {
    transform: translateY(-110px);
    z-index: 10;
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

/* 6. 关键调整：信封本体明显下沉并变淡，让出视觉焦点 */
.envelope-open .envelope-body {
    transform: translateY(180px) scale(0.9);
    opacity: 0.2;
}

/* 新增：专门用于信纸文字滚动区域的样式 */
.letter-scroll-area {
    flex: 1;
    overflow-y: auto;
    padding-right: 5px; /* 给滚动条留点位置 */

    /* 核心修复：允许垂直滚动，禁止水平手势触发浏览器后退等 */
    touch-action: pan-y;

    /* iOS 惯性滚动支持，手感更像原生 App */
    -webkit-overflow-scrolling: touch;

    /* 防止点击穿透或误触 */
    cursor: auto;
}

/* 美化一下滚动条（可选） */
.letter-scroll-area::-webkit-scrollbar {
    width: 4px;
}
.letter-scroll-area::-webkit-scrollbar-thumb {
    background: #e0d0b0;
    border-radius: 2px;
}

/* === 公益小游戏样式 === */

/* === 升级版：点亮微光游戏样式 === */

/* 1. 布局与霓虹进度条 */
.game-container {
    width: 85%; height: 65%; margin-top: 80px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}

.neon-progress-bar {
    width: 100%; height: 16px;
    background: rgba(255,255,255,0.1);
    border-radius: 20px; border: 1px solid rgba(255,255,255,0.2);
    position: relative; margin-bottom: 40px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5) inset;
}
.neon-fill {
    width: 0%; height: 100%; border-radius: 20px;
    background: linear-gradient(90deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
    box-shadow: 0 0 10px #ff9a9e;
    transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.neon-text {
    position: absolute; width: 100%; top: -25px; text-align: right;
    color: rgba(255,255,255,0.8); font-size: 0.8rem; letter-spacing: 1px;
}

/* 2. 图标网格系统 */
.map-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 30px;
    width: 100%; max-width: 320px;
}
.map-cell {
    display: flex; flex-direction: column; align-items: center; cursor: pointer;
}
.cell-label {
    margin-top: 10px; color: rgba(255,255,255,0.5); font-size: 0.85rem;
    transition: color 0.3s; font-family: 'KaiTi';
}

/* 核心：图标状态控制 */
.icon-wrapper {
    width: 70px; height: 70px; border-radius: 20px;
    background: rgba(255,255,255,0.05); /* 初始灰暗底色 */
    border: 1px solid rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center;
    position: relative; transition: all 0.4s ease;
}
.icon-wrapper svg {
    width: 32px; height: 32px;
    fill: #666; /* 初始灰色图标 */
    transition: all 0.4s ease;
    filter: drop-shadow(0 0 0 transparent);
}
/* 初始呼吸效果 */
.icon-wrapper:not(.active) {
    animation: dim-breathe 3s infinite;
}

/* 激活状态 (点亮后) */
.icon-wrapper.active {
    background: #fff; transform: translateY(-5px);
    border-color: #fff;
}

/* 主题色定义 */
.theme-red.active svg { fill: #FF4757; filter: drop-shadow(0 0 5px #FF4757); }
.theme-red.active .glow-ring { box-shadow: 0 0 20px #FF4757; }

.theme-orange.active svg { fill: #FFA502; filter: drop-shadow(0 0 5px #FFA502); }
.theme-orange.active .glow-ring { box-shadow: 0 0 20px #FFA502; }

.theme-green.active svg { fill: #2ED573; filter: drop-shadow(0 0 5px #2ED573); }
.theme-green.active .glow-ring { box-shadow: 0 0 20px #2ED573; }

.theme-blue.active svg { fill: #1E90FF; filter: drop-shadow(0 0 5px #1E90FF); }
.theme-blue.active .glow-ring { box-shadow: 0 0 20px #1E90FF; }

/* 激活后的文字 */
.map-cell:hover .cell-label, .icon-wrapper.active + .cell-label {
    color: #fff; text-shadow: 0 0 5px rgba(255,255,255,0.5);
}

/* 光晕层 */
.glow-ring {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    border-radius: 20px; opacity: 0; transition: opacity 0.4s;
}
.icon-wrapper.active .glow-ring { opacity: 0.6; }

@keyframes dim-breathe {
    0%, 100% { transform: scale(1); border-color: rgba(255,255,255,0.1); }
    50% { transform: scale(1.02); border-color: rgba(255,255,255,0.3); }
}

/* 3. 升级版弹窗：荣誉收藏卡 */
.game-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85); backdrop-filter: blur(5px);
    z-index: 100; display: none; align-items: center; justify-content: center;
}
.collect-card {
    width: 85%; max-width: 340px; background: #fff;
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    animation: card-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}
.card-hero {
    height: 200px; position: relative; overflow: hidden;
}
.card-hero img { width: 100%; height: 100%; object-fit: cover; }
.card-tag {
    position: absolute; bottom: 10px; left: 10px;
    background: rgba(0,0,0,0.7); color: #fff;
    padding: 4px 12px; border-radius: 20px; font-size: 0.8rem;
    backdrop-filter: blur(4px);
}
.card-body { padding: 25px 20px 20px 20px; text-align: center; }
.card-body h3 { font-size: 1.4rem; color: #333; margin: 0; }
.card-divider {
    width: 30px; height: 3px; background: var(--ruc-red); margin: 15px auto;
}
.card-body p {
    color: #666; font-size: 0.95rem; line-height: 1.6; margin-bottom: 20px;
    text-align: justify;
}
.card-data-row {
    background: #f8f8f8; border-radius: 8px; padding: 10px;
}
.card-stat .val { font-size: 1.5rem; font-weight: bold; color: var(--ruc-red); }
.card-stat .lbl { font-size: 0.8rem; color: #999; }

.card-btn {
    width: 100%; padding: 15px; border: none;
    background: var(--ruc-red); color: white;
    font-size: 1rem; font-weight: bold; letter-spacing: 1px;
    cursor: pointer; transition: background 0.2s;
}
.card-btn:active { background: #8a171f; }

@keyframes card-pop {
    from { transform: scale(0.8) translateY(20px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

#game-success-msg {
    margin-top: 30px; color: #fff; font-size: 1.1rem; letter-spacing: 1px;
    text-shadow: 0 0 10px #ff9a9e; opacity: 0; transition: opacity 0.5s;
}
#game-success-msg.show { opacity: 1; animation: pulse 2s infinite; }

/* === 全局环境光渐变系统 === */

/* 1. 基础容器与过渡 */
#game-slide {
    width: 100%; height: 100%;
    /* 初始状态：Level 0 (深夜) */
    background: radial-gradient(circle at center, #2b2b2b 0%, #1a1a1a 100%);
    /* 关键：让背景和文字颜色的变化有呼吸感 */
    transition: background 1.5s ease-in-out;
}

/* 标题文字的基础样式 */
.game-text-title {
    color: #fff; text-shadow: 0 0 10px rgba(255,255,255,0.5);
    letter-spacing: 2px; margin-bottom: 5px;
    transition: color 1.5s;
}
.game-text-sub {
    font-size: 0.8rem; color: rgba(255,255,255,0.6);
    transition: color 1.5s;
}

/* === 5个阶段的背景变化 === */

/* Level 1: 星光初现 (稍微带点深蓝) */
#game-slide.bg-level-1 {
    background: radial-gradient(circle at center, #3a405a 0%, #1a1a1a 100%);
}

/* Level 2: 黎明微红 (带点暖意) */
#game-slide.bg-level-2 {
    background: radial-gradient(circle at center, #593c3c 0%, #2b2020 100%);
}

/* Level 3: 旭日东升 (明显的暖橙色光晕) */
#game-slide.bg-level-3 {
    background: radial-gradient(circle at center, #8a4b38 0%, #3d1e1e 100%);
}

/* Level 4: 光芒万丈 (完全变亮，回归纸张色或暖白) */
#game-slide.bg-level-4 {
    background: radial-gradient(circle at center, #FDFBF7 0%, #eaddcf 100%);
}

/* === Level 4 下的适配 (黑夜变白昼，文字要变黑) === */

/* 1. 标题变色 */
#game-slide.bg-level-4 .game-text-title {
    color: #A61C26; /* 变成红色 */
    text-shadow: none;
}
#game-slide.bg-level-4 .game-text-sub {
    color: #666; /* 变成深灰 */
}

/* 2. 进度条适配 */
#game-slide.bg-level-4 .neon-progress-bar {
    background: rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: none;
}
#game-slide.bg-level-4 .neon-text {
    color: #555;
}

/* 3. 图标底座适配 */
#game-slide.bg-level-4 .icon-wrapper {
    background: rgba(0,0,0,0.05); /* 浅色背景下的底座 */
    border-color: rgba(0,0,0,0.1);
}
#game-slide.bg-level-4 .cell-label {
    color: #888; text-shadow: none;
}
/* 激活状态的标签 */
#game-slide.bg-level-4 .map-cell:hover .cell-label,
#game-slide.bg-level-4 .icon-wrapper.active + .cell-label {
    color: #A61C26; text-shadow: none; font-weight: bold;
}

/* 4. 成功文字适配 */
#game-slide.bg-level-4 #game-success-msg {
    color: #A61C26; text-shadow: none;
}

/* === 弹窗轮播图样式 === */

/* 容器占满图片区 */
.swiper-game {
    width: 100%; height: 100%;
}

/* Slide 样式 */
.swiper-game .swiper-slide {
    width: 100%; height: 100%;
}
.swiper-game .swiper-slide img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

/* 自定义分页器 (小圆点) 颜色 */
.swiper-game .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.8);
    opacity: 0.5;
}
.swiper-game .swiper-pagination-bullet-active {
    background: #fff;
    opacity: 1;
}

/* 2. 新增：固定信息栏样式 */
.heatmap-info-box {
    /* 布局位置：在热力图下方，页脚文字上方 */
    margin: 15px auto 10px auto;
    width: 90%;
    min-height: 60px; /* 给定最小高度，防止内容变化导致页面跳动 */

    /* 视觉风格：类似便签的卡片 */
    background: rgba(255, 255, 255, 0.5);
    border: 1px dashed rgba(166, 28, 38, 0.3);
    border-radius: 8px;
    padding: 10px;

    /* 内容居中 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    /* 过渡动画 */
    transition: all 0.3s ease;
}

/* 日期文字样式 */
.hm-info-date {
    font-size: 1rem;
    font-weight: bold;
    color: var(--ruc-red);
    margin-bottom: 4px;
}

/* 内容文字样式 */
.hm-info-content {
    font-size: 0.9rem;
    color: #333;
    line-height: 1.4;
}

/* 缺省提示文字样式 */
.hm-info-hint {
    color: #999;
    font-size: 0.85rem;
    font-style: italic;
}

/* === 新增：能力分析页样式 (替代雷达图) === */

/* 1. 核心聚焦区 */
.focus-area {
    text-align: center;
    margin-bottom: 25px;
    position: relative;
}


.focus-label {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--ruc-red);
    letter-spacing: 2px;
}

.focus-score {
    font-size: 0.8rem;
    color: #888;
    margin-top: 2px;
    font-family: 'Impact', sans-serif;
}

@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(166, 28, 38, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(166, 28, 38, 0); }
    100% { box-shadow: 0 0 0 0 rgba(166, 28, 38, 0); }
}

/* 2. 能量条列表 */
.skill-list {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
}

.skill-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    opacity: 0; /* 初始隐藏，用于JS控制进场动画 */
    animation: slideInRight 0.5s forwards;
}

.skill-name {
    width: 70px;
    font-size: 0.9rem;
    color: #555;
    text-align: right;
    margin-right: 12px;
    flex-shrink: 0;
    font-family: "KaiTi", serif;
}

.skill-track {
    flex: 1;
    height: 10px;
    background: rgba(0,0,0,0.05);
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}

.skill-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff9a9e 0%, var(--ruc-red) 100%);
    width: 0; /* 初始宽度为0，JS控制动画 */
    border-radius: 5px;
    transition: width 1s cubic-bezier(0.22, 0.61, 0.36, 1);
    position: relative;
}

/* 增加一个小光点在进度条头部 */
.skill-fill::after {
    content: '';
    position: absolute; right: 0; top: 0;
    width: 10px; height: 100%;
    background: rgba(255,255,255,0.4);
    filter: blur(2px);
}

.skill-val {
    width: 30px;
    font-size: 0.75rem;
    color: #999;
    margin-left: 8px;
    text-align: left;
    font-family: 'Arial', sans-serif;
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

/* === 混合风格：复古印章 + 现代列表 === */

/* --- Part A: 复古印章 (The Retro Stamp) --- */
.stamp-area {
    text-align: center;
    margin: 10px 0 25px 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stamp-box {
    width: 100px; height: 100px;
    /* 朱红双实线边框 */
    border: 3px double #b53f3f;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    /* 盖章动画 */
    animation: stamp-fall 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    /* 模拟印泥纹理 */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");
    background-color: rgba(181, 63, 63, 0.02);
    color: #b53f3f;
    box-shadow: inset 0 0 15px rgba(181, 63, 63, 0.15);
}

.stamp-inner {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transform: rotate(-3deg); /* 微微倾斜 */
}

.stamp-text {
    font-family: "KaiTi", "STKaiti", serif;
    font-size: 0.9rem;
    font-weight: bold;
    margin-top: 2px;
    letter-spacing: 2px;
    border-top: 1px solid #b53f3f;
    padding-top: 2px;
}

.stamp-caption {
    margin-top: 10px;
    font-size: 0.8rem;
    color: #b53f3f;
    opacity: 0.8;
    font-family: "KaiTi", serif;
    letter-spacing: 1px;
}

@keyframes stamp-fall {
    0% { transform: scale(2.5); opacity: 0; }
    100% { transform: scale(1) rotate(2deg); opacity: 1; }
}

/* --- Part B: 现代能量条 (The Modern Bars) --- */
.skill-list {
    width: 100%;
    padding: 0 5px;
    box-sizing: border-box;
}

.skill-row {
    display: flex;
    align-items: center;
    margin-bottom: 15px; /* 间距拉开一点更清爽 */
    opacity: 0;
    animation: slideInRight 0.5s forwards;
}

.skill-name {
    width: 65px;
    font-size: 0.9rem;
    color: #555;
    text-align: right;
    margin-right: 12px;
    flex-shrink: 0;
    /* 回归现代字体，或者保留楷体增加一点书卷气，这里用默认字体更清晰 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.skill-track {
    flex: 1;
    height: 8px; /* 细一点更精致 */
    background: rgba(0,0,0,0.06);
    border-radius: 10px; /* 圆角 */
    overflow: hidden;
    position: relative;
}

.skill-fill {
    height: 100%;
    /* 现代渐变色：从粉红到主色红 */
    background: linear-gradient(90deg, #ff9a9e 0%, var(--ruc-red) 100%);
    width: 0;
    border-radius: 10px;
    transition: width 1s cubic-bezier(0.22, 0.61, 0.36, 1);
    position: relative;
}

/* 进度条末端的高光点 */
.skill-fill::after {
    content: '';
    position: absolute; right: 0; top: 0;
    width: 8px; height: 100%;
    background: rgba(255,255,255,0.5);
    filter: blur(2px);
    border-radius: 50%;
}

.skill-val {
    width: 30px;
    font-size: 0.8rem;
    color: #999;
    margin-left: 10px;
    text-align: left;
    font-family: 'Arial', sans-serif;
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

/* === 证书封面：选择方式 overlay === */
.img-choice-overlay,
.photo-picker-overlay{
    position: fixed; inset: 0;
    z-index: 4000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.img-choice-backdrop,
.photo-picker-backdrop{
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(4px);
}

.img-choice-panel{
    position: relative;
    width: 92%;
    max-width: 420px;
    margin-bottom: 18px;
    background: #fff;
    border-radius: 16px;
    padding: 18px 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}

.img-choice-title{
    font-size: 1.05rem;
    font-weight: 800;
    color: #333;
    text-align: center;
    margin-bottom: 12px;
}

.img-choice-actions{
    display: flex;
    gap: 10px;
}

.img-choice-btn{
    flex: 1;
    border: none;
    border-radius: 12px;
    padding: 12px 10px;
    font-weight: 800;
    cursor: pointer;
    background: var(--ruc-red);
    color: #fff;
}

.img-choice-btn.secondary{
    background: rgba(166, 28, 38, 0.08);
    color: var(--ruc-red);
    border: 1px solid rgba(166, 28, 38, 0.25);
}

.img-choice-tip{
    margin-top: 10px;
    font-size: 0.8rem;
    color: #888;
    text-align: center;
}

/* === 时光掠影选图器 === */
.photo-picker-panel{
    position: relative;
    width: 94%;
    max-width: 520px;
    height: 70vh;
    margin-bottom: 18px;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    display: flex;
    flex-direction: column;
}

.photo-picker-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px 10px 14px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.photo-picker-title{
    font-weight: 900;
    color: #333;
    font-size: 1.05rem;
}

.photo-picker-close{
    border: none;
    background: transparent;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    color: #999;
}

.photo-picker-grid{
    padding: 12px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.photo-thumb{
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: #f2f2f2;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    cursor: pointer;
}

.photo-thumb img{
    width: 100%;
    height: 110px;
    object-fit: cover;
    display: block;
}

.photo-thumb .photo-thumb-title{
    position: absolute;
    left: 6px; right: 6px; bottom: 6px;
    font-size: 0.75rem;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,0.45);
    background: rgba(0,0,0,0.35);
    padding: 3px 6px;
    border-radius: 8px;
    line-height: 1.2;
}

/* === 优化部分：保存图片加载与结果展示 === */

/* 1. 按钮加载状态样式 */
.btn-loading {
    opacity: 0.7;
    pointer-events: none;
    position: relative;
    padding-left: 40px !important; /* 给 spinner 留位置 */
}
/* 纯 CSS 旋转加载圈 */
.btn-loading::after {
    content: "";
    position: absolute;
    left: 15px;
    top: 50%;
    margin-top: -9px; /* 半径 */
    width: 18px;
    height: 18px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.8s linear infinite;
}

@keyframes btn-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 2. 结果展示层优化 (解决移动端适配与动画) */
#final-result-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.92); /* 背景更深，突出图片 */
    z-index: 3000;

    /* Flex 布局保证居中 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* 初始隐藏状态（通过 opacity 控制渐变） */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.4s ease, visibility 0.4s;
}

/* 激活显示状态 */
#final-result-overlay.show {
    visibility: visible;
    opacity: 1;
}

/* 图片容器：限制最大宽高，防止溢出屏幕 */
.final-img-container {
    width: 85%;
    max-width: 380px; /* 限制平板上的过大宽度 */
    max-height: 80vh; /* 留出空间给底部文字 */
    position: relative;

    /* 初始缩放动画状态 */
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* 弹性动效 */
}

#final-result-overlay.show .final-img-container {
    transform: scale(1) translateY(0);
    opacity: 1;
}

#final-image {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    display: block;
}

/* 提示文字和关闭按钮优化 */
.final-tips {
    margin-top: 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    animation: fadeInUp 0.6s ease 0.2s backwards;
}

.final-close {
    position: absolute;
    top: -50px;
    right: 0;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 1.5rem;

    /* 弹性布局保持不变 */
    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.3);

}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Scroll hint at the bottom */
.scroll-hint {
    position: absolute;
    bottom: 15px;
    width: 100%;
    text-align: center;
    font-size: 0.75rem;
    color: #aaa;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        opacity: 0.6;
    }
    100% {
        opacity: 1;
    }
}

/* ... (前文代码) ... */

/* === 新增：数据疑问相关样式 === */

/* 1. 触发链接样式 */
.data-doubt-link {
    font-size: 0.75rem;
    color: #999;
    text-decoration: underline;
    text-underline-offset: 4px; /* 下划线稍微离远一点 */
    cursor: pointer;
    padding: 5px 10px;
    transition: all 0.3s;
}

.data-doubt-link:hover {
    color: var(--ruc-red);
    background: rgba(166, 28, 38, 0.05);
    border-radius: 4px;
}

/* 2. 弹窗容器 (参考 poster-modal，但更简化) */
#data-explanation-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 6000; /* 保证在最上层 */
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);

    /* 弹性居中 */
    display: none;
    align-items: center;
    justify-content: center;
}

/* === 新增：称号交互与解释弹窗 === */

/* 1. 标签交互增强 */
.tag-item {
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.tag-item:active {
    transform: scale(0.95);
    background: rgba(166, 28, 38, 0.1);
}
/* 增加一个小问号提示可点击 (可选) */
.tag-item::after {
    display: inline-block;
    margin-left: 4px;
    font-size: 0.7rem;
    color: rgba(166, 28, 38, 0.5);
    vertical-align: top;
}

/* 2. 称号解释弹窗 */
#tag-explain-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 5000;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

#tag-explain-modal.show {
    opacity: 1;
}

.tag-explain-card {
    width: 80%; max-width: 300px;
    background: #fff;
    border-radius: 16px;
    padding: 25px 20px;
    text-align: center;
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
    transform: scale(0.8);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid var(--ruc-red);
    position: relative;
    overflow: hidden;
}

#tag-explain-modal.show .tag-explain-card {
    transform: scale(1);
}

/* 装饰背景字 */
.tag-explain-bg {
    position: absolute; top: -10px; right: -10px;
    font-size: 5rem; color: rgba(166, 28, 38, 0.05);
    font-weight: bold; font-family: 'Impact';
    pointer-events: none;
    z-index: 0;
}

.tag-explain-title {
    font-size: 1.4rem; color: var(--ruc-red);
    font-weight: bold; margin-bottom: 15px;
    position: relative; z-index: 1;
    letter-spacing: 2px;
}

.tag-explain-content {
    font-size: 1rem; color: #555;
    line-height: 1.6;
    font-family: "KaiTi", serif;
    position: relative; z-index: 1;
    margin-bottom: 20px;
}

.tag-explain-btn {
    background: var(--ruc-red); color: #fff;
    border: none; padding: 8px 25px;
    border-radius: 20px; font-size: 0.9rem;
    cursor: pointer;
}
/* 点击提示小字 */
.click-hint-text {
    font-size: 0.8rem;
    color: #999;
    margin-top: 8px;       /* 紧跟在标签下方 */
    margin-bottom: 25px;   /* 与下方感谢语拉开距离 */
    text-align: center;
    font-family: "KaiTi", serif;
    opacity: 0.8;
    /* 加一个呼吸动画，吸引注意力 */
    animation: pulse-hint 2s infinite ease-in-out;
}

@keyframes pulse-hint {
    0%, 100% { opacity: 0.6; transform: scale(0.98); }
    50% { opacity: 1; transform: scale(1); }
}