@charset "utf-8";

/* ==========================================================================
   猎鱼达人手游 —— 蟾光映秋，寻金兑礼（activity_4）
   设计稿宽 750px，html font-size = clientWidth / 750 * 100，故 1rem = 100 设计像素。
   页面主体为整张长背景图 //png.pookcdn.com/new_net/lydr/activity4_1/bg.jpg（750 x 4782），所有元素按设计稿坐标绝对定位。
   ========================================================================== */

@font-face {
    font-family: 'FZLTCHJW';
    src: url("//png.pookcdn.com/new_net/lydr/activity6/fonts/FZLTCHJW.TTF") format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'CloudYuanCuGBK';
    src: url("//png.pookcdn.com/new_net/lydr/activity6/fonts/CloudYuanCuGBK.TTF") format('truetype');
    font-weight: 700;
    font-style: normal;
}

body {
    background: #e9a34f;
    font-family: 'FZLTCHJW', "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;
}

.df.column {
    -webkit-flex-flow: column;
    flex-flow: column;
}

.wrapper {
    margin: 0 auto;
    width: 7.5rem;
    height: 47.82rem;
    background-image: url("//png.pookcdn.com/new_net/lydr/activity4_1/bg.jpg");
    background-size: 100%;
    background-repeat: no-repeat;
    color: #fff;
    font-size: .24rem;
    overflow: hidden;
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   固定顶部下载条（bg_header.png 750x120）
   -------------------------------------------------------------------------- */
.float-top {
    top: 0;
    left: 50%;
    width: 7.5rem;
    height: 1.2rem;
    padding: 0 .2rem 0 .11rem;
    background-image: url("//png.pookcdn.com/new_net/lydr/activity4_1/bg_header.png");
    color: #fff;
    z-index: 120;
    box-sizing: border-box;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.float-top .con-left {
    height: 100%;
}

.float-top .game-icon {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    margin-right: .16rem;
}

.float-top .game-icon img {
    display: block;
    width: 1.02rem;
    height: 1.01rem;
}

.float-top .game-name {
    font-size: .38rem;
    line-height: 1.1;
    font-weight: bold;
    white-space: nowrap;
}

.float-top .game-recommend {
    margin-top: .05rem;
    font-size: .22rem;
    line-height: 1.1;
    white-space: nowrap;
}

.float-top .ico-star {
    display: inline-block;
    width: .21rem;
    height: .2rem;
    vertical-align: -.02rem;
    background-image: url("//png.pookcdn.com/new_net/lydr/activity3/ico_star.png");
}

.float-top .game-desc {
    margin-top: .05rem;
    font-size: .19rem;
    color: #ffe787;
    line-height: 1.1;
    white-space: nowrap;
}

.float-top .btn-download-top {
    top: .13rem;
    right: .18rem;
    width: 2.27rem;
    height: .93rem;
    background-image: url("//png.pookcdn.com/new_net/lydr/activity4_1/btn_download.png");
}

/* --------------------------------------------------------------------------
   页头：logo / 侧边入口 / 登录态
   -------------------------------------------------------------------------- */
.wrapper .logo {
    left: .08rem;
    top: 1.32rem;
}

.wrapper .logo img {
    display: block;
    width: 2.65rem;
    height: .98rem;
}

.btn-ruler,
.btn-online-service,
.btn-user {
    right: .28rem;
    width: .8rem;
    height: .87rem;
}

.btn-ruler {
    top: 1.32rem;
    background-image: url("//png.pookcdn.com/new_net/lydr/activity4_1/icon_rule.png");
}

.btn-online-service {
    top: 2.43rem;
    background-image: url("//png.pookcdn.com/new_net/lydr/activity4_1/icon_service.png");
}

.btn-user {
    top: 3.54rem;
    background-image: url("//png.pookcdn.com/new_net/lydr/activity4_1/icon_login.png");
}

/* --------------------------------------------------------------------------
   分区容器：一屏一个区域，区域内元素相对区域定位，整块上下微调只改 .sec-* 的 top
   -------------------------------------------------------------------------- */
.sec {
    left: 0;
    right: 0;
}

/* --------------------------------------------------------------------------
   活动说明 / 活动时间 / 主下载按钮
   -------------------------------------------------------------------------- */
.sec-act {
    top: 10.02rem;
}

.act-intro {
    left: 0;
    right: 0;
    top: 0;
    font-size: .22rem;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    color: #874315;
}

.act-time {
    left: 0;
    right: 0;
    top: .78rem;
    font-size: .26rem;
    line-height: 1.2;
    text-align: center;
    font-weight: bold;
    color: transparent;
    -webkit-text-stroke: .05rem #ffecb7;
}

.act-time::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    text-align: center;
    -webkit-text-stroke: 0;
    background-color: #E8403B;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.btn-download-main {
    left: 1rem;
    top: 1.29rem;
    width: 5.51rem;
    height: 1.85rem;
    background-image: url("//png.pookcdn.com/new_net/lydr/activity4_1/btn_download_main.png");
}

/* --------------------------------------------------------------------------
   寻找金月饼：说明 + 我的积分 / 我的金月饼
   -------------------------------------------------------------------------- */
.sec-score {
    top: 15.3rem;
}

.lottery-subtitle {
    left: 0;
    right: 0;
    top: 0;
    font-size: .2rem;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    font-weight: bold;
    color: #994409;
}

.info-card {
    top: .43rem;
    width: 3.08rem;
    height: 1.62rem;
    background-image: url("//png.pookcdn.com/new_net/lydr/activity4_1/wrap1.png");
}

.info-card-score {
    left: .44rem;
}

.info-card-cake {
    left: 3.98rem;
}

.info-card .info-card-label {
    position: absolute;
    left: .3rem;
    top: .4rem;
    font-size: .2rem;
    line-height: 1;
    color: #ca631e;
}

.info-card .info-card-value-row {
    left: .3rem;
    top: .78rem;
    -webkit-align-items: baseline;
    align-items: baseline;
}

.info-card .info-card-value {
    display: block;
    font-family: 'CloudYuanCuGBK', 'FZLTCHJW', sans-serif;
    font-size: .42rem;
    line-height: 1.1;
    font-weight: bold;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: .04rem #d33c14;
}

.info-card .info-card-value::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    -webkit-text-stroke: 0;
    background: linear-gradient(270deg, #e02f0d, #ff8a3d);
    background: -webkit-linear-gradient(270deg, #e02f0d, #ff8a3d);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.info-card .info-card-unit {
    margin-left: .04rem;
    font-family: 'FZLTCHJW', sans-serif;
    font-size: .24rem;
    font-style: normal;
    color: #ca631e;
}

.info-card .btn-more {
    left: 1.58rem;
    top: .18rem;
    width: 1.31rem;
    height: 1.33rem;
    background-image: url("//png.pookcdn.com/new_net/lydr/activity4_1/btn_more.png");
}
.info-card .btn-shop {
    left: 1.58rem;
    top: .18rem;
    width: 1.31rem;
    height: 1.33rem;
    background-image: url("//png.pookcdn.com/new_net/lydr/activity4_1/btn_shop.png");
}

.info-card-tip {
    top: 2.1rem;
    width: 3.08rem;
    font-size: .2rem;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    color: #ca631e;
}

.info-card-tip-l {
    left: .4rem;
}

.info-card-tip-r {
    left: 3.94rem;
}

/* --------------------------------------------------------------------------
   抽奖按钮：btn_lottery.png 原尺寸 385x150 平铺，两枚祥云边框几乎相接
   （设计稿两枚按钮红色内胆分别位于 x 25..364 与 384..723）
   -------------------------------------------------------------------------- */
.sec-lottery {
    top: 28.22rem;
}

.btn-lottery {
    top: 0;
    width: 3.85rem;
    height: 1.5rem;
    background-image: url("//png.pookcdn.com/new_net/lydr/activity4_1/btn_lottery.png");
}

.btn-lottery-one {
    left: .02rem;
}

.btn-lottery-ten {
    left: 3.63rem;
}

.btn-lottery .btn-lottery-text {
    display: block;
    padding-top: .34rem;
    font-family: 'CloudYuanCuGBK', 'FZLTCHJW', sans-serif;
    font-size: .48rem;
    line-height: 1;
    text-align: center;
    font-weight: bold;
    letter-spacing: .02rem;
    color: transparent;
    -webkit-text-stroke: .06rem #8b2b06;
}

.btn-lottery .btn-lottery-text::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    right: 0;
    top: .34rem;
    text-align: center;
    letter-spacing: .02rem;
    -webkit-text-stroke: 0;
    background: linear-gradient(270deg, #fffdf0, #ffd34d);
    background: -webkit-linear-gradient(270deg, #fffdf0, #ffd34d);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.btn-lottery:active {
    -webkit-transform: scale(.96);
    transform: scale(.96);
}

.lottery-cost {
    top: 1.13rem;
    width: 3.85rem;
    font-size: .26rem;
    line-height: 1.2;
    text-align: center;
    color: #fff;
    color: #a95737;
}

.lottery-cost-l {
    left: .02rem;
}

.lottery-cost-r {
    left: 3.63rem;
}

/* --------------------------------------------------------------------------
   累抽进度：抽的越多，奖励越多
   -------------------------------------------------------------------------- */
.sec-milestone {
    top: 33.05rem;
}

.draw-count {
    left: 0;
    right: 0;
    top: 0;
    font-size: .32rem;
    line-height: 1.2;
    text-align: center;
    font-weight: bold;
    color: #fff;
}

.draw-count .draw-count-num {
    position: relative;
    margin: 0 .04rem;
    font-size: .36rem;
    color: #ffe94a;
}

/* 5 个奖励格与 5 个进度节点共用同一栅格：宽 6.95rem，items 1.21rem，space-between，
   列中心落在设计稿实测的 88.5 / 232 / 375.5 / 519 / 662.5 */
.milestone-gifts,
.milestone-nodes {
    width: 6.95rem;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

.milestone-gifts {
    left: .28rem;
    top: 1.03rem;
    height: 1.22rem;
}

.milestone-gift {
    width: 1.21rem;
    height: 1.22rem;
    background-image: url("//png.pookcdn.com/new_net/lydr/activity4_1/award-wrap.png");
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 已领取不置灰，在奖品图上叠 ico_achieved.png（94x94） */
.milestone-gift.received::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1.15rem;
    height: 1.15rem;
    margin: auto;
    background: url("//png.pookcdn.com/new_net/lydr/activity4_1/ico_achieved.png") no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 2;
    box-sizing: border-box;
}

.milestone-gift .milestone-gift-icon {
    width: 1.15rem;
    object-fit: contain;
}

.milestone-gift .milestone-gift-num {
    left: 0;
    right: .08rem;
    bottom: .06rem;
    font-family: 'CloudYuanCuGBK', 'FZLTCHJW', sans-serif;
    font-size: .32rem;
    line-height: 1;
    text-align: right;
    font-weight: bold;
    color: #fff;
    -webkit-text-stroke: .06rem #4a1c6b;
}

.milestone-gift .milestone-gift-num::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    text-align: right;
    -webkit-text-stroke: 0;
    color: #fff;
}

/* 描边用 inset box-shadow 而非 border，保证内容盒宽度仍为 6.9rem，
   这样节点栅格能与上方奖励格栅格严格对齐 */
.milestone-bar {
    left: .28rem;
    top: 2.34rem;
    width: 6.95rem;
    height: .58rem;
    border-radius: .29rem;
    background: linear-gradient(180deg, #5a1608, #3d0f05);
    box-shadow: inset 0 0 0 .03rem #f0c25e, inset 0 .02rem .06rem rgba(0, 0, 0, .55);
}

/* 与进度条同圆角裁切；节点文案在条外，不能直接 overflow 在 .milestone-bar 上 */
.milestone-bar-track {
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: .29rem;
    overflow: hidden;
    pointer-events: none;
}

.milestone-bar-fill {
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    max-width: 100%;
    /* 左侧由 track 裁成圆角；右侧只保留轻微圆角，窄宽度时也不会收成圆球 */
    border-radius: 0 .12rem .12rem 0;
    background: linear-gradient(180deg, #ffe89a 0%, #ffb02a 45%, #ff7a12 100%);
    box-shadow: inset 0 .04rem .08rem rgba(255, 255, 255, .35);
    -webkit-transition: width .4s ease;
    transition: width .4s ease;
}

/* 节点栅格铺满进度条，与上方奖励格同宽同起点 */
.milestone-nodes {
    left: 0;
    top: 0;
    height: 100%;
}

.milestone-node {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    width: 1.21rem;
    height: 100%;
}

.milestone-node .milestone-node-ico {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: .64rem;
    height: .66rem;
    margin: -.33rem 0 0 -.32rem;
    background-image: url("//png.pookcdn.com/new_net/lydr/activity4_1/icon_milestone.png");
}

.milestone-node.reached .milestone-node-ico {
    width: .63rem;
    height: .6rem;
    margin: -.3rem 0 0 -.315rem;
    background-image: url("//png.pookcdn.com/new_net/lydr/activity4_1/icon_milestone_ative.png");
}

.milestone-node .milestone-node-text {
    left: 0;
    right: 0;
    top: .6rem;
    font-family: 'CloudYuanCuGBK', 'FZLTCHJW', sans-serif;
    font-size: .34rem;
    line-height: 1;
    text-align: center;
    font-weight: bold;
    color: transparent;
    -webkit-text-stroke: .05rem #8b2b06;
}

.milestone-node .milestone-node-text::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    text-align: center;
    -webkit-text-stroke: 0;
    color: #fff5d6;
}

.milestone-node.reached .milestone-node-text::after {
    color: #fff;
}

/* btn_claim.png / btn_add.png 均为 398x158（含底部投影），设计稿按 0.95 缩放使用 */
.btn-claim {
    left: 1.86rem;
    top: 3.9rem;
    width: 3.78rem;
    height: 1.5rem;
    background-image: url("//png.pookcdn.com/new_net/lydr/activity4_1/btn_claim.png");
}

.btn-claim:active,
.btn-add:active {
    -webkit-transform: scale(.96);
    transform: scale(.96);
}

.btn-claim:disabled,
.btn-add:disabled {
    pointer-events: none;
    opacity: .55;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

/* --------------------------------------------------------------------------
   完成任务，获得更多积分（VIP 客服）
   -------------------------------------------------------------------------- */
.sec-vip {
    top: 43.66rem;
}

.vip-score {
    left: 3.74rem;
    top: 0;
    font-family: 'CloudYuanCuGBK', 'FZLTCHJW', sans-serif;
    font-size: .52rem;
    line-height: 1.1;
    font-weight: bold;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: .06rem #fff;
}

.vip-score::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    -webkit-text-stroke: 0;
    background: linear-gradient(90deg, #ffb85c, #f4491a);
    background: -webkit-linear-gradient(90deg, #ffb85c, #f4491a);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.vip-score-tip {
    left: 3.83rem;
    top: .71rem;
    font-size: .34rem;
    line-height: 1.1;
    font-weight: bold;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: .035rem #fff;
}

.vip-score-tip::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    -webkit-text-stroke: 0;
    background: linear-gradient(90deg, #ffb85c, #f4491a);
    background: -webkit-linear-gradient(90deg, #ffb85c, #f4491a);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

/* 未完成/未领取/已领取 三态共用同一张底图，只换文案 */
.btn-add {
    left: 1.86rem;
    top: 1.82rem;
    width: 3.98rem;
    height: 1.58rem;
    background-image: url("//png.pookcdn.com/new_net/lydr/activity4_1/btn_wrap.png");
}

.btn-add .btn-add-text {
    position: relative;
    top: -.1rem;
    display: block;
    font-family: 'CloudYuanCuGBK', 'FZLTCHJW', sans-serif;
    font-size: .48rem;
    text-align: center;
    font-weight: bold;
    color: #AB231D;
}

/* ==========================================================================
   弹窗
   ========================================================================== */
/* 轻提示必须压过 .pupup（z-index:900），否则登录失败文案会被登录框挡住 */
.pup-tips {
    padding: 0 .3rem;
    min-width: 3.6rem;
    max-width: 6.4rem;
    height: auto;
    min-height: .8rem;
    border-radius: .4rem;
    background: rgba(30, 8, 2, .88);
    border: .02rem solid rgba(255, 214, 120, .7);
    font-size: .26rem;
    line-height: 1.3;
    color: #fff5d6;
    text-align: center;
    box-sizing: border-box;
    z-index: 122;
}

.pupup{
    z-index: 900;
    top: 2rem;
    left: 0;
    right: 0;
    margin: 0 auto;
}

#tips.pup-tips {
    top: 50%;
    z-index: 1200;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
/* 只放共用的盒子与文字规则，底图各弹窗自己指定（没有公用底图） */
.pup-common {
    width: 6.5rem;
    padding: 1rem .3rem .5rem;
    box-sizing: border-box;
    color: #7a4413;
    text-align: center;
}

/* 关闭按钮统一挂在弹窗右上角，横竖同为 -.3rem，约一半露在框外 */
.pup-common .btn-close {
    top: -.3rem;
    right: -.3rem;
    width: .63rem;
    height: .65rem;
    background-image: url("//png.pookcdn.com/new_net/lydr/activity4_1/btn_close.png");
    z-index: 2;
}

/* 商店弹窗与屏同宽，外挂会出屏，改为贴在框内右上 */
.pup-shop .btn-close {
    top: .2rem;
    right: .2rem;
}

.pup-common .pup-title {
    position: absolute;
    left: 0;
    right: 0;
    top: .42rem;
    font-size: .26rem;
    line-height: 1;
    font-weight: bold;
    text-align: center;
    color: #E8403B;
}

/* 通用金色文字按钮 */
.btn-text-gold {
    display: block;
    margin: .3rem auto 0;
    width: 2.8rem;
    height: .8rem;
    border-radius: .4rem;
    background: linear-gradient(180deg, #ffd772, #f08a12);
    border: .03rem solid #fff0bd;
    font-size: .32rem;
    line-height: .74rem;
    font-weight: bold;
    color: #7a2c00;
    box-sizing: border-box;
}

.btn-text-gold:active {
    -webkit-transform: scale(.96);
    transform: scale(.96);
}

/* ----------------------------------------------------------------
 * 登录部分：样式与 activity_6.0.0.css 保持一致
 * ---------------------------------------------------------------- */

.pup-modal-wrap {
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    max-height: 100vh;
    max-height: 100dvh;
    width: 7.5rem;
    z-index: 106;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    box-sizing: border-box;
}

.pup-modal-wrap::-webkit-scrollbar {
    display: none;
}

.pup-modal-wrap .btn-close-pup {
    position: absolute;
    top: 1.35rem;
    right: .35rem;
    width: .78rem;
    height: .77rem;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    background-image: url("//png.pookcdn.com/new_net/lydr/activity6/btn/btn-close.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 2;
    cursor: pointer;
}

.ico-check input:checked+label {
    background-image: url(//png.pookcdn.net/new_net/bydrqp/activity_2/ico_check.png);
}

.ico-check input {
    position: relative;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 2;
}

.pup-login {
    width: 6.37rem;
    height: 4.66rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/huiliu/bg_pup_466.png");
}

.pup-login .btn-close {
    top: .35rem;
    right: .35rem;
    width: .34rem;
    height: .35rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/huiliu/btn_close.png");
    z-index: 2;
    cursor: pointer;
}

.pup-login .login-tab {
    top: -.74rem;
    left: 50%;
    gap: .1rem;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.pup-login .login-tab [class*="item-tab"] {
    width: 2.64rem;
    height: .93rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/huiliu/login_tab.png");
    font-size: .28rem;
    color: #ffd274;
    line-height: .6rem;
}

.pup-login .login-tab [class*="item-tab"].active {
    position: relative;
    top: .01rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/huiliu/login_tab_active.png");
}

.pup-login .login-tab [class*="item-tab"] span {
    display: block;
    margin: 0 auto;
    position: relative;
    top: -.05rem;
    height: .33rem;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.pup-login .login-tab [class*="item-tab"].active span {
    top: -.02rem;
}

.pup-login .login-tab .item-tab-01 span {
    width: 1.83rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/huiliu/title_login_01_01.png");
}

.pup-login .login-tab .item-tab-01.active span {
    background-image: url("//png.pookcdn.net/new_net/lydr/huiliu/title_login_01_02.png");
}

.pup-login .login-tab .item-tab-02 span {
    width: 1.53rem;
    background-image: url("//png.pookcdn.net/new_net/lydr/huiliu/title_login_02_01.png");
}

.pup-login .login-tab .item-tab-02.active span {
    background-image: url("//png.pookcdn.net/new_net/lydr/huiliu/title_login_02_02.png");
}

.pup-login .login-logo {
    margin-top: .4rem;
    text-align: center;
}

.pup-login .login-logo img {
    width: 2.79rem;
}

.pup-login .item-input {
    margin-bottom: .15rem;
    font-size: .28rem;
    color: #a1674d;
}

.pup-login .con-left {
    width: 1.4rem;
}

.pup-login .con-right {
    padding: 0 .1rem;
    width: 3.14rem;
    background: #D1BEA7;
    height: .46rem;
    color: #FFF6D9;
    line-height: .4rem;
    -webkit-border-radius: .1rem;
    border-radius: .1rem;
    overflow: hidden;
    box-sizing: border-box;
}

.pup-login .con-right input {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    text-align: center;
}

.pup-login .phone-login {
    margin-top: .6rem;
}

.pup-login .phone-login .con-right {
    width: 3.76rem;
}

.pup-login .phone-login input {
    text-align: left;
}

.pup-login .phone-login .con-right span {
    position: relative;
    padding-right: .1rem;
    margin-right: .1rem;
}

.pup-login .phone-login .con-right span::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: .02rem;
    height: .25rem;
    background: #FFF6D9;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.pup-login .phone-login .con-right button {
    width: 1.9rem;
    color: #e44936;
    font-size: .2rem;
    text-align: center;
}

.pup-login .tips-read {
    -webkit-align-items: flex-start;
    align-items: flex-start;
    font-size: .18rem;
    color: #95716a;
}

.pup-login .tips-read a {
    color: #95716a;
    text-decoration: underline;
}

.pup-login .tips-read .ico-check {
    width: .23rem;
    height: .23rem;
    background: #C3B19A;
    border: none;
    margin-right: .1rem;
}

.pup-login .tips-read .ico-check label {
    position: absolute;
    top: -.07rem;
    left: -.05rem;
    width: .38rem;
    height: .3rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.pup-login .account-tab button {
    margin: .2rem .2rem;
    width: 2.06rem;
    height: .59rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.pup-login .account-tab .item-tab-01 {
    background-image: url("//png.pookcdn.net/new_net/lydr/huiliu/pup_account_tab_01_01.png");
}

.pup-login .account-tab .item-tab-02 {
    background-image: url("//png.pookcdn.net/new_net/lydr/huiliu/pup_account_tab_02_01.png");
}

.pup-login .account-tab .item-tab-01.active {
    background-image: url("//png.pookcdn.net/new_net/lydr/huiliu/pup_account_tab_01_02.png");
}

.pup-login .account-tab .item-tab-02.active {
    background-image: url("//png.pookcdn.net/new_net/lydr/huiliu/pup_account_tab_02_02.png");
}

.btn-login {
    margin: .2rem auto;
    width: 2.18rem;
    height: .72rem;
    background-image: url(//png.pookcdn.net/new_net/bydrqp/activity_2/btn_login.png);
}

/* ---------------- 当前账号弹窗 ---------------- */
/* 上下留出 .5rem：父级继承了 .pup-modal-wrap 的 overflow，
   关闭按钮(-.3rem)和切换账号按钮(-.4rem)都挂在弹窗框外，没有内边距会被裁掉 */
.pup-current-user-wrap {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    margin: 0;
    padding: .5rem 0;
    max-height: 90vh;
    max-height: 90dvh;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.pup-current-user-body {
    position: relative;
    width: 4.92rem;
    height: 2.91rem;
    background-image: url("//png.pookcdn.com/new_net/lydr/activity4_1/bg_popup_s.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.current-user-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: .78rem;
    margin: 0 auto;
    width: 3.8rem;
    box-sizing: border-box;
}

.current-user-table-row {
    min-height: 1.05rem;
    padding: .12rem 0;
    border-radius: 0 0 .08rem .08rem;
    -webkit-align-items: center;
    align-items: center;
    box-sizing: border-box;
}

.current-user-avatar {
    width: 1.05rem;
    height: 1.05rem;
    background: url("//png.pookcdn.com/new_net/lydr/activity4_1/avatar_wrap.png") no-repeat;
    background-size: 100% 100%;
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 50%;
}

.current-user-avatar img {
    display: block;
    margin: auto;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.current-user-id {
    position: absolute;
    left: 1.25rem;
    top: .8rem;
    width: 2.45rem;
    margin: 0;
    font-size: .22rem;
    color: #d34c21;
    text-align: left;
    line-height: 1.2;
    word-break: break-all;
}

.current-user-name {
    -webkit-flex: 1;
    flex: 1;
    margin: 0;
    margin-top: -.2rem;
    padding: 0rem .08rem 0 .2rem;
    font-size: .24rem;
    color: #d34c21;
    text-align: left;
    line-height: 1.2;
    word-break: break-all;
}

.btn-switch-account {
    left: 0;
    right: 0;
    bottom: .24rem;
    margin: 0 auto;
    width: 2.47rem;
    height: .71rem;
    border: none;
    background-image: url("//png.pookcdn.com/new_net/lydr/activity4_1/btn_switch.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.pup-current-user-title {
    padding-top: .35rem;
    font-size: .3rem;
    font-weight: bold;
    color: #df4926;
    text-align: center;
}

.pup-current-user-wrap .btn-close-pup {
    top: -.3rem;
    right: -.3rem;
    width: .63rem;
    height: .65rem;
    background-image: url("//png.pookcdn.com/new_net/lydr/activity4_1/btn_close.png");
}

/* ---------------- 活动规则弹窗 ---------------- */
.pup-ruler {
    height: 11rem;
    padding: 1.1rem .24rem .4rem;
    background-image: url("//png.pookcdn.com/new_net/lydr/activity4_1/bg_popup_s.png");
    background-size: 100% 100%;
}

.ruler-content {
    height: 100%;
    padding: 0 .12rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    text-align: left;
    box-sizing: border-box;
}

.ruler-text {
    margin-bottom: .14rem;
    font-size: .23rem;
    line-height: 1.5;
    color: #6b4110;
    display: block;
    line-break: anywhere;
    overflow-wrap: break-word;
}

/* ---------------- 提示文案弹窗 ---------------- */
.pup-tip-text {
    width: 4.92rem;
    height: 3.25rem;
    padding: .78rem .38rem .3rem;
    background-image: url("//png.pookcdn.com/new_net/lydr/activity4_1/bg_popup_s.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.tip-text-content {
    padding: 0 .08rem;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    font-size: .22rem;
    line-height: 1.6;
    color: #DE6123;
    text-align: left;
    line-break: anywhere;
    overflow-wrap: break-word;
}

/* ---------------- 奖励结果弹窗 ---------------- */
/* 奖励与提示弹窗可能叠在商店等弹窗之上，需高于 .pup 的 z-index 106 */
.pup-reward,
.pup-tip-text {
    z-index: 110;
}

/* 底图 514x739：米色面板 x14~497、y150~738，标题“恭喜获得”烘焙到 y206，
   所以内容区从 y215 起，底部留 1.1rem 放确定按钮 */
.pup-reward {
    width: 5.14rem;
    height: 7.39rem;
    padding: 2.15rem .35rem 1.1rem;
    background-image: url("//png.pookcdn.com/new_net/lydr/activity4_1/bg_popup_reward.png");
    background-size: 100% 100%;
}

/* 顶部是月亮兔子插画，关闭按钮改挂在米色面板的右上角 */
.pup-reward .btn-close {
    top: 1.2rem;
    right: -.15rem;
}

/* 标题已烘焙在 bg_popup_reward.png 上，避免与文字标题重叠 */
.pup-reward .pup-title {
    display: none;
}

/* 条目从左往右排、整体居左，行内顶对齐，超出在框内滚动 */
.reward-list {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-align-content: flex-start;
    align-content: flex-start;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    text-align: left;
}

/* btn_ok.png 226x68 满图无留白，bottom .3rem 让实体收在米色面板内 */
.btn-reward-ok {
    position: absolute;
    left: 50%;
    bottom: .3rem;
    margin: 0;
    width: 2.26rem;
    height: .68rem;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: url("//png.pookcdn.com/new_net/lydr/activity4_1/btn_ok.png") no-repeat;
    background-size: 100% 100%;
    font-size: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.btn-reward-ok:active {
    -webkit-transform: translateX(-50%) scale(.96);
    transform: translateX(-50%) scale(.96);
}

/* 奖励条目统一横排：图标在左、名称在右并垂直居中，一行只放一条 */
.reward-item {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
    width: 100%;
    margin: 0 0 .14rem;
    box-sizing: border-box;
}

.reward-item-icon {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    display: block;
    margin: 0;
    width: .97rem;
    height: .97rem;
    background-image: url("//png.pookcdn.com/new_net/lydr/activity4_1/award-wrap.png");
}

.reward-item-img {
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    width: .9rem;
    height: .76rem;
    margin: auto;
    object-fit: contain;
}

/* 数量白字黑边：本体只留描边，::after 用 data-text 填白 */
.reward-item-num {
    right: .04rem;
    bottom: .03rem;
    z-index: 2;
    font-family: 'CloudYuanCuGBK', 'FZLTCHJW', sans-serif;
    font-size: .24rem;
    line-height: 1;
    font-style: normal;
    font-weight: bold;
    color: transparent;
    -webkit-text-stroke: .03rem #000;
}

.reward-item-num::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    -webkit-text-stroke: 0;
    color: #fff;
}

/* 名称按效果图作白字 #af3702 描边：本体只留描边，::after 用 data-text 覆盖出白色字面。
   名称不截断，放不下就在条目宽度内换行，两层同宽所以换行位置一致 */
.reward-item-name {
    position: relative;
    font-family: 'CloudYuanCuGBK', 'FZLTCHJW', sans-serif;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 0 0 .12rem;
    font-size: .32rem;
    line-height: .3rem;
    font-weight: bold;
    text-align: left;
    word-break: break-word;
    color: transparent;
    -webkit-text-stroke: .03rem #af3702;
}

.reward-item-name::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    word-break: break-word;
    -webkit-text-stroke: 0;
    color: #fff;
}

/* ---------------- 宝藏商店弹窗 ---------------- */
/* 商店弹窗背后的虚化背景：与 .thickdiv 同层（105），靠 DOM 顺序盖在其上 */
.shop-mask {
    left: 50%;
    top: 0;
    width: 7.5rem;
    height: 100%;
    background-image: url("//png.pookcdn.com/new_net/lydr/activity4_1/shop-mask.png");
    background-position: center center;
    background-size: cover;
    z-index: 105;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

/* bg_popup_shop.png 750x1300，画框内透明区实测 y249~1108、最宽 x86~668。
   左右内边距 .85rem 对齐画框内沿；两张 2.8rem 卡片合计 5.6rem，
   落在 5.8rem 内容区里，justify-content:center 后左右各余约 .1rem */
.pup-shop {
    width: 7.5rem;
    height: 13rem;
    padding: 2.5rem .85rem 1.95rem;
    background-image: url("//png.pookcdn.com/new_net/lydr/activity4_1/bg_popup_shop.png");
    background-size: contain;
}

/* 13rem 已接近手机可视高度，改为垂直居中，避免 .pupup 的 top:2rem 把底座顶出屏幕 */
.pup-shop.pupup {
    top: 1.3rem
}

/* 标题已烘焙在底图上 */
.pup-shop .pup-title {
    display: none;
}

/* 余额落在画框顶部的红牌上：底图实测红牌 x192~550、y177~240（含金边）。
   月饼图标 + 数字作为一组居中，位数变化时不会偏 */
.shop-balance {
    position: absolute;
    left: 1.92rem;
    top: 1.77rem;
    margin: 0;
    width: 3.59rem;
    height: .64rem;
    font-size: 0;
    line-height: .64rem;
    text-align: center;
    white-space: nowrap;
}

/* icon_yuebing.png 56x40，按原图尺寸 */
.shop-balance::before {
    content: "";
    display: inline-block;
    margin-right: .1rem;
    width: .56rem;
    height: .4rem;
    background: url("//png.pookcdn.com/new_net/lydr/activity4_1/icon_yuebing.png") no-repeat;
    background-size: 100% 100%;
    vertical-align: middle;
}

/* 白字描红边，写法同页面其他描边文字：本体只留描边，::after 用 data-text 填白 */
.shop-balance span {
    position: relative;
    display: inline-block;
    top: .04rem;
    vertical-align: middle;
    font-family: 'CloudYuanCuGBK', 'FZLTCHJW', sans-serif;
    font-size: .44rem;
    line-height: .5rem;
    font-weight: bold;
    color: transparent;
    -webkit-text-stroke: .05rem #a5140b;
}

.shop-balance span::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    -webkit-text-stroke: 0;
    color: #fffcc5;
}

/* 一行两个，超出上下滚动 */
.shop-list {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-align-content: flex-start;
    align-content: flex-start;
    -webkit-justify-content: center;
    justify-content: center;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* shop_item.png 280x580 按原图 1:1 使用（1px = .01rem）。
   米色内胆实测最宽 x31~255、宽>=2rem 的区间 y116~516；
   左右内边距 .32rem 让内容区 2.16rem 落在金框内；
   顶部圆角到 y140 才够放下「剩余兑换次数：」，故 padding-top 1.4rem。
   负下边距让下一行的挂绳收到上一行云纹底下，配合倒序 z-index */
.shop-item {
    /* relative 是为了让 renderShopList 写入的倒序 z-index 生效，靠上的卡片压住下一行 */
    position: relative;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    margin: 0 -.1rem -.1rem;
    width: 2.8rem;
    height: 5.8rem;
    padding: 1.4rem .32rem 0;
    background: url("//png.pookcdn.com/new_net/lydr/activity4_1/shop_item.png") no-repeat;
    background-size: contain;
    border: none;
    box-sizing: border-box;
}

/* 内容区宽 2.16rem，.2rem 字号下「剩余兑换次数：100」约 2rem */
.shop-item-remain {
    height: .32rem;
    font-size: .22rem;
    line-height: .32rem;
    color: #d94b26;
    white-space: nowrap;
}

.shop-item-icon {
    display: block;
    margin: .08rem auto 0;
    width: 1.21rem;
    height: 1.22rem;
    background-image: url("//png.pookcdn.com/new_net/lydr/activity4_1/award-wrap.png");
}

.shop-item-img {
    left: 50%;
    top: 50%;
    width: .93rem;
    height: .79rem;
    margin: -.395rem 0 0 -.465rem;
    object-fit: contain;
}

/* 右下角数量，白字黑边，写法同 .reward-item-num */
.shop-item-num {
    right: .04rem;
    bottom: .04rem;
    font-family: 'CloudYuanCuGBK', 'FZLTCHJW', sans-serif;
    font-size: .24rem;
    line-height: 1;
    font-style: normal;
    font-weight: bold;
    color: transparent;
    -webkit-text-stroke: .03rem #000;
}

.shop-item-num::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    -webkit-text-stroke: 0;
    color: #fff;
}

/* 名称固定单行高度，保证同行商品的按钮与价格水平对齐；
   描边走本页统一写法：本体只留描边，::after 用 data-text 覆盖出白色字面。
   两层都要 nowrap+ellipsis，否则描边层出省略号、填充层被父级直接裁掉会错位 */
.shop-item-name {
    font-family: 'CloudYuanCuGBK', 'FZLTCHJW', sans-serif;
    position: relative;
    margin-top: .06rem;
    height: .44rem;
    font-size: .32rem;
    line-height: .44rem;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: transparent;
    -webkit-text-stroke: .04rem #af3702;
}

/* 超过 6 个字降字号，让长名字也能单行放完（类由 renderShopList 按名称长度加） */
.shop-item-name-sm {
    font-size: .24rem;
    -webkit-text-stroke-width: .03rem;
}

.shop-item-name::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-text-stroke: 0;
    color: #fff;
}

.shop-item-price {
    margin-top: .04rem;
    font-size: .2rem;
    line-height: .32rem;
    color: #e4570a;
}

.shop-item-price::before {
    content: "";
    display: inline-block;
    width: .56rem;
    height: .4rem;
    margin-right: .03rem;
    background: url("//png.pookcdn.com/new_net/lydr/activity4_1/icon_yuebing.png") no-repeat;
    background-size: 100% 100%;
    vertical-align: middle;
}

.shop-item-price em {
    position: relative;
    top: .02rem;
    font-family: 'CloudYuanCuGBK', 'FZLTCHJW', sans-serif;
    font-size: .32rem;
    font-style: normal;
    color: #d2470f;
}

.btn-shop-exchange {
    margin: .08rem 0 .2rem;
    width: 2.32rem;
    height: .83rem;
    border: none;
    background: url("//png.pookcdn.com/new_net/lydr/activity4_1/btn_exchange.png") no-repeat;
    background-size: 100% 100%;
    font-size: 0;
}

.btn-shop-exchange:disabled {
    pointer-events: none;
    opacity: 1;
    background-image: url("//png.pookcdn.com/new_net/lydr/activity4_1/btn_exchange_disable.png");
}

/* ---------------- 商店兑换确认 ---------------- */
.pup-exchange-confirm {
    width: 4.92rem;
    height: 3.25rem;
    padding: .24rem;
    background-image: url("//png.pookcdn.com/new_net/lydr/activity4_1/bg_popup_s.png");
    background-size: 100% 100%;
    z-index: 111;
}

.exchange-confirm-title {
    margin-bottom: .2rem;
    font-size: .27rem;
    color: #d74624;
}

.exchange-confirm-content {
    -webkit-justify-content: center;
    justify-content: center;
}

.exchange-confirm-icon {
    width: 1.21rem;
    height: 1.22rem;
    background-image: url("//png.pookcdn.com/new_net/lydr/activity4_1/award-wrap.png");
}

.exchange-confirm-icon img {
    left: .14rem;
    top: .2rem;
    width: .93rem;
    height: .79rem;
    object-fit: contain;
}

.exchange-confirm-icon em {
    right: .06rem;
    bottom: .05rem;
    color: #fff;
    font-size: .22rem;
    font-style: normal;
    text-shadow: 0 .02rem .03rem #333;
}

.exchange-confirm-info {
    width: 2.2rem;
    padding: .22rem 0 0 .18rem;
    font-size: .22rem;
    line-height: 1.7;
    color: #7a4413;
    text-align: left;
}

/* 道具名与奖品弹窗一致：白字棕边，本体只描边，::after 用 data-text 填白 */
.exchange-confirm-name {
    position: relative;
    font-family: 'CloudYuanCuGBK', 'FZLTCHJW', sans-serif;
    font-size: .32rem;
    line-height: .34rem;
    font-weight: bold;
    color: transparent;
    -webkit-text-stroke: .03rem #af3702;
}

.exchange-confirm-name::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    -webkit-text-stroke: 0;
    color: #fff;
}

.exchange-confirm-info p:last-child {
    font-size: .18rem;
    color: #d74624;
}

.btn-confirm-exchange {
    position: absolute;
    left: 50%;
    bottom: .12rem;
    width: 2.32rem;
    height: .83rem;
    border: none;
    background-image: url("//png.pookcdn.com/new_net/lydr/activity4_1/btn_exchange.png");
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

/* 内容区高 8.4rem，空态文案居中 */
.shop-empty {
    padding-top: 3.8rem;
    font-size: .28rem;
    color: #8a5a1e;
}

/* 视口宽过内容列时两侧会露白，铺上衬底；此时让 body 自己滚，底图才不会被拉到整页高 */
@media only screen and (min-width: 751px) {
    html {
        overflow: hidden;
    }

    body {
        width: 100%;
        height: 100vh;
        background: url(//png.pookcdn.com/new_net/lydr/activity4_1/bg_wrap.png) no-repeat;
        background-size: cover;
        background-position: top center;
        overflow: auto;
    }
}

/* body 的滚动条占掉了内容宽度，fixed 顶栏却仍按整个视口居中，故左移半条滚动条对齐。
   触屏是悬浮滚动条、不占宽度，补偿会让顶栏反向偏左，所以只给带鼠标的设备 */
@media only screen and (min-width: 751px) and (hover: hover) and (pointer: fine) {
    .float-top {
        left: calc(50% - .07rem);
    }
}