body {
    height: 100%;
    overflow: hidden;
    /* background-image: url("./img/UI/Background_Main.png"); */
    background-color: #FFD04B;
    /* background-size: cover; */
    /*    position: fixed;*/
}

#BackgroundLayer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100lvh; /* iOS Safari: 使用 Large Viewport Height，即地址欄完全隱藏時的最大高度，確保覆蓋安全區域 */
    z-index: -10;
    background-image: url("./img/UI/Background_Main.png");
    background-size: cover;
    background-position: center;
    transition: opacity 1.5s ease-in-out;
    opacity: 1;
}

.bg-faded {
    opacity: 0.9 !important; /* 10% transparent */
}

.deco-faded {
    opacity: 0.7 !important; /* 30% transparent */
}


.bgImageStyle /*背景圖片的比例調整*/ {
    width: auto;
    height: auto;
    max-width: 100%;
    min-width: 100%; /*使用者即使縮小比例 也是固定畫面背景大小*/
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*#region 工程模式面板（半透明底欄、可收合） */
#DevTool img { width: 100%; height: 100%; }

/* 外層：fixed 底邊，預設不攔截點擊；子層再開 pointer-events */
.engineering-root {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    pointer-events: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.engineering-expand-tab {
    display: none;
    pointer-events: auto;
    width: min(280px, 92vw);
    margin: 0 auto;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    background: rgba(0, 0, 0, 0.78);
    color: #f5f5f5;
    font-size: calc(var(--vh, 1vh) * 1.35);
    cursor: pointer;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
}

.engineering-expand-tab:active {
    filter: brightness(1.08);
}

.engineering-root.engineering-collapsed .engineering-expand-tab {
    display: block;
}

.engineering-panel-body {
    pointer-events: auto;
    width: 100%;
    max-width: min(96vw, 440px);
    margin-left: auto;
    margin-right: auto;
}

.engineering-panel-shell {
    background: rgba(0, 0, 0, 0.78);
    border-radius: 12px 12px 0 0;
    padding: 10px 12px 14px;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.4);
    color: #eee;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: none;
}

.engineering-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.engineering-panel-title {
    font-weight: 700;
    font-size: calc(var(--vh, 1vh) * 1.5);
    color: #fff;
}

.engineering-collapse-btn {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: calc(var(--vh, 1vh) * 1.25);
    cursor: pointer;
}

.engineering-collapse-btn:active {
    background: rgba(255, 255, 255, 0.18);
}

.engineering-field-label {
    display: block;
    margin-top: 6px;
    margin-bottom: 2px;
    font-size: calc(var(--vh, 1vh) * 1.2);
    color: #ccc;
}

.engineering-panel-content select {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 4px;
    padding: 4px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.95);
    color: #222;
}

.engineering-apply-start-btn {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(120, 200, 140, 0.6);
    background: rgba(60, 140, 90, 0.85);
    color: #fff;
    font-size: calc(var(--vh, 1vh) * 1.35);
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.engineering-apply-start-btn:active {
    filter: brightness(1.1);
}

#EngineeringCloseBtn {
    display: none;
    width: 100%;
    margin-top: 8px;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(220, 80, 80, 0.35);
    color: #fff;
    font-size: calc(var(--vh, 1vh) * 1.25);
}

.engineering-row {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.engineering-row-checkbox label[for="Repeatchk"] {
    font-size: calc(var(--vh, 1vh) * 1.15);
    color: #ddd;
}

#StatusReminder {
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: calc(var(--vh, 1vh) * 1.1);
}

.engineering-score-id {
    display: block;
    margin-top: 6px;
    color: #fff;
    font-size: calc(var(--vh, 1vh) * 1.15);
    word-break: break-all;
}

.engineering-root.engineering-collapsed .engineering-panel-body {
    display: none;
}
/*#endregion */

/*#region 排名頭像/排名數字容器共用基底 */
.BattleRankAvator,
.IntroRankAvator {
    background: url('./img/Animal/Lucky_A.png') no-repeat;
    background-size: calc(var(--vh,1vh)*10);
    width: calc(var(--vh,1vh)*8);
    height: calc(var(--vh,1vh)*8);
    border-radius: 50%;
    position: absolute;
}
.BattleRankNumber,
.IntroRankNumber {
    width: calc(calc(var(--vh,1vh)*3)*0.796);
    height: calc(var(--vh,1vh)*3);
    margin: calc(var(--vh,1vh)*-0.5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-0.5);
    z-index: 2;
    position: absolute;
}
/*#endregion */

/*#region 排名數字圖片共用基底 */
#BattleRank1Number,
#BattleRank2Number,
#BattleRank3Number,
.IntroRankNumber1,
.IntroRankNumber2,
.IntroRankNumber3 {
    background-size: calc(calc(var(--vh,1vh)*3)*0.796) calc(var(--vh,1vh)*3);
}
#BattleRank1Number, .IntroRankNumber1 { background-image: url('./img/UI/Number/Fever_1.png'); background-repeat: no-repeat; }
#BattleRank2Number, .IntroRankNumber2 { background-image: url('./img/UI/Number/Fever2_2.png'); background-repeat: no-repeat; }
#BattleRank3Number, .IntroRankNumber3 { background-image: url('./img/UI/Number/Fever2_3.png'); background-repeat: no-repeat; }
/*#endregion */

/*#region Combo 數字共用基底 */
#ComboNumberOne,
#ComboNumberTwo {
    width: calc(calc(var(--vh,1vh)*9)*0.796);
    height: calc(var(--vh,1vh)*9);
    background: url('./img/UI/Number/Fever_1.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*9)*0.796) calc(var(--vh,1vh)*9);
}
/*#endregion */

/*#region 卡牌共用基底 */
.card,
.cardFor12,
.cardFor16_20,
.cardFor16_20_Large,
.cardFor20,
.card_TwoOfOneLine,
.card_ThreeOfOneLine,
.card_RatioLessThen051,
.card_Ratio051_056,
.card_Ratio056_061,
.card_Ratio061_064,
.card_Ratio064_075,
.card_Ratio075_08,
.card_Ratio08_087,
.card_Ratio087_109 {
    float: left;
    text-align: center;
    position: relative;
}
/*#endregion */

/*寬版*/
@media (min-aspect-ratio: 1/1) {
    .wrap {
        width: 800px;
        height: 500px;
        margin: 10px auto;
        top: calc(var(--vh,1vh)*20);
        /*         left: 15%;*/
        padding: 0px;
        position: absolute;
    }

    .card {
        margin: 3px;
        width: calc(calc(var(--vh,1vh)*100)/4);
        height: calc(calc(var(--vh,1vh)*100)/4);
    }

    .cardFor16_20 {
        margin: 2px;
        width: calc(calc(var(--vh,1vh)*100)/6);
        height: calc(calc(var(--vh,1vh)*100)/6);
    }

    .cardFor20 {
        margin: 2px;
        width: calc(calc(var(--vw,1vw)*100)/4.5);
        height: calc(calc(var(--vw,1vw)*100)/4.5);
    }

    .card_Ratio064_075 {
        margin: 3px;
        width: calc(calc(var(--vw,1vw)*100)/3.6);
        height: calc(calc(var(--vw,1vw)*100)/3.6);
    }

    .card_Ratio075_08 {
        margin: 3px;
        width: calc(calc(var(--vw,1vw)*100)/3.7);
        height: calc(calc(var(--vw,1vw)*100)/3.7);
    }

    .card_Ratio08_087 {
        margin: 3px;
        width: calc(calc(var(--vw,1vw)*100)/4);
        height: calc(calc(var(--vw,1vw)*100)/4);
    }

    .card_Ratio087_109 {
        margin: 3px;
        width: calc(calc(var(--vw,1vw)*100)/4.5);
        height: calc(calc(var(--vw,1vw)*100)/4.5);
    }

    .cardFor12 {
        margin: 5px;
        width: calc(calc(var(--vh,1vh)*100)/4.5);
        height: calc(calc(var(--vh,1vh)*100)/4.5);
    }

    .cardFor16_20_Large {
        margin: 2px;
        width: calc(calc(var(--vw,1vw)*100)/4.2);
        height: calc(calc(var(--vw,1vw)*100)/4.2);
    }


    #tiktok {
        position: absolute;
        width: 40vw;
        height: calc(40vw / 10.81);
        margin: auto;
        top: 3%;
        left: 0;
        right: 0;
        background: url('./img/UI/cbgame-16_1.png') no-repeat;
        background-size: 100% 100%;
        z-index: 3;
        display: none;
    }
    
    #itemblock {
        position: absolute;
        width: 40vw;
        height: 10vw;
        left: calc(50% - 20vw); /* 切齊計時器 #tiktok 左側 (計時器寬 40vw 置中) */
        top: 5%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 2vw;
        z-index: 3;
    }

    #hintitem {
        width: 14vw;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        gap: 1vw;
        flex-shrink: 0;
        background: url('./img/UI/Button_Main_AboutUs.png') no-repeat center/contain;
    }
    
    #hintitem-img {
        width: 8vw;
        height: 8vw;
        background: url('./img/UI/Button_HintCard.png') no-repeat center/contain;
        flex-shrink: 0;
        position: relative;
        left: -2vw;
    }

    #lifecount {
        width: 14vw;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        flex-shrink: 0;
        background: url('./img/UI/Button_Main_AboutUs.png') no-repeat center/contain;
    }
    
    #lifecount-img {
        width: 8vw;
        height: 8vw;
        background: url('./img/UI/Icon_Energy.png') no-repeat center;
        background-size: 58% 75%;
        flex-shrink: 0;
        position: relative;
        left: -2vw;
    }
    
    .item-img_mask {
        filter: brightness(0.5);
    }

    .item-count {
        width: 2.5vw;
        height: 2.5vw;
        color: brown;
        font-weight: bold;
        justify-content: center;
        align-items: center;
        font-size: 1.5vw;
        flex-shrink: 0;
        position: relative;
        bottom: 2.5vw;
        right: 1vw;
    }

    #counter {
        width: 100%;
        height: 100%;
        /*background:white;*/
        float: left;
        background: url('./img/UI/cbgame-17_1.png') no-repeat;
        background-size: 40vw calc(40vw / 10.81); /* 固定為 #tiktok 的完整尺寸，靠 width% 裁切而非縮放 */
    }

    /*       .card {
              margin-right: 10px;
              margin-bottom: 10px;
          }*/
    /*#region 寬版首頁初始排版 */ 
    .StartPageParentDiv {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
        height: 100dvh; /* 現代瀏覽器：動態視窗高度，自動適應 iOS Safari 實際可視區域 */
        top: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-sizing: border-box;
    }

    .MainCanvas {
        position: absolute;
        height: 100%;
        width: 100%;
    }
    
    #HeaderLogo {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1; 
    }

        .StartPageHeaderImage {
            width: calc(calc(var(--vh,1vh)*40)*2.1459854);
            height: calc(var(--vh,1vh)*40);
            background: url('./img/UI/Decor_Main_Ribbon.png') no-repeat;
            background-size: contain;
            margin: calc(var(--vh,1vh)*0) auto 0 auto;
            padding: 0px;
            display: flex;
            align-items: center;
            justify-content: center;
        }


        .StartPageLogoImage {
            width: calc(calc(var(--vh,1vh)*36)*1.85377);
            height: calc(var(--vh,1vh)*36);
            background: url('./img/UI/Logo.png') no-repeat;
            background-size: contain !important;
            padding: 0px;
        }

    #LoginEnter {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 2;
    }

        .StartPageUserImage {
            width: calc(var(--vh,1vh)*15);
            height: calc(var(--vh,1vh)*15);
            background: url('./img/UI/Frame_Main_Login.png') no-repeat;
            background-size: contain !important;
            padding: 0px;
            border-radius: 50%
        }

        #StartPageUserLoginDiv {
            position: absolute;
            z-index: 2;
        }

        .StartPageUserLoginStyle {
            width: calc(calc(var(--vh,1vh)*5)*3.058823);
            height: calc(var(--vh,1vh)*5);
            display: block;
            border: none;
            background: url('./img/UI/Button_Main_Login.png');
            background-size: contain;
            margin: calc(var(--vh,1vh)*11) auto 0 auto;
            font-size: calc(var(--vh,1vh)*2);
            color: white;
            font-weight: bold;
            font-family: PumpkinGames;
        }

    #RightDeco {
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 0;
        transition: opacity 1.5s ease-in-out;
        opacity: 1;
    }

        .StartPageDecorationImage {
            width: calc(calc(var(--vh,1vh)*70)*0.9808102);
            height: calc(var(--vh,1vh)*70);
            position: relative;
        }

        .StartPageDecorationImage::after {
            content: "";
            position: absolute;
            top: calc(calc(var(--vh,1vh)*3));
            left: calc(var(--vh,1vh)*7);
            width: 100%;
            height: 100%;
            background: url('./img/UI/Decor_Main_Telly.png') no-repeat;
            background-size: contain;
            z-index: inherit;
        }

        .StartPageSmallDecorationImage {
            width: calc(calc(var(--vh,1vh)*30)*1.60477);
            height: calc(var(--vh,1vh)*30);
            background: url('./img/UI/StartPageSmallDecoratoin.png') no-repeat;
            background-size: contain;
            position:absolute;
            top: calc(calc(var(--vh,1vh)*-5));
            left: calc(calc(var(--vh,1vh)*18));
            z-index: -1;
        }
    
    #MainFunctionArea {
        position: absolute;
        width: 80vh;
        top: 36%;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%); 
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        pointer-events: auto;
    }

        #GameEnter {
            position: relative;
            width: 100%;
            top: 0;
            z-index: 3;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
        }

            .StartPageStandardButtonImage {
                width: calc(calc(var(--vh,1vh)*20)*1.7);
                height: calc(var(--vh,1vh)*20);
                background: url('./img/UI/Button_Main_Purple.png') no-repeat;
                background-size: 100% 100%; /*此按鈕不照原始圖片比例*/
                /* margin: calc(var(--vh,1vh)*-60) calc(var(--vh,1vh)*102) 0 auto; */
                padding: 0px;
            }

            #StartPageStandardButtonGifDiv {
                width: calc(var(--vh,1vh)*20);
                height: calc(var(--vh,1vh)*20);
                background: url('./img/UI/Rank.gif') no-repeat;
                background-size: contain;
                margin: calc(var(--vh,1vh)*-4) auto auto calc(var(--vh,1vh)*-6);
                position: absolute;
                z-index: 2;
            }

            #StartPageStandardLabelDiv {
                margin: calc(var(--vh,1vh)*7) auto auto calc(var(--vh,1vh)*15);
                position: absolute;
                z-index: 2;
            }

            #StandardLabel {
                font-size: calc(var(--vh,1vh)*2.8);
                color: white;
                font-weight: bold;
            }

            .OrangeBoardFont{
                text-shadow: 
                    3px 3px 0 #FF7800, 
                    -3px 3px 0 #FF7800, 
                    3px -3px 0 #FF7800, 
                    -3px -3px 0 #FF7800;
            }

            .StartPageEventModeButtonImage {
                width: calc(calc(var(--vh,1vh)*20)*1.07843137254902);
                height: calc(var(--vh,1vh)*20);
                background: url('./img/UI/Button_Activity_Travel.png') no-repeat;
                background-size: contain !important;
                /* margin: calc(var(--vh,1vh)*-50) calc(var(--vh,1vh)*58) 0 auto; */
                padding: 0px;
                z-index: 3;
            }

            #StartPageEventModeLabelDiv {
                text-align: center;
                padding: calc(var(--vh,1vh)*13) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
            }

            #StartPageEventModeLabel {
                font-size: calc(var(--vh,1vh)*2);
                color: white;
                font-weight: bold;
            }
            
            #StartPageHintItemImage {
                /*width: calc(calc(var(--vh,1vh)*20)*1.0666666667);*/
                /*圖片比例 112/105 */
                aspect-ratio: 112 / 105;
                height: calc(var(--vh,1vh)*20);
                background: url('./img/UI/Button_HintCard.png') no-repeat;
                background-size: contain;
                /* margin: calc(var(--vh,1vh)*-23) calc(var(--vh,1vh)*59) 0 auto; */
                padding: 0px;
                position: relative;
                margin-left: auto;
                margin-bottom: calc(var(--vh,1vh)*5);
                z-index: 3;
            }

            #StartPageHintItemLabelDiv {
                position: absolute;
                width: calc(var(--vh, 1vh) * 20);
                height: calc(var(--vh, 1vh) * 6);
                bottom: -10px;
                left: 50%;
                transform: translateX(-50%);
                text-align: center;
                background: url('./img/UI/Button_Yellow.png') no-repeat;
                background-size: contain;
                display: flex;
                justify-content: center;
                align-items: center;
                text-align: center;
            }

            #StartPageHintItemLabel {
                font-size: calc(var(--vh,1vh)*2);
                color: white;
                font-weight: bold;
            }

            .StartPagePracticeButtonImage {
                width: calc(calc(var(--vh,1vh)*20)*1.536);
                height: calc(var(--vh,1vh)*20);
                background: url('./img/UI/Button_Main_Blue.png') no-repeat;
                background-size: contain;
                /* margin: calc(var(--vh,1vh)*1) calc(var(--vh,1vh)*106) 0 auto; */
                /* margin-left: calc(var(--vh, 1vh) * -5); */
                padding: 0px;
            }

            #StartPagePracticeLabelDiv {
                margin: calc(var(--vh,1vh)*12) auto auto calc(var(--vh,1vh)*12);
                position: absolute;
                z-index: 2;
            }

            #PracticeLabel {
                font-size: calc(var(--vh,1vh)*3);
                color: white;
                font-weight: bold;
            }

            #StartPagePracticeButtonGifDiv {
                width: calc(var(--vh,1vh)*14);
                height: calc(var(--vh,1vh)*14);
                background: url('./img/UI/Practice.gif') no-repeat;
                background-size: contain;
                margin: calc(var(--vh,1vh)*-2) auto auto calc(var(--vh,1vh)*2);
                position: absolute;
                z-index: 2;
            }


            .StartPageBattleButtonImage {
                width: calc(calc(var(--vh,1vh)*20)*1.536);
                height: calc(var(--vh,1vh)*20);
                background: url('./img/UI/Button_Main_Red.png') no-repeat;
                background-size: contain;
                /* margin: calc(var(--vh,1vh)*-20) calc(var(--vh,1vh)*81) 0 auto; */
                margin-left: calc(var(--vh, 1vh) * -5);
                padding: 0px;
            }

            #StartPageBattleButtonLock {
                width: calc(calc(var(--vh,1vh)*10)*0.7894736842105263);
                height: calc(var(--vh,1vh)*10);
                background: url('./img/UI/Icon_Lock.png') no-repeat;
                background-size: contain;
                margin: calc(var(--vh,1vh)*-3) calc(var(--vh,1vh)*0) 0 calc(var(--vh,1vh)*21);
                padding: 0px;
                position: absolute;
            }

            #StartPageBattleLabelDiv {
                margin: calc(var(--vh,1vh)*12) auto auto calc(var(--vh,1vh)*14);
                position: absolute;
                z-index: 2;
            }

            #BattleLabel {
                font-size: calc(var(--vh,1vh)*3);
                color: white;
                font-weight: bold;
            }

            #StartPageBattleButtonGifDiv {
                width: calc(var(--vh,1vh)*14);
                height: calc(var(--vh,1vh)*14);
                background: url('./img/UI/PVP.gif') no-repeat;
                background-size: contain;
                margin: calc(var(--vh,1vh)*-2) auto auto calc(var(--vh,1vh)*2);
                position: absolute;
                z-index: 2;
            }

            .StartPageRankingButtonImage {
                width: calc(var(--vh,1vh)*20);
                height: calc(var(--vh,1vh)*20);
                background: url('./img/UI/Button_Main_Rank.png') no-repeat;
                background-size: contain;
                /* margin: calc(var(--vh,1vh)*5) calc(var(--vh,1vh)*60) 0 auto; */
                margin-left: auto;
                padding: 0px;
            }

            #StartPageRankingLabelDiv {
                text-align: center;
                padding: calc(var(--vh,1vh)*14) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
            }

            #RankingLabel {
                --min-size: 15;
                --max-size: 18;
                --font-size: calc( (var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100cqw - 320px) / (1920 - 320)) );
                font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
                color: white;
                font-weight: bold;
            }

        #LearnEnter {
            position: relative;
            width: 70%;
            z-index: 3;
            display: flex;
            flex-grow: 1;
            align-items: center;
            justify-content: space-between;
        }

            .StartPageTutorialButtonImage {
                width: calc(calc(var(--vh,1vh)*7)*3.159090909090909);
                height: calc(var(--vh,1vh)*7);
                display: block;
                border: none;
                background: url('./img/UI/Button_Main_AboutUs.png');
                background-size: contain;
                /* margin: calc(var(--vh,1vh)*1) calc(var(--vh,1vh)*110) 0 auto; */
                font-size: calc(var(--vh,1vh)*2);
                color: brown;
                font-weight: bold;
                padding:0px;
                margin-left: calc(var(--vh, 1vh) * 5);
            }

            #StartPageTutorialLabelDiv {
                text-align: center;
                padding: calc(var(--vh,1vh)*2) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
            }

            #TutorialImage {
                width: calc(var(--vh,1vh)*10);
                height: calc(var(--vh,1vh)*10);
                background: url('./img/UI/Button_PK_Tutorial.png') no-repeat;
                background-size: contain;
                margin: calc(var(--vh,1vh)*-8) calc(var(--vh,1vh)*0) 0 calc(var(--vh,1vh)*-3);
            }

            #TutorialLabel {
                font-size: calc(var(--vh,1vh)*2);
                color: brown;
                font-weight: bold;
                top: calc(var(--vh,1vh)*-4);
            }
            

            #StartPageAboutDiv {
                width: calc(calc(var(--vh,1vh)*7)*3.159090909090909);
                height: calc(var(--vh,1vh)*7);
                display: flex;
                border: none;
                background: url('./img/UI/Button_Main_AboutUs.png');
                background-size: contain;
                /* margin: calc(var(--vh,1vh)*11) calc(var(--vh,1vh)*-21) 0 calc(var(--vh,1vh)*-44); */
                margin-right: calc(var(--vh, 1vh) * 5);
                justify-content: center;
                align-items: center;
            }

            .StartPageAboutButtonStyle {
                /* margin: calc(var(--vh,1vh)*-10) calc(var(--vh,1vh)*106) 0 auto; */
                font-size: calc(var(--vh,1vh)*2);
                color: brown;
                font-weight: bold;
                text-align: center;
            }

        #PrivacyPolicyDiv {
            /* margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) 0 calc(var(--vh,1vh)*90); */
            /* text-align: center; */
            user-select: none;
            width: 70%;
            bottom: 0;
            z-index: 3;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        #PrivacyPolicyGuideText {
            font-size: calc(var(--vh,1vh)*2);
            font-weight: bold;
            font-family: PumpkinGames;
            color: white;
            padding: 10px;
        }
        
    #DevTool{
        position: absolute;
        bottom: 10px;
        left: 10px;
        z-index: 3;
        width: calc(var(--vh,1vh)*10); 
        height: calc(var(--vh,1vh)*10); 
        /* margin: calc(var(--vh,1vh)*-10) 0 auto calc(var(--vh,1vh)*-1) */
    }

    /* #endregion 寬版首頁初始排版結束*/

    .TutorialSingleHeaderDiv {
        margin: calc(var(--vh,1vh)*0) auto auto calc(var(--vh,1vh)*11);
        position: absolute;
        z-index: 2;
        width: calc(var(--vh,1vh)*20);
        text-align: center;
        padding: calc(var(--vh,1vh)*0.5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
    }

    .TutorialDoubleHeaderDiv {
        margin: calc(var(--vh,1vh)*-0.15) auto auto calc(var(--vh,1vh)*21);
        position: absolute;
        z-index: 2;
        width: calc(var(--vh,1vh)*15);
        text-align: center;
        padding: calc(var(--vh,1vh)*0.5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
    }

    .TutorialPracticeHeaderDiv {
        margin: calc(var(--vh,1vh)*-0.25) auto auto calc(var(--vh,1vh)*14);
        position: absolute;
        z-index: 2;
        width: calc(var(--vh,1vh)*15);
        text-align: center;
        padding: calc(var(--vh,1vh)*0.5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
    }

    /*#region 結算面板 推薦按鈕*/
    #sLineFrame {
        margin: calc(var(--vh,1vh)*33) calc(var(--vh,1vh)*0) auto calc(var(--vh,1vh)*55);
        position: absolute;
    }

    #sQRcodeFrame {
        margin: calc(var(--vh,1vh)*48) calc(var(--vh,1vh)*0) auto calc(var(--vh,1vh)*55);
        position: absolute;
    }

    #fLineFrame {
        margin: calc(var(--vh,1vh)*25) calc(var(--vh,1vh)*0) auto calc(var(--vh,1vh)*55);
        position: absolute;
    }

    #fQRcodeFrame {
        margin: calc(var(--vh,1vh)*40) calc(var(--vh,1vh)*0) auto calc(var(--vh,1vh)*55);
        position: absolute;
    }
    /*#endregion*/

    #FailureRecommonFrame {
        margin: auto auto auto calc(var(--vh,1vh)*4);
        position: absolute;
    }

    #SuccessRecommonFrame {
        margin: auto auto auto calc(var(--vh,1vh)*4);
        position: absolute;
        position: absolute;
    }

    #AccountAvatar {
        margin: calc(var(--vh,1vh)*3) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-30);
        width: calc(var(--vh,1vh)*15);
        height: calc(var(--vh,1vh)*15);
        background: url('./img/UI/Frame_Main_Login.png ');
        background-size: calc(var(--vh,1vh)*15) calc(var(--vh,1vh)*15);
        position: absolute;
        padding: 0;
        border-radius: 50%;
    }

    #ComboParentDiv {
        position: absolute;
        background-size: cover;
        z-index: 7;
        display: none;
        margin: calc(var(--vh,1vh)*-50) auto auto calc(var(--vw,1vw)*40);
    }

    /*   .SuccessPanel {
        width: calc(calc(var(--vh,1vh)*55)*0.89);
        height: calc(var(--vh,1vh)*55);
        background: url('./img/UI/Frame_Success.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*55)*0.89) calc(var(--vh,1vh)*55);
        white-space: pre-line;
        margin: calc(var(--vh,1vh)*16) auto 0 auto;
        padding: 0px;
        display: none;
    }*/

    /*.FailurePanel {
        width: calc(calc(var(--vh,1vh)*55)*0.982);
        height: calc(var(--vh,1vh)*55);*/
    /*                        top: 0px;*/
    /*background: url('./img/UI/Frame_Failure.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*55)*0.982) calc(var(--vh,1vh)*55);*/
    /*background: rgba(255,255,255,0.9);*/
    /*white-space: pre-line;
        margin: calc(var(--vh,1vh)*16) auto 0 auto;
        padding: 0px;
        display: none;
    }*/

    .EncyclopediaPanel {
        width: calc(calc(var(--vh,1vh)*80)*1.397188049209139);
        height: calc(var(--vh,1vh)*80);
        background: url('./img/UI/Frame_Book.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*80)*1.397188049209139) calc(var(--vh,1vh)*80);
        margin: calc(var(--vh,1vh)*25) auto 0 auto;
        display: none;
        padding: 0px;
    }

    #EncyclopediaTitle {
        width: calc(calc(var(--vh,1vh)*15)*3.117647058823529);
        height: calc(var(--vh,1vh)*15);
        background: url('./img/UI/Title_Mine_Book.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*15)*3.117647058823529) calc(var(--vh,1vh)*15);
        display: block;
        border: none;
        font-size: calc(var(--vh,1vh)*4);
        color: white;
        font-weight: bold;
        position: absolute;
        margin: calc(var(--vh,1vh)*-9) auto 0 calc(var(--vh,1vh)*31);
    }

    #EncyclopediaCloseButton {
        width: calc(var(--vh,1vh)*7.5);
        height: calc(var(--vh,1vh)*7.5);
        margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*103);
    }

    #CardCategoryDiv {
        position: relative;
        margin: calc(var(--vh,1vh)*-12) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*6);
    }

    #EncyclopediaGridContainerLeft {
        display: grid;
        grid-template-columns: calc(var(--vh,1vh)*12) calc(var(--vh,1vh)*12) calc(var(--vh,1vh)*12) calc(var(--vh,1vh)*0);
        grid-template-rows: calc(var(--vh,1vh)*12) calc(var(--vh,1vh)*12) calc(var(--vh,1vh)*12) calc(var(--vh,1vh)*12) calc(var(--vh,1vh)*0);
        margin: calc(var(--vh,1vh)*3) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*4);
        position: absolute;
    }

    #EncyclopediaGridContainerRight {
        display: grid;
        grid-template-columns: calc(var(--vh,1vh)*12) calc(var(--vh,1vh)*12) calc(var(--vh,1vh)*12) calc(var(--vh,1vh)*0);
        grid-template-rows: calc(var(--vh,1vh)*12) calc(var(--vh,1vh)*12) calc(var(--vh,1vh)*12) calc(var(--vh,1vh)*12) calc(var(--vh,1vh)*0);
        margin: calc(var(--vh,1vh)*3) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*61);
        position: absolute;
    }

    .EncyclopediaGridContainerItem {
        width: calc(var(--vh,1vh)*11);
        height: calc(var(--vh,1vh)*11);
    }

    .EncyclopediaCover {
        border: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.85);
        border-radius: 5%;
    }

    #EncyclopediaPageDIV {
        margin: calc(var(--vh,1vh)*65) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*40);
    }

    #CardCategorySelect {
        appearance: none;
        /*  safari  */
        -webkit-appearance: none;
        /*  other styles for aesthetics */
        width: calc(calc(var(--vh,1vh)*5.5)*4.414634146341463);
        height: calc(var(--vh,1vh)*5.5);
        font-size: calc(var(--vh,1vh)*2.5);
        padding: 0.35em 1em 0.35em 1em;
        background: url('./img/UI/Button_Book_Choose.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*5.5)*4.414634146341463)calc(var(--vh,1vh)*5.5);
        border: 0;
        border-radius: 0;
        cursor: pointer;
        margin: calc(var(--vh,1vh)*5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
    }

    select::-ms-expand {
        display: none;
    }

    #TutorialPracticeContentLabel {
        font-size: calc(var(--vh,1vh)*2.2);
        color: maroon;
        font-weight: bold;
        margin: 0 auto 0 auto;
    }

    #TutorialSingleContentLabel {
        font-size: calc(var(--vh,1vh)*2);
        color: maroon;
        font-weight: bold;
        margin: 0 auto 0 auto;
    }

    /*#region 雙人進關面板*/
    #BattleModeRanking {
        margin: calc(var(--vh,1vh)*-5.5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*82.5);
        position: absolute;
        display: none;
        right: -50%;
        top: -5%;
    }

    #BattleRank1ContentDiv, .IntroRankContentDiv1 {
        margin: calc(var(--vh,1vh)*9) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-25);
        position: absolute;
    }

    #BattleRank2ContentDiv, .IntroRankContentDiv2 {
        margin: calc(var(--vh,1vh)*22) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-25);
        position: absolute;
    }

    #BattleRank3ContentDiv, .IntroRankContentDiv3 {
        margin: calc(var(--vh,1vh)*35) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-25);
        position: absolute;
    }

    .BattleRankScoreImage {
        background: url('./img/UI/Frame_Rank_Score.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*3.5)*3.2) calc(var(--vh,1vh)*3.5);
        width: calc(calc(var(--vh,1vh)*3.5)*3.2);
        height: calc(var(--vh,1vh)*3.5);
        position: absolute;
        z-index: 2;
        margin: calc(var(--vh,1vh)*6.5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-1.25);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .BattleRankScoreContent {
        font-size: calc(var(--vh,1vh)*1.8);
        z-index: 2;
        color: white;
        white-space: nowrap;
        text-align: center;
    }

    #BattleRankIcon {
        background: url('./img/UI/Button_Rank.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*8)*1.051724137931034) calc(var(--vh,1vh)*8);
        width: calc(calc(var(--vh,1vh)*8)*1.051724137931034);
        height: calc(var(--vh,1vh)*8);
        position: absolute;
        margin: calc(var(--vh,1vh)*48) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-25);
        border: none;
    }
    /*#endregion 雙人進關面板*/

    /*#region 通用進關排行面板 (爬榜+活動共用 class) */
    #CompetitiveModeRanking,
    #EventModeRanking {
        margin: calc(var(--vh,1vh)*-5.5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*82.5);
        position: absolute;
        display: none;
        right: -50%;
        top: -5%;
    }

    .IntroRankScoreImage {
        background: url('./img/UI/Frame_Rank_Score.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*3.5)*3.2) calc(var(--vh,1vh)*3.5);
        width: calc(calc(var(--vh,1vh)*3.5)*3.2);
        height: calc(var(--vh,1vh)*3.5);
        position: absolute;
        z-index: 2;
        margin: calc(var(--vh,1vh)*6.5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-1.25);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .IntroRankScoreContent {
        font-size: calc(var(--vh,1vh)*1.8);
        z-index: 2;
        color: white;
        white-space: nowrap;
        text-align: center;
    }

    .IntroRankIcon {
        background: url('./img/UI/Button_Rank.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*8)*1.051724137931034) calc(var(--vh,1vh)*8);
        width: calc(calc(var(--vh,1vh)*8)*1.051724137931034);
        height: calc(var(--vh,1vh)*8);
        position: absolute;
        margin: calc(var(--vh,1vh)*48) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-25);
        border: none;
    }
    /*#endregion 通用進關排行面板*/

    #BattleInvitationArea {
        position: absolute;
        display: none;
        bottom: 11vh;
        /* margin: calc(var(--vh,1vh)*39) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*8.5); */
    }

    #BattleInvitationCodeInputBoxContent {
        margin: calc(var(--vh,1vh)*-5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*10);
    }

    #BattleInvitationContentDiv {
        background: url('./img/UI/Frame_Text_1.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*10)*3.75609756097561) calc(var(--vh,1vh)*10);
        width: calc(calc(var(--vh,1vh)*10)*3.75609756097561);
        height: calc(var(--vh,1vh)*10);
        user-select: none; /* 標準語法 */
        -webkit-user-select: none; /* Safari */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* IE/Edge */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: calc(var(--vh,1vh)*0.3);
    }

    #BattleInvitationLabel {
        font-size: calc(var(--vh,1vh)*2);
        z-index: 2;
        line-height: 1;
    }

    #BattleInvitationHint {
        font-size: calc(var(--vh,1vh)*1.85);
        z-index: 2;
        line-height: 1;
    }
    /*#endregion*/

    /*#region 雙人結算面板的推薦區*/
    .BattleRecommonFrame {
        margin: calc(var(--vh,1vh)*14) calc(var(--vh,1vh)*0) auto calc(var(--vh,1vh)*7);
        position: absolute;
    }

    .BattleLineStickerFrame {
        width: calc(calc(var(--vh,1vh)*13)*2.084905660377358);
        height: calc(var(--vh,1vh)*13);
        background: url('./img/UI/Frame_Text_2.png');
        background-size: calc(calc(var(--vh,1vh)*13)*2.084905660377358) calc(var(--vh,1vh)*13);
        margin: calc(var(--vh,1vh)*20) calc(var(--vh,1vh)*0) auto calc(var(--vh,1vh)*49);
        position: absolute;
    }

    .BattleLineStickerExample {
        width: calc(calc(var(--vh,1vh)*6)*1);
        height: calc(var(--vh,1vh)*6);
        background: url('./img/Questions/GIF/01/4.gif');
        background-size: calc(calc(var(--vh,1vh)*6)*1) calc(var(--vh,1vh)*6);
        position: absolute;
        margin: calc(var(--vh,1vh)*1.5) auto auto calc(var(--vh,1vh)*4);
    }

    .BattleLineStickerText {
        font-size: calc(var(--vh,1vh)*1.5);
        color: white;
        font-weight: bold;
        margin: calc(var(--vh,1vh)*2) auto auto calc(var(--vh,1vh)*12);
        position: absolute;
        width: calc(var(--vh,1vh)*11);
    }

    .BattleQRcodeFrame {
        width: calc(calc(var(--vh,1vh)*16)*1.674242424242424);
        height: calc(var(--vh,1vh)*16);
        background: url('./img/UI/Frame_Text_3.png');
        background-size: calc(calc(var(--vh,1vh)*16)*1.674242424242424) calc(var(--vh,1vh)*16);
        margin: calc(var(--vh,1vh)*33) calc(var(--vh,1vh)*0) auto calc(var(--vh,1vh)*49);
        position: absolute;
    }

    .BattleQRcodeImg {
        width: calc(calc(var(--vh,1vh)*7)*1);
        height: calc(var(--vh,1vh)*7);
        background: url('./img/UI/QRcode.png');
        background-size: calc(calc(var(--vh,1vh)*7)*1) calc(var(--vh,1vh)*7);
        margin: calc(var(--vh,1vh)*3) calc(var(--vh,1vh)*4) auto calc(var(--vh,1vh)*15.5);
        position: absolute;
    }

    .BattleQRcodeText {
        font-size: calc(var(--vh,1vh)*1.5);
        color: white;
        font-weight: bold;
        margin: calc(var(--vh,1vh)*4) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*4);
        width: calc(var(--vh,1vh)*11);
        position: absolute;
    }
    /*#endregion*/

    /*#region 雙人模式 遊戲中 玩家資料(共同)*/

    .pvpModePlayerArea {
        top: calc(var(--vh,1vh)*50);
        position: relative;
        /*        display: none;*/
    }

    .pvpModePlayerFrame {
        width: calc(calc(var(--vh,1vh)*25)*1.024844720496894);
        height: calc(var(--vh,1vh)*25);
    }

    .pvpModePlayerIdDiv {
        width: calc(var(--vh,1vh)*35);
        font-size: calc(var(--vh,1vh)*2);
        color: white;
        font-weight: bold;
        position: absolute;
        font-family: PumpkinGames;
        top: calc(var(--vh,1vh)*17.5);
        text-align: center;
    }

    .pvpModePlayerAvatorDiv {
        width: calc(var(--vh,1vh)*10);
        height: calc(var(--vh,1vh)*10);
    }

    .PvpProgressBar {
        position: absolute;
        width: calc(calc(var(--vh,1vh)*3)*10.81081081081081);
        height: calc(var(--vh,1vh)*3);
        top: calc(var(--vh,1vh)*16);
        left: calc(var(--vh,1vh)*-4);
        background: url('./img/UI/cbgame-16_1.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*3)*10.81081081081081) calc(var(--vh,1vh)*3);
        z-index: 3;
    }

    .PvpProgressBarCounter {
        height: 100%;
        /*background:white;*/
        float: left;
        background: url('./img/UI/cbgame-17_1.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*3)*10.81081081081081) calc(var(--vh,1vh)*3);
    }

    .pvpModeScoreAnimArea {
        margin: calc(var(--vh,1vh)*-20) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*5);
        position: absolute;
        display: none;
    }

    .ScorePlus {
        width: calc(calc(var(--vh,1vh)*4)*1.087912087912088);
        height: calc(var(--vh,1vh)*4);
        background: url('./img/UI/Number/Fever_plus.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*4)*1.087912087912088) calc(var(--vh,1vh)*4);
        position: absolute;
    }

    .PvpScoreLoserNumber,
    .PvpScoreWinnerNumber {
        width: calc(calc(var(--vh,1vh)*5)*0.796);
        height: calc(var(--vh,1vh)*5);
        background-size: calc(calc(var(--vh,1vh)*5)*0.796) calc(var(--vh,1vh)*5);
        position: absolute;
    }
    .PvpScoreLoserNumber  { background-image: url('./img/UI/Number/Fever2_1.png'); background-repeat: no-repeat; }
    .PvpScoreWinnerNumber { background-image: url('./img/UI/Number/Fever_1.png'); background-repeat: no-repeat; }

    #pvpModeHost {
        padding: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*13) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*4);
    }

    #pvpModeVisitor {
        padding: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*13) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*4);
    }

    /*#endregion*/

    /*#region 雙人模式 遊戲中 對手區*/
    #pvpModeVisitorDiv {
        right: calc(var(--vw,1vw)*20);
        position: absolute;
        z-index: 5;
    }

    #pvpModeFrameVisitor {
        margin: calc(var(--vh,1vh)*-10) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
        position: absolute;
        background: url('./img/UI/Frame_PK_2.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*25)*1.024844720496894)calc(var(--vh,1vh)*25);
    }

    #pvpModeVisitorScoreArea {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
        position: absolute;
    }

    #VisitorScoreNumberOne {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*3);
        position: absolute;
    }

    #VisitorScoreNumberTwo {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*6.75);
        position: absolute;
    }

    #VisitorScoreNumberThree {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*10.5);
        position: absolute;
    }

    #VisitorScoreNumberFour {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*14.25);
        position: absolute;
    }

    #VisitorScoreNumberFive {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*18);
        position: absolute;
    }

    #pvpModeVisitor {
    }

    #pvpModeVisitorAvator {
        background: url('./img/Animal/Lucky_A.png') no-repeat;
        background-size: contain;
        width: calc(var(--vh,1vh)*15);
        height: calc(var(--vh,1vh)*15);
        margin: calc(var(--vh,1vh)*2) calc(var(--vh,1vh)*0) auto calc(var(--vh,1vh)*6);
        position: absolute;
    }

    #VisitorBarCounter {
        width: 0%;
        position: absolute;
    }

    #VisitorScorePlus {
        margin: calc(var(--vh,1vh)*0.5) calc(var(--vh,1vh)*-1) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-1.5);
        position: absolute;
    }

    #VisitorScoreAnimNumberOne {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*3);
        position: absolute;
    }

    #VisitorScoreAnimNumberTwo {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*7);
        position: absolute;
    }

    #VisitorScoreAnimNumberThree {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*11);
        position: absolute;
    }

    #VisitorScoreAnimNumberFour {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*15);
        position: absolute;
    }
    /*#endregion*/

    /*#region 雙人模式 遊戲中 玩家區*/
    #pvpModeHostDiv {
        left: calc(var(--vw,1vw)*10);
        position: absolute;
        z-index: 5;
    }

    #pvpModeFrameHost {
        margin: calc(var(--vh,1vh)*-10) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
        position: absolute;
        background: url('./img/UI/Frame_PK_1.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*25)*1.024844720496894)calc(var(--vh,1vh)*25);
    }

    #pvpModeHostScoreArea {
        /*        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
        position: absolute;*/
    }

    .pvpModeScoreArea {
        top: calc(var(--vh,1vh)*-4);
        position: absolute;
        z-index: 10;
    }

    #HostScoreNumberOne {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*3);
        position: absolute;
    }

    #HostScoreNumberTwo {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*6.75);
        position: absolute;
    }

    #HostScoreNumberThree {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*10.5);
        position: absolute;
    }

    #HostScoreNumberFour {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*14.25);
        position: absolute;
    }

    #HostScoreNumberFive {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*18);
        position: absolute;
    }

    #pvpModeHost {
    }

    #pvpModeHostAvator {
        background: url('./img/Animal/Lucky_A.png') no-repeat;
        background-size: contain;
        width: calc(var(--vh,1vh)*15);
        height: calc(var(--vh,1vh)*15);
        margin: calc(var(--vh,1vh)*2) calc(var(--vh,1vh)*0) auto calc(var(--vh,1vh)*6);
        position: absolute;
    }

    #HostBarCounter {
        width: 0%;
        position: absolute;
    }

    #HostScorePlus {
        margin: calc(var(--vh,1vh)*0.5) calc(var(--vh,1vh)*-1) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-1.5);
        position: absolute;
    }

    #HostScoreAnimNumberOne {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*3);
        position: absolute;
    }

    #HostScoreAnimNumberTwo {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*7);
        position: absolute;
    }

    #HostScoreAnimNumberThree {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*11);
        position: absolute;
    }

    #HostScoreAnimNumberFour {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*15);
        position: absolute;
    }
    /*#endregion*/
    .CommonHintFrame {
        width: calc(calc(var(--vh,1vh)*28)*1.700787401574803);
        height: calc(var(--vh,1vh)*28);
        background: url('./img/UI/Frame_Text_Normal.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*28)*1.700787401574803) calc(var(--vh,1vh)*28);
        /*    z-index: 100;*/
        /*    position: absolute;*/
        display: none;
        /*    top: 36%;
    left: 36%;*/
        margin: calc(var(--vh,1vh)*38) auto auto auto;
        padding: 0px;
        /*    float: right;*/
    }

    /*#region 通用進關面板*/
    #IntroPanel{
        width: 75%;
        min-width: calc(calc(var(--vh, 1vh) * 60) * 0.922); /* 最好拿掉這行，連intro一起修改 */
        /* aspect-ratio: 426 / 462; */
        display: flex;
        justify-content: center;
        position: absolute;
        top: 25%;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .intro {
        width: calc(calc(var(--vh,1vh)*60)*0.922);
        height: calc(var(--vh,1vh)*60);
        background: url('./img/UI/Frame_Play.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*60)*0.922) calc(var(--vh,1vh)*60);
        /*background: rgba(255,255,255,0.9);*/
        /*        white-space: pre-line;*/
        /* margin: calc(var(--vh,1vh)*20) auto 0 auto; */
        font-weight: bolder;
        font-size: calc(var(--vh,1vh)*2.75);
        line-height: calc(var(--vh,1vh)*5.5);
        font-family: "微軟正黑體";
        padding: 0px;
        justify-content: center;
        display: flex;        
        position: relative;
    }

    .introHeader {
        width: calc(calc(var(--vh,1vh)*65)*0.922*0.85);
        height: calc(calc(var(--vh,1vh)*65)*0.922*0.85*0.346);
        background: url('./img/UI/Title_RedRibbon.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*65)*0.922*0.85) calc(calc(var(--vh,1vh)*65)*0.922*0.85*0.346);
        /*    margin: calc(var(--vh,1vh)*-10) auto 0 calc(var(--vh,1vh)*4);*/
        /* right: calc(var(--vh,1vh)*4); */
        top: calc(var(--vh,1vh)*-5.5);
        position: absolute;
    }

    .IntroBtnClose {
        width: calc(var(--vh,1vh)*6);
        height: calc(var(--vh,1vh)*6);
        background: url('./img/UI/Button_Close_2.png ') no-repeat;
        background-size: calc(var(--vh,1vh)*6) calc(var(--vh,1vh)*6);
        /*    margin: calc(var(--vh,1vh)*-17) auto 0 calc(var(--vh,1vh)*44.5);*/
        position: absolute;
        z-index: 2;
        top: calc(var(--vh,1vh)*-1.5);
        right: calc(var(--vh,1vh)*-0.35);
        cursor: pointer;
    }

    .IntroBtnClose:active {
        animation: BounceClick 0.5s ease;
    }

    .introImage {
        width: calc(calc(var(--vh,1vh)*65)*0.922*0.65);
        height: calc(calc(var(--vh,1vh)*65)*0.922*0.65*0.539);
        background: url('./img/UI/Logo.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*65)*0.922*0.65) calc(calc(var(--vh,1vh)*65)*0.922*0.65*0.539);
        /*    margin: calc(var(--vh,1vh)*-23) auto 0 calc(var(--vh,1vh)*9);*/
        position: absolute;
        /* right: calc(var(--vh,1vh)*10.5); */
        top: calc(var(--vh,1vh)*-13);
    }

    .modePanel {
        width: calc(calc(var(--vh,1vh)*55)*0.922*0.4);
        height: calc(calc(var(--vh,1vh)*55)*0.922*0.4*0.291);
        background: url('./img/UI/Title_Mode.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*55)*0.922*0.4) calc(calc(var(--vh,1vh)*55)*0.922*0.4*0.291);
        /*    margin: calc(var(--vh,1vh)*-7) auto 0 auto;*/
        padding: 0.4em 1em 1em 1em;
        text-align: center;
        font-size: calc(var(--vh,1vh)*1.8);
        line-height: calc(var(--vh,1vh)*3);
        font-weight: bold;
        color: white;
        border: 0;
        font-family: PumpkinGames;
    }

    #modePanelDiv {
        /* margin: calc(var(--vh,1vh)*5) auto 0 calc(var(--vh,1vh)*20.5); */
        position: absolute;
        top: calc(var(--vh,1vh)*5.4);
        /*        top: -3%;*/
    }

    /* 進關面板中央底圖：貼近 modePanelId、左右縮至餅乾框內緣，四模式共用 */
    #introWordContent {
        margin: 0;
        position: absolute;
        padding: 0;
        font-size: calc(var(--vh,1vh)*2);
        font-weight: bold;
        font-family: PumpkinGames;
        color: maroon;
        line-height: 125%;
        top: calc(var(--vh,1vh)*10.5);
        left: 50%;
        transform: translateX(-50%);
        width: calc(calc(var(--vh,1vh)*60)*0.922*0.72);
        height: calc(var(--vh,1vh)*40);
        display: flex;
        align-items: stretch;
        justify-content: stretch;
        box-sizing: border-box;
    }

    /* 進關面板裝飾圖容器：填滿 introWordContent，零邊距 */
    .introDecoWrapper {
        position: relative;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .introDecoImg {
        position: absolute;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        box-sizing: border-box;
    }

    /* 底板：從容器頂部 4vh 開始，高63%；用vh固定，避免%在直立手機跑版 */
    .introDecoBase {
        width: 100% !important;
        height: 63% !important;
        top: calc(var(--vh,1vh)*4) !important;
        left: 0 !important;
        bottom: auto !important;
        right: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background-size: cover !important;
        background-position: center !important;
    }
    /* 活動模式底板縮小10% */
    .introDecoBase.introDecoBaseEvent {
        transform: scale(0.9) !important;
        transform-origin: center !important;
    }
    /* 雙人模式底板高度 58% */
    .introDecoBase.introDecoBaseBattle {
        height: 58% !important;
    }
    /* 活動模式：introWordContent 距離頂部縮減 25% (原10.5vh → 7.875vh) */
    .intro[data-mode="event"] #introWordContent {
        top: calc(var(--vh,1vh)*7.875) !important;
    }

    /* 進關大聲公（左下，與對戰裝飾光暈不同 DOM） */
    .intro-speaker-anchor {
        position: absolute;
        left: calc(var(--vh,1vh)*1.2);
        bottom: calc(var(--vh,1vh)*1.2);
        z-index: 8;
        width: calc(var(--vh,1vh)*9);
        height: calc(var(--vh,1vh)*9);
        /* 上移顯示高度 1/2、略往右；另再左移顯示高度 1/5（9vh/5）（與光圈一併移動） */
        transform: translate(calc(var(--vh,1vh)*2.7), calc(var(--vh,1vh)*-4.5));
    }

    .intro-speaker-deco-halo {
        position: absolute;
        left: 50%;
        top: 50%;
        /* transform：見共用 introSpeakerHaloSpin（含置中 translate） */
        width: calc(var(--vh,1vh)*15);
        height: calc(var(--vh,1vh)*15);
        background: url('./img/UI/Decoration/Decoration_Battle_1.png') no-repeat center;
        background-size: contain;
        pointer-events: none;
        z-index: 0;
    }

    .intro-speaker-btn {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        border: none;
        padding: 0;
        cursor: pointer;
        background: url('./img/UI/Button_Speaker.png') no-repeat center;
        background-size: contain;
        background-color: transparent;
    }

    /* 動畫 class 與 keyframes 已移至 media query 外部（寬窄版共用），見下方 */

    #introTodayCanPlayCountHintDiv {
        width: calc(var(--vh,1vh)*45);
        position: absolute;
        text-align: center;
        left: 50%;
        transform: translateX(-50%);
        top: calc(var(--vh,1vh)*41);
    }

    #introTodayCanPlayCountHint {
        /* padding: 3.5em 3em 4.5em 0.5em; */
        font-size: calc(var(--vh,1vh)*2);
        font-weight: bold;
        font-family: PumpkinGames;
        color: maroon;
        line-height: calc(var(--vh,1vh)*3);
        top: calc(var(--vh,1vh)*4);
    }

    #introSubWordDiv {
        /*margin: calc(var(--vh,1vh)*-4) auto 0 auto;*/
        width: calc(var(--vh,1vh)*28);
        position: absolute;
        text-align: right;
        /* padding: calc(var(--vh,1vh)*41) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*10); */
        display: flex;
        align-items: center;
        justify-content: center;
        bottom: 14vh;
    }

    #introSubWordContent {
        font-size: calc(var(--vh,1vh)*1.8);
        font-weight: initial;
        font-weight: bold;
        margin-left: 3vh;
    }

    .introQRCode {
        top: 70%;
        left: 10%;
        width: 100px;
        height: 100px;
        background: url('./img/onlink_to_rs67jz_small.png') no-repeat;
    }

    /*.buttonShareStyle {
        width: calc(var(--vh,1vh)*7.5);
        height: calc(var(--vh,1vh)*7.5);
        display: block;
        border: none;
        background: url('./img/UI/Button_Share.png');
        background-size: calc(var(--vh,1vh)*7.5) calc(var(--vh,1vh)*7.5);*/
    /*        margin: calc(var(--vh,1vh)*-10) auto 0 auto;*/
    /*}

    .buttonStyle {
        width: calc(calc(var(--vh,1vh)*6)*2.31);
        height: calc(var(--vh,1vh)*6);
        display: block;
        border: none;
        background: url('./img/UI/Button_Play.png');
        background-size: calc(calc(var(--vh,1vh)*6)*2.31) calc(var(--vh,1vh)*6);*/
    /*        margin: calc(var(--vh,1vh)*0) auto 0 auto;*/
    /*font-size: calc(var(--vh,1vh)*2.5);
        color: white;
        font-weight: bold;
    }

    .buttonPlayConfirmStyle {
        width: calc(calc(var(--vh,1vh)*7.5)*2.31);
        height: calc(var(--vh,1vh)*7.5);
        display: block;
        border: none;
        background: url('./img/UI/Button_Orange.png');
        background-size: calc(calc(var(--vh,1vh)*7.5)*2.31) calc(var(--vh,1vh)*7.5);*/
    /*        margin: calc(var(--vh,1vh)*-10) auto 0 auto;*/
    /*font-size: calc(var(--vh,1vh)*3);
        color: white;
        font-weight: bold;
    }*/

    #DiffictyDefinitonAreaComboBox {
        /* position: absolute; */
        /* margin: calc(var(--vh,1vh)*-35) auto 0 calc(var(--vh,1vh)*29); */
    }

    #DiffictyDefinitonAreaSlider {
        position: absolute;
        bottom: 13%;
        display: flex;
        align-items: center;
    }

    #brownLine {
        /* margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*1);
        position: absolute; */
        /* z-index: 1; */
        width: calc(calc(var(--vh,1vh)*4)*2.7058);
        height: calc(var(--vh,1vh)*4);
        display: block;
        border: none;
        background: url('./img/UI/Button_Choose_01.png');
        background-size: calc(calc(var(--vh,1vh)*4)*2.7058) calc(var(--vh,1vh)*4);
        /*            margin: calc(var(--vh,1vh)*-10) auto 0 auto;*/
        margin-left: -4vh;
        margin-right: -4vh;
        z-index: 0;
    }

    #EasyBtn {
        /* margin: calc(var(--vh,1vh)*-1) auto 0 calc(var(--vh,1vh)*-1);
        position: absolute; */
        z-index: 1;
        width: calc(calc(var(--vh,1vh)*6)*0.9841);
        height: calc(var(--vh,1vh)*6);
        display: block;
        border: none;
        background: url('./img/UI/Button_Choose_04.png');
        background-size: calc(calc(var(--vh,1vh)*6)*0.9841) calc(var(--vh,1vh)*6);
        /*         margin: calc(var(--vh,1vh)*-10) auto 0 auto;*/
    }

    #HardBtn {
        /* margin: calc(var(--vh,1vh)*-1) auto 0 calc(var(--vh,1vh)*7);
        position: absolute; */
        z-index: 1;
        width: calc(calc(var(--vh,1vh)*6)*0.9841);
        height: calc(var(--vh,1vh)*6);
        display: block;
        border: none;
        background: url('./img/UI/Button_Choose_05.png');
        background-size: calc(calc(var(--vh,1vh)*6)*0.9841) calc(var(--vh,1vh)*6);
        /*            margin: calc(var(--vh,1vh)*-10) auto 0 auto;*/
    }

    #EventWeeklyRewardDiv {
        /* margin: calc(var(--vh,1vh)*36) auto 0 calc(var(--vh,1vh)*32);
        display: none; */
        position: absolute;
        bottom: 16vh;
        left: 62%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #WeeklyRewardsText {
        width: auto;
        white-space: nowrap;
        font-size: calc(var(--vh,1vh)*1);
        font-weight: bold;
        font-family: PumpkinGames;
        color: maroon;
        line-height: calc(var(--vh,1vh)*3);
    }

    #WeeklyRewardImage {
        margin: 0 0 0 calc(var(--vh,1vh)*3);
        width: calc(calc(var(--vh,1vh)*12)*0.9414634146341463*0.81);
        height: calc(var(--vh,1vh)*12*0.81);
        background: url('./img/UI/Icon_Gold_box.png');
        background-size: calc(calc(var(--vh,1vh)*12)*0.9414634146341463*0.81) calc(var(--vh,1vh)*12*0.81);
    }
    /*#endregion*/

    #buttonDiv {
        /*    top: 87%;*/
        width: 75%;
        position: absolute;
        bottom: -7vh;
        display: flex;
        justify-content: space-around;
    }
    #RoomButtonPlay {
        /* margin: calc(var(--vh,1vh)*-7.5) auto 0 calc(var(--vh,1vh)*11); */
        background: url('./img/UI/Button_Orange.png');
        background-size: calc(calc(var(--vh,1vh)*7.5)*2.31) calc(var(--vh,1vh)*7.5);
    }
    #GoogleButtonDiv {
        text-align: center;
        margin: calc(var(--vh,1vh)*20) auto 0 calc(var(--vh,1vh)*0);
        position: absolute;
        padding: calc(var(--vh,1vh)*0)calc(var(--vh,1vh)*13)calc(var(--vh,1vh)*0)calc(var(--vh,1vh)*13);
    }

    #FacebookButtonDiv {
        text-align: center;
        margin: calc(var(--vh,1vh)*11) auto 0 calc(var(--vh,1vh)*0);
        position: absolute;
        padding: calc(var(--vh,1vh)*0)calc(var(--vh,1vh)*10)calc(var(--vh,1vh)*0)calc(var(--vh,1vh)*13);
    }
}

/* ===== 進關面板裝飾動畫：寬版/窄版共用，放在 media query 外部 ===== */
/* 爬榜：手指上下滑動、頭像放大縮小 */
.introDecoFinger { animation: introDecoFingerSlide 1.5s ease-in-out infinite; }
.introDecoAvatar { animation: introDecoScale 1.2s ease-in-out infinite; }
/* 雙人：光暈旋轉、獎盃搖晃 */
.introDecoHalo { animation: introDecoRotate 4s linear infinite; }
.introDecoTrophy { animation: introDecoSway 2s ease-in-out infinite; }
/* 活動：骰子搖晃、問號放大縮小 */
.introDecoDice { animation: introDecoShake 2s ease-in-out infinite; }
.introDecoQuestion { animation: introDecoScale 1.2s ease-in-out infinite; }
/* 活動類型B：LOGO 輪播（同位置，從左滑入→停留→往左滑出，LOGO2 延遲半個週期） */
.introDecoLogo1 { animation: introDecoLogoCarousel 6s ease-in-out infinite; animation-fill-mode: both; }
.introDecoLogo2 { animation: introDecoLogoCarousel 6s ease-in-out infinite; animation-delay: 3s; animation-fill-mode: both; }
/* 練習：無限體力放大縮小 */
.introDecoInfinite { animation: introDecoScale 1.2s ease-in-out infinite; }

@keyframes introDecoFingerSlide {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
@keyframes introDecoScale {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
@keyframes introDecoRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes introDecoSway {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}
@keyframes introDecoShake {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(-4px) rotate(-2deg); }
    75% { transform: translateX(4px) rotate(2deg); }
}
@keyframes introDecoLogoCarousel {
    0%   { opacity: 0; transform: translateX(-110%); }  /* 從左方隱藏開始 */
    8%   { opacity: 1; transform: translateX(0); }      /* 滑入完成，顯示 */
    42%  { opacity: 1; transform: translateX(0); }      /* 停留 */
    50%  { opacity: 0; transform: translateX(-110%); }  /* 往左滑出、漸隱 */
    100% { opacity: 0; transform: translateX(-110%); }  /* 等待輪替 */
}
/* ===== end 進關面板裝飾動畫 ===== */

/* ===== 進關大聲公：進場 scale／光暈慢轉／約每 3s 左右搖 4 次（寬窄共用；.intro-speaker-inner 包住按鈕+光暈） ===== */
@keyframes introSpeakerPop {
    0% { transform: scale(0); }
    68% { transform: scale(1.07); }
    100% { transform: scale(1); }
}
@keyframes introSpeakerHaloSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* 週期 3s：前段約 0.54s 內 4 次快搖，其餘靜止 */
@keyframes introSpeakerShakeLoop {
    0%, 18%, 100% { transform: translateX(0); }
    2.25% { transform: translateX(-11%); }
    4.5% { transform: translateX(11%); }
    6.75% { transform: translateX(-8%); }
    9% { transform: translateX(8%); }
    11.25% { transform: translateX(-5%); }
    13.5% { transform: translateX(5%); }
    15.75% { transform: translateX(0); }
}

.intro-speaker-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-origin: center center;
    box-sizing: border-box;
}

.intro-speaker-deco-halo,
.announcement-speaker-deco-halo {
    animation: introSpeakerHaloSpin 22s linear infinite;
}

.intro-speaker-anchor:not(.CloseUI):not(.intro-speaker-entrance-play):not(.intro-speaker-entrance-done) .intro-speaker-inner {
    transform: scale(0);
}

.intro-speaker-anchor.intro-speaker-entrance-play .intro-speaker-inner {
    animation: introSpeakerPop 0.52s cubic-bezier(0.34, 1.45, 0.64, 1) forwards;
}

.intro-speaker-anchor.intro-speaker-entrance-done .intro-speaker-inner {
    transform: scale(1);
}

.intro-speaker-anchor.intro-speaker-entrance-done:not(.CloseUI) .intro-speaker-btn {
    animation: introSpeakerShakeLoop 3s ease-in-out infinite;
}

/*手機*/
@media (aspect-ratio < 1/1) {
    .wrap {
        width: 420px;
        height: 680px;
        margin: 10px auto;
        top: calc(var(--vh,1vh)*12);
        left: 2%;
        padding: 0px;
        position: relative;
    }

    .card {
        margin: 3px;
        width: calc(calc(var(--vw,1vw)*100)/4.5);
        height: calc(calc(var(--vw,1vw)*100)/4.5);
    }

    .card_TwoOfOneLine {
        margin: 3px;
        width: calc(calc(var(--vw,1vw)*100)/3);
        height: calc(calc(var(--vw,1vw)*100)/3);
    }

    .card_ThreeOfOneLine {
        margin: 3px;
        width: calc(calc(var(--vw,1vw)*100)/3.2);
        height: calc(calc(var(--vw,1vw)*100)/3.2);
    }

    .card_RatioLessThen051 {
        margin: 3px;
        width: calc(calc(var(--vw,1vw)*100)/3.15);
        height: calc(calc(var(--vw,1vw)*100)/3.15);
    }

    .card_Ratio051_056 {
        margin: 3px;
        width: calc(calc(var(--vw,1vw)*100)/2.6);
        height: calc(calc(var(--vw,1vw)*100)/2.6);
    }

    .card_Ratio056_061 {
        margin: 3px;
        width: calc(calc(var(--vw,1vw)*100)/2.8);
        height: calc(calc(var(--vw,1vw)*100)/2.8);
    }

    .card_Ratio061_064 {
        margin: 3px;
        width: calc(calc(var(--vw,1vw)*100)/3.15);
        height: calc(calc(var(--vw,1vw)*100)/3.15);
    }

    .card_Ratio064_075 {
        margin: 3px;
        width: calc(calc(var(--vw,1vw)*100)/3.25);
        height: calc(calc(var(--vw,1vw)*100)/3.25);
    }

    .card_Ratio075_08 {
        margin: 3px;
        width: calc(calc(var(--vw,1vw)*100)/3.65);
        height: calc(calc(var(--vw,1vw)*100)/3.65);
    }

    .card_Ratio08_087 {
        margin: 3px;
        width: calc(calc(var(--vw,1vw)*100)/3.9);
        height: calc(calc(var(--vw,1vw)*100)/3.9);
    }

    .card_Ratio087_109 {
        margin: 3px;
        width: calc(calc(var(--vw,1vw)*100)/4.25);
        height: calc(calc(var(--vw,1vw)*100)/4.25);
    }

    .cardFor16_20 {
        margin: 2px;
        width: calc(calc(var(--vw,1vw)*100)/4.2);
        height: calc(calc(var(--vw,1vw)*100)/4.2);
    }

    #tiktokContainer {
        position: absolute;
        margin: auto;
        top: 3%;
        /*bottom: 82%;*/
        left: 0;
        right: 0;
        z-index: 3;
    }

    #tiktok {
        position: absolute;
        width: 60vw;
        height: calc(60vw / 10.81);
        margin: auto;
        top: 3%;
        /*bottom: 82%;*/
        left: 0;
        right: 0;
        background: url('./img/UI/cbgame-16_1.png') no-repeat;
        background-size: 100% 100%;
        z-index: 3;
    }
    
    #itemblock {
        position: absolute;
        width: 50vw;
        height: 15vw;
        left: calc(50% - 30vw); /* 切齊計時器 #tiktok 左側 (計時器寬 60vw 置中) */
        top: 5%;
        display: flex;
        align-items: center;
        gap: 2.5vw;
        z-index: 3;
    }

    #hintitem {
        width: 24vw;
        aspect-ratio: 139 / 44;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 2vw;
        flex-shrink: 0;
        background: url('./img/UI/Button_Main_AboutUs.png') no-repeat center/contain;
    }
    
    #hintitem-img {
        width: 10vw;
        height: 10vw;
        background: url('./img/UI/Button_HintCard.png') no-repeat center/contain;
        flex-shrink: 0;
        position: relative;
        left: -2vw;
    }

    #lifecount {
        width: 24vw;
        aspect-ratio: 139 / 44;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 2vw;
        flex-shrink: 0;
        background: url('./img/UI/Button_Main_AboutUs.png') no-repeat center/contain;
    }
    
    #lifecount-img {
        width: 10vw;
        height: 10vw;
        background: url('./img/UI/Icon_Energy.png') no-repeat center;
        background-size: 58% 75%;
        flex-shrink: 0;
        position: relative;
        left: -2vw;
    }
    
    .item-img_mask {
        filter: brightness(0.5);
    }

    .item-count {
        color: brown;
        font-weight: bold;
        font-size: 4vw;
        flex-shrink: 0;
        position: relative;
        right: 1vw;
        line-height: 1;
    }

    #counter {
        width: 100%;
        height: 100%;
        /*background:white;*/
        float: left;
        background: url('./img/UI/cbgame-17_1.png') no-repeat;
        background-size: 60vw calc(60vw / 10.81); /* 固定為 #tiktok 的完整尺寸，靠 width% 裁切而非縮放 */
    }


    /*          .card {
              margin-right: 10px;
              margin-bottom: 10px;
          }*/

    /*#region 窄版首頁初始排版 */ 
    .StartPageParentDiv {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
        height: 100dvh; /* 現代瀏覽器：動態視窗高度，自動適應 iOS Safari 實際可視區域 */
        top: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-sizing: border-box;
    }

    .MainCanvas {
        position: absolute;
        height: 100%;
        width: 100%;
        overflow: hidden; /* 防止 LOGO 寬度溢出造成重新整理後水平偏移 */
    }
    
    #HeaderLogo {
        position: relative;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1; 
        min-width: 60vh;
        min-width: 60dvh; /* iOS Safari: 與按鈕區 top:40dvh 使用相同的動態視窗單位，避免 vh/dvh 差異導致 LOGO 壓到按鈕 */
        max-width: 80vh;
        max-width: 80dvh;
    }

        .StartPageHeaderImage {
            width: 100%;
            aspect-ratio: 294/137;
            background: url('./img/UI/Decor_Main_Ribbon.png') no-repeat;
            background-size: contain;
            padding: 0px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: -3vw;
        }


        .StartPageLogoImage {
            width: 72%;
            aspect-ratio: 393 / 212;
            background: url('./img/UI/Logo.png') no-repeat;
            background-size: contain !important;
            padding: 0px;
            margin-top: calc(15vh - 27vw);
        }

    #LoginEnter {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 2;
    }

        .StartPageUserImage {
            width: calc(var(--vw,1vw)*15);
            height: calc(var(--vw,1vw)*15);
            background: url('./img/UI/Frame_Main_Login.png') no-repeat;
            background-size: contain !important;
            padding: 0px;
            border-radius: 50%
        }

        #StartPageUserLoginDiv {
            position: absolute;
            z-index: 2;
        }

        .StartPageUserLoginStyle {
            width: calc(calc(var(--vw,1vw)*5)*3.058823);
            height: calc(var(--vw,1vw)*5);
            display: block;
            border: none;
            background: url('./img/UI/Button_Main_Login.png');
            background-size: contain;
            margin: calc(var(--vw,1vw)*11) auto 0 auto;
            font-size: calc(var(--vw,1vw)*2);
            color: white;
            font-weight: bold;
            font-family: PumpkinGames;
        }

    #RightDeco {
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 0;
        transition: opacity 1.5s ease-in-out;
        opacity: 1;
    }

        .StartPageDecorationImage {
            width: calc(calc(var(--vw,1vw)*70)*0.9808102);
            height: calc(var(--vw,1vw)*70);
            position: relative;
        }

        .StartPageDecorationImage::after {
            content: "";
            position: absolute;
            top: calc(calc(var(--vw,1vw)*3));
            left: calc(var(--vw,1vw)*7);
            width: 100%;
            height: 100%;
            background: url('./img/UI/Decor_Main_Telly.png') no-repeat;
            background-size: contain;
            z-index: inherit;
        }

        .StartPageSmallDecorationImage {
            width: calc(calc(var(--vw,1vw)*30)*1.60477);
            height: calc(var(--vw,1vw)*30);
            background: url('./img/UI/StartPageSmallDecoratoin.png') no-repeat;
            background-size: contain;
            position:absolute;
            top: calc(calc(var(--vw,1vw)*-5));
            left: calc(calc(var(--vw,1vw)*18));
            z-index: -1;
        }
    
    #MainFunctionArea {
        position: absolute;
        width: 100%;
        max-width: calc((100vh - 40vh) * 1); /*高=畫面70%；30%來自 top*/
        max-width: calc((100dvh - 40dvh) * 1); /* iOS Safari: 使用動態視窗高度 */
        top: 40vh;
        top: 40dvh; /* iOS Safari: 使用動態視窗高度，避免底部按鈕被截斷 */
        bottom: 0;
        left: 50%;
        z-index: 3;
        transform: translateX(-50%) translateY(-15%);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        pointer-events: auto;
    }

        #GameEnter {
            position: relative;
            width: 90%;
            top: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
        }

            .StartPageStandardButtonImage {
                width: 65%;
                aspect-ratio: 1.9;
                /* width: calc(calc(var(--vw,1vw)*20)*1.7); */
                /* height: calc(var(--vw,1vw)*20); */
                background: url('./img/UI/Button_Main_Purple.png') no-repeat;
                background-size: 100% 100%; /*此按鈕不照原始圖片比例*/
                /* margin: calc(var(--vw,1vw)*-60) calc(var(--vw,1vw)*102) 0 auto; */
                padding: 0px;
                margin-bottom: 2%;
                order: 1;
            }

            #StartPageStandardButtonGifDiv {
                width: 30%;
                aspect-ratio: 1;
                background: url('./img/UI/Rank.gif') no-repeat;
                background-size: contain;
                margin: calc(var(--vw,1vw)*-4) auto auto calc(var(--vw,1vw)*-6);
                position: absolute;
                z-index: 2;
            }

            #StartPageStandardLabelDiv {
                margin: 12% auto 0 25%;
                position: absolute;
                z-index: 2;
            }

            #StandardLabel {
                font-size: clamp(1px, 5cqmin, 32px);
                color: white;
                font-weight: bold;
            }

            .OrangeBoardFont{
                text-shadow: 
                    3px 3px 0 #FF7800, 
                    -3px 3px 0 #FF7800, 
                    3px -3px 0 #FF7800, 
                    -3px -3px 0 #FF7800;
            }

            .StartPageEventModeButtonImage {
                width: 35%;
                aspect-ratio: 1;
                /* width: calc(calc(var(--vw,1vw)*20)*1.07843137254902); */
                /* height: calc(var(--vw,1vw)*20); */
                background: url('./img/UI/Button_Activity_Travel.png') no-repeat;
                background-size: contain !important;
                /* margin: calc(var(--vw,1vw)*-50) calc(var(--vw,1vw)*58) 0 auto; */
                padding: 0px;
                margin-right: -7%;
                margin-bottom: 3%;
                z-index: 3;
                order: 2;
            }

            #StartPageEventModeLabelDiv {
                text-align: center;
                padding-top: 60%
            }

            #StartPageEventModeLabel {
                font-size: clamp(1px, 3cqmin, 20px);
                color: white;
                font-weight: bold;
            }
            
            #StartPageHintItemImage {
                /*圖片比例 112/105 */
                width: 32%;
                aspect-ratio: 112 / 105;
                background: url('./img/UI/Button_HintCard.png') no-repeat;
                background-size: contain;
                padding: 0px;
                position: relative;
                margin-left: calc(var(--vw,1vw)*5);
                margin-right: auto;
                margin-bottom: calc(var(--vw,1vw)*5);
                z-index: 3;
                order: 6;
            }

            #StartPageHintItemLabelDiv {
                position: absolute;
                width: 100%;
                aspect-ratio: 199 / 59;
                bottom: -10px;
                left: 50%;
                transform: translateX(-50%);
                text-align: center;
                background: url('./img/UI/Button_Yellow.png') no-repeat;
                background-size: contain;
                display: flex;
                justify-content: center;
                align-items: center;
                text-align: center;
            }

            #StartPageHintItemLabel {
                font-size: clamp(1px, 3cqmin, 20px);
                color: white;
                font-weight: bold;
            }

            .StartPagePracticeButtonImage {
                width: 50%;
                aspect-ratio: 192/125;
                /* width: calc(calc(var(--vw,1vw)*20)*1.536); */
                /* height: calc(var(--vw,1vw)*20); */
                background: url('./img/UI/Button_Main_Blue.png') no-repeat;
                background-size: contain;
                /* margin: calc(var(--vw,1vw)*1) calc(var(--vw,1vw)*106) 0 auto; */
                margin-left: 5%;
                margin-bottom: 3%;
                padding: 0px;
                order: 3;
            }

            #StartPagePracticeButtonGifDiv {
                width: 20%;
                aspect-ratio: 1;
                background: url(./img/UI/Practice.gif) no-repeat;
                background-size: contain;
                margin-left: 2%;
                position: absolute;
                z-index: 2;
            }

            #StartPagePracticeLabelDiv {
                margin: 20% 0 0 20%;
                position: absolute;
                z-index: 2;
            }

            #PracticeLabel {
                font-size: clamp(1px, 4cqmin, 30px);
                color: white;
                font-weight: bold;
            }


            .StartPageBattleButtonImage {
                width: 50%;
                aspect-ratio: 192/125;
                /* width: calc(calc(var(--vw,1vw)*20)*1.536); */
                /* height: calc(var(--vw,1vw)*20); */
                background: url('./img/UI/Button_Main_Red.png') no-repeat;
                background-size: contain;
                /* margin: calc(var(--vw,1vw)*-20) calc(var(--vw,1vw)*81) 0 auto; */
                margin-left: -7%;
                margin-bottom: 3%;
                padding: 0px;
                order: 4;
            }

            #StartPageBattleButtonLock {
                width: calc(calc(var(--vw,1vw)*10)*0.7894736842105263);
                height: calc(var(--vw,1vw)*10);
                background: url('./img/UI/Icon_Lock.png') no-repeat;
                background-size: contain;
                margin: calc(var(--vw,1vw)*-3) calc(var(--vw,1vw)*0) 0 calc(var(--vw,1vw)*21);
                padding: 0px;
                position: absolute;
            }

            #StartPageBattleButtonGifDiv {
                width: 20%;
                aspect-ratio: 1;
                background: url('./img/UI/PVP.gif') no-repeat;
                background-size: contain;
                margin-left: 2%;
                position: absolute;
                z-index: 2;
            }

            #StartPageBattleLabelDiv {
                margin: 20% 0 0 20%;
                position: absolute;
                z-index: 2;
            }

            #BattleLabel {
                font-size: clamp(1px, 4cqmin, 30px);
                color: white;
                font-weight: bold;
            }

            .StartPageRankingButtonImage {
                width: 30%;
                aspect-ratio: 1;
                /* width: calc(var(--vw,1vw)*20); */
                /* height: calc(var(--vw,1vw)*20); */
                background: url('./img/UI/Button_Main_Rank.png') no-repeat;
                background-size: contain;
                /* margin: calc(var(--vw,1vw)*5) calc(var(--vw,1vw)*60) 0 auto; */
                margin-left: auto;
                margin-right: calc(var(--vw,1vw)*5);
                margin-bottom: calc(var(--vw,1vw)*5);
                padding: 0px;
                order: 5;
            }

            #StartPageRankingLabelDiv {
                text-align: center;
                padding-top: 70%;
            }

            #RankingLabel {
                font-size: clamp(1px, 3cqmin, 20px);
                color: white;
                font-weight: bold;
            }

        #LearnEnter {
            position: relative;
            width: 70%;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

            .StartPageTutorialButtonImage {
                width: 40%;
                aspect-ratio: 139/44;
                display: block;
                border: none;
                background: url('./img/UI/Button_Main_AboutUs.png') no-repeat;
                background-size: contain;
                /* margin: calc(var(--vw,1vw)*1) calc(var(--vw,1vw)*110) 0 auto; */
                margin-left: auto;
                margin-right: calc(var(--vw,1vw)*5);
                padding:0px;
            }

            #StartPageTutorialLabelDiv {
                text-align: center;
                padding-top: 5%;
            }

            #TutorialImage {
                width: 50%;
                aspect-ratio: 1;
                background: url('./img/UI/Button_PK_Tutorial.png') no-repeat;
                background-size: contain;
                margin: -40% 0 0 -15%
            }

            #TutorialLabel {
                font-size: clamp(1px, 3cqmin, 20px);
                color: brown;
                font-weight: bold;
                top: calc(var(--vw,1vw)*-4);
            }
            

            #StartPageAboutDiv {
                width: 40%;
                aspect-ratio: 139/44;
                display: flex;
                border: none;
                background: url('./img/UI/Button_Main_AboutUs.png') no-repeat;
                background-size: contain;
                /* margin: calc(var(--vw,1vw)*11) calc(var(--vw,1vw)*-21) 0 calc(var(--vw,1vw)*-44); */
                margin-left: calc(var(--vw,1vw)*5);
                margin-right: auto;
                justify-content: center;
                align-items: center;
            }

            .StartPageAboutButtonStyle {
                /* margin: calc(var(--vw,1vw)*-10) calc(var(--vw,1vw)*106) 0 auto; */
                font-size: clamp(1px, 3cqmin, 20px);
                color: brown;
                font-weight: bold;
                text-align: center;
            }

        #PrivacyPolicyDiv {
            /* margin: calc(var(--vw,1vw)*0) calc(var(--vw,1vw)*0) 0 calc(var(--vw,1vw)*90); */
            /* text-align: center; */
            user-select: none;
            width: 70%;
            bottom: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        #PrivacyPolicyGuideText {
            font-size: clamp(1px, 3cqmin, 20px);
            font-weight: bold;
            font-family: PumpkinGames;
            color: white;
            padding: 10px;
        }
        
    #DevTool{
        position: absolute;
        bottom: 10px;
        left: 10px;
        z-index: 3;
        width: calc(var(--vw,1vw)*10); 
        height: calc(var(--vw,1vw)*10); 
        /* margin: calc(var(--vw,1vw)*-10) 0 auto calc(var(--vw,1vw)*-1) */
    }

    /* #endregion 窄版首頁初始排版結束*/

    .TutorialSingleHeaderDiv {
        margin: calc(var(--vh,1vh)*0) auto auto calc(var(--vh,1vh)*11);
        position: absolute;
        z-index: 2;
        width: calc(var(--vh,1vh)*20);
        text-align: center;
        padding: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
    }

    .TutorialDoubleHeaderDiv {
        margin: calc(var(--vh,1vh)*-0.15) auto auto calc(var(--vh,1vh)*21);
        position: absolute;
        z-index: 2;
        width: calc(var(--vh,1vh)*15);
        text-align: center;
        padding: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
    }

    .TutorialPracticeHeaderDiv {
        margin: calc(var(--vh,1vh)*-0.25) auto auto calc(var(--vh,1vh)*14);
        position: absolute;
        z-index: 2;
        width: calc(var(--vh,1vh)*15);
        text-align: center;
        padding: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
    }

    #sLineFrame {
        margin: calc(var(--vh,1vh)*11) calc(var(--vh,1vh)*0) auto calc(var(--vh,1vh)*1);
        position: absolute;
    }

    #sQRcodeFrame {
        margin: calc(var(--vh,1vh)*9) auto auto calc(var(--vh,1vh)*27);
        position: absolute;
    }

    #fLineFrame {
        margin: calc(var(--vh,1vh)*75) auto auto calc(var(--vh,1vh)*-1);
        position: absolute;
    }

    #fQRcodeFrame {
        margin: calc(var(--vh,1vh)*73) auto auto calc(var(--vh,1vh)*26);
        position: absolute;
    }

    #FailureRecommonFrame {
        margin: calc(var(--vh,1vh)*0) auto auto calc(var(--vh,1vh)*5);
        position: absolute;
    }

    #SuccessRecommonFrame {
        margin: calc(var(--vh,1vh)*63) auto auto auto;
        position: absolute;
    }

    #AccountAvatar {
        margin: calc(var(--vh,1vh)*2) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-30);
        width: calc(var(--vw,1vw)*26);
        height: calc(var(--vw,1vw)*26);
        background-size: calc(var(--vw,1vw)*26) calc(var(--vw,1vw)*26);
        background: url('./img/UI/Frame_Main_Login.png ');
        position: absolute;
        border-radius: 50%;
    }

    #ComboParentDiv {
        position: absolute;
        background-size: cover;
        z-index: 7;
        display: none;
        margin: calc(var(--vh,1vh)*-50) auto auto calc(var(--vh,1vh)*2);
        float: right;
    }

    /*    .SuccessPanel {
        width: calc(calc(var(--vh,1vh)*65)*0.89);
        height: calc(var(--vh,1vh)*65);
        background: url('./img/UI/Frame_Success.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*65)*0.89) calc(var(--vh,1vh)*65);
        white-space: pre-line;
        margin: calc(var(--vh,1vh)*12) auto 0 auto;
        padding: 0px;
        display: none;
    }*/

    /*    .FailurePanel {
        width: calc(calc(var(--vh,1vh)*55)*0.982);
        height: calc(var(--vh,1vh)*55);
                                top: 0px;
        background: url('./img/UI/Frame_Failure.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*55)*0.982) calc(var(--vh,1vh)*55);
        background: rgba(255,255,255,0.9);
        white-space: pre-line;
        margin: calc(var(--vh,1vh)*14) auto 0 auto;
        padding: 0px;
        display: none;
    }*/

    .EncyclopediaPanel {
        width: calc(calc(var(--vh,1vh)*77)*0.7491408934707904);
        height: calc(var(--vh,1vh)*77);
        background: url('./img/UI/Frame_Book_Mb.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*77)*0.7491408934707904) calc(var(--vh,1vh)*77);
        /*background: rgba(255,255,255,0.9);*/
        margin: calc(var(--vh,1vh)*16) auto 0 calc(var(--vh,1vh)*0);
        padding: 0px;
        display: none;
    }

    #EncyclopediaTitle {
        width: calc(calc(var(--vh,1vh)*10)*3.117647058823529);
        height: calc(var(--vh,1vh)*10);
        background: url('./img/UI/Title_Mine_Book.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*10)*3.117647058823529) calc(var(--vh,1vh)*10);
        display: block;
        border: none;
        font-size: calc(var(--vh,1vh)*2.75);
        color: white;
        font-weight: bold;
        position: absolute;
        margin: calc(var(--vh,1vh)*-5) auto 0 calc(var(--vh,1vh)*15);
    }

    #EncyclopediaCloseButton {
        width: calc(var(--vh,1vh)*10);
        height: calc(var(--vh,1vh)*10);
        margin: calc(var(--vh,1vh)*1) auto 0 calc(var(--vh,1vh)*47);
    }

    #CardCategoryDiv {
        position: absolute;
        margin: calc(var(--vh,1vh)*5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*7);
    }

    #EncyclopediaGridContainerLeft {
        display: grid;
        grid-template-columns: calc(var(--vh,1vh)*11.25) calc(var(--vh,1vh)*11.25) calc(var(--vh,1vh)*11.25) calc(var(--vh,1vh)*0);
        grid-template-rows: calc(var(--vh,1vh)*11.25) calc(var(--vh,1vh)*11.25) calc(var(--vh,1vh)*11.25) calc(var(--vh,1vh)*11.25) calc(var(--vh,1vh)*0);
        margin: calc(var(--vh,1vh)*12) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*8);
        position: absolute;
    }

    #EncyclopediaGridContainerRight {
        display: none;
    }

    .EncyclopediaGridContainerItem {
        width: calc(var(--vh,1vh)*10);
        height: calc(var(--vh,1vh)*10);
    }

    .EncyclopediaCover {
        border: 0;
        width: calc(var(--vh,1vh)*10);
        height: calc(var(--vh,1vh)*10);
        background-color: rgba(0,0,0,0.85);
        margin: auto auto auto auto;
        border-radius: 5%;
    }

    #EncyclopediaPageDIV {
        margin: calc(var(--vh,1vh)*72) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*11);
        position: absolute;
    }

    #CardCategorySelect {
        appearance: none;
        /*  safari  */
        -webkit-appearance: none;
        /*  other styles for aesthetics */
        width: calc(calc(var(--vh,1vh)*5.5)*4.414634146341463);
        height: calc(var(--vh,1vh)*5.5);
        font-size: calc(var(--vh,1vh)*2.75);
        padding: 0.35em 1em 0.35em 1.5em;
        background: url('./img/UI/Button_Book_Choose.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*5.5)*4.414634146341463)calc(var(--vh,1vh)*5.5);
        border: 0;
        border-radius: 0;
        cursor: pointer;
    }

    #TutorialPracticeContentLabel {
        /*        --min-size: 13.5;
        --max-size: 15;
        --font-size: calc( (var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100cqw - 320px) / (1920 - 320)) );*/
        font-size: calc(var(--vh,1vh)*2.18);
        color: maroon;
        font-weight: bold;
        margin: 0 auto 0 auto;
    }

    #TutorialSingleContentLabel {
        /*        --min-size: 12.5;
        --max-size: 14;
        --font-size: calc( (var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100cqw - 799px) / (1920 - 799)) );*/
        font-size: calc(var(--vh,1vh)*1.8);
        color: maroon;
        font-weight: bold;
        margin: 0 auto 0 auto;
    }

    /*#region 雙人進關面板*/
    #BattleModeRanking {
        top: calc(var(--vh,1vh)*69);
        right: calc(var(--vh,1vh)*25);
        position: absolute;
        display: none;
    }

    #BattleRank1ContentDiv, .IntroRankContentDiv1 {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-25);
        position: absolute;
    }

    #BattleRank2ContentDiv, .IntroRankContentDiv2 {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-13);
        position: absolute;
    }

    #BattleRank3ContentDiv, .IntroRankContentDiv3 {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-1);
        position: absolute;
    }

    .BattleRankScoreImage {
        background: url('./img/UI/Frame_Rank_Score.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*3.5)*3.2) calc(var(--vh,1vh)*3.5);
        width: calc(calc(var(--vh,1vh)*3.5)*3.2);
        height: calc(var(--vh,1vh)*3.5);
        position: absolute;
        z-index: 2;
        margin: calc(var(--vh,1vh)*6.5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-1.25);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .BattleRankScoreContent {
        font-size: calc(var(--vh,1vh)*1.8);
        z-index: 2;
        color: white;
        white-space: nowrap;
        text-align: center;
    }

    #BattleRankIcon {
        background: url('./img/UI/Button_Rank.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*8)*1.051724137931034) calc(var(--vh,1vh)*8);
        width: calc(calc(var(--vh,1vh)*8)*1.051724137931034);
        height: calc(var(--vh,1vh)*8);
        position: absolute;
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*10.75);
        border: none;
    }
    /*#endregion 雙人進關面板*/

    /*#region 通用進關排行面板 Mobile (爬榜+活動共用 class) */
    #CompetitiveModeRanking,
    #EventModeRanking {
        top: calc(var(--vh,1vh)*69);
        right: calc(var(--vh,1vh)*25);
        position: absolute;
        display: none;
    }

    .IntroRankScoreImage {
        background: url('./img/UI/Frame_Rank_Score.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*3.5)*3.2) calc(var(--vh,1vh)*3.5);
        width: calc(calc(var(--vh,1vh)*3.5)*3.2);
        height: calc(var(--vh,1vh)*3.5);
        position: absolute;
        z-index: 2;
        margin: calc(var(--vh,1vh)*6.5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-1.25);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .IntroRankScoreContent {
        font-size: calc(var(--vh,1vh)*1.8);
        z-index: 2;
        color: white;
        white-space: nowrap;
        text-align: center;
    }

    .IntroRankIcon {
        background: url('./img/UI/Button_Rank.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*8)*1.051724137931034) calc(var(--vh,1vh)*8);
        width: calc(calc(var(--vh,1vh)*8)*1.051724137931034);
        height: calc(var(--vh,1vh)*8);
        position: absolute;
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*10.75);
        border: none;
    }
    /*#endregion 通用進關排行面板 Mobile*/

    #BattleInvitationArea {
        position: absolute;
        display: none;
        bottom: 11vh;
        /* margin: calc(var(--vh,1vh)*39) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*8.5); */
    }

    #BattleInvitationCodeInputBoxContent {
        margin: calc(var(--vh,1vh)*-5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*10);
    }

    #BattleInvitationContentDiv {
        background: url('./img/UI/Frame_Text_1.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*10)*3.75609756097561) calc(var(--vh,1vh)*10);
        width: calc(calc(var(--vh,1vh)*10)*3.75609756097561);
        height: calc(var(--vh,1vh)*10);
        user-select: none; /* 標準語法 */
        -webkit-user-select: none; /* Safari */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* IE/Edge */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: calc(var(--vh,1vh)*0.3);
    }

    #BattleInvitationLabel {
        font-size: calc(var(--vh,1vh)*2);
        z-index: 2;
        line-height: 1;
    }

    #BattleInvitationHint {
        font-size: calc(var(--vh,1vh)*1.85);
        z-index: 2;
        line-height: 1;
    }
    /*#endregion*/

    /*#region 雙人結算面板的推薦區*/
    .BattleRecommonFrame {
        margin: calc(var(--vh,1vh)*73) calc(var(--vh,1vh)*0) auto calc(var(--vh,1vh)*29);
        position: absolute;
        scale: 85%
    }

    .BattleLineStickerFrame {
        width: calc(calc(var(--vh,1vh)*13)*2.084905660377358);
        height: calc(var(--vh,1vh)*13);
        background: url('./img/UI/Frame_Text_2.png');
        background-size: calc(calc(var(--vh,1vh)*13)*2.084905660377358) calc(var(--vh,1vh)*13);
        margin: calc(var(--vh,1vh)*2) calc(var(--vh,1vh)*0) auto calc(var(--vh,1vh)*-26);
        position: absolute;
    }

    .BattleLineStickerExample {
        width: calc(calc(var(--vh,1vh)*6)*1);
        height: calc(var(--vh,1vh)*6);
        background: url('./img/Questions/GIF/01/4.gif');
        background-size: calc(calc(var(--vh,1vh)*6)*1) calc(var(--vh,1vh)*6);
        position: absolute;
        margin: calc(var(--vh,1vh)*1.5) auto auto calc(var(--vh,1vh)*4);
    }

    .BattleLineStickerText {
        font-size: calc(var(--vh,1vh)*1.5);
        color: white;
        font-weight: bold;
        margin: calc(var(--vh,1vh)*2) auto auto calc(var(--vh,1vh)*12);
        position: absolute;
        width: calc(var(--vh,1vh)*11);
    }

    .BattleQRcodeFrame {
        width: calc(calc(var(--vh,1vh)*16)*1.674242424242424);
        height: calc(var(--vh,1vh)*16);
        background: url('./img/UI/Frame_Text_3.png');
        background-size: calc(calc(var(--vh,1vh)*16)*1.674242424242424) calc(var(--vh,1vh)*16);
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) auto calc(var(--vh,1vh)*0);
        position: absolute;
    }

    .BattleQRcodeImg {
        width: calc(calc(var(--vh,1vh)*7)*1);
        height: calc(var(--vh,1vh)*7);
        background: url('./img/UI/QRcode.png');
        background-size: calc(calc(var(--vh,1vh)*7)*1) calc(var(--vh,1vh)*7);
        margin: calc(var(--vh,1vh)*3) calc(var(--vh,1vh)*4) auto calc(var(--vh,1vh)*15.5);
        position: absolute;
    }

    .BattleQRcodeText {
        font-size: calc(var(--vh,1vh)*1.5);
        color: white;
        font-weight: bold;
        margin: calc(var(--vh,1vh)*4) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*4);
        width: calc(var(--vh,1vh)*11);
        position: absolute;
    }
    /*#endregion*/

    /*#region 雙人模式 遊戲中 玩家資料(共同)*/

    .pvpModePlayerArea {
        top: calc(var(--vh,1vh)*90);
        position: relative;
        /*        display:none;*/
    }

    .pvpModePlayerFrame {
        width: calc(calc(var(--vh,1vh)*15)*1.024844720496894);
        height: calc(var(--vh,1vh)*15);
    }

    .pvpModePlayerIdDiv {
        width: calc(var(--vh,1vh)*35);
        font-size: calc(var(--vh,1vh)*1.5);
        color: white;
        font-weight: bold;
        position: absolute;
        font-family: PumpkinGames;
        top: calc(var(--vh,1vh)*11);
        text-align: center;
    }

    .pvpModePlayerAvatorDiv {
        width: calc(var(--vh,1vh)*10);
        height: calc(var(--vh,1vh)*10);
    }

    .PvpProgressBar {
        position: absolute;
        width: calc(calc(var(--vh,1vh)*1.5)*10.81081081081081);
        height: calc(var(--vh,1vh)*1.5);
        top: calc(var(--vh,1vh)*5);
        left: calc(var(--vh,1vh)*-0.5);
        background: url('./img/UI/cbgame-16_1.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*1.5)*10.81081081081081) calc(var(--vh,1vh)*1.5);
        z-index: 3;
    }

    .PvpProgressBarCounter {
        height: 100%;
        /*background:white;*/
        float: left;
        background: url('./img/UI/cbgame-17_1.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*1.5)*10.81081081081081) calc(var(--vh,1vh)*1.5);
    }

    .pvpModeScoreAnimArea {
        margin: calc(var(--vh,1vh)*-16) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*3);
        position: absolute;
        display: none;
    }

    .ScorePlus {
        width: calc(calc(var(--vh,1vh)*3)*1.087912087912088);
        height: calc(var(--vh,1vh)*3);
        background: url('./img/UI/Number/Fever_plus.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*3)*1.087912087912088) calc(var(--vh,1vh)*3);
        position: absolute;
    }

    .PvpScoreLoserNumber {
        width: calc(calc(var(--vh,1vh)*3.2)*0.796);
        height: calc(var(--vh,1vh)*3.2);
        background: url('./img/UI/Number/Fever2_1.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*3.2)*0.796) calc(var(--vh,1vh)*3.2);
        position: absolute;
    }

    .PvpScoreWinnerNumber {
        width: calc(calc(var(--vh,1vh)*3.5)*0.796);
        height: calc(var(--vh,1vh)*3.5);
        background: url('./img/UI/Number/Fever_1.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*3.5)*0.796) calc(var(--vh,1vh)*3.5);
        position: absolute;
    }

    #pvpModeHost {
        padding: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*19) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
    }

    #pvpModeVisitor {
        padding: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*19) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
    }

    /*#endregion*/


    /*#region 雙人模式 遊戲中 對手區*/
    #pvpModeVisitorDiv {
        right: calc(var(--vh,1vh)*20);
        position: absolute;
        z-index: 5;
    }

    #pvpModeFrameVisitor {
        margin: calc(var(--vh,1vh)*-10) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
        position: absolute;
        background: url('./img/UI/Frame_PK_2.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*15)*1.024844720496894)calc(var(--vh,1vh)*15);
    }

    #pvpModeVisitorScoreArea {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
        position: absolute;
    }

    #VisitorScoreNumberOne {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*1);
        position: absolute;
    }

    #VisitorScoreNumberTwo {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*3.5);
        position: absolute;
    }

    #VisitorScoreNumberThree {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*6);
        position: absolute;
    }

    #VisitorScoreNumberFour {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*14.5);
        position: absolute;
    }

    #VisitorScoreNumberFive {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*11);
        position: absolute;
    }

    #pvpModeVisitor {
    }

    #pvpModeVisitorAvator {
        background: url('./img/Animal/Lucky_A.png') no-repeat;
        background-size: contain;
        width: calc(var(--vh,1vh)*8);
        height: calc(var(--vh,1vh)*8);
        margin: calc(var(--vh,1vh)*1.5) calc(var(--vh,1vh)*0) auto calc(var(--vh,1vh)*4);
        position: absolute;
    }

    #VisitorBarCounter {
        width: 0%;
        position: absolute;
    }

    #VisitorScorePlus {
        margin: calc(var(--vh,1vh)*0.5) calc(var(--vh,1vh)*-1) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-1.5);
        position: absolute;
    }

    #VisitorScoreAnimNumberOne {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*1.5);
        position: absolute;
    }

    #VisitorScoreAnimNumberTwo {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*4);
        position: absolute;
    }

    #VisitorScoreAnimNumberThree {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*6.5);
        position: absolute;
    }

    #VisitorScoreAnimNumberFour {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*9);
        position: absolute;
    }
    /*#endregion*/

    /*#region 雙人模式 遊戲中 玩家區*/
    #pvpModeHostDiv {
        left: calc(var(--vh,1vh)*5);
        position: absolute;
        z-index: 5;
    }

    #pvpModeFrameHost {
        margin: calc(var(--vh,1vh)*-10) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
        position: absolute;
        background: url('./img/UI/Frame_PK_1.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*15)*1.024844720496894)calc(var(--vh,1vh)*15);
    }

    #pvpModeHostScoreArea {
        /*        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
        position: absolute;*/
    }

    .pvpModeScoreArea {
        top: calc(var(--vh,1vh)*-2);
        position: absolute;
        z-index: 10;
    }

    #HostScoreNumberOne {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*1);
        position: absolute;
    }

    #HostScoreNumberTwo {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*3.5);
        position: absolute;
    }

    #HostScoreNumberThree {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*6);
        position: absolute;
    }

    #HostScoreNumberFour {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*8.5);
        position: absolute;
    }

    #HostScoreNumberFive {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*11);
        position: absolute;
    }

    #pvpModeHost {
    }

    #pvpModeHostAvator {
        background: url('./img/Animal/Lucky_A.png') no-repeat;
        background-size: contain;
        width: calc(var(--vh,1vh)*8);
        height: calc(var(--vh,1vh)*8);
        margin: calc(var(--vh,1vh)*1.5) calc(var(--vh,1vh)*0) auto calc(var(--vh,1vh)*4);
        position: absolute;
    }

    #HostBar {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
        position: absolute;
    }

    #HostBarCounter {
        width: 0%;
        position: absolute;
    }

    #HostScorePlus {
        margin: calc(var(--vh,1vh)*0.5) calc(var(--vh,1vh)*-1) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-1.5);
        position: absolute;
    }

    #HostScoreAnimNumberOne {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*1.5);
        position: absolute;
    }

    #HostScoreAnimNumberTwo {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*4);
        position: absolute;
    }

    #HostScoreAnimNumberThree {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*6.5);
        position: absolute;
    }

    #HostScoreAnimNumberFour {
        margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*9);
        position: absolute;
    }
    /*#endregion*/

    .CommonHintFrame {
        width: calc(calc(var(--vh,1vh)*28)*1.700787401574803);
        height: calc(var(--vh,1vh)*28);
        background: url('./img/UI/Frame_Text_Normal.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*28)*1.700787401574803) calc(var(--vh,1vh)*28);
        /*    z-index: 100;*/
        /*    position: absolute;*/
        display: none;
        /*    top: 36%;
    left: 36%;*/
        margin: calc(var(--vh,1vh)*32) auto auto auto;
        padding: 0px;
        /*    float: right;*/   
    }

    /*#region 通用進關面板*/
    #IntroPanel{
        width: 100%;
        min-width: 0; /* 窄版不限制最小寬，避免超出手機螢幕 */
        /* aspect-ratio: 426 / 462; */
        display: flex;
        justify-content: center;
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .intro {
        max-width: calc(calc(var(--vh,1vh)*60)*0.922);
        width: 100%;
        aspect-ratio: 426/462;
        background: url('./img/UI/Frame_Play.png') no-repeat;
        background-size: contain;
        /*background: rgba(255,255,255,0.9);*/
        /*        white-space: pre-line;*/
        /* margin: calc(var(--vh,1vh)*20) auto 0 auto; */
        font-weight: bolder;
        font-size: calc(var(--vh,1vh)*2.75);
        line-height: calc(var(--vh,1vh)*5.5);
        font-family: "微軟正黑體";
        padding: 0px;
        justify-content: center;
        display: flex;        
        position: relative;
        overflow: visible; /* 大聲公 transform 勿被裁切 */
    }

    #intro {
        width: 75%;
        aspect-ratio: 426 / 462;
        background: url('./img/UI/Frame_Play.png') no-repeat;
        background-size: contain;
        font-weight: bolder;
        font-size: calc(var(--vh,1vh)*2.75);
        line-height: calc(var(--vh,1vh)*5.5);
        font-family: "微軟正黑體";
        display: flex;
        position: absolute;
        top: 25%;
        left: 50%;
        transform: translateX(-50%) translateY(-15%);
    }

    .introHeader {
        width: calc(calc(var(--vh,1vh)*65)*0.922*0.85);
        height: calc(calc(var(--vh,1vh)*65)*0.922*0.85*0.346);
        background: url('./img/UI/Title_RedRibbon.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*65)*0.922*0.85) calc(calc(var(--vh,1vh)*65)*0.922*0.85*0.346);
        /*    margin: calc(var(--vh,1vh)*-10) auto 0 calc(var(--vh,1vh)*4);*/
        position: absolute;
        top: calc(var(--vh,1vh)*-5.5);
        /* right: calc(var(--vh,1vh)*6.25); */
    }

    .IntroBtnClose {
        width: calc(var(--vh,1vh)*6);
        height: calc(var(--vh,1vh)*6);
        background: url('./img/UI/Button_Close_2.png ') no-repeat;
        background-size: calc(var(--vh,1vh)*6) calc(var(--vh,1vh)*6);
        /*    margin: calc(var(--vh,1vh)*-17) auto 0 calc(var(--vh,1vh)*44.5);*/
        position: absolute;
        z-index: 2;
        top: calc(var(--vh,1vh)*-1.5);
        right: calc(var(--vh,1vh)*-0.35);
        cursor: pointer;
    }

    .IntroBtnClose:active {
        animation: BounceClick 0.5s ease;
    }

    .introImage {
        width: calc(calc(var(--vh,1vh)*65)*0.922*0.65);
        height: calc(calc(var(--vh,1vh)*65)*0.922*0.65*0.539);
        background: url('./img/UI/Logo.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*65)*0.922*0.65) calc(calc(var(--vh,1vh)*65)*0.922*0.65*0.539);
        /*    margin: calc(var(--vh,1vh)*-23) auto 0 calc(var(--vh,1vh)*9);*/
        position: absolute;
        top: calc(var(--vh,1vh)*-13);
        /* right: calc(var(--vh,1vh)*11); */
    }

    .modePanel {
        width: calc(calc(var(--vh,1vh)*55)*0.922*0.4);
        height: calc(calc(var(--vh,1vh)*55)*0.922*0.4*0.291);
        background: url('./img/UI/Title_Mode.png') no-repeat;
        background-size: calc(calc(var(--vh,1vh)*55)*0.922*0.4) calc(calc(var(--vh,1vh)*55)*0.922*0.4*0.291);
        /* margin: calc(var(--vh,1vh)*6) auto 0 auto; */
        padding: 0.4em 1em 1em 1em;
        text-align: center;
        font-size: calc(var(--vh,1vh)*1.8);
        line-height: calc(var(--vh,1vh)*3);
        font-weight: bold;
        color: white;
        border: 0;
        font-family: PumpkinGames;
    }

    #modePanelDiv {
        /* margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*17); */
        position: absolute;
        top: calc(var(--vh,1vh)*5.4);
    }

    #introWordContent {
        margin: 0;
        position: absolute;
        padding: 0;
        font-size: calc(var(--vw,1vw)*2);
        font-weight: bold;
        font-family: PumpkinGames;
        color: maroon;
        line-height: 125%;
        top: 17.5%;        /* 10.5vh / 60vh = 17.5% */
        left: 50%;
        transform: translateX(-50%);
        width: 72%;        /* 60vh*0.922*0.72 / (60vh*0.922) = 72% */
        height: 66.7%;     /* 40vh / 60vh = 66.7% */
        display: flex;
        align-items: stretch;
        justify-content: stretch;
        box-sizing: border-box;
    }
    /* 活動模式：introWordContent top 縮減 25% (17.5% × 0.75 = 13.125%) */
    .intro[data-mode="event"] #introWordContent {
        top: 13.125% !important;
    }

    /* 窄版：進關大聲公（須完整寫在 aspect-ratio<1 內；寬版 min-aspect-ratio 區塊在此不生效）
       對齊手指裝飾邏輯：絕對定位 + z-index；尺寸用 vw（同 .introDecoImg:not(.introDecoBase) 的 22vw 體系） */
    .intro-speaker-anchor {
        position: absolute;
        z-index: 12;
        /* 以餅乾框百分比為錨；另右移「半高×1/3」= 18vw/2/3 = 3vw */
        left: calc(4% + var(--vw,1vw) * 3);
        /* 上移顯示高度 1/5（18vw/5） */
        bottom: calc(7% + var(--vw,1vw) * 3.6);
        width: calc(var(--vw,1vw)*18);
        height: calc(var(--vw,1vw)*18);
        /* 整體再縮小 10%（累計約 81%：大聲公 + 光暈），左下角為縮放原點 */
        transform: scale(0.81);
        transform-origin: left bottom;
    }

    .intro-speaker-deco-halo {
        position: absolute;
        left: 50%;
        top: 50%;
        /* transform：見共用 introSpeakerHaloSpin（含置中 translate） */
        width: calc(var(--vw,1vw)*28);
        height: calc(var(--vw,1vw)*28);
        background: url('./img/UI/Decoration/Decoration_Battle_1.png') no-repeat center;
        background-size: contain;
        pointer-events: none;
        z-index: 0;
    }

    .intro-speaker-btn {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        border: none;
        padding: 0;
        cursor: pointer;
        background: url('./img/UI/Button_Speaker.png') no-repeat center;
        background-size: contain;
        background-color: transparent;
    }

    /* 窄版：裝飾圖容器 */
    .introDecoWrapper {
        position: relative;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* 窄版：裝飾元素基礎定位；尺寸用 vw 對應寬版的 vh，比例一致 */
    .introDecoImg {
        position: absolute;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }
    /* 窄版裝飾尺寸：22vw 在 385-420px 手機上視覺正確，
       decoSize = 12vh 在寬版，這裡用 22vw 維持相近的視覺比例 */
    .introDecoImg:not(.introDecoBase) {
        width: calc(var(--vw,1vw)*22) !important;
        height: calc(var(--vw,1vw)*22) !important;
    }
    /* 爬榜分數物件比一般裝飾略大（對應寬版 14vh） */
    .introDecoAvatar {
        width: calc(var(--vw,1vw)*25) !important;
        height: calc(var(--vw,1vw)*25) !important;
    }
    /* 活動A 動態骰子：用雙 class 提升特異性至 (0,2,0)，放在 22vw 規則後面，同特異性後者勝 */
    .introDecoImg.introDecoDice {
        width: calc(var(--vw,1vw)*16) !important;
        height: calc(var(--vw,1vw)*16) !important;
        left: 42% !important;
    }
    /* 問號：同上，(0,2,0) 覆蓋 .introDecoImg:not(.introDecoBase) 的 22vw */
    .introDecoImg.introDecoQuestion {
        width: calc(var(--vw,1vw)*11) !important;
        height: calc(var(--vw,1vw)*11) !important;
    }
    /* 活動B 靜態骰子：輔助元素，尺寸應比 LOGO 小 */
    .introDecoDiceStatic {
        width: calc(var(--vw,1vw)*15) !important;
        height: calc(var(--vw,1vw)*15) !important;
    }

    /* 窄版：底板 — top 6.67% (=4vh/60vh)，height 63% */
    .introDecoBase {
        width: 100% !important;
        height: 63% !important;
        top: 6.67% !important;
        left: 0 !important;
        bottom: auto !important;
        right: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background-size: cover !important;
        background-position: center !important;
    }
    /* 活動模式底板縮小10% */
    .introDecoBase.introDecoBaseEvent {
        transform: scale(0.9) !important;
        transform-origin: center !important;
    }
    /* 雙人模式底板高度 58% */
    .introDecoBase.introDecoBaseBattle {
        height: 58% !important;
    }

    #introTodayCanPlayCountHintDiv {
        position: absolute;
        text-align: center;
        left: 50%;
        transform: translateX(-50%);
        top: 68.3%;  /* 41vh / 60vh = 68.3% */
    }

    #introTodayCanPlayCountHint {
        /* padding: 3.5em 5.5em 4.5em 6em; */
        font-size: calc(var(--vw,1vw)*3.5);  /* 對齊寬版 2vh，vh→vw 換算 */
        font-weight: bold;
        font-family: PumpkinGames;
        color: maroon;
        line-height: calc(var(--vw,1vw)*5);
        top: calc(var(--vh,1vh)*4);
    }

    #introSubWordDiv {
        width: 80%;
        position: absolute;
        text-align: right;
        /* padding: calc(var(--vh,1vh)*41) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*10); */
        display: flex;
        align-items: center;
        justify-content: center;
        bottom: 23.3%;  /* 14vh / 60vh = 23.3% */
    }

    #introSubWordContent {
        font-size: calc(var(--vw,1vw)*3);
        font-weight: initial;
        font-weight: bold;
        margin-left: 3vh;
    }

    .introQRCode {
        top: 70%;
        left: 10%;
        width: 100px;
        height: 100px;
        background: url('./img/onlink_to_rs67jz_small.png') no-repeat;
    }

    #DiffictyDefinitonAreaComboBox {
        /* position: absolute; */
        /* margin: calc(var(--vh,1vh)*40) auto 0 calc(var(--vh,1vh)*34); */
    }

    #DiffictyDefinitonAreaSlider {
        bottom: 13%;
        position: absolute;
        display: flex;
        align-items: center;
        /* margin: 0 auto 0 auto;
        right: calc(var(--vh,1vh)*57); */
    }

    #brownLine {
        top: 66%;
        /* margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*21); */
        /* position: absolute; */
        /* z-index: 1; */
        width: calc(calc(var(--vh,1vh)*4)*2.7058);
        height: calc(var(--vh,1vh)*4);
        display: block;
        border: none;
        background: url('./img/UI/Button_Choose_01.png');
        background-size: calc(calc(var(--vh,1vh)*4)*2.7058) calc(var(--vh,1vh)*4);
        /*            margin: calc(var(--vh,1vh)*-10) auto 0 auto;*/
        margin-left: -4vh;
        margin-right: -4vh;
        z-index: 0;
    }

    #EasyBtn {
        /* margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*19); */
        /* position: absolute; */
        z-index: 1;
        width: calc(calc(var(--vh,1vh)*6)*0.9841);
        height: calc(var(--vh,1vh)*6);
        display: block;
        border: none;
        background: url('./img/UI/Button_Choose_04.png');
        background-size: calc(calc(var(--vh,1vh)*6)*0.9841) calc(var(--vh,1vh)*6);
        /*        margin: auto 0 auto calc(var(--vh,1vh)*20);*/
    }

    #HardBtn {
        /* margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*28); */
        /* position: absolute; */
        z-index: 1;
        width: calc(calc(var(--vh,1vh)*6)*0.9841);
        height: calc(var(--vh,1vh)*6);
        display: block;
        border: none;
        background: url('./img/UI/Button_Choose_05.png');
        background-size: calc(calc(var(--vh,1vh)*6)*0.9841) calc(var(--vh,1vh)*6);
    }

    #EventWeeklyRewardDiv {
        /* margin: calc(var(--vh,1vh)*36) auto 0 calc(var(--vh,1vh)*30); */
        /* display: none; */
        position: absolute;
        bottom: 26.7%;  /* 16vh / 60vh = 26.7% */
        left: 62%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #WeeklyRewardsText {
        width: auto;
        white-space: nowrap;
        font-size: calc(var(--vh,1vh)*1.25);
        font-weight: bold;
        font-family: PumpkinGames;
        color: maroon;
        line-height: calc(var(--vh,1vh)*3);
    }

    #WeeklyRewardImage {
        margin: 0 0 0 calc(var(--vh,1vh)*3);
        width: calc(calc(var(--vh,1vh)*12)*0.9414634146341463*0.81);
        height: calc(var(--vh,1vh)*12*0.81);
        background: url('./img/UI/Icon_Gold_box.png');
        background-size: calc(calc(var(--vh,1vh)*12)*0.9414634146341463*0.81) calc(var(--vh,1vh)*12*0.81);
    }

    /*#endregion*/

    #buttonDiv {
        /*    top: 87%;*/
        width: 75%;
        position: absolute;
        bottom: -7vh;
        display: flex;
        justify-content: space-around;
        /* margin: calc(var(--vh,1vh)*60) auto 0 calc(var(--vh,1vh)*18); */
    }

    #RoomButtonPlay {
        /* margin: calc(var(--vh,1vh)*-7.5) auto 0 calc(var(--vh,1vh)*13); */
        background: url('./img/UI/Button_Orange.png');
        background-size: calc(calc(var(--vh,1vh)*7.5)*2.31) calc(var(--vh,1vh)*7.5);
    }
    #GoogleButtonDiv {
        text-align: center;
        margin: calc(var(--vh,1vh)*20) auto 0 calc(var(--vh,1vh)*0);
        position: absolute;
        padding: calc(var(--vh,1vh)*0)calc(var(--vh,1vh)*13)calc(var(--vh,1vh)*0)calc(var(--vh,1vh)*11);
    }

    #FacebookButtonDiv {
        text-align: center;
        margin: calc(var(--vh,1vh)*11) auto 0 calc(var(--vh,1vh)*0);
        position: absolute;
        padding: calc(var(--vh,1vh)*0)calc(var(--vh,1vh)*10)calc(var(--vh,1vh)*0)calc(var(--vh,1vh)*11);
    }
}

#Setting {
    position: absolute;
    width: calc(calc(var(--vh,1vh)*6)*0.98769);
    height: calc(var(--vh,1vh)*6);
    /*background:white;*/
    margin: auto;
    left: 0;
    top: calc(var(--vh,1vh)*1.6);
    float: left;
    background: url('./img/UI/Button_Setting.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*6)*0.98769) calc(var(--vh,1vh)*6);
    z-index: 3;
    display: none;
}


#timer {
    position: absolute;
    width: calc(calc(var(--vh,1vh)*8)*1.17647);
    height: calc(var(--vh,1vh)*8);
    /*    width: 60px;
    height: 51px;*/
    margin: auto;
    left: 0;
    top: 1.5%;
    float: left;
    background: url('./img/UI/Frame_Time.png?id=1') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*8)*1.17647) calc(var(--vh,1vh)*8);
    z-index: 3;
}

#timerNum {
    /*        margin: auto;*/
    margin: calc(var(--vh,1vh)*2.7) auto 0 calc(var(--vh,1vh)*0);
    text-align: center;
    left: 0;
    right: 0;
}

#timerLabel {
    font-weight: bold;
    color: maroon;
    font-size: calc(var(--vh,1vh)*2.5);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}


/* #region iOS 優化 - GPU 合成層提升 + 消除 Safari 300ms 點擊延遲 */
[class^="card"] {
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    touch-action: manipulation; /* 消除 iOS Safari 雙擊縮放的 300ms 等待延遲 */
}
/* #endregion */

.back {
    /*/避免開始就載入預設圖片，之後又馬上被新的取代，畫面更換過多，移除預設設定*/
    /*    background: url('./img/Cover/Cover_9.png') no-repeat;
    background-size: contain;*/
    width: 100%;
    height: 100%;
    position: absolute;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.front {
    background-size: contain;
    width: 100%;
    height: 100%;
    position: absolute;
    display: none;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#wall {
    width: 1140px;
    height: 680px;
    position: absolute;
    left: 0px;
    top: 0px;
    display: none;
}

.custom-select {
    min-width: calc(var(--vh,1vh)*10);
    position: relative;
}

.highlight-pair {
    border: 5px solid yellow;
    border-radius: 10px; 
    box-shadow: 0 0 15px rgba(255, 255, 0, 0.8);
}

.highlight-glow-infinite {
  animation: glowPulse 1.2s infinite;
}

/* 提示卡數量 > 1 時，itemblock 持續放大縮小動畫 */
@keyframes HintItemPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
#hintitem.hint-item-pulse {
  animation: HintItemPulse 1.2s ease-in-out infinite;
}

select {
    appearance: none;
    /*  safari  */
    -webkit-appearance: none;
    /*  other styles for aesthetics */
    /*    width: 100%;*/
    font-size: 1rem;
    padding: 0.35em 1em 0.35em 0.5em;
    background-color: #fff;
    border: 1px solid #caced1;
    border-radius: 0.25rem;
    color: #000;
    cursor: pointer;
}

.custom-select::before,
.custom-select::after {
    --size: 0.3rem;
    content: "";
    position: absolute;
    right: 1rem;
    pointer-events: none;
}

.custom-select::before {
    border-left: var(--size) solid transparent;
    border-right: var(--size) solid transparent;
    border-bottom: var(--size) solid black;
    top: 40%;
}

.custom-select::after {
    border-left: var(--size) solid transparent;
    border-right: var(--size) solid transparent;
    border-top: var(--size) solid black;
    top: 55%;
}

/*#region 動畫區*/

@keyframes opa {
    from {
        filter: opacity(100%);
    }

    to {
        filter: opacity(0%);
    }
}

@keyframes ComparedWrong {
    0%, 100% {
        transform: translateX(0%);
        transform-origin: 50% 50%;
    }

    15% {
        transform: translateX(-30px) rotate(-6deg);
    }

    30% {
        transform: translateX(15px) rotate(6deg);
    }

    45% {
        transform: translateX(-15px) rotate(-3.6deg);
    }

    60% {
        transform: translateX(9px) rotate(2.4deg);
    }

    75% {
        transform: translateX(-6px) rotate(-1.2deg);
    }
}

@keyframes ComparedSuccess {
    0% {
        transform: scale3d(1, 1, 1);
    }

    30% {
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        transform: scale3d(0.95, 1.05, 1);
    }

    75% {
        transform: scale3d(1.05, 0.95, 1);
    }

    100% {
        transform: scale3d(1, 1, 1);
    }
}

@keyframes SlideFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-250px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes SlideFromRight {
    0% {
        opacity: 0;
        transform: translateX(250px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes BounceIn_Center {
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
        transform: translate(-50%,-250px);
    }

    38% {
        animation-timing-function: ease-out;
        opacity: 1;
        transform: translate(-50%,0);
    }

    55% {
        animation-timing-function: ease-in;
        transform: translate(-50%,-65px);
    }

    72% {
        animation-timing-function: ease-out;
        transform: translate(-50%,0);
    }

    81% {
        animation-timing-function: ease-in;
        transform: translate(-50%,-28px);
    }

    90% {
        animation-timing-function: ease-out;
        transform: translate(-50%,0);
    }

    95% {
        animation-timing-function: ease-in;
        transform: translate(-50%,-8px);
    }

    100% {
        animation-timing-function: ease-out;
        transform: translate(-50%,0);
    }
}

@keyframes BounceIn {
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
        transform: translateY(-250px);
    }

    38% {
        animation-timing-function: ease-out;
        opacity: 1;
        transform: translateY(0);
    }

    55% {
        animation-timing-function: ease-in;
        transform: translateY(-65px);
    }

    72% {
        animation-timing-function: ease-out;
        transform: translateY(0);
    }

    81% {
        animation-timing-function: ease-in;
        transform: translateY(-28px);
    }

    90% {
        animation-timing-function: ease-out;
        transform: translateY(0);
    }

    95% {
        animation-timing-function: ease-in;
        transform: translateY(-8px);
    }

    100% {
        animation-timing-function: ease-out;
        transform: translateY(0);
    }
}

@keyframes SlideTop_Center {
    0% {
        opacity: 1;
        transform: translateY(-50%,0);
    }

    100% {
        opacity: 0;
        transform: translateY(-50%,-250px);
    }
}
@keyframes SlideTop {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-250px);
    }
}

@keyframes flip {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(180deg);
    }
}

@keyframes FadeOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-125px);
    }
}

@keyframes ZoomIn {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes ZoomOut {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes ComboAnim {
    0% {
        opacity: 0;
        transform: scale(0.6);
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-125px);
    }
}

@keyframes BounceInRight {
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
        transform: translateX(250px);
    }

    38% {
        animation-timing-function: ease-out;
        opacity: 1;
        transform: translateX(0);
    }

    55% {
        animation-timing-function: ease-in;
        transform: translateX(68px);
    }

    72% {
        animation-timing-function: ease-out;
        transform: translateX(0);
    }

    81% {
        animation-timing-function: ease-in;
        transform: translateX(32px);
    }

    90% {
        animation-timing-function: ease-out;
        transform: translateX(0);
    }

    95% {
        animation-timing-function: ease-in;
        transform: translateX(8px);
    }

    100% {
        animation-timing-function: ease-out;
        transform: translateX(0);
    }
}

@keyframes BounceInBottom {
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
        transform: translateY(250px);
    }

    38% {
        animation-timing-function: ease-out;
        opacity: 1;
        transform: translateY(0);
    }

    55% {
        animation-timing-function: ease-in;
        transform: translateY(65px);
    }

    72% {
        animation-timing-function: ease-out;
        transform: translateY(0);
    }

    81% {
        animation-timing-function: ease-in;
        transform: translateY(28px);
    }

    90% {
        animation-timing-function: ease-out;
        transform: translateY(0);
    }

    95% {
        animation-timing-function: ease-in;
        transform: translateY(8px);
    }

    100% {
        animation-timing-function: ease-out;
        transform: translateY(0);
    }
}

@keyframes ScaleInCenter {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes glowPulse {
  0% {
    box-shadow:
      0 0 6px  rgba(255,215,0,0.6),
      0 0 12px rgba(255,215,0,0.4),
      0 0 20px rgba(255,215,0,0.2);
  }
  50% {
    box-shadow:
      0 0 12px rgba(255,215,0,1),
      0 0 24px rgba(255,215,0,0.8),
      0 0 40px rgba(255,215,0,0.6);
  }
  100% {
    box-shadow:
      0 0 6px  rgba(255,215,0,0.6),
      0 0 12px rgba(255,215,0,0.4),
      0 0 20px rgba(255,215,0,0.2);
  }
}

@keyframes popupScaleIn { /* 視窗放大動畫 */
    0% {
        opacity: 0;
        transform: translate(-20%, -20%) scale(0.2);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}


/*#endregion*/

@font-face {
    font-family: 'PumpkinGames';
    src: url('./Font/GenSenMaruGothicTW-Light.ttf');
    /* 可以添加其他格式的字体，以提供更好的兼容性 */
}


.fireworksParentDiv {
    position: relative;
    background-size: auto calc(var(--vh,1vh)*100);
    width: 100%;
    height: calc(var(--vh,1vh)*100/0.95);
    z-index: 1;
}

.fireworksDiv {
    position: absolute;
    background-size: auto calc(var(--vh,1vh)*100);
    width: 100%;
    height: calc(var(--vh,1vh)*100/0.95);
    z-index: 2;
}


.mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background: rgba(0,0,0,0.5)
}

/*#region 公告／大聲公（body 直層；僅 Frame_Speaker 為底，無額外白底／獨立關閉鈕，點遮罩關閉） */
@keyframes announcement-arrow-sway-prev {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-6px); }
}

@keyframes announcement-arrow-sway-next {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(6px); }
}

.announcement-speaker-layer {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
    box-sizing: border-box;
    overflow: visible;
}

/* fixed 滿版：窄版／安全區也能點到遮罩；非進關入口略淡（下層常有 .mask） */
.announcement-speaker-backdrop {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    min-height: 100%;
    min-height: 100dvh;
    background: rgba(0, 0, 0, 0.28);
    cursor: pointer;
    z-index: 0;
    -webkit-tap-highlight-color: transparent;
}

/* 從進關開啟：專用較實遮罩，補足與 .mask 銜接空隙、观感獨立 */
.announcement-speaker-layer.announcement-from-intro .announcement-speaker-backdrop {
    background: rgba(0, 0, 0, 0.48);
}

/* 外層不畫底，避免白塊。
   pointer-events：此外層不攔截點擊。透明關閉區穿透見 .announcement-speaker-modal-scale / .announcement-speaker-frame-bg + .announcement-frame-body */
.announcement-speaker-modal {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    background: none;
    box-sizing: border-box;
    max-width: 100%;
    max-height: 100%;
    pointer-events: none;
    /* 勿 hidden：與子層 overflow 混用時易被改算成 auto，裁掉頂部大聲公 */
    overflow: visible;
}

/* 規格：整體視覺 1.2 倍；進場由小放大。
   pointer-events: none：避免包住捲軸的矩形（含 contain 留白、frame-body 外側 margin 帶）擋住下方 backdrop 關閉。子層 .announcement-frame-body 再設 auto 接互動。 */
.announcement-speaker-modal-scale {
    transform: scale(0.82);
    opacity: 0;
    transform-origin: center center;
    transition: transform 0.38s cubic-bezier(0.34, 1.45, 0.64, 1), opacity 0.28s ease-out;
    will-change: transform, opacity;
    pointer-events: none;
    overflow: visible;
}

.announcement-speaker-layer.announcement-shown .announcement-speaker-modal-scale {
    transform: scale(1.2);
    opacity: 1;
}

/* 僅捲軸外框圖，透明底；須 overflow:visible（避免 overflow-x:hidden + y:visible 被瀏覽器改成 y:auto 而裁切頂部喇叭）
   可選 --announcement-content-well-width：僅「直向 + min-width:600px」媒體內設定，對齊 iPad 級 contain 開洞，不影響一般手機／寬版 */
.announcement-speaker-frame-bg {
    position: relative;
    width: min(68vmin, 91vw);
    min-height: min(76vmin, 82vh);
    max-height: min(86vh, 92vmin);
    box-sizing: border-box;
    background: url('./img/UI/Frame_Speaker.png') no-repeat center center;
    background-size: contain;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: visible;
    z-index: 0;
    /* 與 modal-scale 同上：大矩形內「圖外透明帶」勿攔截點擊，讓事件落到 backdrop */
    pointer-events: none;
}

/* 對齊 Frame 內捲紙開洞；overflow 讓內容與底列不撐破捲軸底圖。
   注意：margin 的 % 上下值係以「包含塊寬度」計算，不是高度，窄螢幕會嚴重低估下方留白，故直向改在 media 內用 vh 補強。 */
.announcement-frame-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: min(7vh, 56px) 9% min(12vh, 96px) 9%;
    box-sizing: border-box;
    position: relative;
    z-index: 0;
    isolation: isolate;
    /* 同上：不可 overflow-x:hidden + y:visible，會觸發垂直裁切 */
    overflow: visible;
    /* 從祖先繼承 none 後，在此恢復可點（捲軸內容／底列）；margin 外側仍穿透至 backdrop */
    pointer-events: auto;
}

.announcement-speaker-title {
    flex-shrink: 0;
    position: relative;
    /* 子元素皆 absolute，不佔垂直流高度，避免喇叭把下方整塊往下推 */
    height: 0;
    min-height: 0;
    margin: 0 0 clamp(4px, 1vmin, 12px) 0;
    padding: 0;
    overflow: visible;
    /* 必須高於紫框 well，大聲公／光暈才會疊在捲軸開洞內容之上 */
    z-index: 6;
    pointer-events: none;
}

/* 供 aria-labelledby：僅螢幕閱讀器可見 */
.announcement-speaker-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 規格：捲軸頂中央大聲公（與進關同源 Button_Speaker.png）+ Decoration_Battle_1 光暈慢轉（同 introSpeakerHaloSpin）；上移自身高度的 2/3
   設計：圖示＋光暈整組相對原邏輯尺寸放大一倍（scale(2)），transform-origin 置中以維持視覺中心 */
.announcement-speaker-icon-wrap {
    position: absolute;
    left: 50%;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(52px, 11vmin, 88px);
    height: clamp(52px, 11vmin, 88px);
    transform: translate(-50%, calc(-100% * 2 / 3)) scale(2);
    transform-origin: center center;
    z-index: 1;
    pointer-events: none;
}

/* 與進關 .intro-speaker-deco-halo 同源圖＋動畫；尺寸約 15/9 倍於圖示區（比例對齊左下大聲公的光暈） */
.announcement-speaker-deco-halo {
    position: absolute;
    left: 50%;
    top: 50%;
    /* transform 由 introSpeakerHaloSpin（translate + rotate）全權處理 */
    width: 168%;
    height: 168%;
    background: url('./img/UI/Decoration/Decoration_Battle_1.png') no-repeat center;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
}

.announcement-speaker-icon {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: url('./img/UI/Button_Speaker.png') no-repeat center;
    background-size: contain;
}

/* 規格：well 僅定位／裁切；圓角與底色在 .announcement-speaker-pages（色票 #da90c8）；層級低於頂部大聲公
   預設 90.25%；直向平板由祖先設定 --announcement-content-well-width 覆寫 */
.announcement-content-well {
    flex: 1 1 0;
    position: relative;
    z-index: 1;
    border-radius: 10px;
    background: transparent;
    box-sizing: border-box;
    overflow: hidden;
    width: var(--announcement-content-well-width, 90.25%);
    max-width: var(--announcement-content-well-width, 90.25%);
    align-self: center;
    min-height: min(27.6vh, 228px);
}

.announcement-speaker-pages {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: rgba(218, 144, 200, 0.88);
    box-sizing: border-box;
    overflow: hidden;
}

@media (min-aspect-ratio: 1/1) {
    /* 寬版：整組（捲軸、大聲公、內容）相對原稿再縮小 15%（×0.85），中心不變。進場起訖由原 0.82／1.2 同比縮放 */
    .announcement-speaker-modal-scale {
        transform: scale(0.697);
    }

    .announcement-speaker-layer.announcement-shown .announcement-speaker-modal-scale {
        transform: scale(1.02);
    }

    /* 進場 scale(1.02) 後總高 ≈ 1.02× 此盒；勿超過約 83vh 未縮放，以免底列被擠出視窗 */
    .announcement-speaker-frame-bg {
        min-height: 0;
        height: min(83vh, calc(var(--vh, 1vh) * 83));
        max-height: min(88vh, calc(var(--vh, 1vh) * 88));
        /*
         * 垂直留白改放在 frame-bg 的 padding：若寫在 .announcement-frame-body 的 margin，
         * flex 子項的 margin 會加在分配到的主尺寸外，易使「外框總高 > frame-bg」而被 overflow:hidden 從底部裁掉底列。
         */
        padding-top: min(5.5vh, 52px);
        padding-bottom: min(5vh, 52px);
        box-sizing: border-box;
    }

    .announcement-frame-body {
        /* 僅左右縮排；上下改由 frame-bg padding 負責 */
        margin: 0 9%;
        padding-bottom: clamp(6px, 1.2vmin, 14px);
        /* 略縮小與「公告」間距，讓紫框上緣貼近標題下方（稿上紅線位置） */
        gap: clamp(2px, 0.9vmin, 12px);
    }

    .announcement-speaker-icon-wrap {
        width: clamp(56px, 10vmin, 96px);
        height: clamp(56px, 10vmin, 96px);
    }

    .announcement-content-well {
        flex: 1 1 0;
        min-height: min(48vh, 420px);
        max-height: calc(100% - clamp(5.25rem, 14vh, 9rem));
        margin-top: clamp(0px, 1vmin, 12px);
    }
}

.announcement-slide {
    display: none;
    position: absolute;
    inset: 0;
    align-items: stretch;
    justify-content: stretch;
    padding: 0.6vmin 1.4vmin;
    box-sizing: border-box;
}

.announcement-slide.is-active {
    display: flex;
}

.announcement-slide-body {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    box-sizing: border-box;
}

/* 圖+文型：上 Banner、下文字（垂直排列，符合規格稿） */
.announcement-slide-v1 .announcement-slide-body {
    justify-content: flex-start;
    align-items: stretch;
}

/* 圖+文：高度 2:3（2/5 Banner、3/5 文字） */
.announcement-slide-v1 .announcement-v1-inner {
    display: grid;
    grid-template-rows: 2fr 3fr;
    gap: clamp(4px, 0.75vmin, 10px);
    align-content: stretch;
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
}

.announcement-v1-img {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    background: url('./img/UI/TestPic_1.png') no-repeat center center;
    background-size: contain;
    border-radius: 6px;
}

.announcement-slide-v1 .announcement-v1-img {
    height: 100%;
    max-height: none;
}

@media (min-aspect-ratio: 1/1) {
    .announcement-slide-v1 .announcement-v1-inner {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: clamp(8px, 1.2vmin, 14px);
        height: 100%;
        min-height: 0;
    }

    .announcement-slide-v1 .announcement-v1-img {
        flex: 0 0 auto;
        width: 100%;
        height: min(30vh, 280px);
        min-height: clamp(120px, 22vmin, 260px);
        max-height: min(40vh, 360px);
    }

    .announcement-slide-v1 .announcement-v1-text {
        flex: 0 1 auto;
        min-height: 0;
    }
}

.announcement-v1-text {
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    font-size: clamp(10px, 1.75vmin, 14px);
    line-height: 1.5;
    color: #3d2814;
    overflow-y: auto;
    overflow-x: hidden;
    display: block;
    text-align: center;
    padding: 0.35em 0.6em 0;
    font-family: "微軟正黑體", sans-serif;
    -webkit-overflow-scrolling: touch;
}

.announcement-v2-full {
    width: 100%;
    height: 100%;
    min-height: 0;
    background: url('./img/UI/TestPic_2.png') no-repeat center;
    background-size: cover;
    border-radius: 8px;
}

/* 底列：左箭頭 | 圓點 | 右箭頭（規格圖）；層級在 well 之上、低於頂部大聲公 */
.announcement-speaker-bottom-nav {
    flex-shrink: 0;
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(2px, 0.9vmin, 10px);
    padding: 0.35vmin 0 0.15vmin;
    margin-top: calc(0.25vmin + clamp(74.66px, 17.5vmin, 121.34px));
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    position: relative;
    z-index: 4;
}

.announcement-arrow-swing {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.announcement-arrow-swing-prev {
    animation: announcement-arrow-sway-prev 1.65s ease-in-out infinite;
}

.announcement-arrow-swing-next {
    animation: announcement-arrow-sway-next 1.65s ease-in-out infinite;
}

.announcement-speaker-arrow {
    width: clamp(21.33px, 5vmin, 34.67px);
    height: clamp(21.33px, 5vmin, 34.67px);
    border: none;
    padding: 0;
    cursor: pointer;
    background: url('./img/UI/Button_Arrow_Orange.png') no-repeat center;
    background-size: contain;
    background-color: transparent;
    flex-shrink: 0;
}

.announcement-speaker-arrow-prev {
    transform: scaleX(-1);
}

.announcement-speaker-dots {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: clamp(12px, 2.8vmin, 28px);
    margin: 0;
    min-width: 0;
}

/* 規格：未選中 Button_Page_1、選中 Button_Page_2 */
.announcement-dot {
    width: clamp(24px, 6vmin, 44px);
    height: clamp(24px, 6vmin, 44px);
    border: none;
    padding: 0;
    cursor: pointer;
    background: url('./img/UI/Button_Page_1.png') no-repeat center;
    background-size: contain;
    background-color: transparent;
    flex-shrink: 0;
}

.announcement-dot.is-active {
    background-image: url('./img/UI/Button_Page_2.png');
}

/* 寬版底列：必須寫在共用 .announcement-speaker-bottom-nav（含超大 margin-top）之後，否则晚載入的規則會把 margin-top 蓋掉，箭頭+圓點被推出裁切區 */
@media (min-aspect-ratio: 1/1) {
    .announcement-speaker-bottom-nav {
        margin-top: 0;
        flex-shrink: 0;
        position: relative;
        z-index: 4;
        margin-bottom: clamp(18px, 4.5vmin, 40px);
    }
}

/* 直向窄版：捲軸公告以 vh 為主撐滿進關視覺區（避免 min 高度全用 vmin 時變矮） */
@media (aspect-ratio < 1/1) {
    .announcement-speaker-layer {
        /* 多加頂部留白；再整體上移約進關 IntroBtnClose 高度（6vh，與 #IntroPanel .IntroBtnClose 一致） */
        padding: max(2px, calc(env(safe-area-inset-top, 0px) + min(6vh, 52px) - min(6vh, 54px))) max(4px, env(safe-area-inset-right, 0px)) max(2px, env(safe-area-inset-bottom, 0px)) max(4px, env(safe-area-inset-left, 0px));
        box-sizing: border-box;
    }

    /* 勿 w/h 100%，否則透明區蓋滿螢幕會擋住 backdrop 的關閉點擊（寬版因未強制全滿故正常） */
    .announcement-speaker-modal {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        align-items: center;
        justify-content: center;
    }

    .announcement-speaker-modal-scale {
        width: auto;
        max-width: 100%;
        max-height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    .announcement-speaker-frame-bg {
        width: min(96vw, calc(var(--vw, 1vw) * 96));
        /*
         * contain 底圖時，盒子過高會在上下留下「透明帶」，flex 仍會把內容撐滿整個盒子，
         * 導致圓點與文字落到捲軸底圖捲筒外。改以較貼合的總高度 + overflow:hidden 與下方加大 margin 解決。
         */
        min-height: 0;
        height: min(78vh, calc(var(--vh, 1vh) * 78));
        max-height: min(84vh, calc(var(--vh, 1vh) * 84));
        max-width: 100%;
    }

    /* 框已接近全螢幕高時，不再疊 1.2 倍避免超出視窗 */
    .announcement-speaker-layer.announcement-shown .announcement-speaker-modal-scale {
        transform: scale(1);
        opacity: 1;
    }

    .announcement-speaker-modal-scale {
        transform: scale(0.92);
    }

    .announcement-frame-body {
        margin: min(9.5vh, 80px) 6.5% min(9.5vh, 74px) 6.5%;
        flex: 1 1 auto;
        min-height: 0;
        gap: clamp(2px, 1.2vmin, 10px);
    }

    .announcement-speaker-title {
        margin-bottom: clamp(2px, 0.6vmin, 8px);
    }

    /* 窄版：先 −2/3−1/2 高度（減裁切），再下移自身視覺高度 1/3，較貼捲軸上緣；寬版不套用 */
    .announcement-speaker-icon-wrap {
        width: clamp(56px, 15vw, 96px);
        height: clamp(56px, 15vw, 96px);
        transform: translate(-50%, calc(-100% * 2 / 3 - 50% + 100% / 3)) scale(2);
    }

    .announcement-v1-text {
        font-size: clamp(11px, calc(var(--vw, 1vw) * 3.5), 17px);
    }

    .announcement-content-well {
        min-height: min(31.2vh, 276px);
        margin-top: 0;
    }

    .announcement-slide-v1 .announcement-v1-img {
        background-position: center center;
    }

    .announcement-slide {
        padding: 0.45vmin calc(var(--vw, 1vw) * 2) 0.45vmin calc(var(--vw, 1vw) * 2);
    }

    /* 底列規則須在此媒體內覆寫共用超大 margin-top，箭頭+圓點補在捲軸底部留白區 */
    .announcement-speaker-bottom-nav {
        justify-content: center;
        gap: clamp(2px, calc(var(--vw, 1vw) * 1), 8px);
        padding: 0.2vmin 0 0;
        margin-top: clamp(10px, calc(var(--vw, 1vw) * 3.5), 28px);
        margin-bottom: clamp(20px, calc(var(--vw, 1vw) * 20 / 3), 36px);
    }

    .announcement-speaker-bottom-nav .announcement-speaker-dots {
        flex: 0 0 auto;
        gap: clamp(12px, calc(var(--vw, 1vw) * 2.8), 28px);
    }

    .announcement-speaker-arrow {
        width: clamp(20px, calc(var(--vw, 1vw) * 20 / 3), 36px);
        height: clamp(20px, calc(var(--vw, 1vw) * 20 / 3), 36px);
    }

    .announcement-dot {
        width: clamp(24px, calc(var(--vw, 1vw) * 6.8), 48px);
        height: clamp(24px, calc(var(--vw, 1vw) * 6.8), 48px);
    }
}

/* 更窄寬度（含 DevTools 並排）：再收總高、加大下方 vh 留白、縮 Banner */
@media (aspect-ratio < 1/1) and (max-width: 420px) {
    .announcement-speaker-layer {
        padding-top: max(2px, calc(env(safe-area-inset-top, 0px) + min(8vh, 64px) - min(6vh, 54px)));
    }

    .announcement-speaker-frame-bg {
        height: min(72vh, calc(var(--vh, 1vh) * 72));
        max-height: min(80vh, calc(var(--vh, 1vh) * 80));
        width: min(94vw, calc(var(--vw, 1vw) * 94));
    }

    .announcement-frame-body {
        /* 勿用小於直向預設的 margin-top，否則並排 DevTools / ≤420px 時內容會黏在上捲筒 */
        margin: min(9vh, 76px) 6% min(9vh, 72px) 6%;
    }

    .announcement-speaker-title {
        margin-bottom: 0.35vmin;
    }

    .announcement-speaker-icon-wrap {
        width: clamp(50px, 13vw, 84px);
        height: clamp(50px, 13vw, 84px);
    }

    .announcement-speaker-bottom-nav {
        justify-content: center;
        gap: clamp(2px, calc(var(--vw, 1vw) * 1), 8px);
        padding: 0.15vmin 0 0.1vmin;
        margin-top: clamp(8px, calc(var(--vw, 1vw) * 3.2), 26px);
        margin-bottom: clamp(20px, calc(var(--vw, 1vw) * 20 / 3), 36px);
    }

    .announcement-speaker-bottom-nav .announcement-speaker-dots {
        gap: clamp(10px, calc(var(--vw, 1vw) * 2.6), 26px);
    }

    .announcement-dot {
        width: clamp(20px, calc(var(--vw, 1vw) * 6.2), 40px);
        height: clamp(20px, calc(var(--vw, 1vw) * 6.2), 40px);
    }
}

/*
 * 直向 iPad 級：補 aspect-ratio 媒體在部分環境失效；另見 #AnnouncementSpeakerLayer.announcement-tablet-well-tight（JS 以 inner 尺寸掛載）。
 * (orientation: portrait) 在 Safari/iPad 上通常比 aspect-ratio 可靠；min-width:600 排除一般手機直向。
 */
@media (aspect-ratio < 1/1) and (min-width: 600px),
       (orientation: portrait) and (min-width: 600px) {
    .announcement-speaker-frame-bg {
        --announcement-content-well-width: 68%;
    }

    .announcement-frame-body {
        margin-left: 12%;
        margin-right: 12%;
    }

    .announcement-speaker-bottom-nav {
        width: var(--announcement-content-well-width);
        max-width: var(--announcement-content-well-width);
        align-self: center;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }
}

/* JS RefreshAnnouncementTabletWellTight：直向且短邊≥500 時掛載；權重高於單層 class，不依賴媒體查詢 */
#AnnouncementSpeakerLayer.announcement-tablet-well-tight .announcement-speaker-frame-bg {
    --announcement-content-well-width: 68%;
}

#AnnouncementSpeakerLayer.announcement-tablet-well-tight .announcement-frame-body {
    margin-left: 12%;
    margin-right: 12%;
}

#AnnouncementSpeakerLayer.announcement-tablet-well-tight .announcement-speaker-bottom-nav {
    width: var(--announcement-content-well-width);
    max-width: var(--announcement-content-well-width);
    align-self: center;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/*#endregion*/

.CommonMask {
    width: calc(var(--vw,1vw)*100);
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 99;
    background: rgba(0,0,0,0.5);
    display: none;
}

/*#region COMBO*/

#ComboTextContent {
    width: calc(calc(var(--vh,1vh)*9)*4.285714285714286);
    height: calc(var(--vh,1vh)*9);
    background: url('./img/UI/Number/Combo.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*9)*4.285714285714286) calc(var(--vh,1vh)*9);
    margin: 0 auto auto calc(var(--vh,1vh)*-2);
    padding: 0px;
}

#ComboNumberOne { margin: calc(var(--vh,1vh)*-9) auto auto calc(var(--vh,1vh)*37); }
#ComboNumberTwo { margin: calc(var(--vh,1vh)*-9) auto auto calc(var(--vh,1vh)*45); }

/*#endregion*/

/*#region 遊戲暫停*/

.PausePanel {
    width: calc(calc(var(--vh,1vh)*65)*0.7807);
    height: calc(var(--vh,1vh)*65);
    background: url('./img/UI/Frame_Book_Small.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*65)*0.7807) calc(var(--vh,1vh)*65);
    margin: calc(var(--vh,1vh)*25) auto 0 auto;
    padding: 0px;
    display: none;
}

.CloseUI{
    display: none !important;
}

.DisableDivButton{
    pointer-events: none;
}

/*#region 關閉按鈕共用基底 */
.BtnClose,
.RankingBtnClose,
.TutorialBtnClose,
.AboutBtnClose,
.PrivacyPolicyBtnClose,
.QuizResultBtnClose,
.LoginPanelCloseButton,
.MyAccountPanelCloseButton,
.MyRewardPanelCloseButton,
#RankingScrollBtnClose,
.MemoryAnalysisCloseButton,
#MemoryScrollCloseButton,
.HintFrameCloseButton,
.FailureRemainingContinuesPanelCloseButton,
#DailyTipsCloseButton,
#EncyclopediaCloseButton {
    background: url('./img/UI/Button_Close.png') no-repeat;
    background-size: 100% 100%;
    position: absolute;
    z-index: 2;
}
/*#endregion */

.BtnClose {
    width: calc(var(--vh,1vh)*10);
    height: calc(var(--vh,1vh)*10);
    margin: calc(var(--vh,1vh)*1) auto 0 calc(var(--vh,1vh)*39.5);
}

.PausePanelHaderImage {
    width: calc(calc(var(--vh,1vh)*22)*1.24401);
    height: calc(var(--vh,1vh)*22);
    background: url('./img/UI/Title_Rank_Today.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*22)*1.24401) calc(var(--vh,1vh)*22);
    margin: calc(var(--vh,1vh)*-17) auto 0 calc(var(--vh,1vh)*11.5);
    position: absolute;
    z-index: 2;
    justify-content: center;
    display: flex;
}

#PausePanelTitle{
    position: absolute;
    top: 70%;
    padding: 0.4em 1em 1em 1em;
    text-align: center;
    font-size: calc(var(--vh, 1vh) * 2.8);
    line-height: calc(var(--vh, 1vh) * 3);
    font-weight: bold;
    color: white;
    border: 0;
    font-family: PumpkinGames;
}

.PausePanelHeadImage {
    width: calc(var(--vh,1vh)*12);
    height: calc(var(--vh,1vh)*12);
    background: url('./img/UI/Frame_Main_Login.png') no-repeat;
    background-size: calc(var(--vh,1vh)*12) calc(var(--vh,1vh)*12);
    margin: calc(var(--vh,1vh)*9) auto 0 calc(var(--vh,1vh)*19);
    position: absolute;
    z-index: 2;
    border-radius: 50%;
}

#PausePanelSubjectDiv {
    /*        margin: auto;*/
    margin: calc(var(--vh,1vh)*24.5) auto 0 calc(var(--vh,1vh)*19);
    text-align: center;
    position: absolute;
    z-index: 2;
}

#PausePanelSubjectLabel {
    font-weight: bold;
    color: black;
    font-size: calc(var(--vh,1vh)*2.5);
    font-family: PumpkinGames, sans-serif;
    text-align: center;
}

#PausePanelSubTitleDiv {
    /*        margin: auto;*/
    margin: calc(var(--vh,1vh)*31) auto 0 calc(var(--vh,1vh)*22);
    text-align: center;
    position: absolute;
    z-index: 2;
}

#PausePanelSubjectTitleLabel {
    font-weight: bold;
    color: black;
    font-size: calc(var(--vh,1vh)*2.5);
    font-family: PumpkinGames, sans-serif;
    text-align: center;
}

.PausePanelSpeakerImage {
    width: calc(calc(var(--vh,1vh)*7)*0.98076);
    height: calc(var(--vh,1vh)*7);
    background: url('./img/UI/Button_Music_On.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*7)*0.98076) calc(var(--vh,1vh)*7);
    margin: calc(var(--vh,1vh)*37) auto 0 calc(var(--vh,1vh)*22);
    position: absolute;
    z-index: 2;
}

#PausePanelGiveUpDiv {
    margin: calc(var(--vh,1vh)*46) auto 0 calc(var(--vh,1vh)*6);
    position: absolute;
    z-index: 1;
}

.PausePanelGiveUpButtonStyle {
    width: calc(calc(var(--vh,1vh)*10)*3.2987);
    height: calc(var(--vh,1vh)*10);
    display: block;
    border: none;
    background: url('./img/UI/Title_AboutUs.png?id=2');
    background-size: calc(calc(var(--vh,1vh)*10)*3.2987) calc(var(--vh,1vh)*10);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*1);
    font-size: calc(var(--vh,1vh)*2);
    color: white;
    font-weight: bold;
}

/*#endregion*/

/*#region 排行榜總面板*/

.RankingTotalPanel {
    width: calc(calc(var(--vh,1vh)*85)*0.6587591240875912);
    height: calc(var(--vh,1vh)*85);
    background: url('./img/UI/Frame_Rank_1.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*85)*0.6587591240875912) calc(var(--vh,1vh)*85);
    margin: calc(var(--vh,1vh)*10) auto 0 auto;
    padding: 0px;
    display: none;
}

#RankingHeaderTitleDiv {
    padding: calc(var(--vh,1vh)*1) 0 0 0;
    text-align: center;
    z-index: 2;
}

#RankingHeaderTitleLabel {
    font-weight: bold;
    color: white;
    font-size: calc(var(--vh,1vh)*3.5);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
}

.RankingBtnClose {
    width: calc(var(--vh,1vh)*10);
    height: calc(var(--vh,1vh)*10);
    margin: calc(var(--vh,1vh)*-1) auto 0 calc(var(--vh,1vh)*43.5);
}

#RankingPanelContainerDiv {
    margin: calc(var(--vh,1vh)*18) calc(var(--vh,1vh)*10) 0 calc(var(--vh,1vh)*4.5);
    position: absolute;
    z-index: 1;
}

#RankingPanelTodayDiv {
    margin: calc(var(--vh,1vh)*2) auto 0 calc(var(--vh,1vh)*1);
}

/*#region 排行榜按鈕共用基底 */
.RankingPanelTodayButtonStyle,
.RankingPanelThisWeekButtonStyle,
.RankingPanelEventStyle,
.RankingPanelHistoryStyle,
.RankingPanelLuckyStyle,
.RankingPanelRank_PKStyle {
    width: calc(calc(var(--vh,1vh)*13)*3.4);
    height: calc(var(--vh,1vh)*13);
    display: block;
    border: none;
    background-color: transparent;
    background-size: calc(calc(var(--vh,1vh)*13)*3.4) calc(var(--vh,1vh)*13);
    font-size: calc(var(--vh,1vh)*2.5);
    color: white;
    font-weight: bold;
}
/*#endregion */
.RankingPanelTodayButtonStyle     { background-image: url('./img/UI/Button_Rank_Today.png'); }

#RankingPanelThisWeekDiv {
    margin: calc(var(--vh,1vh)*1) auto 0 calc(var(--vh,1vh)*1);
}
.RankingPanelThisWeekButtonStyle  { background-image: url('./img/UI/Button_Rank_Week.png'); }

#RankingPanelEventDiv {
    margin: calc(var(--vh,1vh)*1) auto 0 calc(var(--vh,1vh)*1);
}
.RankingPanelEventStyle           { background-image: url('./img/UI/Button_Rank_Activity.png'); }

#RankingPanelHistoryDiv {
    margin: calc(var(--vh,1vh)*1) auto 0 calc(var(--vh,1vh)*1);
}
.RankingPanelHistoryStyle         { background-image: url('./img/UI/Button_Rank_Total.png'); }

#RankingPanelLuckyDiv {
    margin: calc(var(--vh,1vh)*1) auto 0 calc(var(--vh,1vh)*1);
}
.RankingPanelLuckyStyle           { background-image: url('./img/UI/Button_Rank_Lucky.png'); }

#RankingPanelRank_PKDiv {
    margin: calc(var(--vh,1vh)*1) auto 0 calc(var(--vh,1vh)*1);
}

#RankingpanelRankButtonLock {
    width: calc(calc(var(--vh,1vh)*8)*0.7894736842105263);
    height: calc(var(--vh,1vh)*8);
    background: url('./img/UI/Icon_Lock.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*8)*0.7894736842105263) calc(var(--vh,1vh)*8);
    /*margin: calc(var(--vh,1vh)*-15) calc(var(--vh,1vh)*0) 0 calc(var(--vh,1vh)*37);*/
    padding: 0px;
    position: absolute;
}

.RankingPanelRank_PKStyle          { background-image: url('./img/UI/Button_Rank_PK.png'); }

/*#endregion*/

/*#region 教學面板*/

.TutorialPanel {
    width: calc(calc(var(--vh,1vh)*90)*0.6173780487804878);
    height: calc(var(--vh,1vh)*90);
    background: url('./img/UI/Frame_Tutorial.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*90)*0.6173780487804878) calc(var(--vh,1vh)*90);
    margin: calc(var(--vh,1vh)*12) auto 0 auto;
    padding: 0px;
    display: none;
}

#TutorialHeaderDiv {
    width: calc(calc(var(--vh,1vh)*15)*2.633663366336634);
    height: calc(var(--vh,1vh)*15);
    margin: calc(var(--vh,1vh)*-7.5) auto auto calc(var(--vh,1vh)*7.5);
    background: url('./img/UI/Title_Tutorial.png');
    background-size: calc(calc(var(--vh,1vh)*15)*2.633663366336634) calc(var(--vh,1vh)*15);
    position: absolute;
    z-index: 2;
}


.TutorialHeaderContentDiv {
    margin: calc(var(--vh,1vh)*7) auto auto calc(var(--vh,1vh)*11);
    position: absolute;
    z-index: 2;
    text-align: center;
    width: calc(var(--vh,1vh)*22);
}


#TutorialHeaderLabel {
    font-size: calc(var(--vh,1vh)*3.5);
    color: white;
    font-weight: bold;
    margin: 0 auto 0 auto;
}

.TutorialBtnClose {
    width: calc(var(--vh,1vh)*10);
    height: calc(var(--vh,1vh)*10);
    margin: calc(var(--vh,1vh)*3) auto 0 calc(var(--vh,1vh)*43.5);
}


#TutorialSingleDiv {
    width: calc(calc(var(--vh,1vh)*25)*1.971428571428571);
    height: calc(var(--vh,1vh)*25);
    margin: calc(var(--vh,1vh)*12.5) auto auto calc(var(--vh,1vh)*1.3);
    background: url('./img/UI/Frame_Tutorial_1.png');
    background-size: calc(calc(var(--vh,1vh)*25)*1.971428571428571) calc(var(--vh,1vh)*25);
    position: absolute;
    z-index: 2;
}




#TutorialSingleHeaderLabel {
    font-size: calc(var(--vh,1vh)*1.5);
    color: white;
    font-weight: bold;
    margin: 0 auto 0 auto;
}

.TutorialSingleContentDiv {
    margin: calc(var(--vh,1vh)*3.5) auto auto auto;
    text-align: left;
    padding: calc(var(--vh,1vh)*1) calc(var(--vh,1vh)*13) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*5);
    z-index: 2;
    line-height: calc(var(--vh,1vh)*2.25);
}


#TutorialDoubleDiv {
    width: calc(calc(var(--vh,1vh)*23)*2.03448275862069);
    height: calc(var(--vh,1vh)*23);
    margin: calc(var(--vh,1vh)*37.5) auto auto calc(var(--vh,1vh)*3);
    background: url('./img/UI/Frame_Tutorial_2.png');
    background-size: calc(calc(var(--vh,1vh)*23)*2.03448275862069) calc(var(--vh,1vh)*23);
    position: absolute;
    z-index: 2;
}




#TutorialDoubleHeaderLabel {
    font-size: calc(var(--vh,1vh)*1.5);
    color: white;
    font-weight: bold;
    margin: 0 auto 0 auto;
}

.TutorialDoubleContentDiv {
    z-index: 2;
    text-align: left;
    padding: calc(var(--vh,1vh)*4) calc(var(--vh,1vh)*2.5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*15);
    line-height: calc(var(--vh,1vh)*3);
}


#TutorialDoubleContentLabel {
    font-size: calc(var(--vh,1vh)*2.2);
    color: maroon;
    font-weight: bold;
    margin: 0 auto 0 auto;
}

#TutorialPracticeDiv {
    width: calc(calc(var(--vh,1vh)*25)*2.022857142857143);
    height: calc(var(--vh,1vh)*25);
    margin: calc(var(--vh,1vh)*60) auto auto calc(var(--vh,1vh)*1.3);
    background: url('./img/UI/Frame_Tutorial_3.png');
    background-size: calc(calc(var(--vh,1vh)*25)*2.022857142857143) calc(var(--vh,1vh)*25);
    position: absolute;
    z-index: 2;
}



#TutorialPracticeHeaderLabel {
    font-size: calc(var(--vh,1vh)*1.5);
    color: white;
    font-weight: bold;
    margin: 0 auto 0 auto;
}

.TutorialPracticeContentDiv {
    z-index: 2;
    padding: calc(var(--vh,1vh)*4.5) calc(var(--vh,1vh)*14) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*5);
    text-align: left;
    line-height: calc(var(--vh,1vh)*2.6);
}

/*#endregion*/

/*#region 關於我們*/

.AboutPanel {
    width: calc(calc(var(--vh,1vh)*85)*0.6173780487804878);
    height: calc(var(--vh,1vh)*85);
    background: url('./img/UI/Frame_AboutUs.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*85)*0.6173780487804878) calc(var(--vh,1vh)*85);
    margin: calc(var(--vh,1vh)*10) auto 0 auto;
    padding: 0px;
    display: none;
}

#AboutHeaderDiv {
    width: calc(calc(var(--vh,1vh)*13.5)*2.633663366336634);
    height: calc(var(--vh,1vh)*13.5);
    margin: calc(var(--vh,1vh)*-6) auto auto calc(var(--vh,1vh)*7);
    background: url('./img/UI/Title_AboutUs.png?id=2');
    background-size: calc(calc(var(--vh,1vh)*13.5)*2.633663366336634) calc(var(--vh,1vh)*13.5);
    position: absolute;
    z-index: 2;
}

.AboutHeaderContentDiv {
    margin: calc(var(--vh,1vh)*5) auto auto calc(var(--vh,1vh)*13);
    position: absolute;
    z-index: 2;
}

#AboutHeaderLabel {
    font-size: calc(var(--vh,1vh)*4);
    color: white;
    font-weight: bold;
    margin: 0 auto 0 auto;
}

.AboutBtnClose {
    width: calc(var(--vh,1vh)*10);
    height: calc(var(--vh,1vh)*10);
    margin: calc(var(--vh,1vh)*5) auto 0 calc(var(--vh,1vh)*41.5);
}

.AboutScrollContent {
    /*    text-align: center;*/
    margin: auto;
}

.AboutIntroduceContentDiv {
    width: calc(var(--vh,1vh)*42);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*1);
    /*    position: absolute;*/
    z-index: 2;
    padding: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
    text-align: justify;
}

#AboutIntroduceContentLabel {
    font-size: calc(var(--vh,1vh)*1.85);
    color: white;
    font-weight: bold;
    margin: 0 auto 0 auto;
}

#AboutFutureHeaderDiv {
    width: calc(calc(var(--vh,1vh)*7)*3.159090909090909);
    height: calc(var(--vh,1vh)*7);
    margin: calc(var(--vh,1vh)*5) auto auto calc(var(--vh,1vh)*11);
    background: url('./img/UI/Button_Main_AboutUs.png');
    background-size: calc(calc(var(--vh,1vh)*7)*3.159090909090909) calc(var(--vh,1vh)*7);
    /*    position: absolute;*/
    z-index: 2;
}

.AboutFutureHeaderContentDiv {
    /*    font-size: calc(var(--vh,1vh)*2.65);*/
    /*    margin: calc(var(--vh,1vh)*0.75) auto auto calc(var(--vh,1vh)*3.5);*/
    /*    position: absolute;*/
    z-index: 2;
    padding: calc(var(--vh,1vh)*2) calc(var(--vh,1vh)*1) 0px calc(var(--vh,1vh)*0);
    text-align: center;
}

#AboutFutureHeaderLabel {
    font-size: calc(var(--vh,1vh)*2.5);
    color: saddlebrown;
    font-weight: bold;
    margin: 0 auto 0 auto;
}

.AboutFutureContentDiv {
    width: calc(var(--vh,1vh)*42);
    margin: calc(var(--vh,1vh)*5) auto calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*1);
    /*    position: absolute;*/
    z-index: 2;
    padding: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
    text-align: justify;
}

#AboutFutureContentLabel {
    font-size: calc(var(--vh,1vh)*1.85);
    color: white;
    font-weight: bold;
    margin: 0 auto 0 auto;
}

/*#endregion*/

/*#region 隱私權政策面板*/

.PrivacyPolicyPanel {
    width: calc(calc(var(--vh,1vh)*85)*0.6173780487804878);
    height: calc(var(--vh,1vh)*85);
    background: url('./img/UI/Frame_AboutUs.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*85)*0.6173780487804878) calc(var(--vh,1vh)*85);
    margin: calc(var(--vh,1vh)*10) auto 0 auto;
    padding: 0px;
    display: none;
}

#PrivacyPolicyHeaderDiv {
    width: calc(calc(var(--vh,1vh)*13.5)*2.633663366336634);
    height: calc(var(--vh,1vh)*13.5);
    margin: calc(var(--vh,1vh)*-6) auto auto calc(var(--vh,1vh)*7);
    background: url('./img/UI/Title_AboutUs.png?id=2');
    background-size: calc(calc(var(--vh,1vh)*13.5)*2.633663366336634) calc(var(--vh,1vh)*13.5);
    position: absolute;
    z-index: 2;
}

.PrivacyPolicyHeaderContentDiv {
    margin: calc(var(--vh,1vh)*5) auto auto calc(var(--vh,1vh)*12);
    z-index: 2;
}

#PrivacyPolicyLabel {
    font-size: calc(var(--vh,1vh)*3);
    color: white;
    font-weight: bold;
    margin: 0 auto 0 auto;
}

.PrivacyPolicyBtnClose {
    width: calc(var(--vh,1vh)*10);
    height: calc(var(--vh,1vh)*10);
    margin: calc(var(--vh,1vh)*5) auto 0 calc(var(--vh,1vh)*41.5);
}

.privacypolicyScrollbar {
    /*    text-align: center;*/
    margin: auto;
}

.PrivacyPolicyContentDiv {
    margin: calc(var(--vh,1vh)*2) auto auto calc(var(--vh,1vh)*1);
    z-index: 2;
}

#PrivacyPolicyContentLabel {
    font-size: calc(var(--vh,1vh)*1.85);
    color: white;
    font-weight: bold;
    margin: 0 auto 0 auto;
}
/*#endregion*/

/*#region 測驗結果面板*/

.QuizResultPanel {
    width: calc(calc(var(--vh,1vh)*75)*0.7969283276450512);
    height: calc(var(--vh,1vh)*80);
    background: url('./img/UI/Frame_Personality.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*75)*0.7969283276450512) calc(var(--vh,1vh)*80);
    margin: calc(var(--vh,1vh)*15) auto auto auto;
    padding: 0px;
    z-index: 3;
    display: none;
    position: relative;
}

#QuizResultHeaderDiv {
    margin: calc(var(--vh,1vh)*1.5) auto auto calc(var(--vh,1vh)*23);
    font-size: calc(var(--vh,1vh)*3.5);
    color: white;
    position: absolute;
    z-index: 2;
}

.QuizResultHeaderLabel {
    margin: calc(var(--vh,1vh)*1.5) auto auto calc(var(--vh,1vh)*22);
    font-size: calc(var(--vh,1vh)*3);
    color: white;
    position: absolute;
    z-index: 2;
}

.QuizResultBtnClose {
    width: calc(var(--vh,1vh)*10);
    height: calc(var(--vh,1vh)*10);
    margin: calc(var(--vh,1vh)*4.5) auto 0 calc(var(--vh,1vh)*46.5);
}

.QuizResultMemoryDiv {
    float: left;
    margin: calc(var(--vh,1vh)*2) auto auto calc(var(--vh,1vh)*0.5);
}

.QuizResultPasstimeDiv {
    float: right;
    margin: calc(var(--vh,1vh)*3) auto auto auto;
}

.QuizResultLuckyDiv {
    float: left;
    margin: calc(var(--vh,1vh)*3) auto auto calc(var(--vh,1vh)*0.5);
}

#QuizResultContainer {
    width: 95%;
    height: 185px;
    margin: calc(var(--vh,1vh)*2) auto auto auto;
}

.quiz-decoration-line {
    width: calc(var(--vh,calc(var(--vh,1vh)*1))*43.5);
    height: calc(var(--vh,calc(var(--vh,1vh)*1))*0.75);
    margin: calc(var(--vh,1vh)*2) auto auto auto;
}

.quiz-result-animal-img {
    width: calc(var(--vh,calc(var(--vh,1vh)*1))*17.5);
    height: calc(var(--vh,calc(var(--vh,1vh)*1))*17.5);
}

.quiz-result-text {
    max-width: calc(var(--vh,calc(var(--vh,1vh)*1))*26);
    font-size: calc(var(--vh,calc(var(--vh,1vh)*1))*2);
    margin: calc(var(--vh,1vh)*0) auto auto auto;
    padding: 0em 1em 0em 1em;
    color: saddlebrown;
    font-weight: bold;
    font-family: PumpkinGames, sans-serif;
}
.QuizResultMemoryDiv .quiz-result-text,
.QuizResultLuckyDiv .quiz-result-text { float: right; }
.QuizResultPasstimeDiv .quiz-result-text { float: left; }

/*#endregion*/

/*#region 登入頁面*/

.LoginPanel {
    width: calc(calc(var(--vh,1vh)*65)*0.8198924731182796);
    height: calc(var(--vh,1vh)*65);
    background: url('./img/UI/Frame_Login.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*65)*0.8198924731182796) calc(var(--vh,1vh)*65);
    margin: calc(var(--vh,1vh)*20) auto auto auto;
    padding: 0px;
    z-index: 3;
    display: none;
}

#LoginTitleContenDiv {
    margin: calc(var(--vh,1vh)*2.5) auto auto auto;
    position: absolute;
    width: calc(var(--vh,1vh)*52);
    text-align: center;
}

#LoginTitleContent {
    font-size: calc(var(--vh,1vh)*3);
    color: maroon;
    font-weight: bold;
}

.LoginPanelCloseButton {
    width: calc(var(--vh,1vh)*10);
    height: calc(var(--vh,1vh)*10);
    margin: calc(var(--vh,1vh)*1) auto 0 calc(var(--vh,1vh)*41);
}

.LoginButton {
    width: calc(calc(var(--vh,1vh)*10)*2.929824561403509);
    height: calc(var(--vh,1vh)*10);
    display: block;
    border: none;
    font-size: calc(var(--vh,1vh)*4);
    color: white;
    font-weight: bold;
    position: absolute;
    font-family: PumpkinGames;
}

#FacebookButton {
    background: url('./img/UI/Button_Blue.png');
    background-size: calc(calc(var(--vh,1vh)*10)*2.31) calc(var(--vh,1vh)*10);
    margin: calc(var(--vh,1vh)*9) auto 0 calc(var(--vh,1vh)*15);
}

#LineButton {
    background: url('./img/UI/Button_Line.png');
    background-size: calc(calc(var(--vh,1vh)*10)*2.929824561403509) calc(var(--vh,1vh)*10);
    margin: calc(var(--vh,1vh)*32) auto 0 calc(var(--vh,1vh)*11.5);
}



#GoogleButton {
    /*    background: url('./img/UI/Button_Purple.png');
    background-size: calc(calc(var(--vh,1vh)*10)*2.31) calc(var(--vh,1vh)*10);*/
    /*    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*0);
    display: block;
    border: none;
    font-size: calc(var(--vh,1vh)*4);
    color: white;
    font-weight: bold;
    position: absolute;
    font-family: PumpkinGames;*/
}

#LoginGuestContentDiv {
    margin: calc(var(--vh,1vh)*12) auto auto auto;
    text-align: center;
    padding: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*7) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*7);
}

#LoginGuestContent {
    /*    --min-size: 13;
    --max-size: 16;
    --font-size: calc( (var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100cqw - 320px) / (1920 - 320)) );
    font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);*/
    font-size: calc(var(--vh,1vh)*2.25);
    color: red;
    font-weight: bold;
    z-index: 2;
}

#GuestButton {
    background: url('./img/UI/Button_Visitor.png');
    background-size: calc(calc(var(--vh,1vh)*10)*2.929824561403509) calc(var(--vh,1vh)*10);
    margin: calc(var(--vh,1vh)*1) auto calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*11.5);
}

#DecorationLine_Login {
    width: calc(var(--vh,calc(var(--vh,1vh)*1))*40.5);
    height: calc(var(--vh,calc(var(--vh,1vh)*1))*0.75);
    margin: calc(var(--vh,calc(var(--vh,1vh)*1))*43) auto auto calc(var(--vh,calc(var(--vh,1vh)*1))*6);
}

/*#endregion*/

/*#region 我的帳戶頁面*/

.MyAccountPanel {
    width: calc(calc(var(--vh,1vh)*70)*0.6885245901639344);
    height: calc(var(--vh,1vh)*70);
    background: url('./img/UI/Frame_Mine.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*70)*0.6885245901639344) calc(var(--vh,1vh)*70);
    margin: calc(var(--vh,1vh)*20) auto auto auto;
    padding: 0px;
    z-index: 3;
    display: none;
    position: relative;
}

.MyAccountPanel #_itemblock {
        width: 200px;
        display: flex;
        flex-direction: row;
        position: absolute;
        top: calc(var(--vh,1vh)*15);
        left: calc(var(--vh,1vh)*22.5);
    }

.MyAccountPanel #_hintitem {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
    }
    
.MyAccountPanel #_hintitem-img {
        width: 30px;
        height: 30px;
        background: url('./img/UI/Button_HintCard.png') no-repeat center/contain;
    }

.MyAccountPanel #_lifecount {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
    }
    
.MyAccountPanel #_lifecount-img {
        width: 25px;
        height: 28px;
        background: url('./img/UI/Icon_Energy.png') no-repeat center/contain;
    }

.MyAccountPanel ._item-count {
        width: 28px;
        height: 28px;
        color: brown;
        font-weight: bold;
        justify-content: center;
        align-items: center;
        font-size: 16px;
    }

.MyAccountPanelCloseButton {
    width: calc(var(--vh,1vh)*10);
    height: calc(var(--vh,1vh)*10);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*36);
}

#AccuountTitleContent {
    margin: calc(var(--vh,1vh)*1) auto 0 calc(var(--vh,1vh)*35);
    position: absolute;
}

#AccountIdContentDiv {
    margin: calc(var(--vh,1vh)*6) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-12.5);
    position: absolute;
    width: calc(var(--vh,1vh)*19);
}

#AccountIdContent {
    font-size: calc(var(--vh,1vh)*2.8);
    color: saddlebrown;
    position: absolute;
    font-weight: bold;
    z-index: 2;
    margin-left: calc(var(--vh,1vh)*1);
}

.BindChefBearInputBox {
    font-size: calc(var(--vh,1vh)*1.35);
    text-align: left;
    padding-left: 15px; /* 讓文字往右 */
    padding-bottom: 5px; /*文字往上*/
    width: calc(calc(var(--vh,1vh)*4.5)*3.75609756097561);
    height: calc(var(--vh,1vh)*4);
    background: url('./img/UI/Frame_Text_1.png ') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*4.5)*3.75609756097561) calc(var(--vh,1vh)*4);
    margin: calc(var(--vh,1vh)*4) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-3);
    font-weight: bold;
    position: absolute;
    border: none;
    outline: none;
    -webkit-appearance: textfield; /* Chrome, Safari, Opera */
    -moz-appearance: textfield; /* Firefox */
    appearance: textfield;
}

    .BindChefBearInputBox::-webkit-inner-spin-button, /* Firefox */
    .BindChefBearInputBox::-webkit-outer-spin-button { /* For WebKit (Chrome, Opera, Safari, ... ) */
        -webkit-appearance: none;
        margin: 0;
    }

    .BindChefBearInputBox::-ms-clear,
    .BindChefBearInputBox::-ms-reveal { /* Internet Explorer */
        display: none;
        width: 0;
        height: 0;
    }

    .BindChefBearInputBox::-ms-clear { /* Microsoft Edge */
        display: none;
    }

.BattleInvitationCodeInputBox {
    font-size: calc(var(--vh,1vh)*1.35);
    text-align: left;
    padding-left: 15px; /* 讓文字往右 */
    padding-bottom: 5px; /*文字往上*/
    width: calc(calc(var(--vh,1vh)*4.5)*3.75609756097561);
    height: calc(var(--vh,1vh)*4);
    background: url('./img/UI/Frame_Text_1.png ') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*4.5)*3.75609756097561) calc(var(--vh,1vh)*4);
    margin: calc(var(--vh,1vh)*4) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-3);
    font-weight: bold;
    position: absolute;
    border: none;
    outline: none;
    -webkit-appearance: textfield; /* Chrome, Safari, Opera */
    -moz-appearance: textfield; /* Firefox */
    appearance: textfield;
}

    .BattleInvitationCodeInputBox::-webkit-inner-spin-button, /* Firefox */
    .BattleInvitationCodeInputBox::-webkit-outer-spin-button { /* For WebKit (Chrome, Opera, Safari, ... ) */
        -webkit-appearance: none;
        margin: 0;
    }

    .BattleInvitationCodeInputBox::-ms-clear,
    .BattleInvitationCodeInputBox::-ms-reveal { /* Internet Explorer */
        display: none;
        width: 0;
        height: 0;
    }

    .BattleInvitationCodeInputBox::-ms-clear { /* Microsoft Edge */
        display: none;
    }

.BindChefBearButton {
    width: calc(var(--vh,1vh)*2.5);
    height: calc(var(--vh,1vh)*2.5);
    background: url('./img/UI/Button_Search.png ') no-repeat;
    background-size: calc(var(--vh,1vh)*2.5) calc(var(--vh,1vh)*2.5);
    margin: calc(var(--vh,1vh)*4.5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*10.5);
    font-weight: bold;
    position: absolute;
    border: none;
}

.MyAccountPanel .BindChefBearInputBox {
    margin-left: 0;
}

.MyAccountPanel .BindChefBearButton {
    margin-left: calc(var(--vh,1vh)*13.5);
}

#ChefBearIdDiv {
    width: calc(var(--vh,1vh)*20);
    position: absolute;
}

#ChefBearId {
    margin: calc(var(--vh,1vh)*5) auto 0 calc(var(--vh,1vh)*-3);
    font-size: calc(var(--vh,1vh)*1.8);
    color: saddlebrown;
    position: absolute;
    font-weight: bold;
    z-index: 2;
    display: none;
}

.MyAccountButton {
    width: calc(calc(var(--vh,1vh)*7.5)*4.188679245283019);
    height: calc(var(--vh,1vh)*7.5);
    background: url('./img/UI/Button_Mine.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*7.5)*4.188679245283019) calc(var(--vh,1vh)*7.5);
    display: block;
    border: none;
    font-size: calc(var(--vh,1vh)*2);
    color: saddlebrown;
    font-weight: bold;
    position: absolute;
}

#MemoryAnalyzeButton {
    margin: calc(var(--vh,1vh)*21) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*8.5);
}

#MyRewardButton {
    margin: calc(var(--vh,1vh)*31) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*8.5);
}

#EncyclopediaButton {
    margin: calc(var(--vh,1vh)*41) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*8.5);
}

#LogOutButton {
    width: calc(calc(var(--vh,1vh)*5.5)*3.058823529411765);
    height: calc(var(--vh,1vh)*5.5);
    background: url('./img/UI/Button_Main_Login.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*5.5)*3.058823529411765) calc(var(--vh,1vh)*5.5);
    display: block;
    border: none;
    font-size: calc(var(--vh,1vh)*2);
    color: white;
    font-weight: bold;
    margin: calc(var(--vh,1vh)*49) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*15.5);
    position: absolute;
    font-family: PumpkinGames;
}

#MyAccountTodayCanPlayCountDiv {
    margin: calc(var(--vh,1vh)*55) auto 0 calc(var(--vh,1vh)*8);
    width: calc(var(--vh,1vh)*32);
    position: absolute;
}

#MyAccountTodayCanPlayCountHint {
    font-size: calc(var(--vh,1vh)*1.5);
    font-weight: bold;
    font-family: PumpkinGames;
    color: saddlebrown;
    text-align: center;
}

/*#endregion*/

/*#region 我的獎勵面板*/

.MyRewardPanel {
    width: calc(calc(var(--vh,1vh)*75)*0.6787658802177858);
    height: calc(var(--vh,1vh)*75);
    background: url('./img/UI/Frame_Mine_Bag.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*75)*0.6787658802177858) calc(var(--vh,1vh)*75);
    margin: calc(var(--vh,1vh)*15) auto auto auto;
    padding: 0px;
    z-index: 3;
    display: none;
}


#MyRewardTitleIcon {
    width: calc(calc(var(--vh,1vh)*8.5)* 3.954545454545455 );
    height: calc(var(--vh,1vh)*8.5);
    background: url('./img/UI/Title_Mine_Bag.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*8.5)* 3.954545454545455 ) calc(var(--vh,1vh)*8.5);
    margin: calc(var(--vh,1vh)*-4) auto auto calc(var(--vh,1vh)*9);
    padding: 0px;
    z-index: 3;
    position: absolute;
}

#MyRewardTitleContentDiv {
    margin: calc(var(--vh,1vh)*2.5) auto calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
    position: absolute;
    width: calc(var(--vh,1vh)*25);
    text-align: center;
}

#MyRewardTitleContent {
    font-size: calc(var(--vh,1vh)*2.75);
    color: white;
    position: absolute;
    z-index: 2;
    font-weight: bold;
}

.MyRewardPanelCloseButton {
    width: calc(var(--vh,1vh)*10);
    height: calc(var(--vh,1vh)*10);
    margin: calc(var(--vh,1vh)*-1) auto 0 calc(var(--vh,1vh)*40);
}

.MyRewardButton {
    width: calc(calc(var(--vh,1vh)*5)*3.41025641025641);
    height: calc(var(--vh,1vh)*5);
    display: block;
    border: none;
    font-size: calc(var(--vh,1vh)*1.85);
    color: white;
    font-weight: bold;
    position: absolute;
    z-index: 3;
}

#VirtualReward {
    margin: calc(var(--vh,1vh)*5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*8);
}

#EntityReward {
    margin: calc(var(--vh,1vh)*5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*25);
}

.RewardScrollContent {
    text-align: center;
    margin: auto;
}

.RewardObjectContent {
    width: calc(calc(var(--vh,1vh)*11.25)*3.482352941176471);
    height: calc(var(--vh,1vh)*11.25);
    background: url('./img/UI/Button_Bag_Icon.png ') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*11.25)* 3.482352941176471 ) calc(var(--vh,1vh)*11.25);
    margin: calc(var(--vh,1vh)*0) auto calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0.25);
    visibility: visible;
}

.RewardObjectCover {
    width: calc(calc(var(--vh,1vh)*11.25)*3.482352941176471);
    height: calc(var(--vh,1vh)*11.25);
    background: url('./img/UI/Button_Bag_Icon_Cover.png ') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*11.25)* 3.482352941176471 ) calc(var(--vh,1vh)*11.25);
    position: absolute;
    z-index: 4;
}

#OneClickSendReward {
    width: calc(calc(var(--vh,1vh)*7.5)*3.2);
    height: calc(var(--vh,1vh)*7.5);
    background: url('./img/UI/Frame_Rank_Score.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*7.5)*3.2) calc(var(--vh,1vh)*7.5);
    border: none;
    font-size: calc(var(--vh,1vh)*2);
    color: white;
    font-weight: bold;
    margin: calc(var(--vh,1vh)*64) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*13.5);
    position: absolute;
    font-family: PumpkinGames;
}
/*#endregion*/

/*#region 通用提示框面版*/


.HintFrameCloseButton {
    width: calc(var(--vh,1vh)*7.5);
    height: calc(var(--vh,1vh)*7.5);
    margin: calc(var(--vh,1vh)*1) auto 0 calc(var(--vh,1vh)*38);
}

#HintContentDiv {
    text-align: center;
    padding: calc(var(--vh,1vh)*12) calc(var(--vh,1vh)*10) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
}

#HintContent {
    /*    font-size: calc(var(--vh,1vh)*3);
    color: saddlebrown;
    font-weight: bold;*/
}

.commonButtonStyle {
    width: calc(calc(var(--vh,1vh)*6)*2.31);
    height: calc(var(--vh,1vh)*6);
    display: block;
    border: none;
    position: absolute;
    font-size: calc(var(--vh,1vh)*2.5);
    color: white;
}

#commonHintFrameButtonArea {
    position: absolute;
    margin: calc(var(--vh,1vh)*14) auto 0 calc(var(--vh,1vh)*17);
    display: none;
}

#YesButton {
    background: url('./img/UI/Button_Orange.png');
    background-size: calc(calc(var(--vh,1vh)*6)*2.31) calc(var(--vh,1vh)*6);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*-10);
}

#NoButton {
    background: url('./img/UI/Button_Blue.png');
    background-size: calc(calc(var(--vh,1vh)*6)*2.31) calc(var(--vh,1vh)*6);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*10);
}
/*#endregion*/

/*#region 關卡提示面板*/
.StageHintSingleTopicPanel {
    width: calc(calc(var(--vh,1vh)*25)*1.7925);
    height: calc(var(--vh,1vh)*25);
    background: url('./img/UI/Frame_Hint.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*25)*1.7925) calc(var(--vh,1vh)*25);
    margin: calc(var(--vh,1vh)*25) auto 0 auto;
    padding: 0px;
    display: none;
}

.StageHintSingleTopicLogoCenter {
    width: calc(var(--vh,1vh)*12);
    height: calc(var(--vh,1vh)*12);
    background: url('./img/UI/Number/Fever_Add.png') no-repeat;
    background-size: calc(var(--vh,1vh)*12) calc(var(--vh,1vh)*12);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*18);
    /*  top: 21%;*/
    top: 32%;
    position: absolute;
    z-index: 2;
}

.StageHintPanel {
    width: calc(calc(var(--vh,1vh)*25)*1.7925);
    height: calc(var(--vh,1vh)*25);
    background: url('./img/UI/Frame_Hint.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*25)*1.7925) calc(var(--vh,1vh)*25);
    margin: calc(var(--vh,1vh)*25) auto 0 auto;
    padding: 0px;
    display: none;
}

.StageHintHaderImage {
    width: calc(calc(var(--vh,1vh)*35)*0.3*3.169);
    height: calc(calc(var(--vh,1vh)*35)*0.3);
    background: url('./img/UI/Title_Level1.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*35)*0.3*3.169) calc(calc(var(--vh,1vh)*35)*0.3);
    margin: calc(var(--vh,1vh)*-6) auto 0 calc(var(--vh,1vh)*7);
    /*top: 22%;*/
    /*    top: -23%;*/
    position: absolute;
    z-index: 2;
}

.StageHintLogoLeft {
    width: calc(var(--vh,1vh)*14);
    height: calc(var(--vh,1vh)*14);
    background: url('./img/UI/Hint/TW.png') no-repeat;
    background-size: calc(var(--vh,1vh)*14) calc(var(--vh,1vh)*14);
    margin: calc(var(--vh,1vh)*6) auto 0 calc(var(--vh,1vh)*8);
    /*  top: 21%;*/
    /*    top: 37%;*/
    position: absolute;
    z-index: 2;
}

.StageHintLogoCenter {
    width: calc(var(--vh,1vh)*4);
    height: calc(var(--vh,1vh)*4);
    background: url('./img/UI/Number/Fever_Add.png') no-repeat;
    background-size: calc(var(--vh,1vh)*4) calc(var(--vh,1vh)*4);
    margin: calc(var(--vh,1vh)*9) auto 0 calc(var(--vh,1vh)*22.5);
    /*  top: 21%;*/
    /*    top: 43%;*/
    position: absolute;
    z-index: 2;
}

.StageHintLogoRight {
    width: calc(var(--vh,1vh)*12);
    height: calc(var(--vh,1vh)*12);
    background: url('./img/UI/Hint/Sticker_V1.gif') no-repeat;
    background-size: calc(var(--vh,1vh)*12) calc(var(--vh,1vh)*12);
    margin: calc(var(--vh,1vh)*6) auto 0 calc(var(--vh,1vh)*27);
    /*  top: 21%;*/
    /*    top: 27%;*/
    position: absolute;
    z-index: 2;
}
/*#endregion*/

/*#region 詳細排行榜面板*/

.RankingScrollPanel {
    width: calc(calc(var(--vh,1vh)*80)*0.6870503597122302);
    height: calc(var(--vh,1vh)*80);
    background: url('./img/UI/Frame_Rank_2.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*80)*0.6870503597122302) calc(var(--vh,1vh)*80);
    margin: calc(var(--vh,1vh)*18) auto 0 auto;
    display: none;
}

#RankingScrollTitle {
    position: absolute;
    margin: calc(var(--vh,1vh)*-16) auto auto calc(var(--vh,1vh)*13);
}

#RankingTitleDecration {
    width: calc((calc(var(--vh,1vh)*1)*25)*1.244019138755981);
    height: calc((calc(var(--vh,1vh)*1)*25));
    background-size: calc((calc(var(--vh,1vh)*1)*25)*1.244019138755981) calc((calc(var(--vh,1vh)*1)*25));
}

#RankingScrollTitleContent {
    margin: calc(var(--vh,1vh)*-6.5) auto auto auto;
    text-align: center;
}

#RankingScrollTitleLabel {
    font-size: calc(var(--vh,1vh)*2);
    color: white;
    font-weight: bold;
    z-index: 2;
    font-family: PumpkinGames;
}

#RankingScrollBtnClose {
    width: calc(var(--vh,1vh)*10);
    height: calc(var(--vh,1vh)*10);
    margin: calc(var(--vh,1vh)*4) auto auto calc(var(--vh,1vh)*42.5);
}

.RankingScrollContent {
    text-align: center;
    margin: auto;
}

/*#endregion*/

/*#region 記憶健康面板*/

.MemoryAnalysisPanel {
    /* 必須有定位，內部 #memoryHealthChartWrap 等 absolute 才會貼齊本面板；否則會以遠層祖先為準，圖表會橫跨整個視窗 */
    position: relative;
    z-index: 3;
    width: calc(calc(var(--vh,1vh)*65)*0.8426966292134831);
    height: calc(var(--vh,1vh)*65);
    background: url('./img/UI/Frame_Mine_Small.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*65)*0.8426966292134831) calc(var(--vh,1vh)*65);
    margin: calc(var(--vh,1vh)*16) auto 0 auto;
    display: none;
}

#MemoryAnalysisTitle {
    width: calc(calc(var(--vh,1vh)*9)*3.428571428571429);
    background: url('./img/UI/Title_Mode.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*9)*3.428571428571429) calc(var(--vh,1vh)*9);
    height: calc(var(--vh,1vh)*9);
    display: block;
    border: none;
    font-size: calc(var(--vh,1vh)*2);
    color: white;
    font-weight: bold;
    position: absolute;
    z-index: 3;
    margin: calc(var(--vh,1vh)*-2) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*12);
    font-family: PumpkinGames;
}

#MemoryAnalysisTitleContent {
    text-align: center;
    padding: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*11.5);
}

#MemoryAnalysisTitleLabel {
    width: calc(var(--vh,1vh)*30.5);
    height: calc(var(--vh,1vh)*7.5);
    display: block;
    border: none;
    font-size: calc(var(--vh,1vh)*2.5);
    color: white;
    font-weight: bold;
    z-index: 3;
    position: absolute;
}

.MemoryAnalysisButton {
    width: calc(calc(var(--vh,1vh)*9)*4.188679245283019);
    height: calc(var(--vh,1vh)*9);
    background: url('./img/UI/Button_Mine.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*9)*4.188679245283019) calc(var(--vh,1vh)*9);
    display: block;
    border: none;
    font-size: calc(var(--vh,1vh)*2.5);
    color: saddlebrown;
    font-weight: bold;
    position: absolute;
}

.MemoryAnalysisCloseButton {
    width: calc(var(--vh,1vh)*10);
    height: calc(var(--vh,1vh)*10);
    margin: calc(var(--vh,1vh)*1) auto 0 calc(var(--vh,1vh)*43);
}

/* 記憶分析面板：中央趨勢圖 + 底部兩顆分頁按鈕 */
.memory-health-chart-wrap {
    position: absolute;
    left: calc(var(--vh,1vh)*5);
    right: calc(var(--vh,1vh)*5);
    /* 上移約 3vh（原與標題／關閉鈕區距離約一半），同額加高圖表區 */
    top: calc(var(--vh,1vh)*9);
    /* 略降高度，把空間留給底部兩顆按鈕，避免貼齊框底被切 */
    height: calc(var(--vh,1vh)*36);
    z-index: 2;
    box-sizing: border-box;
    padding: calc(var(--vh,1vh)*1) calc(var(--vh,1vh)*1);
    background: rgba(255, 255, 255, 0.55);
    border-radius: calc(var(--vh,1vh)*1.2);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* Chart.js responsive:true：flex + min-height 讓容器有穩定高度供量測 */
.memory-health-chart-canvas-host {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    min-height: calc(var(--vh, 1vh) * 18);
}

/* 勿對 canvas 加 height !important，會蓋掉 Chart.js 的 inline 尺寸導致反覆重算、動畫閃爍 */
#memoryHealthTrendCanvas {
    display: block;
    max-width: 100%;
    box-sizing: border-box;
}

.memory-health-chart-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: calc(var(--vh,1vh)*2);
    font-size: calc(var(--vh,1vh)*2);
    color: #666;
    font-weight: bold;
    pointer-events: none;
}

.memory-health-tap-hint {
    text-align: center;
    font-size: calc(var(--vh,1vh)*1.6);
    color: #FF7800;
    font-weight: bold;
    margin-top: calc(var(--vh,1vh)*0.15);
    pointer-events: none;
}

.MemoryAnalysisBottomRow {
    position: absolute;
    /* 左右略內縮，兩顆按鈕總寬約 +10%（相對原 7vh 邊距） */
    left: calc(var(--vh,1vh)*4.95);
    right: calc(var(--vh,1vh)*4.95);
    /* 再上移 ~2vh：圖表與按鈕列間距再縮 1/2 量級 */
    bottom: calc(var(--vh,1vh)*12.2);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: calc(var(--vh,1vh)*1.2);
    z-index: 3;
    box-sizing: border-box;
}

/* 兩顆並排：比照 .MyAccountButton 比例縮小，以 flex 平分寬度、背景鋪滿避免溢出 */
.MemoryAnalysisBottomRow .MemoryAnalysisButton {
    position: relative;
    flex: 1 1 0;
    margin: 0 !important;
    min-width: 0;
    width: auto;
    height: calc(var(--vh,1vh)*6.2);
    max-height: calc(var(--vh,1vh)*6.2);
    background-size: 100% 100%;
    font-size: calc(var(--vh,1vh)*1.85);
    padding-left: calc(var(--vh,1vh)*0.5);
    padding-right: calc(var(--vh,1vh)*0.5);
    box-sizing: border-box;
}

.memory-analysis-tab-active {
    filter: brightness(1.08) saturate(1.15);
    /* 避免與外層版面 transform 疊加造成裁切錯覺，僅用亮度區分 */
}

#MemoryAnalysisToday,
#MemoryAnalysisTotal {
    margin: 0;
}

/*#endregion*/

/*#region 記憶報告面板*/

.MemoryScrollPanel {
    width: calc(calc(var(--vh,1vh)*80)*0.598993288590604);
    height: calc(var(--vh,1vh)*80);
    background: url('./img/UI/Frame_Note.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*80)*0.598993288590604) calc(var(--vh,1vh)*80);
    margin: calc(var(--vh,1vh)*12) auto 0 auto;
    display: none;
}

#MemoryScrollTitle {
    margin: calc(var(--vh,1vh)*-2) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*7.75);
    width: calc(calc(var(--vh,1vh)*7.5)*4.188679245283019);
    height: calc(var(--vh,1vh)*7.5);
    background: url('./img/UI/Button_Mine.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*7.5)*4.188679245283019) calc(var(--vh,1vh)*7.5);
    display: block;
    border: none;
    font-size: calc(var(--vh,1vh)*2.2);
    color: saddlebrown;
    font-weight: bold;
    position: absolute;
    font-family: PumpkinGames;
}

#MemoryScrollCloseButton {
    width: calc(var(--vh,1vh)*10);
    height: calc(var(--vh,1vh)*10);
    margin: calc(var(--vh,1vh)*1) auto 0 calc(var(--vh,1vh)*39);
}

.MemoryScrollContent {
    text-align: center;
    margin: auto;
}

#NoDataDiv {
    font-size: calc(var(--vh,1vh)*3);
    width: calc(var(--vh,1vh)*34);
    height: calc(var(--vh,1vh)*20);
    margin: calc(var(--vh,1vh)*9) auto calc(var(--vh,1vh)*-24) calc(var(--vh,1vh)*7);
    color: saddlebrown;
    font-weight: bolder;
    position: absolute;
    font-family: PumpkinGames, sans-serif;
    display: none;
}

#TellyGIF {
    width: calc(var(--vh,1vh)*35);
    height: calc(var(--vh,1vh)*35);
    margin: calc(var(--vh,1vh)*0) auto auto calc(var(--vh,1vh)*-18);
    position: absolute;
    z-index: 4;
}

/*#endregion*/

/*#region 失敗結算面板*/

.FailurePanel {
    width: calc(calc(var(--vh,1vh)*60)*0.982);
    height: calc(var(--vh,1vh)*60);
    background: url('./img/UI/Frame_Failure.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*60)*0.982) calc(var(--vh,1vh)*60);
    margin: calc(var(--vh,1vh)*14) auto 0 auto;
    display: none;
}

.FailurePanelHaderImage {
    width: calc(calc(var(--vh,1vh)*60)*0.982*0.3*0.954);
    height: calc(calc(var(--vh,1vh)*60)*0.982*0.3);
    background: url('./img/UI/Decor_Failure_1.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*60)*0.982*0.3*0.954) calc(calc(var(--vh,1vh)*60)*0.982*0.3);
    margin: calc(var(--vh,1vh)*0) 0 0 calc(var(--vh,1vh)*3);
    /*top: 22%;*/
    top: -6%;
    position: absolute;
    z-index: 2;
}

.FailurePanelLogoImage {
    width: calc(calc(var(--vh,1vh)*60)*0.982*0.3);
    height: calc(calc(var(--vh,1vh)*60)*0.982*0.3*0.755);
    background: url('./img/UI/Decor_Failure_2.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*60)*0.982*0.3) calc(calc(var(--vh,1vh)*60)*0.982*0.3*0.755);
    margin: calc(var(--vh,1vh)*0.5) auto 0 calc(var(--vh,1vh)*17);
    /*  top: 21%;*/
    top: -9%;
    position: absolute;
    z-index: 2;
}

#BriefFailureDescription {
    width: 90%;
    height: 90%;
    margin: calc(var(--vh,1vh)*5) auto auto calc(var(--vh,1vh)*-4);
    float: right;
}

.FailureScoreArea {
    margin: calc(var(--vh,1vh)*16) auto 0 calc(var(--vh,1vh)*15);
    position: absolute;
    /*            top: 45%;*/
}

.FailureScoreTitleArea {
    width: calc(calc(var(--vh,1vh)*4)*3.571);
    height: calc(var(--vh,1vh)*4);
    background: url('./img/UI/Number/Score2.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*4)*3.571) calc(var(--vh,1vh)*4);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*9.5);
    position: absolute;
}

/*#region FailureScoreNumber 共用基底 */
.FailureScoreNumberOne,
.FailureScoreNumberTwo,
.FailureScoreNumberThree,
.FailureScoreNumberFour {
    width: calc(calc(var(--vh,1vh)*4)*0.8);
    height: calc(var(--vh,1vh)*4);
    background: url('./img/UI/Number/Fever2_1.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*4)*0.796) calc(var(--vh,1vh)*4);
    position: absolute;
}
/*#endregion */
.FailureScoreNumberOne   { margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*24); }
.FailureScoreNumberTwo   { margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*27); }
.FailureScoreNumberThree { margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*30); }
.FailureScoreNumberFour  { margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*33); }

/*#region 結算面板分隔線共用基底 */
.FailureSepratorLineOne,
.SuccessSepratorLineOne,
.SuccessSepratorLineTwo {
    width: calc(calc(var(--vh,1vh)*0.48)*77.6);
    height: calc(var(--vh,1vh)*0.48);
    background: url('./img/UI/Decoration_Line.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*0.48)*77.6) calc(var(--vh,1vh)*0.48);
    position: absolute;
}
/*#endregion */
.FailureSepratorLineOne {
    margin: calc(var(--vh,1vh)*38) auto 0 calc(var(--vh,1vh)*12);
}

.BriefFailureDescription {
    /*width: calc(calc(var(--vh,1vh)*10)*1.708860759493671);
    height: calc(var(--vh,1vh)*10);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*20);
    background: url('./img/UI/QuizResultExample.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*10)*1.708860759493671)calc(var(--vh,1vh)*10);
    line-height: calc(var(--vh,1vh)*2.3);
    position: absolute;*/
    /*         top: 51.5%;*/
    /*top: 46.5%;*/
}

.CharacterFailIcon {
    width: calc(var(--vh,1vh)*5);
    height: calc(var(--vh,1vh)*5);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*9);
    background: url('./img/UI/Icon_Telly.png') no-repeat;
    background-size: calc(var(--vh,1vh)*5) calc(var(--vh,1vh)*5);
    /*            top: 60.5%;*/
    top: 64.5%;
    position: absolute;
    z-index: 3;
}

.FailureRecommandationArea {
    width: calc(calc(var(--vh,1vh)*60)*0.89*0.2*3.756);
    height: calc(calc(var(--vh,1vh)*60)*0.89*0.19);
    background: url('./img/UI/Frame_Text_1.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*60)*0.89*0.19*3.756) calc(calc(var(--vh,1vh)*60)*0.89*0.19);
    margin: calc(var(--vh,1vh)*40) auto 0 calc(var(--vh,1vh)*11);
    position: absolute;
    /*            top: 61.5%;*/
}

.FailureRecommandationDetail {
    width: calc(calc(var(--vh,1vh)*63)*0.89*0.2*3);
    height: calc(calc(var(--vh,1vh)*35)*0.89*0.19);
    text-align: left;
    margin: calc(var(--vh,1vh)*1) calc(var(--vh,1vh)*2) 0 calc(var(--vh,1vh)*2.5);
    font-size: calc(var(--vh,1vh)*1.65);
    line-height: calc(var(--vh,1vh)*2.5);
    color: #805300;
    /*    padding: 2px 2px 2px 2px;*/
    position: absolute;
    /*top: 18%;*/
    font-family: PumpkinGames;
}

.FailureRemainingContinuesmask {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    /* top: calc(var(--vh,1vh)*50);
    left: calc(var(--vh,1vh)*136);
    transform: translate( calc(var(--vh,1vh)*-150), calc(var(--vh,1vh)*-50)); */
    z-index: 99;
    background: rgba(0,0,0,0.5);
    /* margin: calc(var(--vh,1vh)*-40) auto auto calc(var(--vh,1vh)*-70); */
    display: none;
}

.saddlebrownText{
    font-size: calc(var(--vh,1vh)*2.5);
    color: saddlebrown;
}
.aligncenter{
    display: flex;
    align-items: center;
    text-align: center;
    width: 100%;
}
.confirm{
    width: 120px;
    aspect-ratio: 146/63;
    display: block;
    border: none;
    background: url(./img/UI/Button_Orange.png);
    background-size: contain;
    font-size: calc(var(--vh, 1vh) * 2);
    color: white;
}
#GuestNoLifeContent{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#nolife-exstr{
    position: absolute;
    padding: 5px;
    top: 25%;
    width: 100%;
}
#nolifeconfirm{
    position: absolute;
    padding: 5px;
    top: 60%;
}
.FailureRemainingContinuesPanel {
    width: calc(calc(var(--vh,1vh)*45)*0.6885245901639344);
    height: calc(var(--vh,1vh)*35);
    background: url('./img/UI/Frame_Mine.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*45)*0.6885245901639344) calc(var(--vh,1vh)*35);
    /* margin: calc(var(--vh,1vh)*28) auto auto calc(var(--vh,1vh)*45); */
    position: absolute;
    display: none;
    z-index: 3;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
}

.FailureRemainingContinuesPanelCloseButton {
    width: calc(var(--vh,1vh)*7.5);
    height: calc(var(--vh,1vh)*7.5);
    margin: calc(var(--vh,1vh)*-1) auto 0 calc(var(--vh,1vh)*23);
    border: none;
    outline: none;
}

#watchAdButton {
    width: calc(calc(var(--vh,1vh)*10)* 2.281045751633987);
    height: calc(var(--vh,1vh)*10);
    background: url('./img/UI/Button_Main_Purple.png ') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*10)* 2.281045751633987) calc(var(--vh,1vh)*10);
    margin: calc(var(--vh,1vh)*7) auto 0 calc(var(--vh,1vh)*4);
    position: absolute;
    z-index: 2;
    border: none;
    outline: none;
    font-size: calc(var(--vh,1vh)*2.8);
    color: white;
    position: absolute;
    font-weight: bold;
    z-index: 2;
}

#FailureBindChefInputBoxDiv {
    margin: calc(var(--vh,1vh)*14) auto 0 calc(var(--vh,1vh)*7);
    position: absolute;
    scale: 1.5;
}
/*#endregion*/

/*#region 成功結算面板*/
.SuccessPanel {
    width: calc(calc(var(--vh,1vh)*65)*0.89);
    height: calc(var(--vh,1vh)*65);
    background: url('./img/UI/Frame_Success.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*65)*0.89) calc(var(--vh,1vh)*65);
    /*    white-space: pre-line;*/
    margin: calc(var(--vh,1vh)*12) auto 0 auto;
    padding: 0px;
    display: none;
    position: relative;
}

.SuccessScoreArea {
    margin: calc(var(--vh,1vh)*13) auto 0 calc(var(--vh,1vh)*4);
    position: absolute;
    /*            top: 36%;*/
    /*    top: 20%;*/
}

.SuccessScoreTitleArea {
    width: calc(calc(var(--vh,1vh)*5)*3.571);
    height: calc(var(--vh,1vh)*5);
    background: url('./img/UI/Number/Score.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*5)*3.571) calc(var(--vh,1vh)*5);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*8.5);
    position: absolute;
}

/*#region SuccessScoreNumber 共用基底 */
.SuccessScoreNumberOne,
.SuccessScoreNumberTwo,
.SuccessScoreNumberThree,
.SuccessScoreNumberFour,
.SuccessScoreNumberFive {
    width: calc(calc(var(--vh,1vh)*5)*0.796);
    height: calc(var(--vh,1vh)*5);
    background: url('./img/UI/Number/Fever_1.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*5)*0.796) calc(var(--vh,1vh)*5);
    top: 5%;
    position: absolute;
}
/*#endregion */
.SuccessScoreNumberOne   { margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*26); }
.SuccessScoreNumberTwo   { margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*29.5); }
.SuccessScoreNumberThree { margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*33); }
.SuccessScoreNumberFour  { margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*36.5); }
.SuccessScoreNumberFive  { margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*40); }

.SuccessSepratorLineOne {
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*11);
    top: 28%;
}

.SuccessSepratorLineTwo {
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*11);
    top: 67.5%;
}

.CharacterIcon {
    width: calc(var(--vh,1vh)*5);
    height: calc(var(--vh,1vh)*5);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*7);
    background: url('./img/UI/Icon_Telly.png') no-repeat;
    background-size: calc(var(--vh,1vh)*5) calc(var(--vh,1vh)*5);
    /*top: 60.5%;*/
    top: 64.5%;
    position: absolute;
    z-index: 3;
}

.SuccessPanelHaderImage {
    width: calc(calc(var(--vh,1vh)*60)*0.89*0.95);
    height: calc(calc(var(--vh,1vh)*60)*0.89*0.95*0.412);
    background: url('./img/UI/Decor_Success_1.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*60)*0.89*0.95) calc(calc(var(--vh,1vh)*60)*0.89*0.95*0.412);
    margin: calc(var(--vh,1vh)*-10) auto 0 calc(var(--vh,1vh)*14);
    position: absolute;
    /*top: 14%;*/
    /*    top: -19%;*/
    z-index: -1;
}

.SuccessPanelLogoImage {
    width: calc(calc(var(--vh,1vh)*60)*0.89*0.65);
    height: calc(calc(var(--vh,1vh)*60)*0.89*0.65*0.485);
    background: url('./img/UI/Decor_Success_2.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*60)*0.89*0.65) calc(calc(var(--vh,1vh)*60)*0.89*0.65*0.485);
    margin: calc(var(--vh,1vh)*-4) auto 0 calc(var(--vh,1vh)*12);
    position: absolute;
    /*top: 21%;*/
    /*top: -7%;*/
    z-index: 1;
}

.SuccessCategory {
    position: absolute;
    /* top: 40.5%;*/
    /*    top: 28.5%;*/
    margin: calc(var(--vh,1vh)*20) auto 0 calc(var(--vh,1vh)*-0.8);
}

/*#region SuccessCategory 共用基底 */
.SuccessCategory_Memory,
.SuccessCategory_PassTimeRanking,
.SuccessCategory_Luck {
    height: calc(calc(var(--vh,1vh)*65)*0.89*0.25);
    top: 5%;
    position: absolute;
}
/*#endregion */

.SuccessCategory_Memory {
    width: calc(calc(var(--vh,1vh)*65)*0.89*0.25*0.972);
    background: url('./img/UI/Mask_Score_1.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*65)*0.89*0.25*0.981) calc(calc(var(--vh,1vh)*65)*0.89*0.25);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*10.5);
    clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 0% 100%);
}

.SuccessCategory_PassTimeRanking {
    width: calc(calc(var(--vh,1vh)*65)*0.89*0.25*0.946);
    background: url('./img/UI/Mask_Score_2.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*65)*0.89*0.25*1.11) calc(calc(var(--vh,1vh)*65)*0.89*0.25);
    margin: calc(var(--vh,1vh)*0.2) auto 0 calc(var(--vh,1vh)*23.35);
    clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
}

.SuccessCategory_Luck {
    width: calc(calc(var(--vh,1vh)*65)*0.89*0.25*0.972);
    background: url('./img/UI/Mask_Score_3.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*65)*0.89*0.25*0.972) calc(calc(var(--vh,1vh)*65)*0.89*0.25);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*35.75);
    clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.BriefDescription {
    width: calc(calc(var(--vh,1vh)*65)*0.89*0.8*0.8);
    height: calc(calc(var(--vh,1vh)*35)*0.89*0.25);
    margin: calc(var(--vh,1vh)*35) auto 0 calc(var(--vh,1vh)*10);
    font-size: calc(var(--vh,1vh)*1.8);
    /*    line-height: calc(var(--vh,1vh)*2.3);*/
    font-family: PumpkinGames;
    font-weight: bold;
    color: #805300;
    position: absolute;
    /*    top: 52.5%;*/
    z-index: 5;
    display: none;
}

.RecommandationArea {
    width: calc(calc(var(--vh,1vh)*67.5)*0.89*0.2*3.756);
    height: calc(calc(var(--vh,1vh)*67.5)*0.89*0.19);
    background: url('./img/UI/Frame_Text_1.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*67.5)*0.89*0.19*3.756) calc(calc(var(--vh,1vh)*67.5)*0.89*0.19);
    margin: calc(var(--vh,1vh)*0.5) auto 0 calc(var(--vh,1vh)*7.5);
    position: absolute;
    /*     top: 62%;*/
    top: 67%;
}

.RecommandationDetail {
    width: calc(calc(var(--vh,1vh)*67.5)*0.89*0.2*3);
    height: calc(calc(var(--vh,1vh)*67.5)*0.89*0.19);
    text-align: left;
    margin: calc(var(--vh,1vh)*1.5) calc(var(--vh,1vh)*2) 0 calc(var(--vh,1vh)*3.5);
    font-size: calc(var(--vh,1vh)*1.85);
    line-height: calc(var(--vh,1vh)*2.5);
    color: #805300;
    /*    padding: 2px 2px 2px 2px;*/
    position: absolute;
    /*    top: 18%;*/
    z-index: 5;
    font-family: PumpkinGames;
}

.SettlementRewardButton {
    width: calc(calc(var(--vh,1vh)*8)*0.819047619047619);
    height: calc(var(--vh,1vh)*8);
    background: url('./img/UI/Icon_DropItem.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*8)*0.819047619047619) calc(var(--vh,1vh)*8);
    position: absolute;
    border: none;
    z-index: 10;
    display: none;
}

#SuccessPanelRewardButton {
    margin: calc(var(--vh,1vh)*40) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*46);
}

/*#endregion*/

/*#region 圖鑑面板*/
#EncyclopediaPreviousPage {
    transform: scaleX(-1);
    margin: calc(var(--vh,1vh)*-3) auto 0 calc(var(--vh,1vh)*-3.5);
    position: absolute;
}

#EncyclopediaNextPage {
    margin: calc(var(--vh,1vh)*-3) auto 0 calc(var(--vh,1vh)*26.5);
    position: absolute;
}

#EncyclopediaPageView {
    width: calc(calc(var(--vh,1vh)*6)*3.41025641052641);
    height: calc(var(--vh,1vh)*6);
    background: url('./img/UI/Button_Bag_2.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*6)*3.41025641052641)calc(var(--vh,1vh)*6);
    margin: calc(var(--vh,1vh)*-1) auto 0 calc(var(--vh,1vh)*5.5);
    position: absolute;
    color: white;
    font-size: calc(var(--vh,1vh)*2.5);
    border: none;
}

.EncyclopediaPageImage {
    width: calc(calc(var(--vh,1vh)*9)*0.8771929824561404);
    height: calc(var(--vh,1vh)*9);
    background: url('./img/UI/Button_Book_Next.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*9)*0.8771929824561404)calc(var(--vh,1vh)*9);
    border: none;
}

/*#endregion*/

/*#region 雙人模式結算面板 共用素材*/

.BattleSettlementRankIcon {
    background: url('./img/UI/Button_Rank.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*8)*1.051724137931034) calc(var(--vh,1vh)*8);
    width: calc(calc(var(--vh,1vh)*8)*1.051724137931034);
    height: calc(var(--vh,1vh)*8);
    position: absolute;
    border: none;
    z-index: 3;
    margin: calc(var(--vh,1vh)*24) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*36.75);
}

/*#region Battle ScoreTitle/Number 共用基底 */
.ScoreWinnerTitle,
.ScoreLoserTitle {
    width: calc(calc(var(--vh,1vh)*2.5)*3.571);
    height: calc(var(--vh,1vh)*2.5);
    background-size: calc(calc(var(--vh,1vh)*2.5)*3.571) calc(var(--vh,1vh)*2.5);
    position: absolute;
}

.ScoreWinnerNumber,
.ScoreLoserNumber {
    width: calc(calc(var(--vh,1vh)*3)*0.796);
    height: calc(var(--vh,1vh)*3);
    background-size: calc(calc(var(--vh,1vh)*3)*0.796) calc(var(--vh,1vh)*3);
    position: absolute;
}
/*#endregion */
.ScoreWinnerTitle  { background-image: url('./img/UI/Number/Score.png'); background-repeat: no-repeat; }
.ScoreLoserTitle   { background-image: url('./img/UI/Number/Score2.png'); background-repeat: no-repeat; }
.ScoreWinnerNumber { background-image: url('./img/UI/Number/Fever_1.png'); background-repeat: no-repeat; }
.ScoreLoserNumber  { background-image: url('./img/UI/Number/Fever2_1.png'); background-repeat: no-repeat; }

.CategoryMemory {
    width: calc(calc(var(--vh,1vh)*60)*0.89*0.25*0.972);
    height: calc(calc(var(--vh,1vh)*60)*0.89*0.25);
    background: url('./img/UI/Mask_Score_1.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*60)*0.89*0.25*0.981) calc(calc(var(--vh,1vh)*60)*0.89*0.25);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*7.5);
    position: absolute;
    clip-path: polygon(
        0% 0%, 
        100% 0%, 
        85% 100%, 
        0% 100%
    );
}

.MemoryClip {
    clip-path: polygon(
        0% 0%, 
        100% 0%, 
        85% 100%, 
        0% 100%
    );
}

.MemoryData {
    width: calc(var(--vh,1vh)*14*0.972);
    margin: calc(var(--vh,1vh)*1) 
            calc(var(--vh,1vh)*0) 
            auto 
            calc(var(--vh,1vh)*1);
    position: absolute;
}

.CategoryLucky {
    width: calc(calc(var(--vh,1vh)*60)*0.89*0.25*0.972);
    height: calc(calc(var(--vh,1vh)*60)*0.89*0.25);
    background: url('./img/UI/Mask_Score_3.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*60)*0.89*0.25*0.972) calc(calc(var(--vh,1vh)*60)*0.89*0.25);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*30.7);
    position: absolute;
    clip-path: polygon(
        15% 0%,   
        100% 0%,  
        100% 100%,
        0% 100%
    );
}

.LuckyClip {
    clip-path: polygon(
        15% 0%,   
        100% 0%,  
        100% 100%,
        0% 100%
    );
}

.LuckyData {
    width: calc(var(--vh,1vh)*14*0.972);
    margin: calc(var(--vh,1vh)*1) 
            calc(var(--vh,1vh)*0) 
            auto 
            calc(var(--vh,1vh)*25.5); 
    position: absolute; 
}

.CategoryPasstime {
    width: calc(calc(var(--vh,1vh)*60)*0.89*0.25*0.946); /* 原圖尺寸不同 */
    height: calc(calc(var(--vh,1vh)*60)*0.89*0.25);
    background: url('./img/UI/Mask_Score_2.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*60)*0.89*0.25*1.11) calc(calc(var(--vh,1vh)*60)*0.89*0.25);
    margin: calc(var(--vh,1vh)*0.2) auto 0 calc(var(--vh,1vh)*19.25);
    position: absolute;
    clip-path: polygon(
        15% 0%, 
        100% 0%, 
        85% 100%,
        0% 100%
    );
}

.PasstimeClip {
    clip-path: polygon(
        15% 0%, 
        100% 0%, 
        85% 100%,
        0% 100%
    );
}

.PasstimeData {
    width: calc(var(--vh,1vh)*14*0.946); 
    margin: calc(var(--vh,1vh)*1.2) 
            calc(var(--vh,1vh)*0) 
            auto 
            calc(var(--vh,1vh)*13.5); 
    position: absolute;
}


.DecorationLine {
    width: calc(calc(var(--vh,1vh)*0.35)*77.66666666666667);
    height: calc(var(--vh,1vh)*0.35);
    background: url('./img/UI/Decoration_Line.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*0.35)*77.66666666666667) calc(var(--vh,1vh)*0.35);
    margin: calc(var(--vh,1vh)*32) calc(var(--vh,1vh)*0) auto calc(var(--vh,1vh)*18);
    position: absolute;
}

.BattleSettlementFullView {
    font-size: calc(var(--vh,1vh)*1.5);
    color: maroon;
    font-weight: bold;
    margin: calc(var(--vh,1vh)*29) auto auto calc(var(--vh,1vh)*33);
    width: calc(var(--vh,1vh)*15);
    position: absolute;
}

.buttonBattlePlayConfirmDiv {
    margin: calc(var(--vh,1vh)*64) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*6);
    position: absolute;
}

.buttonBattlePlayAgainDiv {
    margin: calc(var(--vh,1vh)*64) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*25);
    position: absolute;
}

.buttonBattleShareDiv {
    margin: calc(var(--vh,1vh)*64) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*44);
    position: absolute;
}
/*#endregion*/

/*#region 雙人模式 成功結算面板*/
.BattleSuccessPanel {
    width: calc(calc(var(--vh,1vh)*65)*0.89);
    height: calc(var(--vh,1vh)*65);
    background: url('./img/UI/Frame_Success.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*65)*0.89) calc(var(--vh,1vh)*65);
    margin: calc(var(--vh,1vh)*12) auto 0 auto;
    padding: 0px;
    display: none;
}

#BattleSuccessHeadDiv {
    margin: calc(var(--vh,1vh)*-20) auto calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*12);
    position: absolute;
}

#BattleSuccessHeadDecoration1 {
    width: calc(calc(var(--vh,1vh)*15)*2.525862068965517);
    height: calc(var(--vh,1vh)*15);
    background: url('./img/UI/Decor_PVP_1.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*15)*2.525862068965517) calc(var(--vh,1vh)*15);
    margin: calc(var(--vh,1vh)*17) auto 0 calc(var(--vh,1vh)*-2);
    position: absolute;
    z-index: 2;
}

#BattleSuccessHeadDecoration2 {
    width: calc(calc(var(--vh,1vh)*25)*1.973262032085561);
    height: calc(var(--vh,1vh)*25);
    background: url('./img/UI/Decor_PVP_2.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*25)*1.973262032085561) calc(var(--vh,1vh)*25);
    margin: calc(var(--vh,1vh)*4) auto 0 calc(var(--vh,1vh)*-7);
    position: absolute;
    z-index: -1;
}

#BattleSuccessMyScoreArea {
    margin: calc(var(--vh,1vh)*12) auto 0 calc(var(--vh,1vh)*29.5);
    position: absolute;
    z-index: 4;
}

#SuccessMyNumberOne {
    margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*9);
}

#SuccessMyNumberTwo {
    margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*11);
}

#SuccessMyNumberThree {
    margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*13);
}

#SuccessMyNumberFour {
    margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*15);
}

#SuccessMyNumberFive {
    margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*17);
}

.BattleSuccessMyCategoryArea {
    margin: calc(var(--vh,1vh)*15) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*3.5);
    position: absolute;
}

.EnemyHeaderDiv {
    margin: calc(var(--vh,1vh)*26) calc(var(--vh,1vh)*0) auto calc(var(--vh,1vh)*8);
    position: absolute;
    width: 15%;
}

.EnemyHeaderContent {
    background: url('./img/Animal/Lucky_A.png') no-repeat;
    background-size: contain;
    width: calc(var(--vh,1vh)*8);
    height: calc(var(--vh,1vh)*8);
    margin: calc(var(--vh,1vh)*3) calc(var(--vh,1vh)*0) auto calc(var(--vh,1vh)*1);
    border-radius: 50%;
    position: absolute;
}

.EnemyUID {
    font-size: calc(var(--vh,1vh)*2.2);
    color: maroon;
    font-weight: bold;
    margin: calc(var(--vh,1vh)*7) auto auto calc(var(--vh,1vh)*9);
    width: calc(var(--vh,1vh)*11);
    position: absolute;
}

#BattleSuccessEnemyScoreArea {
    margin: calc(var(--vh,1vh)*36) auto 0 calc(var(--vh,1vh)*29.5);
    position: absolute;
    z-index: 4;
}

#SuccessEnemyNumberOne {
    margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*9);
}

#SuccessEnemyNumberTwo {
    margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*11);
}

#SuccessEnemyNumberThree {
    margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*13);
}

#SuccessEnemyNumberFour {
    margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*15);
}

#SuccessEnemyNumberFive {
    margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*17);
}


.BattleSuccessEnemyCategoryArea {
    margin: calc(var(--vh,1vh)*39) auto 0 calc(var(--vh,1vh)*3.5);
    position: absolute;
}

/*#endregion*/

/*#region 雙人模式 失敗結算面板*/

.BattleFailPanel {
    width: calc(calc(var(--vh,1vh)*65)*0.89);
    height: calc(var(--vh,1vh)*65);
    background: url('./img/UI/Frame_Failure_PVP.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*65)*0.89) calc(var(--vh,1vh)*65);
    margin: calc(var(--vh,1vh)*12) auto 0 auto;
    padding: 0px;
    display: none;
}

#BattleFailHeadDiv {
    margin: calc(var(--vh,1vh)*-20) auto calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*12);
    position: absolute;
}

#BattleFailHeadDecoration1 {
    width: calc(calc(var(--vh,1vh)*16)*2.525862068965517);
    height: calc(var(--vh,1vh)*16);
    background: url('./img/UI/Decor_PVP_3.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*16)*2.525862068965517) calc(var(--vh,1vh)*16);
    margin: calc(var(--vh,1vh)*18) auto 0 calc(var(--vh,1vh)*-4);
    position: absolute;
    z-index: 2;
}

#BattleFailHeadDecoration2 {
    width: calc(calc(var(--vh,1vh)*27)*1.973262032085561);
    height: calc(var(--vh,1vh)*27);
    background: url('./img/UI/Decor_PVP_4.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*27)*1.973262032085561) calc(var(--vh,1vh)*27);
    margin: calc(var(--vh,1vh)*7) auto 0 calc(var(--vh,1vh)*-17);
    position: absolute;
    z-index: -1;
}

#BattleFailMyScoreArea {
    margin: calc(var(--vh,1vh)*12) auto 0 calc(var(--vh,1vh)*26.5);
    position: absolute;
    z-index: 4;
}

#BattleFailEnemyScoreArea {
    margin: calc(var(--vh,1vh)*36) auto 0 calc(var(--vh,1vh)*26.5);
    position: absolute;
    z-index: 4;
}

.BattleFailMyCategoryArea {
    margin: calc(var(--vh,1vh)*15) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*3.5);
    position: absolute;
}

.BattleFailEnemyCategoryArea {
    margin: calc(var(--vh,1vh)*39) auto 0 calc(var(--vh,1vh)*3.5);
    position: absolute;
}

#FailMyNumberOne {
    margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*9);
}

#FailMyNumberTwo {
    margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*11);
}

#FailMyNumberThree {
    margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*13);
}

#FailMyNumberFour {
    margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*15);
}

#FailMyNumberFive {
    margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*17);
}

#FailEnemyNumberOne {
    margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*9);
}

#FailEnemyNumberTwo {
    margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*11);
}

#FailEnemyNumberThree {
    margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*13);
}

#FailEnemyNumberFour {
    margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*15);
}

#FailEnemyNumberFive {
    margin: calc(var(--vh,1vh)*-0.5) auto 0 calc(var(--vh,1vh)*17);
}

/*#endregion*/

/*#region 每日提示面板*/

.DailyTipsPanel {
    width: calc(calc(var(--vh,1vh)*70)*0.6885245901639344);
    height: calc(var(--vh,1vh)*70);
    background: url('./img/UI/Frame_Mine.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*70)*0.6885245901639344) calc(var(--vh,1vh)*70);
    margin: calc(var(--vh,1vh)*20) auto auto auto;
    z-index: 3;
    display: none;
}

#DailyTipsHeaderDiv {
    text-align: center;
    position: absolute;
    padding: calc(var(--vh,1vh)*2) calc(var(--vh,1vh)*11) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*5);
    width: calc(var(--vh,1vh)*52);
}

#DailyTipsHeaderTitleContent {
    font-size: calc(var(--vh,1vh)*2);
    color: maroon;
    font-weight: bold;
    z-index: 2;
    font-family: PumpkinGames;
}

#DailyTipsCloseButton {
    width: calc(var(--vh,1vh)*8);
    height: calc(var(--vh,1vh)*8);
    margin: calc(var(--vh,1vh)*0) auto 0 calc(var(--vh,1vh)*39);
}

#DailyTipsType1HeaderDiv {
    margin: calc(var(--vh,1vh)*8.5) auto 0 calc(var(--vh,1vh)*10);
    position: absolute;
}

.DailyTipsTypeHeader {
    width: calc(calc(var(--vh,1vh)*6.5)*4.188679245283019);
    height: calc(var(--vh,1vh)*6.5);
    background: url('./img/UI/Button_Mine.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*6.5)*4.188679245283019) calc(var(--vh,1vh)*6.5);
    border: none;
    position: absolute;
    text-align: center;
}

#DailyTipsType1Title {
    font-size: calc(var(--vh,1vh)*2.2);
    color: saddlebrown;
    font-weight: bold;
    font-family: PumpkinGames;
    padding: calc(var(--vh,1vh)*1.5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
}

#DailyTipsType2HeaderDiv {
    margin: calc(var(--vh,1vh)*33) auto 0 calc(var(--vh,1vh)*10);
    position: absolute;
}

#DailyTipsType2Title {
    font-size: calc(var(--vh,1vh)*2.2);
    color: saddlebrown;
    font-weight: bold;
    font-family: PumpkinGames;
    padding: calc(var(--vh,1vh)*1.5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
}

#DailyTipsType1Content {
    margin: calc(var(--vh,1vh)*14.5) auto 0 calc(var(--vh,1vh)*0);
    position: absolute;
    padding: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*10) 0 calc(var(--vh,1vh)*7);
}

#DailyTipsType2Content {
    margin: calc(var(--vh,1vh)*40) auto 0 calc(var(--vh,1vh)*0);
    position: absolute;
    padding: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*10) 0 calc(var(--vh,1vh)*7);
}

#DailyTipsCheckboxDiv {
    margin: calc(var(--vh,1vh)*58) auto 0 calc(var(--vh,1vh)*15);
    position: absolute;
}

#DailyTipsCheckbox {
    /*  user-select: none;
    font-size: calc(var(--vh,1vh)*2);
    color: saddlebrown;
    font-weight: bold;
    font-family: PumpkinGames;*/
    transform: scale(2);
}

#DailyTipsCheckboxLabel {
    padding: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*2) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*2);
    user-select: none;
    font-size: calc(var(--vh,1vh)*2.2);
    color: saddlebrown;
    font-weight: bold;
    font-family: PumpkinGames;
}

.DailyTipsCardCollectionContainerItem {
    width: calc(var(--vh,1vh)*8);
    height: calc(var(--vh,1vh)*8);
    background: url('./img/Questions/PNG/Dish/JP/BuckwheatNoodles_LV1.png') no-repeat;
    background-size: 100%;
    position: absolute;
}

#DailyTipsSmallCard1 {
    margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-1);
}

#DailyTipsSmallCard2 {
    margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*8);
}

#DailyTipsSmallCard3 {
    margin: calc(var(--vh,1vh)*9) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*2);
}

#DailyTipsSmallCard4 {
    margin: calc(var(--vh,1vh)*9) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*11);
}

.DailyTipsCatdCollectionGif {
    background: url('./img/UI/Book_GIF.gif') no-repeat;
    background-size: 100%;
    width: calc(var(--vh,1vh)*18);
    height: calc(var(--vh,1vh)*18);
    position: absolute;
}

#DailyTipsSmallCardGif {
    margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*19);
}

.DailyTipsMyRewardGif {
    margin: calc(var(--vh,1vh)*-1) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-6);
    background: url('./img/UI/Item.gif') no-repeat;
    background-size: 100%;
    width: calc(var(--vh,1vh)*18);
    height: calc(var(--vh,1vh)*18);
    position: absolute;
}

.DailyTipsMyRewardItem {
    width: calc(var(--vh,1vh)*8);
    height: calc(var(--vh,1vh)*8);
    position: absolute;
    background: url('./img/Activity/Item_Ticket_PB_01.png') no-repeat;
    background-size: 100%;
}

#DailyTipsMyReward1 {
    margin: calc(var(--vh,1vh)*1) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*16);
}

#DailyTipsMyReward2 {
    margin: calc(var(--vh,1vh)*1) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*25);
}

#DailyTipsMyReward3 {
    margin: calc(var(--vh,1vh)*9) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*13);
}

#DailyTipsMyReward4 {
    margin: calc(var(--vh,1vh)*9) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*22);
}

#DailyTipsBigCaraCollectionHeaderDiv {
    margin: calc(var(--vh,1vh)*2) auto auto calc(var(--vh,1vh)*3);
    position: absolute;
}

#DailyTipsBigCaraCollectionTitle {
    font-size: calc(var(--vh,1vh)*2.2);
    color: saddlebrown;
    font-weight: bold;
    font-family: PumpkinGames;
    padding: calc(var(--vh,1vh)*1.5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
}

#DailyTipsBigCard1 {
    margin: calc(var(--vh,1vh)*11) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-1);
}

#DailyTipsBigCard2 {
    margin: calc(var(--vh,1vh)*11) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*8);
}

#DailyTipsBigCard3 {
    margin: calc(var(--vh,1vh)*11) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*17);
}

#DailyTipsBigCard4 {
    margin: calc(var(--vh,1vh)*11) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*26);
}

#DailyTipsBigCard5 {
    margin: calc(var(--vh,1vh)*20) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*-1);
}

#DailyTipsBigCard6 {
    margin: calc(var(--vh,1vh)*20) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*8);
}

#DailyTipsBigCard7 {
    margin: calc(var(--vh,1vh)*20) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*17);
}

#DailyTipsBigCard8 {
    margin: calc(var(--vh,1vh)*20) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*26);
}

#DailyTipsBigCardGif {
    margin: calc(var(--vh,1vh)*26) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*8);
}

.HintItemPanel {
    width: 100%;
    height: 100%;
    z-index: 3;
    display: none;
}
    .hint-item_bg{
        width: 36%;
        min-width: 360px;
        max-width: 540px;
        aspect-ratio: 374 / 551;
        display: flex;
        justify-content: start;
        align-items: stretch;
        flex-direction: column;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: url('./img/UI/Frame_Mine_Bag.png') no-repeat;
        background-size: contain;
        letter-spacing: 3px;
    }
    #hint-item_title{
        position: relative;
        height: 15%;
        color: #5C3A21;
        text-align: center;
        font-family: 'Noto Sans TC', 'Microsoft JhengHei';
        font-size: clamp(18px, 1.8cqw, 24px);
        padding: 3%;
        padding-top: 4%;
    }
    .hint-item_cb{
        position: absolute;
        top: 0;
        right: 0.3vh;
        width: 18%;
        background: url(./img/UI/Button_Close.png) no-repeat;
        background-size: contain;
        aspect-ratio: 1;
    }
    .hint-item_content{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
        .hint-item_img{
            width: 50%;
            height: auto;
            padding: 1%;
        }
        .hint-item_text{
            position: relative;
            color: #5C3A21;
            font-family: 'Noto Sans TC', 'Microsoft JhengHei';
            font-size: clamp(12px, 1.2cqw, 20px);
            padding: 3%;
            padding-top: 6%;
            text-align: center;
        }
        #hint-item_adbtn{
            background: url('./img/UI/Button_Main_Purple.png') no-repeat;
            background-size: contain;
            aspect-ratio: 349 / 153;
            width: 36%;
            color:white;
            font-family: 'Noto Sans TC', 'Microsoft JhengHei';
            font-size: clamp(60%, 16px, 150%);
            padding: 3%;
        }
        #hint-item_login{
            width: 36%;
            color:white;
            padding-bottom: 1.5%;
            aspect-ratio: 104 / 34;
            background: url('./img/UI/Button_Main_Login.png');
            background-size: contain;
            font-family: 'Noto Sans TC', 'Microsoft JhengHei';
            font-size: clamp(60%, 16px, 150%);
        }

.noborderbutton{
    border: none;
    outline: none;
    box-shadow: none;
    appearance: none;
}

.show-popup {
    display: block !important;
    animation: popupScaleIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; 
}
/*#endregion*/

/*#region 結算獎勵面板*/

.SettleRewardBlackMask {
    background: rgba(0,0,0,0.85);
    width: calc(var(--vw,1vw)*100);
    height: 100%;
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    display: none;
}

.SettleRewardFrame {
    width: calc(var(--vh,1vh)*40);
    height: calc(var(--vh,1vh)*40);
    background: url('./img/UI/Frame_Book_Small.png') no-repeat;
    background-size: calc(var(--vh,1vh)*40) calc(var(--vh,1vh)*40);
    margin: calc(var(--vh,1vh)*20) auto auto auto;
    z-index: 3;
    display: none;
}

#SettleRewardHintHeaderDiv {
    width: calc(calc(var(--vh,1vh)*70)*0.922*0.4);
    height: calc(calc(var(--vh,1vh)*70)*0.922*0.4*0.291);
    background: url('./img/UI/Title_Mode.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*70)*0.922*0.4) calc(calc(var(--vh,1vh)*70)*0.922*0.4*0.291);
    margin: calc(var(--vh,1vh)*-2) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*7);
    position: absolute;
}

#SettleRewardHintHeaderContent {
    width: calc(calc(var(--vh,1vh)*40));
    text-align: center;
    padding: calc(var(--vh,1vh)*1.25) calc(var(--vh,1vh)*14) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
    position: absolute;
}

#SettleRewardHintHeaderLabel {
    font-size: calc(var(--vh,1vh)*2.25);
    color: white;
    font-weight: bold;
    z-index: 2;
    font-family: PumpkinGames;
}

#SettleRewardFrameArea {
    margin: calc(var(--vh,1vh)*12) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*14);
    position: absolute;
}

.SettleRewardHintDiv {
    position: absolute;
    margin: calc(var(--vh,1vh)*32) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*4.5);
    text-align: center;
}

#SettleRewardHintText {
    font-size: calc(var(--vh,1vh)*2);
    color: red;
    font-weight: bold;
    z-index: 2;
    font-family: PumpkinGames;
}

#SettleRewardFrameConfirmButton {
    position: absolute;
    margin: calc(var(--vh,1vh)*40) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*12);
}

.SettleRewardPanel {
    width: calc(calc(var(--vh,1vh)*70)*0.6885245901639344);
    height: calc(var(--vh,1vh)*70);
    background: url('./img/UI/Frame_Mine.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*70)*0.6885245901639344) calc(var(--vh,1vh)*70);
    margin: calc(var(--vh,1vh)*20) auto auto auto;
    z-index: 3;
    display: none;
}

#SettleRewardHeaderDiv {
    width: calc(calc(var(--vh,1vh)*65)*0.922*0.4);
    height: calc(calc(var(--vh,1vh)*65)*0.922*0.4*0.291);
    background: url('./img/UI/Title_Mode.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*65)*0.922*0.4) calc(calc(var(--vh,1vh)*65)*0.922*0.4*0.291);
    margin: calc(var(--vh,1vh)*-2) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*12);
    position: absolute;
}

#SettleRewardHeaderDecoration {
    width: calc(calc(var(--vh,1vh)*8)*0.819047619047619);
    height: calc(var(--vh,1vh)*8);
    background: url('./img/UI/Icon_DropItem.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*8)*0.819047619047619) calc(var(--vh,1vh)*8);
    position: absolute;
    margin: calc(var(--vh,1vh)*-6.5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*10);
    border: none;
    z-index: 10;
}

#SettleRewardHeaderContent {
    width: calc(calc(var(--vh,1vh)*40));
    text-align: center;
    padding: calc(var(--vh,1vh)*1.25) calc(var(--vh,1vh)*15) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
    position: absolute;
}

#SettleRewardHeaderLabel {
    font-size: calc(var(--vh,1vh)*2.25);
    color: white;
    font-weight: bold;
    z-index: 2;
    font-family: PumpkinGames;
}

.SettleRewardContent {
    /*    text-align: center;*/
    margin: auto;
}

#RewardArea {
    /*position: absolute;*/
    margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
}

#RewardAreaTitle {
    /*position: absolute;*/
    margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
    font-size: calc(var(--vh,1vh)*2.25);
    color: maroon;
    font-weight: bold;
    z-index: 2;
    font-family: PumpkinGames;
}

.SettleRewardItem {
    width: calc(var(--vh,1vh)*12);
    height: calc(var(--vh,1vh)*12);
    /*    position: absolute;*/
    background: url('./img/Activity/Item_Ticket_PB_01.png') no-repeat;
    background-size: 100%;
}
/*
#SettleRewardItem1 {
    margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
}

#SettleRewardItem2 {
    margin: calc(var(--vh,1vh)*-10) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*10);
}

#SettleRewardItem3 {
    margin: calc(var(--vh,1vh)*-10) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*20);
}
#SettleRewardItem4 {
    margin: calc(var(--vh,1vh)*0.5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
}

#SettleRewardItem5 {
    margin: calc(var(--vh,1vh)*-10) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*10);
}

#SettleRewardItem6{
    margin: calc(var(--vh,1vh)*-10) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*20);
}*/

#CardArea {
    /*position: absolute;*/
    margin: calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
}

#CardAreaTitle {
    /*position: absolute;*/
    margin: calc(var(--vh,1vh)*4) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
    font-size: calc(var(--vh,1vh)*2.25);
    color: maroon;
    font-weight: bold;
    z-index: 2;
    font-family: PumpkinGames;
}

.SettleCardItem {
    width: calc(var(--vh,1vh)*12);
    height: calc(var(--vh,1vh)*12);
    background: url('./img/Questions/PNG/Dish/JP/BuckwheatNoodles_LV1.png') no-repeat;
    background-size: 100%;
    /*position: absolute;*/
}

/*#SettleCardItem1 {
    margin: calc(var(--vh,1vh)*4) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
}

#SettleCardItem2 {
    margin: calc(var(--vh,1vh)*-12) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*12.5);
}

#SettleCardItem3 {
    margin: calc(var(--vh,1vh)*-12) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*25);
}

#SettleCardItem4 {
    margin: calc(var(--vh,1vh)*0.5) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
}

#SettleCardItem5 {
    margin: calc(var(--vh,1vh)*-12) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*12.5);
}

#SettleCardItem6 {
    margin: calc(var(--vh,1vh)*-12) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*25);
}*/

#SettleRewardBindAccountHint {
    width: calc(calc(var(--vh,1vh)*46));
    text-align: center;
    margin: calc(var(--vh,1vh)*55) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0);
    position: absolute;
}

#SettleRewardBindAccountHintLabel {
    font-size: calc(var(--vh,1vh)*2.25);
    color: red;
    font-weight: bold;
    z-index: 2;
    font-family: PumpkinGames;
}

#SettleRewardConfirmButton {
    position: absolute;
    margin: calc(var(--vh,1vh)*69) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*16);
}
/*#endregion*/

#buttonFailurePlayConfirmDiv {
    /*         top: 87%;*/
    /*    top: 112%;*/
    margin: calc(var(--vh,1vh)*60) auto 0 calc(var(--vh,1vh)*8);
    position: absolute;
    z-index: 1;
}

#buttonFailurePlayAgainDiv {
    /*        top: 87%;*/
    /*    top: 94%;*/
    margin: calc(var(--vh,1vh)*60) auto 0 calc(var(--vh,1vh)*28);
    position: absolute;
    z-index: 1;
}

#buttonFailureShareDiv {
    /*      top: 87%;*/
    margin: calc(var(--vh,1vh)*60) auto 0 calc(var(--vh,1vh)*48);
    position: absolute;
    z-index: 1;
}

#buttonSuccessPlayConfirmDiv {
    /*top: 87%;*/
    /*    top: 113%;*/
    margin: calc(var(--vh,1vh)*64) auto 0 calc(var(--vh,1vh)*7);
    position: absolute;
    z-index: 1;
}

#buttonSuccessPlayAgainDiv {
    /*top: 87%;*/
    /*    top: 95%;*/
    margin: calc(var(--vh,1vh)*64) auto 0 calc(var(--vh,1vh)*26);
    position: absolute;
    z-index: 1;
}

#buttonSuccessShareDiv {
    /*top: 87%;*/
    /*    top: 113%;*/
    margin: calc(var(--vh,1vh)*64) auto 0 calc(var(--vh,1vh)*45);
    position: absolute;
    z-index: 1;
}


.buttonShareStyle {
    width: calc(var(--vh,1vh)*7.5);
    height: calc(var(--vh,1vh)*7.5);
    display: block;
    border: none;
    background: url('./img/UI/Button_Share.png');
    background-size: calc(var(--vh,1vh)*7.5) calc(var(--vh,1vh)*7.5);
    /*        margin: calc(var(--vh,1vh)*-10) auto 0 auto;*/
}

/* 排行榜波浪彈出動畫 */
@keyframes WavePop {
    0%   { transform: scale(0) rotate(-8deg); opacity: 0; }
    40%  { transform: scale(1.25) rotate(4deg); opacity: 1; }
    60%  { transform: scale(0.9) rotate(-2deg); opacity: 1; }
    80%  { transform: scale(1.08) rotate(1deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.rank-wave-hidden {
    transform: scale(0);
    opacity: 0;
}

.rank-wave-pop {
    animation: WavePop 0.5s ease forwards;
}

/* 按鈕 Q 彈動畫 (果凍搖晃) */
@keyframes BounceClick {
    0%   { transform: scale(1) rotate(0deg); }
    20%  { transform: scale(0.7) rotate(-3deg); }
    45%  { transform: scale(1.2) rotate(2deg); }
    65%  { transform: scale(0.9) rotate(-1deg); }
    80%  { transform: scale(1.08) rotate(0.5deg); }
    100% { transform: scale(1) rotate(0deg); }
}
/* 左箭頭專用：保留 scaleX(-1) 的 Q 彈動畫，避免動畫時變回右箭頭 */
@keyframes BounceClickFlipped {
    0%   { transform: scaleX(-1) scale(1) rotate(0deg); }
    20%  { transform: scaleX(-1) scale(0.7) rotate(-3deg); }
    45%  { transform: scaleX(-1) scale(1.2) rotate(2deg); }
    65%  { transform: scaleX(-1) scale(0.9) rotate(-1deg); }
    80%  { transform: scaleX(-1) scale(1.08) rotate(0.5deg); }
    100% { transform: scaleX(-1) scale(1) rotate(0deg); }
}

/* 首頁按鈕共用 Q 彈效果 */
.StartPageStandardButtonImage:active,
.StartPageEventModeButtonImage:active,
#StartPageHintItemImage:active,
.StartPagePracticeButtonImage:active,
.StartPageBattleButtonImage:active,
.StartPageRankingButtonImage:active,
.StartPageTutorialButtonImage:active,
#StartPageAboutDiv:active,
.StartPageUserImage:active,
.MyAccountPanelCloseButton:active,
.hint-item_cb:active,
.AboutBtnClose:active,
.TutorialBtnClose:active,
.MyAccountButton:active,
#LogOutButton:active,
.RankingBtnClose:active,
#RankingPanelTodayDiv:active,
#RankingPanelThisWeekDiv:active,
#RankingPanelEventDiv:active,
#RankingPanelHistoryDiv:active,
#RankingPanelLuckyDiv:active,
#RankingPanelRank_PKDiv:active,
#RankingScrollBtnClose:active,
.MemoryAnalysisCloseButton:active,
.MemoryAnalysisButton:active,
#DailyTipsCloseButton:active,
#MemoryScrollCloseButton:active,
#Setting:active,
.buttonPlayConfirmStyle:active,
#buttonFailurePlayAgainDiv:active,
#buttonFailureShareDiv:active,
#fLineFrame:active,
#fQRcodeFrame:active,
.EncyclopediaPageImage:active,
#EncyclopediaCloseButton:active,
.LoginButton:active,
#FacebookButtonDiv:active,
#GoogleButtonDiv:active,
#BattleRankIcon:active,
#hintitem:active,
.PausePanelGiveUpButtonStyle:active,
.IntroRankIcon:active {
    animation: BounceClick 0.5s ease;
    cursor: pointer;
}

/* 圖鑑左箭頭：使用 BounceClickFlipped 保留 scaleX(-1)，避免動畫時變回右箭頭 */
#EncyclopediaPreviousPage:active {
    animation: BounceClickFlipped 0.5s ease;
}

/* PC 版滑鼠懸停放大效果 - 基礎 transition (確保移出時也有平滑縮回) */
@media (hover: hover) {
    .buttonStyle,
    .IntroBtnClose,
    #LoginEnter,
    .StartPageStandardButtonImage,
    .StartPageEventModeButtonImage,
    #StartPageHintItemImage,
    .StartPagePracticeButtonImage,
    .StartPageBattleButtonImage,
    .StartPageRankingButtonImage,
    .StartPageTutorialButtonImage,
    #StartPageAboutDiv,
    .StartPageUserImage,
    .MyAccountPanelCloseButton,
    .hint-item_cb,
    .AboutBtnClose,
    .TutorialBtnClose,
    .MyAccountButton,
    #LogOutButton,
    .RankingBtnClose,
    #RankingPanelTodayDiv,
    #RankingPanelThisWeekDiv,
    #RankingPanelEventDiv,
    #RankingPanelHistoryDiv,
    #RankingPanelLuckyDiv,
    #RankingPanelRank_PKDiv,
    #RankingScrollBtnClose,
    .MemoryAnalysisCloseButton,
    .MemoryAnalysisButton,
    #DailyTipsCloseButton,
    #MemoryScrollCloseButton,
    #Setting,
    .buttonPlayConfirmStyle,
    #buttonFailurePlayAgainDiv,
    #buttonFailureShareDiv,
    #fLineFrame,
    #fQRcodeFrame,
    .EncyclopediaPageImage,
    #EncyclopediaCloseButton,
    .LoginButton,
    #FacebookButtonDiv,
    #GoogleButtonDiv,
    #BattleRankIcon,
    #hintitem,
    #SuccessPanelRewardButton,
    #buttonSuccessShareDiv,
    .BattleSettlementRankIcon,
    .PausePanelGiveUpButtonStyle,
    .IntroRankIcon {
        transition: transform 0.2s ease;
    }
}

/* PC 版滑鼠懸停放大效果 - :hover 狀態 */
@media (hover: hover) {
    .buttonStyle:hover,
    .IntroBtnClose:hover,
    #LoginEnter:hover,
    .StartPageStandardButtonImage:hover,
    .StartPageEventModeButtonImage:hover,
    #StartPageHintItemImage:hover,
    .StartPagePracticeButtonImage:hover,
    .StartPageBattleButtonImage:hover,
    .StartPageRankingButtonImage:hover,
    .StartPageTutorialButtonImage:hover,
    #StartPageAboutDiv:hover,
    .StartPageUserImage:hover,
    .MyAccountPanelCloseButton:hover,
    .hint-item_cb:hover,
    .AboutBtnClose:hover,
    .TutorialBtnClose:hover,
    .MyAccountButton:hover,
    #LogOutButton:hover,
    .RankingBtnClose:hover,
    #RankingPanelTodayDiv:hover,
    #RankingPanelThisWeekDiv:hover,
    #RankingPanelEventDiv:hover,
    #RankingPanelHistoryDiv:hover,
    #RankingPanelLuckyDiv:hover,
    #RankingPanelRank_PKDiv:hover,
    #RankingScrollBtnClose:hover,
    .MemoryAnalysisCloseButton:hover,
    .MemoryAnalysisButton:hover,
    #DailyTipsCloseButton:hover,
    #MemoryScrollCloseButton:hover,
    #Setting:hover,
    .buttonPlayConfirmStyle:hover,
    #buttonFailurePlayAgainDiv:hover,
    #buttonFailureShareDiv:hover,
    #fLineFrame:hover,
    #fQRcodeFrame:hover,
    .EncyclopediaPageImage:hover,
    #EncyclopediaCloseButton:hover,
    .LoginButton:hover,
    #FacebookButtonDiv:hover,
    #GoogleButtonDiv:hover,
    #BattleRankIcon:hover,
    #hintitem:hover,
    #SuccessPanelRewardButton:hover,
    #buttonSuccessShareDiv:hover,
    .BattleSettlementRankIcon:hover,
    .PausePanelGiveUpButtonStyle:hover,
    .IntroRankIcon:hover {
        transform: scale(1.1);
        transition: transform 0.2s ease;
        cursor: pointer;
    }
    /* 圖鑑左箭頭：hover 時保留 scaleX(-1)，避免變回右箭頭或消失 */
    #EncyclopediaPreviousPage:hover {
        transform: scaleX(-1) scale(1.1);
    }
}

.buttonStyle {
    width: calc(calc(var(--vh,1vh)*7.5)*2.31);
    height: calc(var(--vh,1vh)*7.5);
    display: block;
    border: none;
    background: url('./img/UI/Button_Play.png');
    background-size: calc(calc(var(--vh,1vh)*7.5)*2.31) calc(var(--vh,1vh)*7.5);
    font-size: calc(var(--vh,1vh)*2.5);
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.buttonStyle:active {
    animation: BounceClick 0.5s ease;
}

.buttonPlayConfirmStyle {
    width: calc(calc(var(--vh,1vh)*7.5)*2.31);
    height: calc(var(--vh,1vh)*7.5);
    display: block;
    border: none;
    background: url('./img/UI/Button_Orange.png');
    background-size: calc(calc(var(--vh,1vh)*7.5)*2.31) calc(var(--vh,1vh)*7.5);
    font-size: calc(var(--vh,1vh)*3);
    color: white;
    font-weight: bold;
}

.LineStickerFrame {
    width: calc(calc(var(--vh,1vh)*13)*2.084905660377358);
    height: calc(var(--vh,1vh)*13);
    background: url('./img/UI/Frame_Text_2.png');
    background-size: calc(calc(var(--vh,1vh)*13)*2.084905660377358) calc(var(--vh,1vh)*13);
}

.LineStickerExample {
    width: calc(calc(var(--vh,1vh)*6)*1);
    height: calc(var(--vh,1vh)*6);
    background: url('./img/Questions/GIF/01/4.gif');
    background-size: calc(calc(var(--vh,1vh)*6)*1) calc(var(--vh,1vh)*6);
    position: absolute;
    margin: calc(var(--vh,1vh)*1.5) auto auto calc(var(--vh,1vh)*3.5);
}

.LineStickerText {
    font-size: calc(var(--vh,1vh)*1.5);
    color: white;
    font-weight: bold;
    margin: calc(var(--vh,1vh)*2) auto auto calc(var(--vh,1vh)*10);
    position: absolute;
    width: calc(var(--vh,1vh)*14.5);
}

.QRcodeFrame {
    width: calc(calc(var(--vh,1vh)*16)*1.674242424242424);
    height: calc(var(--vh,1vh)*16);
    background: url('./img/UI/Frame_Text_3.png');
    background-size: calc(calc(var(--vh,1vh)*16)*1.674242424242424) calc(var(--vh,1vh)*16);
}

.QRcodeImg {
    width: calc(calc(var(--vh,1vh)*7)*1);
    height: calc(var(--vh,1vh)*7);
    background: url('./img/UI/QRcode.png');
    background-size: calc(calc(var(--vh,1vh)*7)*1) calc(var(--vh,1vh)*7);
    margin: calc(var(--vh,1vh)*2) calc(var(--vh,1vh)*4) auto calc(var(--vh,1vh)*17);
    position: absolute;
}

.QRcodeText {
    font-size: calc(var(--vh,1vh)*1.5);
    color: white;
    font-weight: bold;
    margin: calc(var(--vh,1vh)*2.5)calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*0) calc(var(--vh,1vh)*3);
    width: calc(var(--vh,1vh)*14);
    position: absolute;
}

.LanguageButton {
    width: calc(var(--vh,1vh)*6);
    height: calc(var(--vh,1vh)*6);
    margin: calc(var(--vh,1vh)*0) auto 0 auto;
    font-size: calc(var(--vh,1vh)*2);
    color: black;
    font-weight: bold;
}

/*#region 卷軸區設定*/

/*#region 舊版客製化卷軸(棄用)*/
#wrapper {
    text-align: center;
    margin: auto;
}

.scrollbar {
    display: block;
    margin: calc(var(--vh,1vh)*9) auto auto calc(var(--vh,1vh)*5);
    max-height: calc(var(--vh,1vh)*46);
    width: calc(calc(var(--vh,1vh)*47)*0.7969283276450512);
    overflow: visible;
    overflow-y: scroll;
    overflow-x: hidden;
    float: left;
}

#style-2::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 0px;
    background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar {
    width: calc(var(--vh,1vh)*1);
    background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar-thumb {
    border-radius: calc(var(--vh,1vh)*2);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #D62929;
}

.force-overflow {
}

/*#endregion*/

/*#region 測驗結果卷軸*/

#customScrollbar {
    max-height: calc(var(--vh,1vh)*46);
    width: calc(calc(var(--vh,1vh)*47)*0.7969283276450512);
    margin: calc(var(--vh,1vh)*9) auto auto auto;
}

#scrollableElement {
    max-height: calc(var(--vh,1vh)*58);
    width: calc(calc(var(--vh,1vh)*57.5)*0.7969283276450512);
    margin: calc(var(--vh,1vh)*14) auto auto calc(var(--vh,1vh)*-4.5);
    float: left;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch
}

    #scrollableElement::-webkit-scrollbar {
        width: 0 !important;
        overflow: hidden;
    }

/*#endregion*/

/*#region 隱私權政策卷軸*/

#totalrankScrollbar {
    max-height: calc(var(--vh,1vh)*42);
    width: calc(var(--vh,1vh)*36.5);
    margin: calc(var(--vh,1vh)*-15) auto auto calc(var(--vh,1vh)*0);
    position: absolute;
}

#totalrankscrollableElement {
    max-height: calc(var(--vh,1vh)*60);
    width: calc(var(--vh,1vh)*46);
    margin: calc(var(--vh,1vh)*4) auto auto calc(var(--vh,1vh)*0);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch
}

    #totalrankscrollableElement::-webkit-scrollbar {
        width: 0 !important;
        overflow: hidden;
    }

/*#endregion*/

/*#region 排行榜卷軸*/

#rankingScrollbar {
    height: calc(var(--vh,1vh)*57);
    width: calc(calc(var(--vh,1vh)*57)*0.7969283276450512);
    margin: calc(var(--vh,1vh)*3) auto auto calc(var(--vh,1vh)*7);
    position: absolute;
}

#rankingscrollableElement {
    width: calc(calc(var(--vh,1vh)*57)*0.7969283276450512);
    margin: calc(var(--vh,1vh)*11) auto auto calc(var(--vh,1vh)*-0.5);
    float: left;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch
}

.rankingscrollheight_login {
    max-height: calc(var(--vh,1vh)*43);
}

.rankingscrollheight {
    max-height: calc(var(--vh,1vh)*57);
}

    #rankingscrollableElement::-webkit-scrollbar {
        width: 0 !important;
        overflow: hidden;
    }

#userrank{
    position: absolute;
    bottom: calc(var(--vh,1vh)*-10);
    display: block;
    /* 以下未來移除 */
    width: calc(calc(var(--vh,1vh)*57)*0.7969283276450512);
    margin: calc(var(--vh, 1vh) * 11) auto auto calc(var(--vh, 1vh) * -0.5);
}
    .DecorationLine3{
        /* width: 100%;
        aspect-ratio: 383/5; */
        width: calc(var(--vh,1vh)*40); 
        height: calc(var(--vh,1vh)*0.55); 
        margin: calc(var(--vh,1vh)*-2) calc(var(--vh,1vh)*1) auto auto;
        position: relative;
        top: 2vh;
        left: -2.8vh;
    }
    .usertitle{
        width: 25%;
        position: absolute;
        left: 1.5%;
        bottom: -0.6vh;
    }
    .usertitle img{
        width: 75%;
    }
    #norankcontent{
        position: absolute;
        width: 39%;
        bottom: 1.3vh;
        transform: translateX(135%);
    }
    .hintString{
        font-size: calc(var(--vh, 1vh) * 1.7);
        color: saddlebrown;
        font-weight: bolder;
        font-family: PumpkinGames, sans-serif;
    }

    /* font-size class */
    /* .font-size_2point5vh{
        font-size: calc(var(--vh, 1vh) * 2.5);
    }
    .font-size_2vh{
        font-size: calc(var(--vh, 1vh) * 2);
    } */

    /* font-size class end */

/*#endregion*/

/*#region 我的獎勵卷軸*/

#rewardScrollbar {
    max-height: calc(var(--vh,1vh)*55);
    width: calc(calc(var(--vh,1vh)*47)*0.7969283276450512);
    margin: calc(var(--vh,1vh)*0) auto auto calc(var(--vh,1vh)*10);
    position: absolute;
}

#rewardscrollableElement {
    max-height: calc(var(--vh,1vh)*50);
    width: calc(calc(var(--vh,1vh)*50)*0.7969283276450512);
    margin: calc(var(--vh,1vh)*14) auto auto calc(var(--vh,1vh)*-5.5);
    float: left;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch
}

    #rewardscrollableElement::-webkit-scrollbar {
        width: 0 !important;
        overflow: hidden;
    }

/*#endregion*/

/*#region 記憶分析卷軸*/
#memoryScrollbar {
    max-height: calc(var(--vh,1vh)*58);
    width: calc(var(--vh,1vh)*41.5);
    margin: calc(var(--vh,1vh)*11) auto auto calc(var(--vh,1vh)*2);
    position: absolute;
}

#memoryscrollableElement {
    max-height: calc(var(--vh,1vh)*60);
    width: calc(var(--vh,1vh)*42);
    margin: calc(var(--vh,1vh)*0) auto auto calc(var(--vh,1vh)*0);
    float: left;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch
}

    #memoryscrollableElement::-webkit-scrollbar {
        width: 0 !important;
        overflow: hidden;
    }

/*#endregion*/

/*#region 關於我們卷軸*/

#aboutScrollbar {
    max-height: calc(var(--vh,1vh)*42);
    width: calc(var(--vh,1vh)*36.5);
    margin: calc(var(--vh,1vh)*26) auto auto calc(var(--vh,1vh)*4);
    position: absolute;
}

#aboutscrollableElement {
    max-height: calc(var(--vh,1vh)*42);
    width: calc(var(--vh,1vh)*43);
    margin: calc(var(--vh,1vh)*7) auto auto calc(var(--vh,1vh)*0);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch
}

    #aboutscrollableElement::-webkit-scrollbar {
        width: 0 !important;
        overflow: hidden;
    }

/*#endregion*/

/*#region 隱私權政策卷軸*/

#privacypolicyScrollbar {
    max-height: calc(var(--vh,1vh)*42);
    width: calc(var(--vh,1vh)*36.5);
    margin: calc(var(--vh,1vh)*26) auto auto calc(var(--vh,1vh)*4);
    position: absolute;
}

#privacypolicyscrollableElement {
    max-height: calc(var(--vh,1vh)*43);
    width: calc(var(--vh,1vh)*42);
    margin: calc(var(--vh,1vh)*5) auto auto calc(var(--vh,1vh)*0);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch
}

    #privacypolicyscrollableElement::-webkit-scrollbar {
        width: 0 !important;
        overflow: hidden;
    }

/*#endregion*/

/*#region 結算獎勵面板卷軸*/

#settleRewardScrollbar {
    max-height: calc(var(--vh,1vh)*40);
    width: calc(var(--vh,1vh)*35.5);
    margin: calc(var(--vh,1vh)*5) auto auto calc(var(--vh,1vh)*6);
    position: absolute;
}

#settleRewardscrollableElement {
    max-height: calc(var(--vh,1vh)*40);
    width: calc(var(--vh,1vh)*43);
    margin: calc(var(--vh,1vh)*7) auto auto calc(var(--vh,1vh)*0);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch
}

    #settleRewardscrollableElement::-webkit-scrollbar {
        width: 0 !important;
        overflow: hidden;
    }

/*#endregion*/

/*#endregion 卷軸區設定*/

/*#region 下拉式選單設定*/

.Encyclopediaoption {
    color: saddlebrown;
    background: url("./img/UI/Button_Mine.png") rgba(0,0,0,0);
    background-size: calc(calc(var(--vh,1vh)*5.5)*4.188679245283019)calc(var(--vh,1vh)*5.5);
    width: calc(calc(var(--vh,1vh)*5.5)*4.188679245283019);
    height: calc(var(--vh,1vh)*5.5);
}

#SelectCardNumsInsidePanel {
    appearance: none;
    -webkit-appearance: none;
    font-size: calc(var(--vh,1vh)*2);
    /*background-color: #fff;*/
    border: 0;
    cursor: pointer;
    background: url('./img/UI/Button_Choose_1.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*6.5)*1.463414634146341)calc(var(--vh,1vh)*6.5);
    width: calc(calc(var(--vh,1vh)*6.5)*1.463414634146341);
    height: calc(var(--vh,1vh)*6.5);
    text-align: center;
}
/*#endregion*/

/*#region 外框文字功能*/
.strokeText {
    position: relative;
    display: inline-block;
}

    .strokeText::before {
        content: attr(data-stroke);
        position: absolute;
        z-index: -1;
        -webkit-text-stroke: 5px #FF7800;
        text-stroke: 5px #cb9f62;
    }


/*#endregion*/

/*#region 氣泡文字通知*/

.bubble-msg {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999;
    pointer-events: none;

    /* 文字樣式 — 橘色字 + 白色粗外框，參考 LOGO 風格 */
    font-family: PumpkinGames, 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    font-size: clamp(18px, calc(var(--vh,1vh)*3.2), 36px);
    font-weight: bold;
    color: #FF7800;
    text-shadow:
        -1.5px -1.5px 0 white,
         1.5px -1.5px 0 white,
        -1.5px  1.5px 0 white,
         1.5px  1.5px 0 white,
         0      2px   0 white,
         0     -2px   0 white,
         2px    0     0 white,
        -2px    0     0 white;
    letter-spacing: 2px;

    /* 背景與邊框 */
    background: rgba(255, 255, 255, 0.9);
    border: 3.5px solid #FF7800;
    border-radius: 16px;
    box-shadow: 0 0 0 3px white, 0 4px 16px rgba(255, 120, 0, 0.3);
    padding: calc(var(--vh,1vh)*1.2) calc(var(--vh,1vh)*5);
    max-width: 90vw;
    text-align: center;
    white-space: normal;
    word-break: break-word;

    /* 初始隱藏 */
    opacity: 0;
    will-change: transform, opacity;
}

/* 手機版氣泡：加寬 + 左右留白砍半 */
@media (max-width: 768px) {
    .bubble-msg {
        min-width: 88vw;
        padding-left: calc(var(--vh,1vh)*2.5);
        padding-right: calc(var(--vh,1vh)*2.5);
    }
}

/* 訊息類型前綴符號共用 */
.bubble-msg-icon {
    margin-right: 6px;
}

/* 一般訊息 — 橘色框 (預設) */
.bubble-msg.bubble-info {
    border-color: #FF7800;
    color: #FF7800;
    box-shadow: 0 0 0 3px white, 0 4px 16px rgba(255, 120, 0, 0.3);
}

/* 成功訊息 — 綠色框 */
.bubble-msg.bubble-success {
    border-color: #2ECC71;
    color: #2ECC71;
    box-shadow: 0 0 0 3px white, 0 4px 16px rgba(46, 204, 113, 0.3);
}

/* 錯誤訊息 — 紅色框 */
.bubble-msg.bubble-error {
    border-color: #E74C3C;
    color: #E74C3C;
    box-shadow: 0 0 0 3px white, 0 4px 16px rgba(231, 76, 60, 0.3);
}

@keyframes BubbleMsgAnim {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.4);
    }
    12% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.08);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.0);
    }
    65% {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(-120vh);
    }
}

/*#endregion*/

#bg {
    /*opacity: 0.75;*/
}