/* ========== 全局重置 ========== */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    /* 已移除GenJyuuGothic，消除缺失字体警告 */
    font-family: sans-serif,system-ui;
}
/* 额外优化：防止手机端横向滚动 */
html {
    overflow-x: hidden;
}

/* ========== 字体定义（全部已注释，不加载外部字体文件） ========== */
/*
@font-face {
    font-family: "GenJyuuGothic";
    src: url("./font/GenJyuuGothic-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "GenJyuuGothic";
    src: url("./font/GenJyuuGothic-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Noto Sans SC Black";
    src: url("./font/NotoSansSC-Black.woff2") format("woff2");
    font-weight: 900;
    font-display: swap;
}
@font-face {
    font-family: "Noto Sans SC";
    src: url("./font/NotoSansSC-Regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
*/

/* ==========【重要】卡片内部动态生成滑出面板 char / cp 两套（JS动态插入DOM） ========== */
.char-slide-panel-char{
    display:none;
    margin:8px 0;
    border:1px solid #f6a5b8;
    border-radius:8px;
    padding:12px;
    background:#fff7f9;
}
.char-slide-panel-cp {
    display:none;
    margin:8px 0;
    border:1px solid #f6a5b8;
    border-radius:8px;
    padding:12px;
    background:#fff7f9;
    position:relative;
}
.char-slide-panel-char.active,
.char-slide-panel-cp.active {
    display:block;
}

.panel-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
    gap:12px;
}
.panel-header h4{
    margin:0;
}
.panel-close-btn {
    border:none;
    background:transparent;
    font-size:20px;
    cursor:pointer;
    color:#b33a3a;
}
.heroine-box, .hero-list-box {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:12px;
}

/* ========== body基础 ========== */
body{
    background: #fff7f9;
    padding:20px;
    transition:background 0.2s;
}

/* ========== 页面标题区域 site-title ========== */
.site-title{
    text-align:center;
    margin:30px 0 10px;
}
.site-title h1{
    font-family:sans-serif;
    font-size:42px;
    font-weight:900;
    letter-spacing:1px;
    color: #b33a3a;
}
.title-sub-cn{
    font-size:16px;
    margin:8px 0;
    color:#666;
    font-weight:normal;
}
.sub-desc{
    text-align:center;
    font-size:16px;
    color:#666;
    margin-bottom:40px;
}

/* ========== 外层容器 wrap ========== */
.wrap{
    max-width:1200px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:30px;
}

/* ========== 大卡片组件 big-card ========== */
.big-card{
    background:#ffffff;
    border:2px solid #f6a5b8;
    border-radius:16px;
    padding:24px;
    transition:border-color 0.2s;
}
.big-card h2{
    margin-bottom:20px;
    font-size:24px;
    border-left:5px solid #b85878;
    padding-left:12px;
    color: #b85878;
    font-weight:bold;
}

/* ========== 设置页开关组件 switch-row / switch / slider ========== */
.switch-row{
    display:flex;
    align-items:center;
    gap:12px;
    margin:14px 0;
    flex-wrap:wrap;
}
.switch-desc{
    font-size:14px;
    color:#666;
    line-height:1.6;
    max-width:900px;
    font-weight:normal !important;
}
.switch{
    position:relative;
    width:50px;
    height:26px;
}
.switch input{
    opacity:0;
    width:0;
    height:0;
}
.slider{
    position:absolute;
    cursor:pointer;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:#ccc;
    border-radius:34px;
    transition:.3s;
}
.slider:before{
    position:absolute;
    content:"";
    height:20px;
    width:20px;
    left:3px;
    bottom:3px;
    background:white;
    border-radius:50%;
    transition:.3s;
}
input:checked + .slider{
    background:#e895a8;
}
input:checked + .slider:before{
    transform:translateX(24px);
}

/* ========== 表单输入 form-row ========== */
.form-row{
    margin:16px 0;
    display:flex;
    flex-direction:column;
    gap:6px;
    max-width:600px;
}
.form-row input{
    padding:10px;
    border:1px solid #eee;
    border-radius:8px;
    font-size:16px;
    background:#fcfcfc;
}

/* ========== 全局普通按钮 button基础样式 ========== */
button{
    padding:10px 18px;
    border:none;
    border-radius:8px;
    background:#b33a3a;
    color:#fff;
    cursor:pointer;
    font-size:15px;
    transition:0.2s;
}
button:hover{
    background:#992e2e;
}
.btn-fold{
    background:#888 !important;
}
.btn-fold:hover{
    background:#666 !important;
}
/* 删除按钮统一灰色 */
.btn-del.del-game {
    background-color:#888 !important;
    color:#fff;
}
.btn-del.del-game:hover {
    background-color:#666 !important;
}

/* ==========【新增】游戏卡片每组模块，增加上下间距，解决拥挤 ========== */
.game-card-block-item{
    margin-bottom:24px;
}
.game-card-empty-tip{
    margin:10px 0 18px 0;
    font-size:18px;
}

/* ========== 居中按钮块 center-btn-block ========== */
.center-btn-block{
    display:flex;
    justify-content:center;
    margin:16px 0;
    gap:12px;
}

/* ========== 游戏搜索面板 game-search-box 【核心修复】 ========== */
.game-search-box{
    margin:16px 0;
    display:none; /* 默认隐藏 */
    flex-direction:column;
    gap:10px;
    align-items:stretch;
    padding:16px;
    border:1px solid #f6a5b8;
    border-radius:12px;
    background:#fff;
}
.game-search-box.active{
    display:flex; /* 激活恢复flex布局，保证内部filter-group正常排列 */
}
.game-search-box input{
    padding:10px;
    width:100%;
    border:1px solid #eee;
    border-radius:8px;
    background:#fcfcfc;
}
.filter-group{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}
.filter-group select{
    padding:8px;
    border-radius:6px;
    border:1px solid #eee;
    background:#fcfcfc;
}

/* ========== 游戏选择列表 game-list-select ========== */
.game-list-select{
    max-height:320px;
    overflow-y:auto;
    border:1px solid #eee;
    border-radius:10px;
    padding:10px;
    margin:12px 0;
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:14px;
    background:#fff;
}
@media (max-width:768px) {
    .game-list-select{
        grid-template-columns:1fr;
    }
}

/* ========== 游戏选项单项 game-option-item ========== */
.game-option-item{
    border:1px solid #eee;
    border-radius:10px;
    padding:12px;
    cursor:pointer;
    display:flex;
    gap:12px;
    align-items:flex-start;
    background:#fff;
}
.game-option-item:hover{
    background:#fff0f3;
    border-color:#e895a8;
}
.game-option-item img{
    width:120px;
    height:auto;
    border-radius:6px;
    object-fit:cover;
    flex-shrink:0;
}
.game-option-info{
    flex:1;
}
.game-option-name{
    font-weight:bold;
    font-size:16px;
    margin-bottom:6px;
}
.game-option-info p{
    font-size:14px;
    line-height:1.6;
    color:#333;
}

/* ========== 已添加游戏卡片 game-card ========== */
.game-card{
    background:#ffffff;
    border:1px solid #f6a5b8;
    border-radius:12px;
    padding:18px;
    margin:16px 0;
}
/* JS渲染头部：名称 + 五颗爱心 + 删除按钮 */
.game-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.game-card-title {
    font-size: 22px;
    font-weight: 700;
    color: #000000;
    margin: 0;
}

.game-card-hearts {
    display: flex;
    gap: 4px;
}

/* ❌ 已删除 .game-card-hearts .heart 旧样式（含 font-variant-emoji） */
/* ✅ 统一由下方全局 .heart SVG 样式接管 */

.game-card-actions {
    display: flex;
    gap: 6px;
}

.btn-fav {
    background:transparent;
    color:#ccc;
    font-size:20px;
    padding:0 4px;
}
.btn-fav.active {
    color:#b33a3a;
}
.btn-toggle-char,
.btn-toggle-cp,
.btn-delete-game {
    padding:4px 8px;
    font-size:14px;
}

/* ========== 修改部分：游戏开关行间距和单元最小宽度 ========== */
.game-switch-row{
    display: flex;
    align-items: flex-start;
    gap: 12px;  /* 16 → 12，两块开关之间距离 */
    margin: 10px 0 16px;
    flex-wrap: wrap;
}
/* 每一组【开关+文字】独立单元 */
.game-switch-row > div {
    display: flex;
    align-items: flex-start;
    gap:12px;
    flex: 0 1 auto;
    min-width:180px; /* 280 →180，允许单元收缩，消除多余空白 */
}
.game-switch-row span {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

.game-card-buttons{
    display:flex;
    gap:10px;
    margin:12px 0;
}

/* Character / CP 模块容器 */
.game-card-section {
    margin-bottom: 20px;
}
.game-card-section .btn-character,
.game-card-section .btn-couple {
    margin-bottom: 10px;
}
.section-title {
    margin: 0 0 10px 0;
    font-size: 16px;
    font-weight: normal;
    color: #666;
}
.char-list-wrap,
.cp-wrap {
    min-height: 220px;
}

/* 空状态提示 */
.empty-hint {
    font-size: 16px;
    color: #666;
    padding: 12px 0;
}

/* 折叠面板类 */
.panel-collapsed .char-list-wrap,
.panel-collapsed .cp-wrap {
    display:none;
}
.char-panel-wrap,
.cp-panel-wrap {
    margin:10px 0;
}

/* ✅修改后：移除 justify‑content: space‑between */
.game-card-head{
    display:flex;
    align-items:center;
    margin-bottom:12px;
    flex-wrap:wrap;
    gap:10px;
    /* 已删除 padding-left:34px，不再内部缩进，按钮向外凸出 */
}
.heart-rate{
    display:flex;
    gap:6px;
    margin:8px 0;
}
/* ❌ 已删除 .heart 旧样式（含 font-family / font-variant-emoji） */
/* ✅ 统一由下方全局 .heart SVG 样式接管 */

.game-switch-group{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

/* ========== 角色区域 char-section char-pool char-item ========== */
.char-section{
    margin:16px 0;
    padding:12px 0;
    border-top:1px solid #eee;
}
.char-title{
    font-weight:normal;
    margin:10px 0;
}
.char-pool{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
    gap:14px;
    margin:10px 0;
}
/* 滑出面板内角色池缩小最小宽度 */
.game-search-box .char-pool{
    grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
}
/* ========== char-item 修复：flex纵向布局，解决长名字高度错位 ========== */
.char-item{
    width: 120px;
    min-height:168px;
    text-align:center;
    border:1px solid #eee;
    padding:8px;
    border-radius:10px;
    cursor:pointer;
    background:#fff;
    transition:0.2s ease;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
}
.char-item.selected{
    border-color:#e895a8;
    background:#fff0f3;
}
.char-item:hover{
    border-color:#f0b8c8;
}
.char-item .char-card-img-box {
    position:relative;
    width:100%;
    aspect-ratio:1 / 1;
    border:1px solid #e2e2e2;
    border-radius:8px;
    overflow:hidden;
    margin-bottom:8px;
    flex-shrink:0;
}
.char-item .char-card-img-box img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    decoding:async;
}
.char-item .char-card-name {
    font-size:14px;
    color:#222;
    line-height:1.4;
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    word-break:break-word;
}
.char-img-switch{
    font-size:12px;
    margin-top:4px;
    color:#666;
    cursor:pointer;
    text-decoration:underline;
}
.char-img-switch:hover{
    color:#c0392b;
}
/* 关键：同一行卡片强制拉伸等高，替换原 align-items:flex-end */
.char-selected-row{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin:12px 0;
    align-items:stretch;
}

/* ========== 【渲染输出选中角色卡片 char-card-item ========== */
.char-card-item{
    width:120px;
    min-height:168px;
    text-align:center;
    border:1px solid #eee;
    padding:8px;
    border-radius:10px;
    background:#fff;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
}
.char-card-item.selected{
    border-color:#e895a8;
    background:#fff0f3;
}
.char-card-img-box{
    position:relative;
    width:100%;
    aspect-ratio:1 / 1;
    border:1px solid #e2e2e2;
    border-radius:8px;
    overflow:hidden;
    margin-bottom:8px;
    flex-shrink:0;
}
.char-card-img-box img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    decoding:async;
}
.char-card-name{
    font-size:14px;
    color:#222;
    line-height:1.4;
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    word-break:break-word;
}

/* ==========【新增】角色图片切换按钮 左右翻图按钮 ========== */
.char-switch-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:22px;
    height:22px;
    border-radius:50%;
    background:rgba(0,0,0,0.45);
    color:#fff;
    border:none;
    font-size:12px;
    padding:0;
    z-index:2;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}
/* 图片切换按钮，禁止点击事件冒泡到父卡片的视觉反馈，提高移动端点击权重 */
.char-switch-btn{
    pointer-events:auto !important;
    touch-action: manipulation;
}
.char-switch-prev{
    left:3px;
}
.char-switch-next{
    right:3px;
}
.char-switch-btn:hover{
    background:rgba(0,0,0,0.65);
}

/* 无多立绘时隐藏图片切换按钮，仅 char‑has‑multi‑img 才显示 */
.char-card-img-box .char-switch-prev,
.char-card-img-box .char-switch-next {
    display: none;
}
.char-card-img-box.char-multi-img .char-switch-prev,
.char-card-img-box.char-multi-img .char-switch-next {
    display: flex;
}

/* 选中预览区卡片内按钮（白色半透）同步缩小 */
.char-selected-row .char-switch-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.75);
    font-size: 12px;
    cursor: pointer;
}
.char-selected-row .char-switch-prev {
    left: 3px;
}
.char-selected-row .char-switch-next {
    right: 3px;
}
.char-selected-row .char-switch-btn:hover {
    background:rgba(255,255,255,0.9);
}

/* ========== CP布局 cp-layout-row 【移除25%｜75%固定占比，左右分栏，间距对齐character】 ========== */
.cp-group{
    margin:16px 0;
    padding-top:12px;
    border-top:1px solid #eee;
}
.cp-layout-row{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin:12px 0;
    padding-bottom:18px;
    border-bottom:1px solid #eee;
    width:100%;
}
.heroine-column{
    flex-shrink:0;
    display:flex;
    justify-content:center;
    align-items:flex-start;
}
.hero-list-column{
    flex:1;
}
/* 卡片换行容器间距与角色区域统一 */
.char-card-wrapper{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    align-items:stretch;
}

/* ========== checkbox过渡 ========== */
input[type="checkbox"] {
    transition: all 0.22s ease;
}

/* ========== 剧透弹窗遮罩 ========== */
.modal-mask {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    display: none; /* 默认隐藏 */
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
.modal-mask.active {
    display: flex;
}

.modal-box {
    background:#ffffff;
    padding:24px 28px;
    border-radius:12px;
    border:2px solid #f6a5b8;
    max-width:420px;
    width:90%;
}

.modal-box h3{
    margin-bottom:14px;
    color:#b33a3a;
    text-align:center;
}
.modal-box p.text-gray-desc{
    text-align:center;
    line-height:1.8;
}
.modal-btns{
    display:flex;
    gap:14px;
    justify-content:center;
    margin-top:20px;
}
/* 加载弹窗仅有单个按钮时强制居中 */
#game-load-modal .modal-btns {
    justify-content: center;
}

/* ========== 剧透弹窗按钮 ========== */
#spoiler-cancel,
#spoiler-confirm {
    padding:10px 18px;
    border:none;
    border-radius:8px;
    background:#b33a3a;
    color:#fff;
    cursor:pointer;
    font-size:15px;
    transition:0.2s;
}
#spoiler-cancel:hover,
#spoiler-confirm:hover {
    background:#992e2e;
}

/* ========== 导出颜色设置 color-set-row ========== */
.color-set-row{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    margin:16px 0;
}
.color-item{
    display:flex;
    flex-direction:column;
    gap:6px;
}
.color-item input[type="color"]{
    width:80px;
    height:40px;
    border:none;
    cursor:pointer;
    border-radius:6px;
}

/* ========== 导出尺寸选择 size-select ========== */
.size-select{
    margin:16px 0;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}
.size-select label {
    color:#c98fac;
}

/* ========== About模块 about-block ========== */
.about-block{
    text-align:center;
    margin-top:50px;
    padding:20px;
}
.about-block h2{
    color:#b33a3a;
}
.about-block p{
    margin:8px 0;
    font-size:16px;
    line-height:1.8;
    color:#666;
}
.about-block p.email-text{
    color:#222222;
}

/* ========== 文本颜色公共类 ========== */
h1{
    color: #b33a3a;
}
h2{
    color: inherit;
}
.text-light-pink{
    color: #c98fac;
    font-weight:normal !important;
}
.text-black{
    color: #222222;
}
.text-gray-desc{
    color:#666;
    font-weight:normal;
}

/* ========== 移动端适配 max-width:768px ========== */
@media (max-width:768px) {
    /* ---------- 需求①：手机端游戏待选封面缩小1/3 ---------- */
    .game-option-item img {
        width: 80px; /* 原120px → 80px，缩小1/3 */
    }

    /* ---------- 需求②：手机端人物立绘缩小1/4 ---------- */
    /* 统一所有角色卡片宽度为90px（原120px缩小1/4） */
    .char-item,
    .char-card-item,
    .cp-female-card-btn,
    .cp-male-item,
    .cp-selected-card-item {
        width: 90px;
        min-height: 150px; /* 微调最小高度，适配新宽度 */
    }
    /* 角色池网格跟随调整 */
    .char-pool {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    }
    .game-search-box .char-pool {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    }
    /* 已选角色行内卡片自动适应（宽度由父容器控制，但保留宽度声明） */
    .char-selected-row .char-card-item {
        width: 90px;
        min-height: 150px;
    }

    /* ---------- 需求③：取消Couple男女强制换行，排布和Character一致 ---------- */
    /* 删除原冲突的 .cp-layout-row{flex-direction:column;} 和 .heroine-column,.hero-list-column{width:100%;} */
    /* 重新设置并排布局 */
    .cp-layout-row {
        flex-direction: row;        /* 强制行排列（默认也是row，显式声明） */
        flex-wrap: wrap;           /* 允许自动换行 */
        gap: 10px;                /* 统一间距 */
    }
    .heroine-column {
        flex: 0 0 auto;           /* 女主列宽度由内容撑开，不占满 */
        width: auto;              /* 取消宽度100% */
    }
    .hero-list-column {
        flex: 1;                  /* 男主列占据剩余空间 */
        width: auto;              /* 取消宽度100% */
    }
    /* 女主容器内部保持flex-wrap，和Character一致 */
    .heroine-box {
        flex-wrap: wrap;
        gap: 10px;
    }

    /* ---------- 保留原有移动端样式 ---------- */
    .cp-select-btn-bar {
        justify-content: flex-end;
    }
    .game-fold-icon-expand{
        width:26px;
        height:26px;
        font-size:18px;
    }
    /* 注意：.game-card-header-row 的移动端样式在另一个媒体查询中，未改动 */
}

/* ========== 按钮统一：新增游戏按钮与导出图片按钮尺寸对齐 ========== */
#btn-add-game,
#btn-export {
    padding:10px 18px;
    min-height:42px;
    font-size:15px;
    border: none;
    border-radius:8px;
    background:#b33a3a;
    color:#fff;
    cursor:pointer;
    transition:0.2s;
}
#btn-add-game:hover,
#btn-export:hover {
    background-color: #992e2e;
}

/* 游戏卡片头部PC端同一行布局 */
.added-game-card {
    padding:16px;
    margin-bottom:14px;
}
.game-card-header-row {
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:12px;
}

/* 卡片底部按钮区域，放在CP下方 */
.card-bottom-buttons {
    margin-top:14px;
    display:flex;
    gap:10px;
}

/* =========手机端适配========= */
@media (max-width:768px) {
    .game-card-header-row {
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
    }
    /* 手机第一行：游戏名称 + 爱心 */
    .game-card-header-row > .game-card-title,
    .game-card-header-row > .heart-rate {
        display:flex;
    }
    /* 手机第二行：两个开关整行 */
    .game-switch-group {
        width:100%;
    }
}

/* 角色选择面板item，和游戏选择item统一风格（旧废弃面板，保留类备用） */
.char-select-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:12px 8px;
    cursor:pointer;
    border:1px solid #eee;
    border-radius:6px;
}
.char-select-item:hover{
    background:#f8e8ec;
}
.char-select-item.selected{
    background:#f6d8e0;
    border-color:#e8a0b0;
}
.char-option-img-wrap{
    width:120px;
    height:120px;
    overflow:hidden;
    border-radius:4px;
    margin-bottom:8px;
}
.char-option-img-wrap img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.char-option-name{
    font-size:14px;
    text-align:center;
}

/* ========== 双列表表单 form-row-double ========== */
.form-row-double {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    margin: 16px 0;
}
.form-row-double > .form-row {
    flex: 1;
    min-width: 260px;
    max-width: unset;
}

/* ========== CP面板方案C布局样式【修复后完整版本】 ========== */
.cp-female-block{
    margin:12px 0;
    display:flex;
    flex-direction:column;
    gap:8px;
}
/* 待选女主：完全复制 char-item 样式，增加flex纵向布局修复高度 */
.cp-female-card-btn{
    width: 120px;
    min-height:168px;
    text-align:center;
    border:1px solid #eee;
    padding:8px;
    border-radius:10px;
    cursor:pointer;
    background:#fff;
    transition:0.2s ease;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
}
.cp-female-card-btn.selected{
    border-color:#e895a8;
    background:#fff0f3;
}
.cp-female-card-btn:hover{
    border-color:#f0b8c8;
}
.cp-female-card-btn .char-card-img-box {
    position:relative;
    width:100%;
    aspect-ratio:1 / 1;
    border:1px solid #e2e2e2;
    border-radius:8px;
    overflow:hidden;
    margin-bottom:8px;
    flex-shrink:0;
}
.cp-female-card-btn .char-card-img-box img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    decoding:async;
}
.cp-female-name{
    font-size:14px;
    color:#222;
    text-align:center;
    line-height:1.4;
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    word-break:break-word;
}

/* ✅修改：增加position:relative，替换原有cp‑male‑select-wrap定义 */
.cp-male-select-wrap{
    min-height: 180px;
    border:none;
    border-radius:0;
    position: relative;
    /* 增加上下间距，隔开列表与按钮 */
    padding-bottom:4px;
}
.cp-male-title{
    font-weight:bold;
    margin-bottom:8px;
}
.cp-male-list{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:stretch;
}
/* 待选男主 cp‑male‑item：1:1复刻 char‑item，flex纵向布局修复高度 */
.cp-male-item{
    width: 120px;
    min-height:168px;
    text-align:center;
    border:1px solid #eee;
    padding:8px;
    border-radius:10px;
    cursor:pointer;
    background:#fff;
    transition:0.2s ease;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
}
.cp-male-item.selected{
    border-color:#e895a8;
    background:#fff0f3;
}
.cp-male-item:hover{
    border-color:#f0b8c8;
}
.cp-male-item .char-card-img-box {
    position:relative;
    width:100%;
    aspect-ratio:1 / 1;
    border:1px solid #e2e2e2;
    border-radius:8px;
    overflow:hidden;
    margin-bottom:8px;
    flex-shrink:0;
}
.cp-male-item .char-card-img-box img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    decoding:async;
}
.cp-male-item .char-card-name {
    font-size:14px;
    color:#222;
    line-height:1.4;
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    word-break:break-word;
}

/* ========== 【新增】CP已选角色卡片（已选女主、已选男主，完全对齐 char‑card‑item） ========== */
.cp-selected-card-item{
    width:120px;
    min-height:168px;
    text-align:center;
    border:1px solid #eee;
    padding:8px;
    border-radius:10px;
    background:#fff;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
}
.cp-selected-card-item.selected{
    border-color:#e895a8;
    background:#fff0f3;
}
.cp-selected-card-item .char-card-img-box{
    position:relative;
    width:100%;
    aspect-ratio:1 / 1;
    border:1px solid #e2e2e2;
    border-radius:8px;
    overflow:hidden;
    margin-bottom:8px;
    flex-shrink:0;
}
.cp-selected-card-item .char-card-img-box img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    decoding:async;
}
.cp-selected-card-item .char-card-name{
    font-size:14px;
    color:#222;
    line-height:1.4;
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    word-break:break-word;
}

/* ========== CP待选卡片 图片切换按钮（复用char‑switch‑btn基础类） ========== */
.cp-female-card-btn .char-card-img-box,
.cp-male-item .char-card-img-box {
    position: relative !important;
    overflow: hidden !important;
}
.cp-female-card-btn .char-switch-btn,
.cp-male-item .char-switch-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background:rgba(0,0,0,0.45);
    color:#fff;
    border:none;
    z-index:2;
    cursor:pointer;
}
.cp-female-card-btn .char-switch-prev,
.cp-male-item .char-switch-prev {
    left:3px;
}
.cp-female-card-btn .char-switch-next,
.cp-male-item .char-switch-next {
    right:3px;
}
.cp-female-card-btn .char-switch-btn:hover,
.cp-male-item .char-switch-btn:hover {
    background:rgba(0,0,0,0.65);
}

/* ========== CP选择面板底部按钮栏【修改定位与gap】 ========== */
.cp-select-btn-bar{
    display: flex;
    gap: 12px;
    margin-top:8px;
    justify-content: flex-end;
    flex-wrap: wrap;
    padding-left: 12px;
}
.cp-confirm-btn,
.cp-cancel-btn{
    padding:6px 14px;
}

/* ========== 【新增】角色立绘切换 loading 指示器 ========== */
.char-card-img-box {
    position: relative !important;
}
.img-loader-spinner {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.75);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index: 2;
}
.img-loader-spinner::after {
    content:"";
    width:32px;
    height:32px;
    border:3px solid #ddd;
    border-top-color:#e895a8;
    border-radius:50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}

/* ==========【新增】折叠状态游戏名旁图标展开按钮 ========== */
.game-fold-icon-expand {
    position: absolute;
    left: -34px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    border: 1px solid #b33a3a;
    border-radius: 8px;
    background: transparent;
    font-size: 20px;
    color: #b33a3a;
    cursor: pointer;
    padding: 0 !important;        /* 清除全局button默认padding */
    line-height: 1;
    width: 28px;
    height:28px;
}
/* 提高权重，覆盖全局button:hover */
.game-fold-icon-expand:hover{
    background: #992e2e !important;
    color: #b33a3a !important;
}

/* 标题容器开启相对定位，给左侧绝对定位按钮做参照 */
.game-card-head-title-wrap {
    position: relative;
    display: flex;
    align-items: center;
    /* ✅修改：移除padding‑left，让游戏名称文字直接贴左边对齐，和下方按钮对齐 */
    /* padding-left: 36px; */
    gap: 8px;
}

.added-game-card[data-fold="true"] .game-fold-icon-expand {
    display: inline-flex;
    align-items:center;
    justify-content:center;
}
.added-game-card[data-fold="false"] .game-fold-icon-expand {
    display: none;
}

/* 卡片折叠整体隐藏内容 */
.added-game-card[data-fold="true"] .game-card-block-item,
.added-game-card[data-fold="true"] .card-bottom-buttons,
/* ✅需求①：折叠时隐藏两个单独显示开关 */
.added-game-card[data-fold="true"] .game-switch-row {
    display: none;
}

/* ========== 导出图片快照模式：自定义配色（仅生成图片时生效，普通页面不受影响） ========== */
.snapshot-container.export-snapshot {
    --export-bg: #fff7f9;
    --export-title: #b33a3a;
    --export-subtitle: #b85878;
    --export-text: #c98fac;
    --export-gamename: #000000;
    --export-border: #f6a5b8;

    background-color: var(--export-bg) !important;
}
/* 大标题 Otome FavList */
.snapshot-container.export-snapshot .site-title h1 {
    color: var(--export-title) !important;
}
/* 小标题：基础信息、游戏列表等 h2 */
.snapshot-container.export-snapshot .big-card h2 {
    color: var(--export-subtitle) !important;
    border-left-color: var(--export-subtitle) !important;
}
/* 正文：昵称、游玩总数、入坑时间、入坑作品 */
.snapshot-container.export-snapshot .base-info-item {
    color: var(--export-text) !important;
}
/* 游戏卡片内游戏名称 */
.snapshot-container.export-snapshot .added-game-card h3 {
    color: var(--export-gamename) !important;
}
/* 卡片边框（big-card、added‑game‑card） */
.snapshot-container.export-snapshot .big-card,
.snapshot-container.export-snapshot .added-game-card {
    border-color: var(--export-border) !important;
}

/* ========== 快照模式新增规则 【重点】 ========== */
.snapshot-container.export-snapshot {
    --export-bg: #fff7f9;
    --export-title: #b33a3a;
    --export-subtitle: #b85878;
    --export-text: #c98fac;
    --export-gamename: #000000;
    --export-border: #f6a5b8;
    /* 新增：统一标题色变量 Character / Couple 三级标题 */
    --export-section-title-color: var(--export-gamename);
    background-color: var(--export-bg) !important;
}

/* 1. 快照模式：全局隐藏所有按钮、开关、交互控件【核心】 */
.snapshot-container.export-snapshot button,
.snapshot-container.export-snapshot .switch,
.snapshot-container.export-snapshot .slider,
.snapshot-container.export-snapshot .char-switch-btn,
.snapshot-container.export-snapshot .panel-close-btn,
.snapshot-container.export-snapshot .heart-rate,
.snapshot-container.export-snapshot .card-bottom-buttons,
.snapshot-container.export-snapshot .game-switch-row,
.snapshot-container.export-snapshot .btn-character,
.snapshot-container.export-snapshot .btn-couple,
.snapshot-container.export-snapshot .game-fold-icon-expand {
    display: none !important;
}

/* 2. 快照强制所有游戏卡片展开，无视data-fold折叠属性 */
.snapshot-container.export-snapshot .added-game-card[data-fold] {
    display: block !important;
}
.snapshot-container.export-snapshot .added-game-card .game-card-block-item {
    display: block !important;
}

/* 3. 滑出面板（char-slide-panel）在快照模式全部隐藏，只保留最终渲染结果区域 */
.snapshot-container.export-snapshot .char-slide-panel-char,
.snapshot-container.export-snapshot .char-slide-panel-cp {
    display: none !important;
}

/* 4. 新增：Character / Couple 三级标题样式（仅JS动态插入快照时使用） */
.snapshot-container.export-snapshot .snapshot-section-title {
    font-size: 18px;
    margin: 12px 0 8px;
    color: var(--export-section-title-color);
    font-weight: bold;
}

/* 5. 隐藏设置区域、导出相关DOM（防止意外被捕获） */
.snapshot-container.export-snapshot #card-setting,
.snapshot-container.export-snapshot .color-set-row,
.snapshot-container.export-snapshot .size-select,
.snapshot-container.export-snapshot #btn-export {
    display: none !important;
}

/* 6. 空提示文字样式微调（可选） */
.snapshot-container.export-snapshot .empty-hint {
    display: none !important;
}

/* ===================== 导出预览弹窗样式 复用modal-mask ===================== */
/* 预览弹窗层级高于剧透弹窗(9999) → z-index:10000 */
#export-preview-modal.modal-mask {
    z-index: 10000;
}
.modal-preview-box {
    background:#ffffff;
    border-radius:12px;
    border:2px solid #f6a5b8;
    width: min(90vw, 1100px);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.modal-preview-head {
    padding:16px 20px;
    border-bottom:1px solid #eee;
}
.modal-preview-head h3 {
    color:#b33a3a;
    margin:0;
}
/* 滚动容器：承载预览图片，纵向滚动 */
.preview-scroll-wrap {
    flex:1;
    padding:16px;
    overflow-y:auto;
    overflow-x:hidden;
    position: relative; /* 为内部绝对定位loading提供锚点 */
}
.preview-scroll-wrap .preview-img-item {
    display:block;
    max-width:100%;
    height:auto;
    margin:0 auto 16px;
    border-bottom:1px solid #f0d8e0;
    padding-bottom:16px;
    position: relative;
    z-index: 1;
}
/* 最后一张图片移除底部分隔线 */
.preview-scroll-wrap .preview-img-item:last-child {
    border-bottom:none;
    margin-bottom:0;
    padding-bottom:0;
}
/* 底部固定按钮栏 */
.modal-preview-footer {
    padding:16px 20px;
    border-top:1px solid #eee;
    display:flex;
    gap:12px;
    justify-content:center;
    flex-wrap:wrap;
}
.modal-preview-footer button:disabled {
    background:#cccccc !important;
    cursor:not-allowed !important;
    opacity:0.7;
}

/* ========== 弹窗内置加载指示器 ========== */
.preview-inner-loading {
    position: absolute;
    inset: 0;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    z-index: 2;
}
.preview-inner-loading .loading-spinner {
    width: 48px;
    height: 48px;
    border:4px solid #eee;
    border-top-color:#e895a8;
    border-radius:50%;
    animation: spin 0.8s linear infinite;
}
.preview-inner-loading p {
    color:#444;
    font-size:16px;
}

/* ========== 修复导出预览弹窗加载状态高度不足问题 ========== */
.modal-preview-box {
    background:#ffffff;
    border-radius:12px;
    border:2px solid #f6a5b8;
    width: min(90vw, 1100px);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* 最小高度保证弹窗不会被压缩到过低 */
    min-height: 420px;
}

/* 加载状态下，滚动容器强制分配足够高度，防止内容被截断 */
.preview-scroll-wrap {
    flex:1;
    padding:16px;
    overflow-y:auto;
    overflow-x:hidden;
    position: relative;
    /* 最小高度保证loading区域完整展示 */
    min-height: 260px;
}

/* 加载遮罩优化：垂直居中不受父容器高度挤压，上下预留安全边距 */
.preview-inner-loading {
    position: absolute;
    inset: 0;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px; /* 加大加载圈与文字间距，避免拥挤裁切 */
    z-index: 2;
    /* 上下增加内边距，防止靠近上下边界被截断 */
    padding: 40px 20px;
}

.preview-inner-loading .loading-spinner {
    width: 48px;
    height: 48px;
    border:4px solid #eee;
    border-top-color:#e895a8;
    border-radius:50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0; /* 禁止加载圆圈被缩小 */
}
.preview-inner-loading p {
    color:#444;
    font-size:18px;
    line-height:1.6;
    text-align:center;
}

/* ================================================================ */
/* ========== ✅ 【核心修改】爱心 SVG 样式（替代文本 Emoji） ========== */
/* 删除所有旧 .heart / .game-card-hearts .heart 样式（含 font-variant-emoji） */
/* 统一使用纯色 SVG 矢量爱心，彻底解决安卓浏览器强制转 Emoji 问题 */
/* ================================================================ */
.heart {
    display: inline-flex;
    align-items: center;
    color: #cccccc;
    cursor: pointer;
    transition: 0.2s;
}
.heart.active {
    color: #e895a8;
}
.heart svg {
    width: 26px;
    height: 26px;
    display: block;
    flex-shrink: 0;
}

/* ========== 手机端统一适配修改 max-width:900px 【需求①②③④全部实现】 ========== */
@media (max-width:900px) {
    /* ===================== 需求④：所有大盒子自适应，禁止溢出，消除横向滚动 ===================== */
    .big-card,
    .game-card,
    .char-slide-panel-char,
    .char-slide-panel-cp,
    .game-search-box,
    .game-list-select {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* ===================== 需求①：游戏待选封面缩小1/3 120px → 80px ===================== */
    .game-option-item img {
        width: 80px !important;
    }
    /* 【重点修改】折叠屏大屏自动多列，窄屏单列；单卡片最大宽度360px，不设最小宽度 */
    .game-list-select {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)) !important;
        gap: 10px !important;
    }

    /* ===================== 需求②：角色立绘卡片缩小1/4 120px → 90px ===================== */
    .char-item,
    .char-card-item,
    .cp-female-card-btn,
    .cp-male-item,
    .cp-selected-card-item {
        width: 90px !important;
        min-height: 132px !important;
    }
    .char-pool {
        grid-template-columns: repeat(auto-fill,minmax(90px,1fr)) !important;
    }
    /* 搜索面板内角色池同步缩小 */
    .game-search-box .char-pool {
        grid-template-columns: repeat(auto-fill,minmax(90px,1fr)) !important;
    }

    /* ===================== 需求③：取消CP男女强制换行，布局对齐Character ===================== */
    /* 删除原有强制竖排，恢复横向弹性布局，允许自动换行 */
    .cp-layout-row {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    .heroine-column,
    .hero-list-column {
        flex: unset !important;
        width: auto !important;
    }
    /* 女主容器内部卡片自动换行，和char-selected-row行为一致 */
    .heroine-box {
        flex-wrap: wrap !important;
    }
    
    /* ========== 【修复】移动端待选游戏卡片右侧内容被裁切（仅移动端生效，不影响PC） ========== */
    .game-option-item {
        display: flex !important;
        gap: 10px !important;
        padding: 10px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important; /* 阻止卡片内部横向溢出 */
    }
    /* 注意：DOM对应类名是 game-option-info，不是 text-wrap！ */
    .game-option-info {
        flex: 1 1 0 !important; /* flex:1 + 基础宽度0，弹性收缩核心 */
        min-width: 0 !important;
    }
    .game-option-name {
        font-size: 16px !important;
        line-height: 1.4 !important;
        word-break: break-word !important;
    }
    .game-option-info p {
        font-size: 14px !important;
        line-height: 1.5 !important;
        word-break: break-all !important; /* 长日文、英文名称自动换行 */
        white-space: normal !important;
    }
}

/* 导出按钮区域单独纵向居中布局，不污染全局center-btn-block */
.center-btn-block.export-btn-wrap {
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.center-btn-block.export-btn-wrap .switch-desc {
    text-align: center;
}

/* 恢复默认按钮：左对齐，覆盖原有居中样式 */
.center-btn-block.left-align-btn {
    justify-content: flex-start !important;
}