:root {
    /*全局颜色定义 -------*/
    /*BLUE蓝色*/
    --blue70: #0170CA;
    --blue50: #0A8FEA;
    --blue20: #8BC6F4;
    --blue10: #E2F1FC;

    /*RED红色*/
    --red60: #E62229;
    --red40: #F04545;
    /*Green绿争*/
    --green80: #008000;
    --green60: #2CA31F;

    --yellow1: #FFE8A3;
    --yellow2: #ffefdd;
    --yellow3: #F2D8B1;
    --yellow60: #F9AF06;

    /*GRAY灰色*/
    --gray05: #f5f5f5;
    --gray10: #f0f0f0;
    --gray20: #e5e5e5;
    --gray30: #d1d1d1;
    --gray40: #aaa;
    --gray50: #999;
    --gray60: #666;
    --gray70: #444;
    --gray80: #333;
    --gray90: #111;
    --steelgray1: #475C85;
    --steelgray2: #666971;
    --steelgray3: #999EAC;
    --steelgray4: #A9ABB1;
    --steelgray5: #F6F8FA;

    --white80: rgba(255, 255, 255, .8);
    --white60: rgba(255, 255, 255, .6);
    --white40: rgba(255, 255, 255, .4);
    --black20: rgba(0, 0, 0, .2);
    --black50: rgba(0, 0, 0, .5);
    --black: #000;
    --white: #FFF;
    /*全局颜色定义 -------*/


    /*白天模式CSS定义 light_theme*/
    /*primary品牌色&BODY*/
    --primary-color: var(--blue70);
    /*品牌色 第一级*/
    --second-color: var(--blue50);
    /*第二级*/
    --body-bg: var(--gray10);
    /*背景色*/
    --bg-color-1: var(--white);
    --bg-color-2: var(--gray10);
    --bg-color-3: var(--gray20);
    --bg-color-4: var(--gray05);
    --bg-hightlight-1: var(--yellow2);
    --bg-hightlight-2: var(--steelgray5);
    --bg-hightlight-3: var(--yellow60);
    --bg-hightlight-4: var(--blue50);
    --bg-hightlight-5: var(--red40);
    --bg-hightlight-6: var(--blue70);
    --bg-hightlight-7: var(--green60);
    --bg-hightlight-8: #fff6f3;
    --bg-hightlight-9: #eaf5ff;
    --bg-hightlight-10: #e4fde9;
    --bg-hightlight-11: #ffeaea;
    --white-bg: var(--white);
    /*文字*/
    --text-color-1: var(--gray80);
    --text-color-2: var(--steelgray2);
    --text-color-3: var(--steelgray3);
    --text-color-4: var(--gray40);
    --text-hightlight-1: var(--blue50);
    --text-hightlight-2: var(--green80);
    --text-hightlight-3: var(--red60);
    --text-hightlight-4: #9A5F4B;
    --text-hightlight-5: var(--yellow60);
    --text-white: var(--white);
    /*边框*/
    --border-1: var(--gray10);
    --border-2: var(--gray30);
    --border-3: var(--gray20);
    --border-hightlight-1: var(--blue20);
    --border-hightlight-2: var(--yellow3);
    --border-hightlight-3: rgba(227, 183, 181, 0.6);
    --border-hightlight-4: rgba(119, 190, 248, 0.4);
    --theme-icon: url(../images/light.svg);
}

.layui-layer-content {
    text-align: center;
}

html,body {padding: 0;margin: 0 auto;max-width: 750px;}
body{background:var(--bg-color-1);color:var(--text-color-1);font-size: 12px;line-height:20px;font-weight:normal;font-family:"微软雅黑","黑体",Arial;-webkit-user-select:none;-webkit-text-size-adjust:none;margin:0;padding:0;}
ul,li {list-style: none;padding: 0;margin: 0;}
.red {color: var(--red40);}
.rheaderbg{background-color:var(--primary-color);font-size:16px;line-height:44px;text-align:center;color:var(--text-white);display:block;position:relative;}
.rheaderbg .back{transform:rotate(45deg);-webkit-transform:rotate(45deg);margin-left:15px;width:12px;height:12px;display:inline-block;position:absolute;left:5px;top:15px;border-left:2px solid var(--white);border-bottom:2px solid var(--white);z-index:9999;}
.masklayer {background: var(--black50);width: 100%;height: 100%;top: 0;left: 0;position: fixed;z-index: 1;}
.nodata {font-size: 14px;text-align: center;padding: 20px;}
.close {background: var(--black50);width: 24px;height: 24px;border-radius: 50%;opacity: 0.7;border: 1px solid var(--white);transform: translateX(-50%);bottom: -40px;left: 50%;position: absolute;cursor: pointer;}
.close::before,.close::after {content:"";background: var(--white);width: 60%;height: 2px;transform: translate(-50%,-50%) rotate(45deg);top: 50%;left: 50%;position: absolute;}
.close::after {transform: translate(-50%,-50%) rotate(-45deg);}

.atycontainer {background: #00CEA5 url(./images/activitybg.png) no-repeat top;background-size: cover;min-height: calc(100vh - 128px);padding-bottom: 84px;/*padding-top: env(safe-area-inset-top, 40px);*/position: relative;}
.atypopbox {background: var(--bg-color-1);max-width: 680px;width: 82vw;padding: 14px;border-radius: 8px;transform: translate(-50%,-50%);top: 50%;left: 50%;position: fixed;z-index: 2;}
.atypopbox.Hauto {height: auto;}
.atypopbox .title {background: #FF8C8624;color: #FA6A29;font-size: 16px;font-weight: bold;text-align: center;padding: 10px;border-radius: 6px;position: relative;}
.atypopbox .titimg {background: url(./images/icon_tip.png) no-repeat center;background-size: 100%;width: 26px;height: 10px;left: 20%;top: 15px;position: absolute;}
.atypopbox .titimg.rev {left: auto;right: 20%;transform: scale(-1);}
.atypopbox .atypopinfo {font-size: 13px;line-height: 22px;text-align: center;margin: 10px 0;height: calc(100% - 90px);overflow-y: auto;}
.atypopinfo .awardimg {width: 60px;height: 60px;margin: 14px auto 10px;display: block;}
.atypopinfo p {text-align: left;margin: 8px 5px;}
.atypopinfo p span {margin: 4px 0;display: block;}
.atypopbox .atypopinfo.record {background: #f9f9f9;height:150px /*calc(100% - 210px)*/;border-radius: 6px;position: relative;}
.atypopinfo .recordbox {padding: 0 10px;position: absolute;left: 0;top: 0;}
.recordbox li {font-size: 12px;line-height: normal;text-align: left;margin: 8px 0;}
.code {font-weight: bold;text-align: center;margin: 12px 0;}
.code img {width: 84px;height: 84px;margin: 0 auto;display: block;}
.confirmbtn {font-size: 14px;text-align: center;padding-top: 12px;border-top: 1px solid var(--border-1);cursor: pointer;}
.confirmbtn:hover {color: var(--blue50);}


.banner{width: 100%; aspect-ratio: 375 / 194; background: url(./images/banner.png) center/contain no-repeat;position: relative;}

.banner .popbtn {background: var(--black50);color: var(--text-white);padding: 2px 12px;border-radius: 20px 0 0 20px;bottom: 30px;right: 0;position: absolute;cursor: pointer;}
.banner .popbtn.award {bottom: 0;}
.atycontent {padding: 10px 20px;}
.login {background:var(--black50);color:var(--text-white);text-align: center;width: max-content;padding:2px 12px;margin: 0 auto 10px auto;border-radius: 20px;}
.login font {color: var(--yellow1);}
.login span {cursor: pointer;}
.matchbox:first-child {margin-top: 10px;}
.matchbox {background: var(--bg-color-1);text-align: center;padding: 4px 8px;margin: 6px auto;border-radius: 6px;display: block;cursor: pointer;}
.matchbox img {width: 16px;height: 16px;object-fit: cover;margin: 0 5px;vertical-align: -3px;}
.matchbox.preview {background: var(--white80);}

.prize-container {background:radial-gradient(circle at center, #FA6E72, #F83034 100%);border: 6px solid var(--white40);padding: 6px;margin: 16px 0;border-radius: 30px;display:grid;grid-template-columns:repeat(4,1fr);}
.prize-item {background: linear-gradient(0deg, #fff, #fef3f3);border:1px solid var(--white);text-align:center;aspect-ratio: 1 / 1;margin:3px;border-radius:12px;display:flex;flex-direction:column;justify-content:center;align-items:center;}
.prize-item.on {background: #fff9e8;color: #ff5800;border-color: #ff7b36;box-shadow: 0 0 10px 2px #f9ca06 inset;}
.prize-item img {width: 30px;height: 30px;margin: 0 auto;margin-bottom: 2px;}
.prize-item.on img {animation: flip 0.3s linear forwards;}
.prize-item span {font-size: 12px;line-height: normal;display: block;}
.prize-item .thanks {font-size: 14px;font-weight: bold;color: #FF3C00;padding-top: 2px;}
.prize-btn {background: radial-gradient(circle at center, #FF653E, #FC5D5E 100%); color: var(--text-white); border: 4px solid var(--white40); border-radius: 20px; text-align: center; padding: 0px 5px; margin: 3px; grid-column: 1 / span 2; grid-row: 1 / span 2; grid-area: 2 / 2 / 4 / 4; cursor: pointer; max-height: 177px; align-content: center;}
.prize-btn .gobtn.notlg {background: linear-gradient(0deg,#f9f9f9,#d5d5d5,#fff);color: #888;box-shadow: 0 0 10px #fff;}
.prize-btn .gobtn {background: linear-gradient(0deg,#feec98,#ffdc74,#fff7b9);border: 2px solid var(--white80);color: var(--red60);font-size: 22px;line-height: 24px;font-weight: bold;margin: 0 auto 8px auto;width: 95px;height: 95px;display: flex;align-items: center;justify-content: center;border-radius: 50%;box-shadow: 0 0 10px #FFD483;animation: scale 1s linear infinite;transition: all 0.2s linear;}
@keyframes scale { 
    0% { transform: scale(1);}
    50% { transform: scale(0.95);}
    100% { transform: scale(1);}
}
@keyframes flip { 
    0% { transform: rotateY(360deg)}
    100% { transform: rotateY(0deg)}
}

@media (max-width: 375px) {
    .prize-item {
        aspect-ratio: auto;  
        padding: 2px 2px;
        min-height: 62.5px;
        width: auto;        
    }

   .rechargebox {

    font-size: 12px !important;
 
}
}

@media (min-width: 750px) {
    .prize-btn {
    background: radial-gradient(circle at center, #FF653E, #FC5D5E 100%);
    color: var(--text-white);
    border: 4px solid var(--white40);
    border-radius: 20px;
    text-align: center;
    padding: 0px 5px;
    margin: 3px;
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
    grid-area: 2 / 2 / 4 / 4;
    cursor: pointer;
    max-height: 375px;
    align-content: center;
}

.prize-item img {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    margin-bottom: 10px;
}

}


.rechargebox {background: var(--bg-color-1);font-size: 14px;font-weight: bold;padding: 12px 16px;border-radius: 4px;display: flex;align-items: center;}
.rechargebox span {flex: 1;}
.rechargebox img {height: 40px;margin-right: 12px;}
.rechargebox font {margin: 0 1px;}
.rechargebtn {background: linear-gradient(90deg,#FF861C,#FE4D0D);color: var(--text-white);font-weight: 500;text-decoration: none;padding: 5px 18px;border-radius: 30px;cursor: pointer;}
.finishedbtn {background: #E8E8E8;color: var(--steelgray3);font-weight: 500;text-decoration: none;padding: 5px 18px;border-radius: 30px;}
.bottom-box{margin-top: 30px;padding: 10px;border-radius: 12px; background: linear-gradient(136.64deg, #fff5f5, #fff 61.71%); border: 2px solid #fff; box-sizing: border-box; display: flex; flex-direction: column;position: relative;}
.bottom-title{background: url(./images/title-bg.png) no-repeat center;background-size: 100%;width: 180px;height: 26px;left: 50%; transform: translateX(-50%); top: -13px; position: absolute;}
.downloadbox {background: var(--black50);color: var(--text-white);font-size: 16px;font-weight: 500;text-align: center;padding-bottom: env(safe-area-inset-bottom, 45px);padding: 15px 10px 25px 10px;width: calc(100% - 20px);cursor: pointer;position: absolute;left: 0;bottom: 0;}
.downloadbox img {height: 24px;margin-right: 8px;vertical-align: -6px;}
.closebtn {background: url(./images/close.png) no-repeat top;background-size: 100%;width: 20px;height: 20px;top: 16px;right: 14px;position: absolute;cursor: pointer;}

/* 倒计时 */
.countdown {background:var(--black20);border-radius: 10px;padding: 2px 4px 2px 2px;display:flex;align-items: center;}
.countdown-item {background:var(--black20);color:var(--text-white);line-height: 16px;padding: 4px 0;border-radius:10px;flex: 1;margin-right: 2px;}
.countdown-number {font-family: fantasy;}
.countdown-label {color: var(--white80);font-size: 11px;}
.end-message {color:#ff4757;font-size:1.5rem;margin-top:1rem;display:none;}