/* 1. 设置 HTML 根元素的基准大小 (16px 作为标准) */
html {
    font-size: 16px;
}

/* 2. 针对不同屏幕宽度调整基准大小 */
/* 当屏幕宽于 400px 的手机上，基础字号稍微放大一点 */
@media screen and (max-width: 400px) {
    html { font-size: 15px; } /* 小屏手机稍微缩小一点，防止字太大换行不好看 */
}

/* 针对平板/电脑，基础字号放大 */
@media screen and (min-width: 768px) {
    html { font-size: 18px; }
}

/* 背景 */

body {
    background-image: url(../Images/78.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
@media (min-width: 768px) {
    body {
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url(../Images/79.jpg);
    }
}

/* 标题 */
h1,
h2,
h3 {
    text-align: center;
    margin: 1em 0 1em 0;
    page-break-after: avoid;
    text-indent: 0;
    color: rgb(179, 19, 19);
    font-family: "name";
    font-size: 35px;
    text-shadow: 0 0 10px #ff7171;
}

.bubble{
    font-size: 1rem;
}

/* 旁白 */
.narration {
    background-image: linear-gradient(to bottom right,
            #0000007a,
            #ffffff48);
    color: #fff2ce;
    font-weight: bold;
    /* 加粗 */
    font-size: 0.8rem;
    backdrop-filter: blur(4px) brightness(1.5);
    border-radius: 6px;
    width: fit-content;
    padding: 0.6rem 0.8rem;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}

/* 右对话框 */
.right-msg .bubble {
    background-image: linear-gradient(to left,
            #0000007c,
            #3592dd8f,
            #ffffff75);
    border-radius: 8px;
    /* 变圆 */
    border-top-right-radius: 0;
    padding: 0.6rem 0.8rem;
    position: relative;
    color: #caffeb;
    text-align: left;
    /* 对话框靠右 */
    margin-left: auto;
    /* 字体引用 */
    font-family: "speak1";
    /* 对话框大小自适应 */
    width: fit-content;
    /* 毛玻璃和提亮 */
    backdrop-filter: blur(4px) brightness(1.8);
    /* 左边框 */
    border-left: 6px solid #ffffff;
    /* 右边框 */
    border-right: 4px solid #ffffff;
}
/* 左对话框 */
.left-msg .bubble {
    background-image: linear-gradient(to right,
            #40065283,
            #e657577a,
            #ffffff88);
    border-radius: 8px;
    border-top-left-radius: 0;
    padding: 0.6rem 0.8rem;
    color: #d6fff8;
    /* 字体引用 */
    font-family: "speak1";
    /* 对话框大小自适应 */
    width: fit-content;
    /* 毛玻璃和提亮 */
    backdrop-filter: blur(4px) brightness(1.8);
    /* 左边框 */
    border-left: 6px solid #ffffff;
    /* 右边框 */
    border-right: 4px solid #ffffff;
}

/* 字体引用 */
@font-face {
    font-family: name;
    src: url(../Fonts/AaMeiSong-2.ttf);
}

@font-face {
    font-family: speak1;
    src: url(../Fonts/FontsLab-FuGuShouJi-2.ttf);
}

@font-face {
    font-family: speak2;
    src: url(../Fonts/XiangJiaoXiuZhengDaiLingGanTi-2.ttf);
}
@font-face {
    font-family: speak3;
    src: url(../Fonts/YuWoErYanNiZuiKeAi-2.ttf);
}

/* 修改你的 .story-item 隐藏状态 */
.story-item {
    opacity: 0;
    visibility: hidden;
    
    /* 新增这两行：限制高度和边距，让隐藏时不占位置 */
    max-height: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden; /* 防止内容溢出 */
    
    /* 保留原有的过渡动画 */
    transition: all 0.6s ease;
}

/* 显示状态时，恢复正常的尺寸 */
.story-item.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    
    /* 恢复高度和边距 */
    max-height: 2000px; /* 给一个足够大的值，防止长段落被截断 */
    margin-top: 15px !important; /* 恢复你原本的段落间距 */
    margin-bottom: 15px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    overflow: visible;
}