/* ============================================================
   蓝月10周年分享 - 样式表
   设计稿基准: 1920px  换算规则: 1rem = 100px (设计稿px ÷ 100)
   响应式: rem.js 仅宽度驱动，最小宽度 1020px 保底
   ============================================================ */

/* ==================== Reset ==================== */
html,
body,
h1, h2, h3, h4, h5, h6,
div, dl, dt, dd,
ul, ol, li,
p, blockquote, pre, hr,
figure, table, caption, th, td,
form, fieldset, legend,
input, button, textarea, menu {
    margin: 0;
    padding: 0;
}

html, body, fieldset, img, iframe, abbr {
    border: 0;
}

li {
    list-style: none;
}

textarea {
    overflow: auto;
    resize: none;
}

a, button {
    cursor: pointer;
}

h1, h2, h3, h4, h5, h6,
em, strong, b {
    font-weight: 400;
    font-style: normal;
}

a, a:hover {
    text-decoration: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

/* ==================== 全屏容器 ==================== */
html, body, .wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.wrap {
    position: relative;
}

.page {
    height: 100%;
    overflow: hidden;
}

/* ==================== 6个模块通用背景样式 ==================== */
.part {
    width: 100%;
    height: 100%;
    background-color: #1a0a04; /* 默认背景色，加载前显示 */
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    overflow: hidden;
}

/* ==================== Logo ==================== */
.logo {
    position: absolute;
    left: 0.76rem;    /* 76px ÷ 100 */
    top: 0.38rem;     /* 38px ÷ 100 */
    display: block;
    width: 1.99rem;   /* 199px ÷ 100 */
    height: 1.11rem;   /* 111px ÷ 100 */
    z-index: 2;
}

.logo img {
    width: 100%;
    display: block;
}

/* ==================== 右上操作按钮区 ==================== */
.top {
    position: absolute;
    top: 0.34rem;     /* 34px ÷ 100 */
    right: 0.4rem;    /* 40px ÷ 100 */
    z-index: 2;
    display: flex;
    gap: 0.12rem;      /* 12px 间距 */
}

.top-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1rem;       /* 100px 最小宽度（含边框约102px） */
    padding: 0 0.14rem;
    height: 0.32rem;   /* 32px */
    border: 1px solid #e9c586;
    border-radius: 0.16rem;
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    font-size: 0.14rem;
    color: #e9c586;
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.3s, color 0.3s;
    text-decoration: none;
    box-sizing: border-box;
}

.top-btn:hover {
    background-color: rgba(233, 197, 134, 0.15);
    color: #ffd060;
}

/* 登录按钮 - 已登录状态 */
.top-btn.logged-in {
    color: #ffd060;
    border-color: #ffd060;
    cursor: default;
}

.top-btn.logged-in:hover {
    background-color: transparent;
    color: #ffd060;
}

/* 按钮图标基础样式 */
.top-icon {
    display: inline-block;
    margin-right: 0.04rem;
    background: url('../images/sprite-icons.png') no-repeat;
    background-size: 0.14rem 0.39rem;
}

/* 绑定图标 14×10 */
.icon-bind {
    width: 0.14rem;
    height: 0.10rem;
    background-position: -0rem -0rem;
}

/* 下载游戏图标 9×11（箭头+横线） */
.icon-download {
    width: 0.09rem;
    height: 0.11rem;
    background-position: -0.02rem -0.14rem;
}

/* 官网首页图标 11×10 */
.icon-home {
    width: 0.11rem;
    height: 0.10rem;
    background-position: -0.01rem -0.29rem;
}

/* ==================== 首页「开启传记」按钮 ==================== */
.btn-start {
    position: absolute;
    left: 50%;
    top: 6.2rem;       /* 620px ÷ 100，位于文字下方约30px */
    width: 3.67rem;     /* 367px ÷ 100 */
    height: 1.23rem;     /* 123px ÷ 100 */
    margin-left: -1.835rem; /* 367px ÷ 2 ÷ 100，水平居中 */
    display: block;
    background: url('../images/sprite-main.png') no-repeat;
    background-size: 3.67rem 6.46rem; /* 雪碧图原始尺寸 367×646，rem缩放 */
    background-position: 0 0;
    transition: filter 0.3s;
    z-index: 2;
}

.btn-start:hover {
    filter: brightness(1.2);
}

/* ==================== 传奇之路 - 羊皮卷轮播 ==================== */

/* 羊皮卷容器 - 居中定位（原始1380×865，宽105% 高90%） */
.sheepskin {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14.49rem;    /* 1380 × 1.05 ÷ 100 */
    height: 7.785rem;   /* 865 × 0.9 ÷ 100 */
    margin-left: -7.245rem; /* 1449 ÷ 2 ÷ 100 */
    margin-top: -3.8925rem; /* 778.5 ÷ 2 ÷ 100 */
    background: url('../images/sheepskin.png') no-repeat;
    background-size: 100% 100%;
    z-index: 2;
}

/* 轮播内容区 */
.sheepskin-inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* 单张轮播项 - opacity 过渡 */
.sheep-slide {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;  /* 左右内容水平居中 */
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.sheep-slide.active {
    opacity: 1;
    pointer-events: auto;
}

/* 左侧图片区 */
.sheep-left {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0 0.3rem 1.19rem;
    box-sizing: border-box;
}

.sheep-left img {
    width: 100%;
    height: auto;
    display: block;
}

/* 右侧文字区 */
.sheep-right {
   /* width: 6.5rem;       固定宽度，配合 justify-content:center 居中 */
    flex-shrink: 0;
    padding: 0.4rem 0.5rem 0.4rem 0rem;
    box-sizing: border-box;
    color: #3d1a06;
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    font-size: 0.22rem;  /* 22px ÷ 100 */
    line-height: 1.5;
    text-align: center;
}

.sheep-right p {
    margin-bottom: 0.06rem;
}

.sheep-right .hl {
    color: #bb0000;
}

/* 左右箭头 - 雪碧图，独立完整规则 */
.sheep-arrow {
    position: absolute;
    top: 50%;
    width: 1.08rem;     /* 108px ÷ 100 */
    height: 0.53rem;    /* 53px ÷ 100 */
    margin-top: -0.28rem;  /* 53 ÷ 2 ÷ 100 ≈ 垂直居中 */
    display: block;
    background: url('../images/arrows.png') no-repeat;
    background-size: 12.15rem 0.56rem; /* 雪碧图原始尺寸 1215×56，rem缩放 */
    cursor: pointer;
    z-index: 3;
    transition: filter 0.3s;
}

.sheep-arrow:hover {
    filter: brightness(1.2);
}

.sheep-prev {
    left: 1.22rem;       /* 箭头内靠 122px */
    background-position: -0.03rem -0.02rem;      /* 左箭头 (3, 2) ÷ 100 */
}

.sheep-next {
    right: 0.82rem;      /* 箭头内靠 82px */
    background-position: -11.07rem -0.02rem; /* 右箭头 (1156, 2) ÷ 100 */
}

/* 底部指示点 */
.sheep-dots {
    position: absolute;
    left: 50%;
    bottom: 1.25rem;    /* 125px ÷ 100 */
    transform: translateX(-50%);
    display: flex;
    gap: 0.15rem;       /* 15px ÷ 100 */
    z-index: 3;
}

.sheep-dot {
    width: 0.25rem;     /* 25px ÷ 100 */
    height: 0.25rem;
    background: url('../images/sprite-dots.png') no-repeat;
    background-size: 0.54rem 0.25rem;
    background-position: -0.29rem -0rem;  /* dot-normal */
    cursor: pointer;
    /* transition: background-position 0.3s; */
}

.sheep-dot.active,
.sheep-dot:hover {
    background-position: -0rem -0rem;     /* dot-active */
}

/* ==================== 专属称号 ==================== */

/* 未登录触发按钮（sprite-main 最后一个子图 240×70） */
.btn-title-login {
    display: block;
    width: 2.40rem;        /* 240px */
    height: 0.70rem;       /* 70px */
    background: url('../images/sprite-main.png') no-repeat;
    background-size: 3.67rem 6.46rem;
    background-position: -0.63rem -5.76rem;
    cursor: pointer;
    transition: filter 0.3s;
}

.btn-title-login:hover {
    filter: brightness(1.15);
}

/* 已登录内容容器 - 继承父级居中布局 */
#JtitleContent,
#JgatherLogin {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 内容区 - 居中 */
.title-area {
    position: absolute;
    left: 50%;
    top: 26%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}

/* 称号标题 - sprite-title-big 雪碧图 5态 */
.title-badge {
    display: block;
    background: url('../images/sprite-title-big.png') no-repeat;
    background-size: 6.12rem 7.52rem; /* 雪碧图原始 612×752，rem缩放 */
}

/* 态0: title-big-1 461×135 @(75,0) */
.title-s0 {
    width: 4.61rem;
    height: 1.35rem;
    background-position: -0.75rem 0;
}

/* 态1: title-big-2 399×121 @(106,139) */
.title-s1 {
    width: 3.99rem;
    height: 1.21rem;
    background-position: -1.06rem -1.39rem;
}

/* 态2: title-big-3 612×201 @(0,264) */
.title-s2 {
    width: 6.12rem;
    height: 2.01rem;
    background-position: 0 -2.64rem;
}

/* 态3: title-big-4 486×115 @(63,469) */
.title-s3 {
    width: 4.86rem;
    height: 1.15rem;
    background-position: -0.63rem -4.69rem;
}

/* 态4: title-big-5 562×164 @(25,588) */
.title-s4 {
    width: 5.62rem;
    height: 1.64rem;
    background-position: -0.25rem -5.88rem;
}

/* 文案 */
.title-desc {
    margin-top: 0.3rem;
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    font-size: 0.22rem;  /* 22px ÷ 100 */
    color: #000;
    line-height: 1.8;
    text-align: center;
}

/* 按钮 - sprite-main 第2子图 btn1 */
.btn-claim {
    display: block;
    margin-top: 0.3rem;
    width: 2.52rem;       /* 252px ÷ 100 */
    height: 0.81rem;       /* 81px ÷ 100 */
    background: url('../images/sprite-main.png') no-repeat;
    background-size: 3.67rem 6.46rem; /* 雪碧图原始 367×646，rem缩放 */
    background-position: -0.57rem -1.27rem;  /* btn1 @(57,127) */
    transition: filter 0.3s;
}

.btn-claim:hover {
    filter: brightness(1.2);
}

/* ==================== 集结排行榜 ==================== */

/* 左右内容居中容器 */
.rank-wrap {
    position: absolute;
    left: 50%;
    top: 53%;
    transform: translate(-50%, -53%);
    display: flex;
    align-items: center;        /* 左右垂直居中 */
    gap: 0.2rem;
    z-index: 2;
}

/* 左：旗帜底图 */
.rank-left {
    flex-shrink: 0;
    position: relative;
    width: 6.32rem;     /* 632px ÷ 100 原始尺寸 */
    height: 7.81rem;    /* 781px ÷ 100 原始尺寸 */
    background: url('../images/rank-board.png') no-repeat center top;
    background-size: 100% 100%;
}

/* 旗帜内内容层 */
.rank-board {
    position: absolute;
    left: 0;      /* 左边旗幆 */
    right: 0rem;     /* 右边旗幆 */
    top: 0.95rem;       /* 顶部旗幆 */
    bottom: 1.05rem;    /* 底部蒸尖 */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0 83px 0 56px; /* 内边距，避免内容被旗帜边界遮挡 */
}

/* 表头 - 和数据行共用相同 flex 布局确保对齐 */
.rank-thead {
    display: flex;
    margin-bottom: 0.1rem;
    flex-shrink: 0;
}

.rank-thead span {
    flex: 1;
    text-align: center;  /* 表头居中，和每列数据对齐 */
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    font-size: 0.2rem;
    color: #ffe4a0;
    font-weight: bold;
}

/* 数据列表 */
.rank-list {
    flex: 1;
    overflow: hidden;
}

.rank-list li {
    display: flex;
    align-items: center;
    height: 0.50rem;
    line-height: 0.50rem;
}

.rank-list li span {
    flex: 1;
    text-align: center;  /* 数据列居中，对齐表头 */
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    font-size: 0.17rem;
    color: #f5e0b0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 排名列 - 和其他列等宽 flex:1 */
.rank-list li .rk-no {
    flex: 1;
    text-align: center;
    /* font-size: 0.2rem; */
    color: #9f6f4d;
    /* font-weight: bold; */
    line-height: 0.50rem;
}

/* 1-3名徽章容器 */
.rank-list li .rk-top {
    display: flex;
    align-items: center;
    justify-content: center;   /* 徽章居中，和表头对齐 */
    line-height: normal;
}

/* 徽章：rank-icon 为背景，数字1/2/3 叠在中间 */
.rk-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.33rem;
    height: 0.36rem;
    background: url('../images/rank-icon.png') no-repeat center;
    background-size: 100% 100%;
    font-style: normal;
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    font-size: 0.14rem;
    font-weight: bold;
    color: #ffcf8b;
    line-height: 1;
}

/* 右：上下布局 */
.rank-right {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* 右上：奖品展示图 */
.rank-prizes-wrap {
    flex-shrink: 0;
}

.rank-prizes {
    display: block;
    width: 5.8rem;     /* 541px ÷ 100 原始大小 */
    height: auto;
}

/* 右下：说明文字 */
.rank-desc {
    width: 5.8rem;
    flex-shrink: 0;      /* 禁止 flex 压缩导致换行 */
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    font-size: 0.14rem;
    color: #e8d5a8;
    line-height: 1.7;
}

.rank-desc p {
    margin-bottom: 0.02rem;
    color: #b69574;
}

.rank-desc .rank-desc-title {
    color: #b69574;
    font-weight: bold;
    font-size: 0.15rem;
    margin-bottom: 0.04rem;
}

.rank-desc .hl-link {
    color: #ffd060;
    text-decoration: underline;
}

.rank-desc .hl-link:hover {
    color: #ffe088;
}

/* ==================== 贪玩全系传奇 ==================== */

/* 父容器一个定位，内部 flex 纵向排列 */
.all-wrap {
    position: absolute;
    left: 50%;
    top: 15%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}

.all-title img {
    display: block;
    width: 11.59rem;    /* 1159px ÷ 100 */
    height: auto;
}

/* 标题下方文案 */
.all-text {
    text-align: center;
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
}

.all-text p {
    font-size: 0.16rem;    /* 16px ÷ 100 */
    line-height: 1.8;
    color: #8F7759;
}

/* ==================== 兄弟集结（模块4） ==================== */

.gather-wrap {
    position: absolute;
    left: 50%;
    top: 10%;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    z-index: 2;
}

/* ---- 左侧 ---- */
.gather-left {
    display: flex;
    align-items: flex-start;
}

/* 父容器：包着标题+卡片 */
.bio-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 标题背景图（title-gather.png 532×85） */
.gather-title {
    width: 5.32rem;       /* 532px */
    height: 0.85rem;      /* 85px */
    background: url('../images/title-gather.png') no-repeat center;
    background-size: 100% 100%;
}

/* 卡片容器：个人传记底图 */
.bio-card {
    position: relative;
    width: 4.33rem;       /* 433px */
    height: 5.69rem;      /* 569px */
    background: url('../images/bio-card.png') no-repeat center top;
    background-size: 100% 100%;
}

/* 左上角"我的专属个人传"角标 - 覆盖在 bio-character 之上 */
.bio-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0.58rem;       /* 58px 角标宽度 */
    height: 2.10rem;      /* 210px 角标高度 */
    background-image: url('../images/bio-card.png');
    background-size: 4.33rem 5.69rem;
    background-position: 0 0;
    background-repeat: no-repeat;
    z-index: 5;           /* 层级高于 bio-character */
    pointer-events: none;
}

/* 小标题（sprite-title-small，跟 setTitleState 联动） */
.bio-subtitle {
    position: absolute;
    top: 0.55rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 2.15rem;        /* 215px（新 title-small-2） */
    height: 0.54rem;       /* 54px */
    background: url('../images/sprite-title-small.png') no-repeat;
    background-size: 2.69rem 3.37rem;
    background-position: -0.27rem -0.63rem;   /* 默认 s1: title-small-2 */
    z-index: 2;
}

/* 角色图（放在 bio-card 内部） */
.bio-character {
    position: absolute;
    top: 0.06rem;
    left: 50%;
    transform: translateX(-50%);
    width: 4.33rem;       /* 433px */
    height: 5.63rem;      /* 563px */
    overflow: hidden;
    z-index: -1;
}

.bio-character img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* 底部信息栏 */
.bio-info {
    position: absolute;
    bottom: 0;
    width: 3.54rem;
    height: 1.37rem;
    padding: 0.2rem 0.2rem 0.08rem;
    /* background: url('../images/bio-decor.png') no-repeat center / contain; */
    font-family: "Microsoft YaHei", sans-serif;
    font-size: 0.16rem;
    color: rgb(199, 163, 128);
    line-height: 1.2;
    text-align: left;
    z-index: 3;
    box-sizing: border-box;
}

.bio-info .bio-info-content {
    margin-top: 30px;
}

.bio-info .bio-info-content.login-hint {
    cursor: pointer;
}

.bio-info-login-hint {
    color: #e9c586;
    text-decoration: underline;
}

/* ==================== 角色切换选择器 ==================== */
.role-label {
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    font-size: 0.14rem;          /* 14px */
    color: #c7a380;
    text-align: center;
    margin-top: 0.1rem;          /* 10px 距上方图标 */
}

.role-selector {
    margin-top: 0.1rem;        /* 10px 距上元素 */
    display: flex;
    gap: 0.44rem;                 /* 44px 间距 */
}

.role-icon {
    display: block;
    width: 0.57rem;              /* 57px */
    height: 0.84rem;             /* 84px */
    background: url('../images/sprite-role-select.png') no-repeat;
    background-size: 1.71rem 1.68rem;  /* 171×168 */
    cursor: pointer;
    transition: filter 0.2s;
}

.role-icon:hover { filter: brightness(1.2); }

/* 第1行：未激活态 */
.role-priest  { background-position: 0 0; }
.role-mage    { background-position: -0.57rem 0; }
.role-warrior { background-position: -1.14rem 0; }

/* 第2行：激活态（hover + .active） */
.role-priest:hover,
.role-priest.active  { background-position: 0 -0.84rem; }
.role-mage:hover,
.role-mage.active    { background-position: -0.57rem -0.84rem; }
.role-warrior:hover,
.role-warrior.active { background-position: -1.14rem -0.84rem; }

.bio-info p {
    margin: 0.09rem 0;
}



/* .bio-info-val {
    color: #e9c586;
    font-weight: bold;
} */

/* 勇士档案标题图 (124×24) */
.bio-info-badge {
    width: 1.24rem;
    height: 0.24rem;
    background: url('../images/bio-combat.png') no-repeat center / contain;
    margin-bottom: 0.04rem;
}

/* ---- 右侧：集结奖励 ---- */
.gather-right {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 标题（sprite-gather-reward 子图1: gather-title 208×50） */
.reward-title {
    width: 2.08rem;       /* 208px */
    height: 0.50rem;      /* 50px */
    background: url('../images/sprite-gather-reward.png') no-repeat;
    background-size: 2.08rem 1.81rem;
    background-position: 0 0;
}

/* 描述文案 */
.reward-desc {
    margin-top: 0.15rem;
    text-align: center;
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    font-size: 0.16rem;   /* 16px */
    color: #c7a380;
    line-height: 1.6;
    white-space: nowrap;
}

.reward-desc .highlight {
    color: #ffd060;
    font-weight: bold;
}

/* 礼包图标（sprite-gather-reward 子图2: gift-box 123×127） */
.gift-icon {
    margin-top: 0.15rem;
    width: 1.23rem;       /* 123px */
    height: 1.27rem;      /* 127px */
    background: url('../images/sprite-gather-reward.png') no-repeat;
    background-size: 2.08rem 1.81rem;
    background-position: -0.42rem -0.54rem;
}

/* 两个按钮 */
.reward-btns {
    margin-top: 0.10rem;
    display: flex;
    gap: 0.15rem;
}

/* 领取奖励（sprite-main 子图4: claim-reward 151×53） */
.btn-claim-reward {
    display: block;
    width: 1.51rem;       /* 151px */
    height: 0.53rem;      /* 53px */
    background: url('../images/sprite-main.png') no-repeat;
    background-size: 3.67rem 6.46rem;
    background-position: -1.08rem -2.73rem;
    cursor: pointer;
    text-indent: -9999px;
    overflow: hidden;
    transition: filter 0.2s;
}

.btn-claim-reward:hover { filter: brightness(1.15); }

/* 查看邀请（sprite-main 子图7: invite-check 151×53） */
.btn-invite-check {
    display: block;
    width: 1.51rem;       /* 151px */
    height: 0.53rem;      /* 53px */
    background: url('../images/sprite-main.png') no-repeat;
    background-size: 3.67rem 6.46rem;
    background-position: -1.08rem -4.54rem;
    cursor: pointer;
    text-indent: -9999px;
    overflow: hidden;
    transition: filter 0.2s;
}

.btn-invite-check:hover { filter: brightness(1.15); }

/* 传记文案 */
.reward-story {
    margin-top: 0.1rem;
    text-align: center;
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    font-size: 0.16rem;   /* 16px */
    color: #c7a380;
    line-height: 1.8;
}

.reward-story p {
    margin-bottom: 0.05rem;
}

/* 二维码容器 */
.qrcode-box {
    margin-top: 0.2rem;
    width: 1.80rem;       /* 180px */
    height: 1.80rem;      /* 180px */
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(199,163,128,0.3);
    border-radius: 0.04rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    font-size: 0.14rem;
    color: rgba(199,163,128,0.5);
}

/* 立即集结（sprite-main 子图5: gather-now 217×68） */
.btn-gather-now {
    display: block;
    margin-top: 0.10rem;
    width: 2.17rem;       /* 217px */
    height: 0.68rem;      /* 68px */
    background: url('../images/sprite-main.png') no-repeat;
    background-size: 3.67rem 6.46rem;
    background-position: -0.75rem -3.30rem;
    cursor: pointer;
    text-indent: -9999px;
    overflow: hidden;
    transition: filter 0.2s;
}

.btn-gather-now:hover { filter: brightness(1.15); }

/* 底部提示 */
.reward-tip {
    margin-top: 0.1rem;
    text-align: center;
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    font-size: 0.14rem;   /* 14px */
    color: #c7a380;
}

/* ==================== 卡片轮播 ==================== */

.card-carousel {
    margin-top: 0.5rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
  可视区宽度计算：
  Swiper spaceBetween=12px，slidesPerView=3
  各slide宽 = (container - 2*12) / 3
  设置 container = 7.10rem，则每张 = (710-24)/3 ≈ 228px
  我们指定 slide宽为2.45rem，容器 = 2.45*3 + 0.12*2 = 7.59rem
*/
.card-swiper {
    width: 7.59rem;
    overflow: hidden;
}

/* 所有卡片等宽：中间卡尺寸，内容用 scale 体现大小 */
.card-slide {
    height: 3.60rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s ease;
}

/* 侧卡缩小至 0.8（196/245 ≈ 0.80）*/
.card-slide:not(.swiper-slide-active) {
    transform: scale(0.8);
    opacity: 0.85;
}

/* 激活卡恢复正常 */
.card-slide.swiper-slide-active {
    transform: scale(1);
    opacity: 1;
}

/* ---- 卡片外框 ---- */
.card-inner {
    width: 100%;
    height: 100%;
    padding: 0.12rem 0.12rem 0.14rem;  /* 统一内边距：上 左右 下 */
    background: url('../images/card-frame.png') no-repeat center / 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

.swiper-slide-active .card-inner {
    /* 激活态通过内容区样式体现，框体由背景图统一 */
}

/* ---- 内部深色内容區 ---- */
.card-content {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 0.02rem;
}

/* ---- 图片区 ---- */
.card-img {
    flex: 1;
    overflow: hidden;
    position: relative;
    background: #1a0c00;
}

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

/* ---- 「进入游戏」按鈕：默认隐藏，hover 渐显 ---- */
.card-enter-btn {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 1.01rem;        /* 101px */
    height: 0.36rem;       /* 36px */
    line-height: 0.36rem;
    text-align: center;
    background-color: rgb(253, 231, 1);
    color: #3d1a00;
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    font-size: 0.16rem;
    font-weight: bold;
    border-radius: 0.17rem;  /* 17px */
    white-space: nowrap;
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

/* hover 时淡入+放大 */
.card-slide:hover .card-enter-btn {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.card-enter-btn:hover { filter: brightness(1.15); }

/* 角标（小游戏 / 手游）85×68px */
.card-badge {
    position: absolute;
    top: 0;
    left: 0;
    width: 0.68rem;
    height: 0.544rem;
    z-index: 2;
    pointer-events: none;
    background-size: contain;
    background-repeat: no-repeat;
}
.card-badge.badge-mini {
    background-image: url('../images/badge-mini.png');
}
.card-badge.badge-app {
    background-image: url('../images/badge-app.png');
}

/* ---- 「领取礼包」按钮（雪碧图 sprite-main.png 第3子图 claim-gift 181×57） ---- */
.card-gift-btn {
    flex-shrink: 0;
    display: block;
    width: 1.81rem;        /* 181px */
    height: 0.57rem;       /* 57px */
    margin-top: 0.1rem;    /* 10px */
    background: url('../images/sprite-main.png') no-repeat;
    background-size: 3.67rem 6.46rem;   /* 雪碧图 367×646 */
    background-position: -0.93rem -2.12rem;  /* -93px -212px */
    cursor: pointer;
    transition: filter 0.2s;
    /* 隐藏文字，用雪碧图代替 */
    text-indent: -9999px;
    overflow: hidden;
}

.card-gift-btn:hover { filter: brightness(1.2); }

/* ---- 左右箭头（雪碧图） ---- */
.card-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 1.08rem;
    height: 1.08rem;
    display: block;
    background: url('../images/arrows.png') no-repeat;
    background-size: 12.15rem 0.56rem;
    cursor: pointer;
    transition: filter 0.3s;
}

.card-btn:hover { filter: brightness(1.3); }

.card-prev {
    left: -1rem;
    background-position: -0.03rem -0.02rem;
}

.card-next {
    right: -1rem;
    background-position: -11.09rem -0.02rem;
}


/* ==================== 底部滚动翻页箭头 ==================== */
.arrow {
    position: absolute;
    left: 50%;
    bottom: 0.25rem;  /* 25px ÷ 100 */
    width: 0.8rem;    /* 80px ÷ 100 */
    margin-left: -0.4rem; /* 40px ÷ 100 */
    font-size: 0.12rem;   /* 12px ÷ 100 */
    color: #fff;
    text-align: center;
    z-index: 3;
    animation: arrow 1s infinite ease-in-out alternate;
}

.arrow .ico {
    height: 0.65rem;  /* 81px ÷ 100 */
    width: 0.17rem;   /* 17px ÷ 100 */
    margin: 0 auto -0.05rem; /* -10px ÷ 100 */
    display: block;
    background: url('../images/sprite-main.png') no-repeat;
    background-size: 3.67rem 6.46rem; /* 雪碧图原始尺寸 367×646，rem缩放 */
    background-position: -1.75rem -5.11rem; /* -175px -511px */
}

@keyframes arrow {
    from { transform: translateY(0); }
    to   { transform: translateY(0.1rem); } /* 10px ÷ 100 */
}

/* ==================== 右侧侧边导航 ==================== */
.nav {
    position: fixed;
    right: 0.45rem;   /* 45px ÷ 100 */
    top: 50%;
    z-index: 10;
    margin-top: -1.56rem; /* 156px ÷ 100 (6项 × 36 + 5间距 × 20) / 2 ≈ 158 = 1.56rem */
}

.nav li {
    height: 0.36rem;       /* 36px ÷ 100 */
    line-height: 0.36rem;  /* 36px ÷ 100 */
    margin-bottom: 0.2rem; /* 20px ÷ 100 */
    text-align: right;
    font-size: 0.16rem;    /* 16px ÷ 100 */
    color: #c7a380;
    cursor: pointer;
    padding-right: 0.26rem; /* 26px ÷ 100 */
    background-repeat: no-repeat;
    background-position: right 0.11rem; /* 11px ÷ 100 */
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAABFCAYAAACVFbxAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjI3NTRGRkYwRjdEQjExRUVBNTIwOTc2QzU5N0JGREVGIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjI3NTRGRkYxRjdEQjExRUVBNTIwOTc2QzU5N0JGREVGIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Mjc1NEZGRUVGN0RCMTFFRUE1MjA5NzZDNTk3QkZERUYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Mjc1NEZGRUZGN0RCMTFFRUE1MjA5NzZDNTk3QkZERUYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7ilzCFAAAA/klEQVR42uyXQQrCQAxF21B3rt3aQwgu9RoiQj2AZ7Dewb31HCLqovcYwTPosiaQkaFkglYXLhL4iw55f5JmCp20ruskEkNUhVqinJQACrhHbVA7VP4u7MECdeadRQNQQF+qixmAAtLziQHRABSQSp5qBqCAA9SWE0UDYHAd9EjjeaDGqB6v5bzu30FJz8A7lkEvC9SIk+a8duU83yKNsAChlxvqjpqh+gxOg5ZeLYIyjgPqEgPbo2obOA2UDolUgQjGjmdoMImBFFnkw/AGVQykSJumSboGJF+EwQYbbLDBBhts8I/gzB1X/1d2+Kf/EWy3G7vd2O2m6+3mKcAAnq2XJUULnXwAAAAASUVORK5CYII=");
    transition: color 0.3s;
}

.nav li.cur,
.nav li:hover {
    color: #dfbc6c;
    background-position: right -0.43rem; /* -43px ÷ 100 */
}

/* ==================== tw_dialog 弹窗皮肤 ==================== */
.twpop {
    z-index: 100;
    position: relative;
}

.twpop .twpop-main {
    background-color: #681c00;
    color: #c8af73;
    border: 1px solid #3d0900;
    border-radius: 0;
}

.twpop .twpop-close {
    background: url('../images/close.png') no-repeat center / 0.18rem;
}

.twpop .twpop-from-bd {
    background-color: rgba(0, 0, 0, 0.4);
}

.twpop .twpop-input,
.twpop .twpop-select {
    color: #ffd77b;
}

.twpop .twpop-btn {
    color: #441708;
    border: none;
    background: #d29b46;
    background: -webkit-gradient(linear, top, from(#ad6a1a), to(#ffd77b));
    background: linear-gradient(#ad6a1a, #ffd77b);
}

/* ==================== select2 样式覆盖 ==================== */
.select2-container--default .select2-selection--single {
    background: transparent !important;
    border: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #ffd77b !important;
}

/* 下拉面板（展开列表）*/
.select2-dropdown {
    background: #3a1a0a !important;
    border: 1px solid rgba(233, 197, 134, 0.3) !important;
    border-radius: 0.04rem !important;
}

.select2-search--dropdown .select2-search__field {
    outline: none;
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(233, 197, 134, 0.2) !important;
    color: #ffd77b !important;
}

.select2-search--dropdown .select2-search__field::placeholder {
    color: rgba(255, 215, 123, 0.4);
}

.select2-container--default .select2-results__option {
    color: #d2b480 !important;
    padding: 0.05rem 0.08rem !important;
    font-size: 0.13rem !important;
}

.select2-container--default .select2-results__option--highlighted {
    background: rgba(233, 197, 134, 0.2) !important;
    color: #e9c586 !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background: rgba(233, 197, 134, 0.15) !important;
    color: #ffd77b !important;
}

.select2-container--default .select2-results > .select2-results__options {
    max-height: 1.6rem !important;
}

/* ==================== 弹窗表单样式 ==================== */
.twpop-list li {
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.04rem;
}

/* ==================== 邀请弹窗表格 ==================== */
.invite-popup {
    width: 100%;
    max-height: 2.6rem;
    overflow-y: auto;
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE/Edge */
}

.invite-popup::-webkit-scrollbar {
    display: none;               /* Chrome/Safari */
}

.invite-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.invite-table thead tr {
    background-color: rgba(0, 0, 0, 0.2);
}

.invite-table th {
    color: #e9c586;
    font-weight: normal;
    padding: 0.08rem 0.06rem;
    font-size: 0.13rem;
    text-align: center;
    border-bottom: 1px solid rgba(233, 197, 134, 0.25);
}

.invite-table td {
    color: #d2b480;
    padding: 0.07rem 0.06rem;
    font-size: 0.13rem;
    text-align: center;
    border-bottom: 1px solid rgba(210, 180, 128, 0.1);
}

.invite-table tbody tr:hover {
    background-color: rgba(233, 197, 134, 0.08);
}

/* ==================== 领取奖励弹窗 ==================== */
.reward-popup {
    width: 100%;
    max-height: 2.6rem;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.reward-popup::-webkit-scrollbar {
    display: none;
}

.reward-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.reward-table thead tr {
    background-color: rgba(0, 0, 0, 0.2);
}

.reward-table th {
    color: #e9c586;
    font-weight: normal;
    padding: 0.08rem 0.06rem;
    font-size: 0.13rem;
    text-align: center;
    border-bottom: 1px solid rgba(233, 197, 134, 0.25);
}

.reward-table td {
    color: #d2b480;
    padding: 0.07rem 0.06rem;
    font-size: 0.13rem;
    text-align: center;
    border-bottom: 1px solid rgba(210, 180, 128, 0.1);
}

.reward-table tbody tr:hover {
    background-color: rgba(233, 197, 134, 0.08);
}

/* 复制礼包码按钮（灰色） */
.reward-copy-btn {
    display: inline-block;
    padding: 0.03rem 0.10rem;
    background: rgba(200, 180, 140, 0.2);
    color: #c7a380;
    font-size: 0.12rem;
    border-radius: 0.03rem;
    border: 1px solid rgba(200, 180, 140, 0.3);
    white-space: nowrap;
    transition: background 0.2s;
}

.reward-copy-btn:hover {
    background: rgba(200, 180, 140, 0.35);
}

/* 领取奖励按钮（黄色） */
.reward-claim-btn {
    display: inline-block;
    padding: 0.03rem 0.10rem;
    background: #ffc107;
    color: #3d1a00;
    font-size: 0.12rem;
    font-weight: bold;
    border-radius: 0.03rem;
    white-space: nowrap;
    transition: filter 0.2s;
}

.reward-claim-btn:hover {
    filter: brightness(1.15);
}

/* ==================== 领取成功弹窗 ==================== */

/* 弹窗打开后覆盖 tw_dialog 默认皮肤 */
.twpop.gift-popup .twpop-main {
    background-color: #681c00;
    border: 1px solid #3d0900;
    border-radius: 0.06rem;
    color: #c8af73;
}

.twpop.gift-popup .twpop-from-bd {
    background-color: rgba(0, 0, 0, 0.6);
}

/* 隐藏默认标题栏（内容已自带标题） */
.twpop.gift-popup .twpop-title {
    display: none;
}

/* 关闭按钮 X */
.twpop.gift-popup .twpop-close {
    background: url('../images/close.png') no-repeat center / 0.18rem;
}

/* 弹窗内容 */
.gift-success-popup {
    text-align: center;
    padding: 0.2rem 0.3rem 0.1rem;
}

/* 绿色圆角对勾 */
.gift-success-icon {
    width: 0.56rem;
    height: 0.56rem;
    line-height: 0.56rem;
    border-radius: 50%;
    background: #4caf50;
    color: #fff;
    font-size: 0.32rem;
    margin: 0 auto 0.14rem;
}

/* 标题 */
.gift-success-title {
    color: #e9c586;
    font-size: 0.20rem;
    font-weight: bold;
    margin-bottom: 0.06rem;
}

/* 提示语 */
.gift-success-desc {
    color: #d2b480;
    font-size: 0.14rem;
    line-height: 1.6;
    margin: 0 0 0.16rem;
}

/* 礼包码区域 - 金色虚线框 */
.gift-code-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 2px dashed #e9c586;
    border-radius: 0.04rem;
    padding: 0.10rem 0.12rem;
    margin-bottom: 0.04rem;
}

/* 礼包码文字 */
.gift-code-text {
    color: #ffd77b;
    font-size: 0.18rem;
    font-weight: bold;
    letter-spacing: 0.01rem;
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
}

/* 复制按钮 */
.gift-copy-btn {
    display: inline-block;
    padding: 0.04rem 0.14rem;
    background: #ffc107;
    color: #fff;
    font-size: 0.13rem;
    font-weight: bold;
    border-radius: 0.03rem;
    white-space: nowrap;
    transition: filter 0.2s;
}

.gift-copy-btn:hover {
    filter: brightness(1.1);
}

/* 「我知道了」按钮保持金色渐变风格 */
.twpop.gift-popup .twpop-btn {
    color: #441708;
    border: none;
    background: #d29b46;
    background: linear-gradient(#ad6a1a, #ffd77b);
    font-weight: bold;
    border-radius: 0.04rem;
}

.twpop.gift-popup .twpop-btn:hover {
    filter: brightness(1.15);
}

/* ==================== 集结兄弟弹窗 ==================== */
.gather-popup {
    padding: 0.04rem 0;
}

.gather-story {
    color: #d2b480;
    font-size: 0.13rem;
    line-height: 1.8;
    margin: 0;
    text-align: center;
}

.gather-story .hl {
    color: #e9c586;
    font-weight: bold;
}

/* ==================== 通用辅助类 ==================== */
.hide {
    display: none;
}

.gray {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}

.cell {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.bd {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}