@charset "utf-8";

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
    width:100%;
    min-height:100%;
    font-family:"Microsoft JhengHei", "微軟正黑體", Arial, sans-serif;
    background:#000;
    overflow:hidden;
}

body{
    height:100vh;
}

.main{
    position:relative;
    width:100%;
    height:100vh;
    overflow:hidden;
    background-image:url(../images/m_bg.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center center;
}

.main::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at center, rgba(126,72,255,.18) 0%, rgba(0,0,0,0) 38%),
        linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.45) 100%);
    pointer-events:none;
}

.logo{
    position:absolute;
    left:14px;
    top:14px;
    z-index:5;
    width:80px;
    height:80px;
    display:block;
    background-image:url(../images/LOGO.png);
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
}

.sub{
    position:absolute;
    z-index:2;
    top:21vh;
    width:100%;
    max-height:50%;
}

.r_box{
    position:relative;
    width:92.756vw;
    height:94.689vw;
    margin:78px auto 0;
}

.wheel_glow{
    position:absolute;
    left:50%;
    top:50%;
    width:108%;
    height:108%;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:
        radial-gradient(circle, rgba(255,214,106,.36) 0%, rgba(126,72,255,.22) 34%, rgba(0,0,0,0) 70%);
    filter:blur(8px);
    z-index:0;
    pointer-events:none;
}

.ro{
    position:absolute;
    z-index:2;
    width:92.756vw;
    height:92.756vw;
    margin:0 auto;
    background-image:url(../images/ro.png);
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    filter:drop-shadow(0 20px 24px rgba(0,0,0,.45));
}

.pin{
    position:absolute;
    z-index:4;
    left:0;
    right:0;
    top:-10px;
    display:block;
    width:14.252vw;
    height:18.358vw;
    margin:auto;
    background-image:url(../images/pin.png);
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    filter:drop-shadow(0 6px 8px rgba(0,0,0,.4));
}

.r_btn,
.r_btn_a{
    position:absolute;
    z-index:5;
    display:block;
    left:0;
    right:0;
    top:33vw;
    width:27.297vw;
    height:27.297vw;
    margin:auto;
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    cursor:pointer;
}

.r_btn{
    background-image:url(../images/r_btn.png);
    transition:transform .2s ease, filter .2s ease;
}

.r_btn:active,
.r_btn:hover{
    background-image:url(../images/r_btn2.png);
}

.r_btn:hover{
    transform:scale(1.04);
    filter:brightness(1.08);
}

.r_btn.is_disabled{
    pointer-events:none;
    filter:saturate(.75) brightness(.9);
}

.r_btn_a{
    display:none;
    pointer-events:none;
}

.sub_title{
    width:100%;
    margin:2vw auto 0;
    color:#ffd45f;
    font-size:9.66184vw;
    font-weight:900;
    text-align:center;
    letter-spacing:.03em;
    text-shadow:
        0 0 8px rgba(255,204,0,.5),
        0 4px 10px rgba(0,0,0,.55);
    word-wrap:break-word;
}

/* Popup */
.popup_mask{
    display:none;
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    z-index:9999;
    background:
        radial-gradient(circle at center, rgba(93,38,160,.35) 0%, rgba(0,0,0,.88) 72%),
        rgba(0,0,0,.86);
    backdrop-filter:blur(3px);
}

.popup_box{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%) scale(.86);
    width:76vw;
    max-width:320px;
    min-height:400px;
    padding:0 22px;
    background:url(../images/popup-frame.png) center center no-repeat;
    background-size:100% 100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    opacity:0;
    filter:drop-shadow(0 0 26px rgba(255,196,68,.32));
}

.popup_box.is_show{
    animation:popupShow .35s ease-out forwards;
}

@keyframes popupShow{
    0%{
        transform:translate(-50%,-50%) scale(.76);
        opacity:0;
    }
    70%{
        transform:translate(-50%,-50%) scale(1.04);
        opacity:1;
    }
    100%{
        transform:translate(-50%,-50%) scale(1);
        opacity:1;
    }
}

.popup_close{
    position:absolute;
    right:18px;
    top:16px;
    width:34px;
    height:34px;
    border:0;
    border-radius:50%;
    background:rgba(0,0,0,.28);
    color:#fff3c7;
    font-size:26px;
    line-height:34px;
    text-align:center;
    cursor:pointer;
    transition:background .2s ease, transform .2s ease;
}

.popup_close:hover{
    background:rgba(255,204,0,.22);
    transform:scale(1.08);
}

.popup_title{
    margin-top:30px;
    color:#ffd45f;
    font-size:30px;
    font-weight:900;
    text-align:center;
    text-shadow:0 0 10px #b79200, 0 3px 8px rgba(0,0,0,.45);
}

.popup_text{
    margin-top:14px;
    color:#fff;
    font-size:19px;
    font-weight:700;
    text-align:center;
}

.popup_reward{
    margin-top:24px;
    color:#ffcc55;
    font-size:80px;
    font-weight:900;
    line-height:1;
    text-align:center;
    text-shadow:
        0 0 3px #d3b100,
        0 0 12px #ff9900,
        0 4px 10px rgba(0,0,0,.45);
    animation:rewardPop .6s ease-out;
}

@keyframes rewardPop{
    0%{transform:scale(.5);opacity:0;}
    70%{transform:scale(1.15);opacity:1;}
    100%{transform:scale(1);opacity:1;}
}

.popup_desc{
    margin-top:18px;
    color:#fff;
    font-size:17px;
    font-weight:700;
    line-height:1.5;
    text-align:center;
    text-shadow:0 2px 6px rgba(0,0,0,.5);
}

.popup_btn{
    display:flex;
    justify-content:center;
    align-items:center;
    width:75%;
    max-width:280px;
    height:64px;
    margin-top:24px;
    border-radius:999px;
    background:linear-gradient(#fff4c8, #ffd54d 48%, #ffb300 100%);
    color:#412000;
    font-size:22px;
    font-weight:900;
    text-decoration:none;
    box-shadow:0 0 20px rgba(255,204,0,.55);
    animation:btnPulse 1.8s infinite;
    transition:transform .2s ease, filter .2s ease;
}

.popup_btn:hover{
    transform:scale(1.04);
    filter:brightness(1.06);
}

@keyframes btnPulse{
    0%{box-shadow:0 0 8px rgba(255,204,0,.35);}
    50%{box-shadow:0 0 28px rgba(255,204,0,.85);}
    100%{box-shadow:0 0 8px rgba(255,204,0,.35);}
}

.confetti_wrap{
    position:fixed;
    inset:0;
    z-index:10000;
    pointer-events:none;
    overflow:hidden;
}

.confetti_wrap i{
    position:absolute;
    top:-20px;
    display:block;
    border-radius:2px;
    opacity:.95;
    animation:confettiFall linear forwards;
}

@keyframes confettiFall{
    0%{
        transform:translateY(-20px) rotate(0deg);
        opacity:1;
    }
    100%{
        transform:translateY(105vh) rotate(720deg);
        opacity:0;
    }
}


@media(max-width:374px){
    .popup_box{
        width:82vw;
        max-width:300px;
        min-height:382px;
    }
    .popup_title{
        margin-top:28px;
        font-size:27px;
    }
    .popup_reward{
        margin-top:20px;
        font-size:72px;
    }
    .popup_desc{
        font-size:15px;
    }
    .popup_btn{
        height:58px;
        font-size:20px;
    }
    
}

@media(min-width:768px){
    .main{
        background-image:url(../images/pc_bg.jpg);
    }

    .logo{
        width:150px;
        height:150px;
    }

    .sub{
        top:9vh;
        width:100%;
        max-height:50%;
    }

    .r_box{
        width:562px;
        height:570px;
        margin:78px auto 0;
    }

    .ro{
        width:562px;
        height:562px;
    }

    .pin{
        width:78px;
        height:103px;
        top:-10px;
    }

    .r_btn,
    .r_btn_a{
        width:142px;
        height:142px;
        top:206px;
    }

    .sub_title{
        margin:0 auto;
        font-size:74px;
    }

    .popup_box{
        width:600px;
        max-width:none;
        min-height:560px;
        padding:0 46px;
    }

    .popup_title{
        margin-top:42px;
        font-size:42px;
    }

    .popup_text{
        margin-top:20px;
        font-size:28px;
    }

    .popup_reward{
        margin-top:38px;
        font-size:120px;
    }

    .popup_desc{
        margin-top:22px;
        font-size:24px;
    }

    .popup_btn{
        width:320px;
        height:80px;
        margin-top:38px;
        font-size:32px;
    }

    .popup_close{
        right:26px;
        top:22px;
    }
}