body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
}

#loadingOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,1);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }
  
  .spinner {
    width: 60px;
    height: 60px;
    border: 6px solid #f3f3f3;
    border-top: 6px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  
  /* 旋转动画 */
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  


dialog {
    padding: 1em 2em;
    border: none;
    border-radius: 8px;
    background: #333;
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    animation: fade 2s forwards;
}
@keyframes fade {
    0% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

.dpf-aic-jcc {
    display: flex;
    justify-content: center;
    align-items: center;
}

.dpf-aic {
    display: flex;
    justify-content: center;
}

.fdc {
    flex-direction: column;
}


.mian {
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    background-color: rgb(38, 38, 36);
    font-weight: 400;
    overflow: hidden;
}

.body {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    width: 480px;
    margin: 0 auto;
    height: 100%;
    background-color: rgb(245, 246, 248);
    position: relative;
}

@media (max-width: 480px) {
    .body {
        width: 100% !important; /* 或者你想设置的样式 */
        height: 100%;
    }
    .guide{
        width: 100% !important; /* 或者你想设置的样式 */
    }
    .mask{
        width: 90% !important;
    }
    .play-head{
        width: 100% !important;
    }
    .btm-box{
        width: 100% !important;
    }
}

.play-head {
    position: fixed;
    background: rgb(245, 246, 248);
    z-index: 1;
    top: 0;
    width: 480px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);


    .left-img {
        width: 40%;
        margin-left: 5%;
    }

    .right-img {
        width: 30%;
        margin-right: 5%;
    }
}


.play-body {
    margin-top: 80px;
    width: 100%;
    height: 100%;

    .game-info {
        height: 100px;
        margin: 20px 5%;
        display: flex;
        align-items: center;
        font-size: 20px;
        font-weight: 550;
        line-height: 26px;

        .game-icon {
            width: 80px;
            height: 80px;
            margin-right: 30px;
            border-radius: 20px;
        }

        .game-name {
            color: #000;
        }

        .game-site {
            font-size: 16px;
            color: rgb(1 135 95 / var(--tw-text-opacity, 1));
        }

        .game-remark {
            color: #5f6368;
            font-size: 14px;
        }
    }

    .game-arg {
       padding: 0 5%;
        .arg-item {
            width: 33%;
            font-size: 16px;
            color: #5f6368;

            .item {
                border-right: #e5e7eb 1px solid;

                .value {
                    color: #000;
                    font-weight: 800;
                }
            }
        }
    }

    .install-btn {
        position: relative;
        overflow: hidden;
        width: 90%;
        margin-left: 5%;
        background: #01875f;
        border-radius: 8px;
        color: #fff;
        cursor: pointer;
        padding: 8px 0;
        margin-top: 30px;
        font-size: 18px;

        .ins-name {
            color: rgb(255 227 54 / var(--tw-text-opacity, 1));
        }

        .ins-sd {
            width: 20px;
            height: 25px;
        }
    }

    .install-btn:active {
        transform: scale(0.95);
    }

    .share-box {
        margin-top: 20px;
        font-weight: 600;
        font-size: 16px;
        --tw-text-opacity: 1;
        color: rgb(1 135 95 / var(--tw-text-opacity, 1));
    }

    .banner {
        margin-top: 20px;
        width: 90%;
        margin-left: 5%;
        overflow: auto;
        box-sizing: border-box;
        .banner-img {
            width: 157px;
            height: 280px;
            margin-right: 10px;
       }
    }

    .about {
        font-size: 20px;
        width: 90%;
        margin-left: 5%;
        margin-top: 20px;

        .start {
            width: 15px;
            height: 15px;
        }

        .about-head {
            margin-top: 24px;
            --tw-text-opacity: 1;
            color: rgb(32 33 36 / var(--tw-text-opacity, 1));
            font-weight: 800;

            .right-img {
                width: 20px;
                height: 20px;
            }
        }

        .about-body {
            color: rgb(95, 99, 104);
            font-weight: 550;

            .item {
                font-size: 16px;
                margin-top: 20px;
                width: 100%;
                flex-wrap: wrap;
            }

            .ib {
                width: 140px;
                display: flex;
                justify-content: center;
                align-items: flex-start;
                flex-direction: column
            }

            .item1 {
                padding: 5px 10px;
                border: #e5e7eb 1px solid;
                border-radius: 20px;
                margin-top: 10px;
                margin-right: 10px;
                font-size: 15px;
                .item-img {
                    width: 20px;
                    height: 20px;
                    margin-right: 10px;
                }
                
                .item-content {
                    width: 100%;
                    align-items: flex-start;
                    justify-content: flex-start;
                    padding: 10px 0;
                }
                
                
            }
        }

        .eva {
            color: rgb(95, 99, 104);
            margin-top: 30px;
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            font-size: 16px;

            .left-body {
                width: 40%;

                .eav-score {
                    font-size: 50px;
                    color: #000;
                    font-weight: 900;
                }
            }

            .right-body {
                width: 60%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                line-height: 25px;

                .score {
                    width: 40px;
                }
                .process {
                    position: relative;
                    width: 160px;
                    height: 12px;
                    border-radius: 10px;
                    background-color: rgb(227, 227, 227);
                }

                .process1 {
                    position: absolute;
                    height: 12px;
                    border-radius: 10px;
                    background-color: rgb(2, 135, 96);
                    z-index: 1;
                }
                
            }
        }

        .eva-body {
            color: rgb(95, 99, 104);
            font-size: 18px;
            font-weight: 500;

            .item {
                margin-top: 30px;

                .eva-head {
                    .avatar {
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        margin-right: 10px;
                    }
                }

                .content {
                    margin-top: 20px;
                    align-items: center;
                }
            }


        }

        .line {
            /* margin: 30px; */
            width: 100%;
            height: 1px;
            background-color: rgb(218 220 224 / var(--tw-bg-opacity, 1));
            margin: 30px 0;
        }
    }

    .btm-box {
        z-index: 3;
        width: 480px;
        height: 100px;
        background: #f5f6f8;
        position: fixed;
        bottom: 0;
        border-top: #e5e7eb 1px solid;
        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);

        .item {
            color: rgb(95, 99, 104);
            font-weight: 550;
            font-size: 16px;
            width: 100%;
            height: 100%;

            .btm-item{
                margin-right: 5%;
                .btm-name {
                    font-size: 16px;
                    margin: 5px;
                }
            }

           
        }

    }
}

.install-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    /* 从左边外面开始 */
    width: 50%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    transform: skewX(135deg);
    /* 让遮罩层斜着 */
    animation: slide 2s infinite;
    /* 每2秒执行一次 */
    pointer-events: none;
    /* 防止遮罩阻止点击 */
}

@keyframes slide {
    0% {
        left: -75%;
    }

    50% {
        left: 125%;
        /* 划过按钮 */
    }

    100% {
        left: 125%;
    }
}

.guide-box {
    position: fixed;
    /* ✅ 固定在视口，不随滚动变化 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: hidden;
    .guide{
        width: 480px;
        height: 360px;
        background: #FFFFFF;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        color: #000;
        .guide-content{
            margin: 30px;
            width: 90%;
            .guide-head{
                font-size: 20px;
                font-weight: 600;
                width: 100%;
                justify-content: space-between;
            }
            .guide-info{
                border: #e5e7eb 1px solid;
                border-radius: 8px;
                padding: 20px;
                margin-top: 30px;
                .img{
                    width: 50px;
                    height: 50px;
                    margin-right: 20px;
                    border-radius: 15px;
                }
                .name{
                    font-size: 20px;
                    font-weight: 600;
                }
                .url{
                    font-size: 16px;
                    color: rgb(199, 199, 199);
                    margin-top: 5px;
                }
            }
            .step{
                margin-top: 30px;
                color: #242020;
                display: flex;
                font-size: 15px;
                padding: 0 5px;
                .num{
                    font-weight: 600;
                    margin-right: 20px;
                }
            }
        }

    }
}


.install-box {
    position: fixed;
    /* ✅ 固定在视口，不随滚动变化 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    .copy{
        background: none !important;
        background-image: url('/static/img/copy_box_bg.png') !important;
        background-size: cover  !important;
        background-position: center  !important;
        background-repeat: no-repeat  !important;
        position: relative;
        height: 383px !important;
        width: 369px !important;
        border-radius: 0 !important;
        color: #666;
        
        .copy-body{
            width: 80%;
            height: 200px;
            .copy-item{
                margin-top: 15px;
            }
            .link{
                display: flex ;
                align-items: center;
                height: 40px;
                border: 1px solid #999;
                border-radius: 10px;
                font-size: 16px;
                .ellipsis {
                    width: 245px;
                    white-space: nowrap;         /* 强制内容不换行 */
                    overflow: hidden;            /* 溢出隐藏 */
                    text-overflow: ellipsis;     /* 超出用省略号表示 */
                  }
            }
            .btn1{
                padding: 10px 20px;
                border: #01875f 1px solid;
                border-radius: 10px;
                margin-right: 20px;
                cursor: pointer;
            }
            .btn1:active{
                transform: scale(0.95);
            }
            .btn2{
                padding: 10px 20px;
                background: #01875f;
                border-radius: 10px;
                color: #FFFFFF;
                cursor: pointer;
                border: #01875f 1px solid;
            }
            .btn2:active{
                transform: scale(0.95);
            }
        }
        

    }   

    .mask {
        width: 400px;
        height: 270px;
        background: #FFFFFF;
        border-radius: 30px;
        font-weight: 550;
        .head{
            font-size: 28px;
            color: #000;
            
            margin: 10px;
            .raid-img{
                width: 34.89px;
                height: 40.48px;
                margin-right: 10px;
            }
        }
        .mask-body{
            color: rgb(102 102 102 / var(--tw-text-opacity, 1));
            border: 1px solid rgb(116 116 117 / var(--tw-border-opacity, 1));
            border-radius: 5px;
            font-size: 20px;
            padding: 1px 10px;
            font-weight: 500;
            margin-top: 10px;
        }
        .ativado{
            margin-top: 20px;
            border: 1px solid rgb(2 135 96 / var(--tw-border-opacity, 1));
            color: #028760;
            font-size: 22px;
            border-radius: 20px;
            padding: 2px 10px;
            .ativado-img{
                width: 20px;
                height: 24px;
                margin-right: 5px;
            }
        }
        /* .ins-btn{
            color: rgb(255, 255, 255);
            width: 270px;
            height: 56px;
            background: rgb(1, 135, 95);
            border-radius: 8px;
            font-size: 18px;
            margin-top: 20px;
        } */

        /* 修改现有ins-btn样式 */
        .ins-btn {
            color: rgb(255, 255, 255);
            width: 270px;
            height: 56px;
            background: rgb(1, 135, 95);
            border-radius: 8px;
            font-size: 18px;
            margin-top: 20px;
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }
        
        /* 添加进度条背景 */
        .ins-btn-progress {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 0%;
            background-color: #4cd964; /* 绿色进度条 */
            transition: width 0.1s linear; /* 平滑过渡 */
            z-index: 1;
        }
        
        /* 进度文本 */
        .ins-btn-text {
            position: relative;
            z-index: 2;
        }


        .ins-btn:active{
            transform: scale(0.95);
        }

        .progress-container {
            position: relative;
            width: 56px;
            height: 56px;
            margin-top: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .progress-ring {
            transform: rotate(-90deg);
            /* 让圆环从顶部开始 */
        }

        .progress-ring-background {
            opacity: 0.3;
        }

        .progress-ring-bar {
            transition: stroke-dashoffset 0.3s ease;
            /* 设置动画 */
        }

        .progress-number {
            position: absolute;
            font-size: 16px;
            font-weight: bold;
            color: #000;
        }


    }
}