/*样式清零*/
* {
    margin: 0;
    padding: 0;
}

/*
* {
    outline: 1px solid red !important;
}*/

@font-face {
            font-family: 'MyCustomFont';
            /* 假设你的字体文件和这个 HTML 在同一个文件夹下的 fonts 目录里 */
            src: url('data/font/FOT-SKIPPRON-D.OTF') ;
            font-display: swap; 
        }

html {
    scroll-behavior: smooth !important;
}

.btn-reset {
    /* 1. 去掉边框和背景 */
    border: none;
    background: transparent;
    /* 或者 background: none; */

    /* 2. 去掉默认的内边距和外边距 */
    padding: 0;
    margin: 0;

    /* 3. 【关键】继承父元素的字体设置 */
    /* 默认按钮不会继承 body 的字体，这行代码让它和周围文字长得一样 */
    font: inherit;
    color: inherit;

    /* 4. 让鼠标放上去变小手 (默认是箭头) */
    cursor: pointer;

    /* 5. (可选) 去掉点击时的蓝色/黑色轮廓线 */
    /* 注意：为了无障碍体验，去掉后最好自己写 :focus 样式 */
    outline: none;

    /* 6. (可选) 兼容性处理，防止 iOS 手机端出现奇怪的默认圆角 */
    -webkit-appearance: none;
}

html {
    /* 强制 y 轴（垂直方向）永远有滚动条 */
    /* 即使页面很短，右边也会显示一个灰色的空轨道，从而锁死网页宽度 */
    overflow-y: scroll;
}

body {
    font-family: "Noto Sans SC", "Noto Sans JP", sans-serif;
    font-weight: 400;
    font-style: normal;
}

header {
    background-color: white;
    padding-top: 10px;
    color: black;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    z-index: 9999;
}



header #logo {
    flex: 1;
    /* 占据剩余空间 */
    display: flex;
    justify-content: flex-start;
    font-size: 20px;
    /*font-family: "Cormorant Garamond", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "MS PGothic", sans-serif;*/
    /* 内容靠左 */
}

/*导航栏*/
nav {
    background-color: white;
    margin: 20px 20px;
    width: 660px;

    display: flex;

}

/*导航按键*/
nav button {
    background: none;
    /* 去掉背景 */
    border: none;
    /* 去掉边框 */
    cursor: pointer;
    /* 变小手 */
    padding: 15px 20px;
    flex: 1;

    align-items: center;
    /* 居中对齐 */


    /* 关键：定义一个变量 --theme-color，默认是灰色 */
    /* 这样我们后面可以给每个按钮单独设置它的“本命色” */
    --theme-color: #ccc;

    transition: 0.3s;
    /* 平滑过渡 */

    position: relative;

    font-family: "M PLUS Rounded 1c" ,"Hiragino Maru Gothic ProN",  "YouYuan" ;
}

/*导航按键文本*/
nav button .text {
    font-size: 14px;

    color: #92b5fc;
    /* 也是浅灰色 */
    transition: 0.3s;
}

.nav-translate {
    font-family: "YouYuan" !important;
}

/*导航按键悬停*/
nav button:hover .text {
    color: black;
}

nav button::after {
    content: '';
    /* 必须写，否则不显示 */
    position: absolute;
    /* 绝对定位，不占位置 */

    /* 位置调整 */
    bottom: 0;
    /* 贴在按钮最底下 */
    left: 50%;
    /* 定位在中间 */
    transform: translateX(-50%);
    /* 真正的水平居中 */

    /* 初始状态 */
    width: 0%;
    /* 宽度为0，平时看不见 */
    height: 3px;
    /* 线条厚度 */

    /* 颜色 (建议和你文字悬停颜色一致，或者用你的主题色) */
    background-color: #92b5fc;
    /* 或者跟随悬停文字变黑: background-color: black; */

    border-radius: 2px;
    /* 线条两头变圆 */
    transition: width 0.3s ease;
    /* 宽度变化的动画 */
}

nav button:hover::after {
    width: 80%;
    /* 展开到 80% 的宽度（留点空隙好看），也可以设为 100% */
}

.nav-active .text{
    color: black;
}

.nav-active::after {
    width: 80%;
}

/*---首页----*/
#page-home {
    background: url('data/image/background/bg_main_left.png') no-repeat left top / 40%,
        url('data/image/background/bg_main_right.png') no-repeat right bottom / 40%,
        url('data/image/background/bg_main.png') no-repeat center / cover;
}

/* --- 3. 内容限制容器 (限制最大宽度) --- */
.content-wrapper {
    width: 100%;
    /* 页面内容最大宽度 */
    display: flex;
    gap: 80px;
    /* 左右两栏的间距 */
    align-items: center;
    /* 顶部对齐 */
    justify-content: center;
    flex-wrap: wrap;
    padding: 20px 0px;

    

}

/* --- 4. 左侧核心区域 (仿造部分) --- */
.left-panel {
    background-color: white;
    width: 800px;
    flex-shrink: 0;
}

/* 卡片本体 */
.polaroid-card {
    background-color: #fff;
    padding: 15px 15px 0px 15px;
    /* 上左右15px，底部稍微多留点白 */
    border-radius: 4px;
    /* 轻微的圆角，不像按钮那么圆 */

    /* 关键：阴影让它浮起来 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transform: rotate(-1deg);
}

/* 卡片里的图片 */
.card-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
    transition: 0.3s;
}

.card-image:hover {
    cursor: pointer;
    opacity: 0.8;
}

/*图片切换时*/
.card-image-change {
    cursor: default !important;
    opacity: 0 !important;
    transition: 0.3s !important;
}

/* --- 核心：白色遮罩 --- */
.img-box {
    background-color: white;
}

/* 卡片里的文字区域 */
.home-card-text{
    height: 100px;
}

.home-card-text p {
    padding: 5px 10px;
    /* 文字左右稍微留点空隙 */

    font-size: 20px;
    font-weight: 550;
    /* 增加行高，还原日文排版的空气感 */
    color: #444;
    /* 深灰色，不要纯黑 */
    text-align: justify;
    /* 两端对齐，看起来更整齐 */

}

/* --- 5. 右侧预留区域 --- */
/* --- 容器样式 --- */
.right-panel {
    background-color: white;
    transform: rotate(1.5deg);
}

.profile-card {
    width: 360px;
    background-color: #fff;
    overflow: hidden;
    /* 保证子元素不溢出圆角 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* 淡淡的阴影 */
    flex-shrink: 0;
    transform: rotate(-1.5deg);
}

/* --- 顶部标题栏 --- */
.profile-header {
    /* 核心：粉色渐变背景 */
    background-image: url('data/image/background/h2_bg.png');
    color: white;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    font-family: "M PLUS Rounded 1c";
    padding: 12px 0;
    letter-spacing: 2px;
    /* 字间距稍微拉开 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    /* 文字轻微投影 */

    /* 可选：如果你想模仿原图 header 里的星星花纹，可以用 background-image 叠加 */
}

/* --- 列表主体 --- */
.profile-body {
    padding: 10px 20px;
    /* 内部留白 */
}

/* --- 每一行 --- */
.profile-row {
    display: flex;
    /* 使用 Flex 布局让左右对齐 */
    align-items: flex-start;
    /* 顶部对齐（防止多行文字错位） */
    padding: 12px 0;
    border-bottom: 1px solid #e0e0e0;
    /* 灰色的分割线 */
}

/* 最后一行的分割线去掉 */
.profile-row:last-child {
    border-bottom: none;
}

/* --- 左侧标签 (★ 年齢) --- */
.profile-label {
    flex: 0 0 110px;
    /* 固定左侧宽度，防止不对齐 */
    color: rgb(88, 129, 193);
    /* 标签颜色 */

    font-size: 15px;
    flex: 0.5;
}

/* 如果你想把星星做得更精细，可以单独包一个 span，这里直接写在文字里了 */

/* --- 右侧数值 --- */
.profile-value {
    flex: 1;
    /* 占据剩余空间 */
    color: #333;
    /* 深灰色文字 */
    font-size: 15px;
    line-height: 1.5;
    /* 行高，让多行文字（如兴趣）更好看 */
    flex: 0.5;
}

/*卡面页面*/
#page-card {
    position: relative;
    width: 100%;
    padding: 20px 0;
    /* 页面内容最大宽度 */
    display: block;
    gap: 80px;
    /* 左右两栏的间距 */
    align-items: center;

    overflow: hidden;
    /* 顶部对齐 */
    justify-content: center;
    flex-wrap: wrap;
    background: url(data/image/background/bg_main_left.png) no-repeat left top / 40%, url(data/image/background/bg_main_right.png) no-repeat right bottom / 40%, url(data/image/background/bg_main.png) no-repeat center / cover;
}

/*全局背景*/
.card-bg {
    width: 100%;
    height: 1920px;
    background: linear-gradient(to right, rgba(255, 255, 155, 0.07) 0%, rgba(255, 180, 139, 0.07) 25%, rgba(255, 136, 181, 0.07) 50%, rgba(153, 153, 255, 0.07) 75%, rgba(125, 185, 232, 0.07) 100%);
    transform: skewY(45deg);
    position: absolute;
    left: 0;
    pointer-events: none;

    outline: 0px !important;

    z-index: -10;
}

.bg2 {
    transform: skewY(-20deg);
    left: 0;
    top: 420px;
}



/* --- 按钮容器 --- */
.switch-btn {
    /* ... 保持你原有的样式 ... */
    width: 140px;
    height: 46px;
    position: absolute;
    display: flex;
    align-items: center;
    top: 20px;
    right: 40px;
    overflow: hidden;
    background: white;
    border-radius: 25px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.04);
    transition: 0.3s;
    cursor: pointer;
    /* 移到这里 */
}

/* 渐变层 */
.switch-btn::before {
    /* ... 保持不变 ... */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #ff909c 0%, #ff74b8 100%);
    transition: opacity 0.2s ease;
    z-index: 0;
}

/* 悬停效果：渐变消失，露出白色背景 */
.switch-btn:hover::before {
    opacity: 0;
}

/* --- 圆圈样式 (核心修改) --- */
.circle {
    position: absolute;
    /* 1. 初始位置：左边 */
    left: 0;

    height: 47px;
    width: 47px;
    background-color: white;
    border-radius: 100%;
    background-image: url(data/image/blank_arrow_right.png);
    background-size: cover;
    z-index: 2;
    /* 提高层级，保证盖住文字 */

    /* ✨ 2. 关键代码：添加过渡动画 */
    /* all 表示所有属性变化都动画，0.3s 是时间，ease-in-out 是先慢后快再慢 */
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* --- 圆圈被点击后的状态 (通过 JS 添加这个类) --- */
.circle.active {
    /* 3. 移动位置：不要用 right:0 */
    /* 算法：按钮总宽(140) - 圆圈宽(47) = 93px */
    /* 也可以写 left: calc(100% - 47px); */
    left: 93px;

    /* 切换箭头图片 (如果需要) */
    background-image: url(data/image/blank_arrow_left.png);
}

/* --- 1. 文字通用样式 --- */
.mode-text {
    position: absolute;
    z-index: 1;
    /* 在背景上面 */
    color: white;
    font-size: 18px;
    font-weight: 400;
    margin: 0;

    /* 关键：设置过渡动画 */
    /* opacity: 透明度变化 */
    /* transform: 位移变化 */
    transition: opacity 0.3s ease, transform 0.3s ease;

    /* 防止文字被选中或挡住点击 */
    pointer-events: none;
}

/* --- 2. “特訓前” (默认状态) --- */
.text-pre {
    right: 20px;
    /* 靠右 */
    opacity: 1;
    /* 显示 */
    transform: translateX(0);
    /* 位置正常 */
}

/* 当按钮被激活时，“特訓前”消失 */
.switch-btn.active .text-pre {
    opacity: 0;
    /* 变透明 */
    transform: translateX(-10px);
    /* 稍微往左飘一点，营造消失感 */
}

/* --- 3. “特訓後” (默认状态) --- */
.text-post {
    left: 20px;
    /* 靠左 */
    opacity: 0;
    /* 隐藏 */
    transform: translateX(10px);
    /* 稍微偏右一点，准备滑入 */
}

/* 当按钮被激活时，“特訓後”出现 */
.switch-btn.active .text-post {
    opacity: 1;
    /* 显示 */
    transform: translateX(0);
    /* 滑回到正常位置 */

    /* 小技巧：加个延迟，让旧文字先消失，新文字再出来，更有节奏感 */
    transition-delay: 0.1s;
}

/* --- 4. 悬停变色逻辑 --- */
.switch-btn:hover .mode-text {
    color: #ff909c;
}

/*卡面介绍*/
.card-intro-box {
    width: 100%;
    padding: 40px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 80px;
    align-items: center;
    justify-content: center;
}

/*卡面图像*/
.intro-img-box {
    width: 384px;
    height: 480px;
    background-color: white;
    padding: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transform: rotate(1deg);
}

.intro-img {
    width: 100%;
    height: 100%;
    background-image: url(data/image/detail/[今日だけの告白]橘ありす_no_frame.jpg);
    background-size: cover;
    transition: 0.2s;
}

.intro-img:hover {
    opacity: 0.8;
    cursor: pointer;
}

/*特训前后图像*/
.mode-img-container {
    height: 200px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.mode-img-box {
    width: 100px;
    background-color: white;
    padding: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.mode-img-box img {
    width: 100%;
    height: auto;

}

.mode-img-inactive {
    filter: brightness(0.6);
    transition: 0.2s;
}

.mode-img-inactive:hover {
    cursor: pointer;
    filter: brightness(0.8);
}

/*卡面简介*/
.intro-profile {
    width: 420px;
    height: 260px;
    background-color: white;
    padding: 10px 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
}

.intro-logo {
    width: 252px;
    height: 215px;
    position: absolute;
    right: 10px;
    top: 10px;
    background-image: url(data/image/deremas.png);
    background-size: cover;
    opacity: 0.1;
    pointer-events: none;
}

.intro-name {
    color: #444;
}

.intro-title {
    margin-top: -10px;
    font-size: 35px;
    font-weight: 600;

    color: #444;
}

.intro-row {
    border-bottom: 0px;
    /*去掉分割线*/
}

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');

.intro-value {
    color: #444;
}

.intro-rare img{
    height: 100%;
    width: auto;
}

.intro-rare {
    font-weight: bolder;
    
}

.voice-btn {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    width: 32px;
    height: 32px;
    background-image: url(data/image/voice_icon_play.png);
    background-size: cover;
}

.voice-btn:hover {
    cursor: pointer;
}

.playing {
    background-image: url(data/image/voice_icon_pause.png);
    background-size: cover;
}

.comment-text {
    position: absolute;
    width: 350px;
    right: -200px;
    bottom: 100px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px;
    z-index: 2;
    display: none;
}

/*详细界面按钮*/
.detail-btn {
    position: relative;
    width: 370px;
    height: 60px;
    border-radius: 30px;
    overflow: hidden;
    background: #fff2f8;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

.detail-btn:hover {
    cursor: pointer;
}

/*文本*/
.detail-btn p {
    font-size: 18px;
    z-index: 1;
    color: #fff2f8;
    transition: 0.2s;
}

.detail-btn:hover p {
    z-index: 1;
    color: #ff909c;
}

/* 渐变层 */
.detail-btn::before {
    /* ... 保持不变 ... */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #ff909c 0%, #ff74b8 100%);
    transition: opacity 0.2s ease;
    z-index: 0;
}

.detail-btn:hover::before {
    opacity: 0;
}

/*卡面选择*/
.card-select-box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    gap: 40px;
}

.carousel-window {
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.carousel-row {
    /* 不用 Flex 了，改用 Grid */
    display: grid;
    
    /* 强制一行 4 列，宽度自动平分 */
    grid-template-columns: repeat(4, 1fr);
    
    /* 按钮之间的间距 */
    gap: 20px;
    
    width: 100%;
    justify-items: center; /* 按钮居中 */
}

@media (min-width: 1200px) {
    #row0.carousel-row {
        /* 强制改为一行 8 个 */
        grid-template-columns: repeat(8, 1fr);
    }
    #row1.carousel-row {
        /* 强制改为一行 8 个 */
        grid-template-columns: repeat(8, 1fr);
    }
}


.card-switch-btn {
    width: 50px;
    height: 50px;
    cursor: pointer;
    transition: 0.5s;

}

#right-arrow.card-switch-btn {
    background: url(data/image/arrow_slider_right.png) no-repeat;
    background-size: cover;
}

#right-arrow.card-switch-btn:hover {
    background: url(data/image/arrow_slider_right_hover.png) no-repeat;
    background-size: cover;
}

#left-arrow.card-switch-btn {
    background: url(data/image/arrow_slider_left.png) no-repeat;
    background-size: cover;
}

#left-arrow.card-switch-btn:hover {
    background: url(data/image/arrow_slider_left_hover.png) no-repeat;
    background-size: cover;
}

.card-select-btn {
    
    /*默认图片*/
    background-size: cover;
    width: 70px;
    height: 70px;
    margin: 0 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: 0.3s;
}

.dots-show {
    opacity: 1;

    /* 1. 核心：去掉前面的黑点 */
    list-style: none;

    /* 2. 关键：去掉浏览器默认送你的左侧缩进 */
    padding: 20px;
    margin: 0;

    gap: 20px;
    transition: all 0.2s;
    will-change: transform;
    display: flex;
    justify-content: center;
}

.dot {
    width: 26px;
    height: 24px;
    background: url(data/image/dots_star.png) no-repeat;
    background-size: 100%;

}

.dot-active {
    width: 26px;
    height: 24px;
    background: url(data/image/active_star.png) no-repeat;
    background-size: 100%;
}

/*不显示，只占据大小*/
.none {
    opacity: 0;
}

/* --- 3. 新增淡入动画样式 --- */
.fade-in {
    /* 执行动画：名称 时长 曲线 */
    animation: fadeInEffect 0.2s ease-out;
}

/* 定义动画关键帧 */
@keyframes fadeInEffect {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#page-theater {
    width: 100%;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(4, auto);  
    justify-content: center;
    justify-items: center; 
    align-items: center;
    /* 按钮之间的间距 */
    gap: 20px;
    position: relative;
    
}

@media (max-width: 1300px) {
    #page-theater {
        /* 强制改为一行 2 个 */
        grid-template-columns: repeat(2, auto);
    }
}

.imas-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    background: url(data/image/imas_bg_pc.jpg) no-repeat;
    background-size: cover;
}

/* --- 变量定义 (蓝色系) --- */
:root {
    --theater-blue: #6a8cc7;       /* 装饰线颜色 */
    --theater-bg: #ffffff;         /* 卡片背景 */
    --theater-shadow: rgba(0, 0, 0, 0.1);
    --blue-start: #5881c1;
    --blue-end: #7ea6e0;
}

.theater-box {
    width: 280px;
    
    position: relative; /* 核心：定位基准 */
    margin: 10px 20px;  /* 上方留多点空隙给冒出来的蓝条 */
    
    /* 1. 上层：白色卡片主体 */
    /* 使用渐变背景实现左上角透明切角 */
    background: none;
    
    /* 内部布局 */
    display: flex;
    flex-direction: column;
    padding: 20px 15px 15px 15px; 
    box-sizing: border-box;
    
    /* 关键：设置层级，保证它盖在 ::before 上面 */
    z-index: 2; 
}

.theater-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 把原来的白色切角背景移到这里 */
    background: linear-gradient(135deg, transparent 20px, var(--theater-bg) 20px);
    
    /* 关键：层级设为 -1 (在内容下面，但在蓝色层上面) */
    z-index: -1; 
}

/* 3. 左上角蓝色装饰线 (核心还原) */
.theater-box::before {
    content: '';
    position: absolute;
    
    /* 尺寸与父容器完全一致 */
    width: 100%;
    height: 100%;
    
    /* 核心动作：向上移动 8px */
    top: -4px; 
    left: 0;
    
    /* A. 设置横向的蓝色渐变 */
    background: linear-gradient(90deg, var(--blue-start), var(--blue-end));
    
    /* B. 关键：要把这一层也切角，形状必须和上面白色的一样 */
    /* 使用 mask (遮罩)：透明的地方切掉，黑色的地方保留 */
    -webkit-mask: linear-gradient(135deg, transparent 20px, #000 20px);
    mask: linear-gradient(135deg, transparent 20px, #000 20px);
    
    /* 关键：放在白色卡片下面 */
    z-index: -2; 
    
    /* 阴影加在这里，效果会更自然（跟随外轮廓） */
    filter: drop-shadow(0 5px 15px var(--theater-shadow));
}

/* --- 图片容器 --- */
.theater-img-box {
    width: 100%;
    height: 200px; /* 固定高度 */
    margin-bottom: 10px;
    
    /* 4. 图片完美居中 (Flexbox) */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: start;     /* 垂直居中 */
    border: 1px solid gray;
    
    overflow: hidden;
}

/* --- 图片本体 --- */
.theater-img {
    /* 5. 图片自适应且不变形 */
    width: 100%;  /* 宽度最大撑满 */
    height: auto;     /* 保持比例 */
    
    /* 确保图片按比例缩放，不会被拉伸 */
    object-fit: contain; 
    
    /* 可选：给图片加一点点阴影增加立体感 */
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));

    transition: 0.2s;
}

.theater-img:hover {
    cursor: pointer;
    opacity: 0.8;
}

/* --- 标题文字 --- */
.theater-title {
    font-size: 14px;
    color: #444;
    margin: 0;
    line-height: 1.5;
    
    /* 超过两行省略号 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "Noto Sans JP", sans-serif;
}

/*剧情页面*/

#page-memory {
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "Noto Sans JP", sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.memory-sort {
    display: flex;
    align-items: center;
    background-color: #fcfcfc; /* 纯白偏一点点灰 */
    border-radius: 12px; /* 圆角 */
    box-shadow: 0 4px 15px rgba(0, 50, 100, 0.05); /* 淡淡的投影 */
    width: 650px;
    margin-top: 20px;
}

.sort-btn {
    padding: 10px 0;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgb(146,181,252); /* 默认灰色文字 */
    transition: all 0.3s ease;
    flex: 1; /* 均分宽度 */
    position: relative;
}

.sort-btn:hover {
    color: black;
}

.sort-btn::after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 3px;
    background-color: #92b5fc;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.sort-active {
    color: black;
}

.sort-active::after {
    width: 80%;
    /* 展开到 80% 的宽度（留点空隙好看），也可以设为 100% */
}

.sort-btn:hover::after {
    width: 80%;
    /* 展开到 80% 的宽度（留点空隙好看），也可以设为 100% */
}

.memory-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;   
    color: #444;;
    gap: 20px;
    padding: 20px;
}

.puchi-container {
    display: grid;    
    grid-template-columns: repeat(2, auto);
    justify-content: center; /* 按钮居中 */
}

@media (max-width: 850px) {
    .puchi-container {
        grid-template-columns: repeat(1, auto);
    }
}

.memory-box {
    width: 700px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

.memory-tag {
    position: absolute;
    top: 5px;
    right: 10px;
    color: rgb(194, 194, 194);
    font-size: 14px;
}

.memory-image-box {
    position: relative;
    height: 125px;
    margin-left: 20px;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.memory-image-box img{
    height: 100%;
    width : auto;
}

.memory-card-box:hover {
    cursor: pointer;
    opacity: 0.8;
}

.memory-intro-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.memory-title {
    font-size: 20px;
}

.memory-btn-box {
    display: flex;
    gap: 20px;
}

.memory-btn{
    background-color: #333631;
    color: white !important;
    text-decoration: none; 
    text-align: center;
    font-size: 20px;
    padding: 5px 20px;
    transition: 0.2s;
}

.memory-btn:hover {
    cursor: pointer;
    opacity: 0.8;
}

.memory-puchi-box {
    width: 420px;
}

.memory-refresh-box {
    width: 550px;
}

.puchi-tag {
    position: absolute;
    top: -12px;
    width: 100%;
    display: flex;
    justify-content: center;    
}

.puchi-tag .text{
    background-color: rgb(94,224,70);
    width: 80%;
    text-align: center;
    font-size: 15px;
    font-weight: 800;
    color: white;
    padding: 2px;
    border-radius: 8px;
}

.Vi {
    background-color: rgb(245,219,77) !important;
}

.Vo {
    background-color: rgb(247,89,171) !important;
}

.Da {
    background-color: rgb(64,169,255) !important;
}

#page-other {
}

.hidden {
    display: none !important;
}

.font-Yahei {
    font-family: "Microsoft YaHei" !important;
}

footer {
    width: 100%;
    padding: 10px 10px 10px;
    background-color: #f2f2f2;
    box-sizing: border-box;
    border-top: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "Noto Sans JP", sans-serif;
    line-height: 1.8;
    color: #333;
    font-size: 12px;
}