html {
    width: 100%;
    height: 100%;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    touch-action: pan-x pan-y;
    overscroll-behavior: none;
}

body {
    margin: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    background-color: #3b1f14;
    touch-action: pan-x pan-y;
    overscroll-behavior: none;
}

@font-face {
    font-family: 'PumpkinGames';
    src: url('./Font/GenSenMaruGothicTW-Light.ttf');
}

/* --- ΦâîµÖ» --- */
#BackgroundLayer {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    max-height: 100dvh;
    z-index: 0;
    overflow: hidden;
    background-color: #3b1f14;
}

/* 主背景：含左右對稱緞帶，橫版以 cover + top 保留頂部 */
#BackgroundMain1 {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center top;
    pointer-events: none;
}

/* 後方桌子：貼底，寬度介於規格圖（約 70–78% 視窗寬） */
#BackgroundMain2 {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(70vw, calc(var(--vh, 1vh) * 81.2));
    aspect-ratio: 723 / 416;
    background-image: url('./img/Background/Background_Main_2.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center bottom;
    pointer-events: none;
    z-index: 1;
}

.layout-landscape #BackgroundMain1 {
    background-image: url('./img/Background/Background_Main_1.png');
    background-size: 100% 100%;
    background-position: center top;
}

.layout-portrait #BackgroundMain1 {
    background-image: url('./img/Background/Background_Main_3.png');
    background-size: 100% 100%;
    background-position: center top;
}

.layout-portrait #BackgroundMain2 {
    display: none;
}

/* --- 首頁容器 --- */
.StartPageParentDiv {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    max-height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
    overflow: hidden;
}

.MainCanvas {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* 活動模式按鈕高度之 1/3，供左右菜色下移（橫版於 media query 覆寫計算） */
    --food-shift-down: calc(var(--vh, 1vh) * 8.6);
}

/* --- 登入（右上角，對齊 CardFrontEnd） --- */
#LoginEnter {
    position: absolute;
    top: max(8px, env(safe-area-inset-top, 0px));
    right: max(8px, env(safe-area-inset-right, 0px));
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.StartPageUserImage {
    position: relative;
    width: calc(var(--vh, 1vh) * 15);
    height: calc(var(--vh, 1vh) * 15);
    background: url('./img/Frame/Frame_Main_Login.png') no-repeat center;
    background-size: contain;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#StartPageUserLoginDiv {
    position: absolute;
    left: 50%;
    bottom: calc(var(--vh, 1vh) * -4);
    transform: translateX(-50%);
    width: calc(calc(var(--vh, 1vh) * 5) * 3.058823);
}

.StartPageUserLoginStyle {
    width: 100%;
    height: calc(var(--vh, 1vh) * 5);
    display: block;
    border: none;
    background: url('./img/Button/Button_Main_Login.png') no-repeat center;
    background-size: contain;
    margin: 0;
    font-size: calc(var(--vh, 1vh) * 2);
    color: #fff;
    font-weight: bold;
    font-family: PumpkinGames, sans-serif;
    cursor: pointer;
}

#LangSwitcherStart {
    position: relative;
    top: auto;
    right: auto;
    margin-top: calc(var(--vh, 1vh) * 5.5);
    z-index: 4;
    min-width: 36px;
    min-height: 36px;
}

#LoginEnter:has(#LangSwitcherStart.is-open) {
    z-index: 400;
}

#LangSwitcherStart.is-open {
    z-index: 401;
}

#LangSwitcherStart .lang-switcher__menu {
    top: calc(100% + 6px);
    bottom: auto;
    right: 0;
    left: auto;
    min-width: 148px;
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    z-index: 402;
}

/* --- Logo --- */
#HeaderLogo {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    transform: scale(1.08);
    transform-origin: top center;
    z-index: 12;
    display: flex;
    justify-content: center;
}

.StartPageLogoImage {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* --- 廚王區 --- */
.ChefArea {
    position: absolute;
    z-index: 8;
    pointer-events: none;
    overflow: visible;
}

.ChefFoodLayer,
.ChefGif {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}

.ChefFoodLayer--back {
    z-index: 1;
}

.ChefGif {
    object-fit: contain;
    z-index: 2;
}

.ChefFoodLayer--front {
    z-index: 3;
}

.ChefArea--left .ChefFoodLayer {
    transform-origin: left bottom;
    transform: scale(0.8) translateY(var(--food-shift-down, 0px));
}

.ChefArea--right .ChefFoodLayer {
    transform-origin: right bottom;
    transform: scale(0.8) translateY(var(--food-shift-down, 0px));
}

.ChefArea--left .ChefFoodLayer--back {
    background-image: url('./img/Decoration/Decoration_Food_Left_1.png');
    /* 較其他菜色額外上移活動模式按鈕高度之 2/3 */
    transform: scale(0.8) translateY(calc(
        var(--food-shift-down, 0px) - var(--event-mode-btn-height, calc(var(--food-shift-down, calc(var(--vh, 1vh) * 8.6)) * 1.5)) * 2 / 3
    ));
}

.ChefArea--left .ChefFoodLayer--front {
    background-image: url('./img/Decoration/Decoration_Food_Left_2.png');
}

.ChefArea--right .ChefFoodLayer--back {
    background-image: url('./img/Decoration/Decoration_Food_Right_1.png');
}

.ChefArea--right .ChefFoodLayer--front {
    background-image: url('./img/Decoration/Decoration_Food_Right_2.png');
}

.ChefGif--black {
    transform: scaleX(-1);
}

.ChefArea--right .ChefGif {
    left: auto;
}

/* --- 主選單按鈕 --- */
#MainFunctionArea {
    position: absolute;
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: auto;
}

#GameEnter {
    display: grid;
    justify-items: center;
    align-items: center;
}

#SecondaryEnter {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(var(--vh, 1vh) * 2.5);
}

.MainMenuButton {
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.MainMenuButton:active {
    filter: brightness(0.92);
}

.MainMenuButton--rank {
    background-image: url('./img/Button/Button_Pink.png');
}

.MainMenuButton--event {
    background-image: url('./img/Button/Button_Yellow.png');
}

.MainMenuButton--practice {
    background-image: url('./img/Button/Button_Blue.png');
}

.MainMenuButton--battle {
    background-image: url('./img/Button/Button_Purple.png');
}

.MainMenuButton--announcement {
    background-image: url('./img/Button/Button_Annocement.png');
}

.MainMenuButton--leaderboard {
    background-image: url('./img/Button/Button_Rank.png');
}

.MainMenuButtonLabel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 88%;
    text-align: center;
    color: #fff;
    font-family: PumpkinGames, sans-serif;
    font-weight: bold;
    line-height: 1.15;
    text-shadow:
        1px 1px 0 rgba(0, 0, 0, 0.35),
        -1px 1px 0 rgba(0, 0, 0, 0.35),
        1px -1px 0 rgba(0, 0, 0, 0.35),
        -1px -1px 0 rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.MainMenuButtonLabel--small {
    top: 62%;
    transform: translate(-50%, calc(-50% + 1.2em));
    font-size: calc(var(--vh, 1vh) * 1.55);
}

#FooterEnter {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(var(--vh, 1vh) * 2);
    z-index: 15;
}

.FooterButton {
    position: relative;
    background: url('./img/Button/Button_White.png') no-repeat center;
    background-size: 100% 100%;
    cursor: pointer;
    user-select: none;
}

.FooterButtonLabel {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b3d22;
    font-family: PumpkinGames, sans-serif;
    font-weight: bold;
    pointer-events: none;
}

/* ===================== 橫版（PC 規格） ===================== */
@media (min-aspect-ratio: 1/1) {
    .MainCanvas {
        /* 活動模式按鈕實高 = 第二欄寬 × 108/184，菜色下移 1/3 */
        --main-menu-grid-width: min(44vw, calc(var(--vh, 1vh) * 54));
        --event-mode-btn-height: calc(
            (var(--main-menu-grid-width) - calc(var(--vh, 1vh) * 1.5)) / 2.42 * 108 / 184
        );
        --food-shift-down: calc(var(--event-mode-btn-height) * 2 / 3);
    }

    #BackgroundMain2 {
        width: min(70vw, calc(var(--vh, 1vh) * 78.4));
    }

    #HeaderLogo {
        top: calc(var(--vh, 1vh) * 0.5);
        width: min(50vw, calc(var(--vh, 1vh) * 68));
    }

    .StartPageLogoImage {
        width: 100%;
        aspect-ratio: 376 / 157;
        height: auto;
    }

    .ChefArea {
        bottom: 0;
        width: min(52vw, calc(var(--vh, 1vh) * 88));
        height: min(52vw, calc(var(--vh, 1vh) * 88));
        z-index: 10;
    }

    .ChefArea--left {
        left: max(calc(var(--vw, 1vw) * -2), -10px);
    }

    .ChefArea--right {
        right: max(calc(var(--vw, 1vw) * -2), -10px);
    }

    /* 左後景 Left_1：飲料＋香腸盤，在廚王後方（較其他菜色上移 2/3 活動按鈕高） */
    .ChefArea--left .ChefFoodLayer--back {
        width: 98%;
        height: 58%;
        left: -6%;
        bottom: 12%;
        background-position: left bottom;
        transform: scale(0.64) translateY(calc(var(--food-shift-down) - var(--event-mode-btn-height) * 2 / 3));
    }

    .ChefArea--left .ChefGif {
        width: 70%;
        height: 70%;
        left: 24%;
        bottom: 0;
        object-position: right bottom;
        transform: translateX(calc(-50% + 100% / 3 - 100% / 6));
        z-index: 2;
    }

    /* 左前景 Left_2：左下角熊本飯＋義大利麵往中央延伸，在廚王前方 */
    .ChefArea--left .ChefFoodLayer--front {
        width: 138%;
        height: 60%;
        left: -14%;
        bottom: 0;
        background-position: left bottom;
        transform: scale(0.64) translateY(var(--food-shift-down));
        z-index: 3;
    }

    /* 右後景 Right_1：豬排托盤，在廚王後方、偏中央 */
    .ChefArea--right .ChefFoodLayer--back {
        width: 54%;
        height: 42%;
        right: 34%;
        bottom: 20%;
        background-position: center bottom;
        transform: scale(0.64) translateY(var(--food-shift-down)) translateY(50%);
        z-index: 1;
    }

    .ChefArea--right .ChefGif {
        width: 70%;
        height: 70%;
        right: 6%;
        bottom: 0;
        object-position: left bottom;
        z-index: 2;
    }

    .ChefArea--right .ChefGif.ChefGif--black {
        right: 35%;
        transform-origin: right bottom;
        transform: scaleX(-1) translateX(calc(100% / 3)) rotate(10deg);
    }

    /* 右前景 Right_2：三明治＋草莓塔，在廚王前方、右下角 */
    .ChefArea--right .ChefFoodLayer--front {
        width: 82%;
        height: 56%;
        right: -8%;
        bottom: 0;
        background-position: right bottom;
        transform: scale(0.704) translateY(var(--food-shift-down));
        z-index: 3;
    }

    #MainFunctionArea {
        left: 50%;
        top: 37%;
        transform: translateX(-50%);
        width: min(44vw, calc(var(--vh, 1vh) * 54));
        z-index: 15;
    }

    #GameEnter {
        grid-template-columns: 1.42fr 1fr;
        column-gap: calc(var(--vh, 1vh) * 1.5);
        row-gap: calc(var(--vh, 1vh) * 1.5);
        width: 100%;
    }

    .MainMenuButton--rank {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        aspect-ratio: 279 / 109;
    }

    .MainMenuButton--event {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        aspect-ratio: 184 / 108;
    }

    .MainMenuButton--practice {
        grid-column: 1;
        grid-row: 2;
        /* 左欄 1.42fr、右欄 1fr；100% 為左欄寬，除以 1.42 對齊活動／對戰按鈕 */
        width: calc(100% / 1.42);
        justify-self: end;
        margin-right: calc(var(--vh, 1vh) * -0.75);
        aspect-ratio: 184 / 108;
        transform: translateX(-25%);
    }

    .MainMenuButton--battle {
        grid-column: 2;
        grid-row: 2;
        width: 100%;
        aspect-ratio: 185 / 108;
        transform: translateX(-25%);
    }

    #SecondaryEnter {
        margin-top: calc(var(--vh, 1vh) * 1.2);
        gap: calc(var(--vh, 1vh) * 3);
    }

    .MainMenuButton--announcement,
    .MainMenuButton--leaderboard {
        width: calc(var(--vh, 1vh) * 12.5);
        aspect-ratio: 101 / 111;
        flex-shrink: 0;
    }

    .MainMenuButtonLabel {
        font-size: calc(var(--vh, 1vh) * 2.6);
    }

    .MainMenuButton--rank .MainMenuButtonLabel {
        font-size: calc(var(--vh, 1vh) * 3);
    }

    .MainMenuButtonLabel--small {
        font-size: calc(var(--vh, 1vh) * 1.65);
    }

    #FooterEnter {
        margin-top: calc(var(--vh, 1vh) * 1.2);
        gap: calc(var(--vh, 1vh) * 2.5);
    }

    .FooterButton {
        width: calc(var(--vh, 1vh) * 17);
        aspect-ratio: 145 / 36;
    }

    .FooterButtonLabel {
        font-size: calc(var(--vh, 1vh) * 1.85);
    }

    #LoginEnter {
        top: calc(var(--vh, 1vh) * 1);
        right: calc(var(--vw, 1vw) * 1.5);
    }

    #LangSwitcherStart {
        margin-top: calc(var(--vh, 1vh) * 5);
    }

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

/* ===================== 直版（手機規格） ===================== */
@media (aspect-ratio < 1/1) {
    .MainCanvas {
        --main-menu-grid-width: min(calc(var(--vw, 1vw) * 92), 380px);
        --portrait-btn-row-gap: calc(var(--vw, 1vw) * 2);
        --event-mode-btn-width: calc(
            (var(--main-menu-grid-width) - var(--portrait-btn-row-gap) * 2) / 3
        );
        --event-mode-btn-height: calc(
            var(--event-mode-btn-width) * 108 / 185
        );
        --food-shift-down: calc(var(--event-mode-btn-height) * 2 / 3);
    }

    .StartPageUserImage {
        width: calc(var(--vw, 1vw) * 18);
        height: calc(var(--vw, 1vw) * 18);
    }

    .StartPageUserLoginStyle {
        width: 100%;
        height: calc(var(--vw, 1vw) * 6.5);
        margin: 0;
        font-size: calc(var(--vw, 1vw) * 2.6);
    }

    #StartPageUserLoginDiv {
        width: calc(calc(var(--vw, 1vw) * 6.5) * 3.058823);
        bottom: calc(var(--vw, 1vw) * -4);
    }

    #LoginEnter {
        top: max(6px, env(safe-area-inset-top, 0px));
        right: max(6px, env(safe-area-inset-right, 0px));
    }

    #LangSwitcherStart {
        margin-top: calc(var(--vw, 1vw) * 6);
    }

    #HeaderLogo {
        top: calc(var(--vw, 1vw) * 3);
        width: var(--main-menu-grid-width);
    }

    .StartPageLogoImage {
        width: 100%;
        aspect-ratio: 376 / 157;
    }

    .ChefArea {
        bottom: 0;
        --chef-area-width: calc(var(--vw, 1vw) * 46);
        width: var(--chef-area-width);
        height: var(--chef-area-width);
        z-index: 10;
        transform: scale(2.1);
    }

    .ChefArea--left {
        left: calc(var(--event-mode-btn-width) * -0.5);
        transform-origin: left bottom;
    }

    .ChefArea--right {
        right: calc(var(--event-mode-btn-width) * -0.5);
        transform-origin: right bottom;
    }

    .ChefArea--left .ChefFoodLayer--back {
        width: 98%;
        height: 58%;
        left: -6%;
        bottom: 12%;
        background-position: left bottom;
        transform: scale(0.8) translateY(calc(var(--food-shift-down) - var(--event-mode-btn-height) * 2 / 3));
    }

    .ChefArea--left .ChefGif {
        width: 70%;
        height: 70%;
        left: 24%;
        bottom: 0;
        object-position: right bottom;
        transform: translateX(calc(-100% / 3));
    }

    .ChefArea--left .ChefFoodLayer--front {
        width: 138%;
        height: 60%;
        left: -14%;
        bottom: 0;
        background-position: left bottom;
    }

    .ChefArea--right .ChefFoodLayer--back {
        width: 54%;
        height: 42%;
        right: 34%;
        bottom: 20%;
        background-position: center bottom;
        transform: scale(0.8) translateY(var(--food-shift-down)) translateY(50%);
    }

    .ChefArea--right .ChefGif {
        width: 70%;
        height: 70%;
        right: 6%;
        bottom: 0;
        object-position: left bottom;
    }

    .ChefArea--right .ChefGif.ChefGif--black {
        right: 35%;
        transform-origin: right bottom;
        transform: scaleX(-1) translateX(calc(100% / 3)) rotate(10deg);
    }

    .ChefArea--right .ChefFoodLayer--front {
        width: 82%;
        height: 56%;
        right: -8%;
        bottom: 0;
        background-position: right bottom;
        transform: scale(0.88) translateY(var(--food-shift-down));
    }

    #MainFunctionArea {
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        top: calc(22% + var(--event-mode-btn-height));
        width: var(--main-menu-grid-width);
        transform: none;
        z-index: 15;
        align-items: center;
    }

    /* 直版：爬榜全寬 → 練習｜對戰｜活動 三欄 */
    #GameEnter {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: var(--portrait-btn-row-gap);
        row-gap: calc(var(--vw, 1vw) * 2.2);
        width: 100%;
        justify-items: stretch;
    }

    .MainMenuButton--rank {
        grid-column: 1 / span 3;
        grid-row: 1;
        width: 100%;
        aspect-ratio: 279 / 109;
    }

    .MainMenuButton--practice {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        aspect-ratio: 185 / 108;
    }

    .MainMenuButton--battle {
        grid-column: 2;
        grid-row: 2;
        width: 100%;
        aspect-ratio: 185 / 108;
    }

    .MainMenuButton--event {
        grid-column: 3;
        grid-row: 2;
        width: 100%;
        aspect-ratio: 185 / 108;
    }

    #SecondaryEnter {
        margin-top: calc(var(--vw, 1vw) * 2.5);
        gap: calc(var(--vw, 1vw) * 6);
        width: 100%;
        justify-content: center;
    }

    .MainMenuButton--announcement,
    .MainMenuButton--leaderboard {
        width: calc(var(--vw, 1vw) * 19.2);
        aspect-ratio: 101 / 111;
        flex-shrink: 0;
    }

    .MainMenuButtonLabel {
        font-size: calc(var(--vw, 1vw) * 3.6);
    }

    .MainMenuButton--rank .MainMenuButtonLabel {
        font-size: calc(var(--vw, 1vw) * 4.2);
    }

    .MainMenuButtonLabel--small {
        font-size: calc(var(--vw, 1vw) * 2.6);
    }

    #FooterEnter {
        flex-direction: column;
        align-items: center;
        margin-top: calc(var(--vw, 1vw) * 2.5);
        gap: calc(var(--vw, 1vw) * 1.5);
    }

    .FooterButton {
        width: calc(var(--vw, 1vw) * 38);
        aspect-ratio: 145 / 36;
    }

    .FooterButtonLabel {
        font-size: calc(var(--vw, 1vw) * 3);
    }
}

/* 預設（script 尚未加上 layout class 前） */
html:not(.layout-portrait):not(.layout-landscape) #BackgroundMain1 {
    background-image: url('./img/Background/Background_Main_1.png');
}

@media (aspect-ratio < 1/1) {
    html:not(.layout-portrait):not(.layout-landscape) #BackgroundMain1 {
        background-image: url('./img/Background/Background_Main_3.png');
    }

    html:not(.layout-portrait):not(.layout-landscape) #BackgroundMain2 {
        display: none;
    }
}

/* ===== 公告／大聲公（自 CardFrontEnd 移植） ===== */

/* ===== 進關大聲公：進場 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;
}

/*#region 公告／大聲公（BlackWhiteChef 捲軸 parchment 版型；1920×1080 百分比定位） */
@keyframes announcement-arrow-sway-prev {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-5px); }
}

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

@keyframes announcement-modal-bounce-in {
    0% { transform: scale(0); opacity: 0; }
    62% { transform: scale(1.06); opacity: 1; }
    82% { transform: scale(0.97); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes announcement-stagger-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes announcement-bottom-nav-fade-in {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.announcement-speaker-layer {
    position: fixed;
    inset: 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;
}

.announcement-speaker-backdrop {
    position: fixed;
    inset: 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;
}

.announcement-speaker-layer.announcement-from-intro .announcement-speaker-backdrop {
    background: rgba(0, 0, 0, 0.48);
}

.announcement-speaker-modal {
    position: relative;
    z-index: 2;
    width: min(96vw, calc(var(--vh, 1vh) * 170.67));
    aspect-ratio: 16 / 9;
    max-height: min(92vh, 92dvh);
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    background: none;
    box-sizing: border-box;
    pointer-events: none;
    overflow: visible;
}

.announcement-speaker-modal-scale {
    width: 100%;
    height: 100%;
    transform: scale(0);
    opacity: 0;
    transform-origin: center center;
    pointer-events: none;
    overflow: visible;
}

.announcement-speaker-layer.announcement-shown .announcement-speaker-modal-scale {
    animation: announcement-modal-bounce-in 0.52s cubic-bezier(0.34, 1.45, 0.64, 1) forwards;
}

.announcement-speaker-stage {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: none;
    box-sizing: border-box;
    isolation: isolate;
    --ann-s: 1;
    --parchment-w: calc(340px * var(--ann-s));
    --parchment-h: calc(399px * var(--ann-s));
    --parchment-left: calc(50% - var(--parchment-w) / 2);
    --parchment-top: calc(48% - var(--parchment-h) / 2);
    --well-w: calc(280px * var(--ann-s));
    --well-h: calc(309px * var(--ann-s));
    --well-offset-top: calc(64px * var(--ann-s));
    /* Frame 圖內粉版開洞不對稱；實機定稿 inset 34/26（well 寬 280 = 340-34-26） */
    --well-hole-inset-left: calc(34px * var(--ann-s));
    --well-hole-inset-right: calc(26px * var(--ann-s));
    --well-hole-center-left: calc(50% - 170px * var(--ann-s) + var(--well-hole-inset-left) + (var(--parchment-w) - var(--well-hole-inset-left) - var(--well-hole-inset-right)) / 2);
    --ribbon-w: calc(245px * var(--ann-s));
    --ribbon-h: calc(92px * var(--ann-s));
    --ribbon-overlap: calc(9px * var(--ann-s));
    --pen-w: calc(47px * 2.0736 * var(--ann-s));
    --pen-h: calc(108px * 2.0736 * var(--ann-s));
    --pen-right-out: calc(25px * var(--ann-s));
    --pen-bottom-gap: calc(32px * var(--ann-s));
    --close-btn-size: calc(38px * var(--ann-s));
    /* 右上角外側浮出：上緣高出 18px、右緣外探約 12px（38-26），與牛皮紙邊框部分重疊 */
    --close-btn-top: calc(var(--parchment-top) - 18px * var(--ann-s) + var(--close-btn-size));
    --close-btn-left: calc(50% + 170px * var(--ann-s) - 26px * var(--ann-s) - var(--close-btn-size) * 2 / 3 + var(--close-btn-size) / 8);
    overflow: visible;
}

.announcement-speaker-frame-bg {
    position: absolute;
    top: var(--parchment-top);
    left: calc(50% - 170px * var(--ann-s));
    width: var(--parchment-w);
    height: var(--parchment-h);
    z-index: 10;
    background: url('./img/Frame/Frame_Announcement.png') no-repeat center center;
    background-size: contain;
    background-color: transparent;
    pointer-events: none;
}

.announcement-btn-close {
    position: absolute;
    top: var(--close-btn-top);
    left: var(--close-btn-left);
    right: auto;
    z-index: 60;
    width: var(--close-btn-size);
    height: var(--close-btn-size);
    aspect-ratio: 1 / 1;
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
    pointer-events: auto;
    background: url('./img/Button/Button_Close.png') no-repeat center;
    background-size: 100% 100%;
    background-color: transparent;
    opacity: 0;
}

.announcement-speaker-layer.announcement-shown .announcement-btn-close {
    animation: announcement-stagger-fade-in 0.42s ease-out 0.08s forwards;
}

/* 牛皮紙內 flex 走廊：水平 padding 對齊 Frame 圖內粉版開洞（左厚右窄卷邊） */
.announcement-parchment-body {
    position: absolute;
    top: var(--parchment-top);
    left: calc(50% - 170px * var(--ann-s));
    width: var(--parchment-w);
    height: var(--parchment-h);
    z-index: 18;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
    padding-top: var(--well-offset-top);
    padding-left: var(--well-hole-inset-left);
    padding-right: var(--well-hole-inset-right);
    pointer-events: none;
    overflow: visible;
}

.announcement-cloth-ribbon {
    position: absolute;
    top: calc(var(--parchment-top) - var(--ribbon-overlap));
    left: calc(50% - 122.5px * var(--ann-s));
    width: var(--ribbon-w);
    height: var(--ribbon-h);
    z-index: 50;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

.announcement-speaker-title {
    position: absolute;
    top: calc(var(--parchment-top) - var(--ribbon-overlap));
    left: calc(50% - 122.5px * var(--ann-s));
    width: var(--ribbon-w);
    height: var(--ribbon-h);
    z-index: 51;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    overflow: visible;
}

.announcement-speaker-title-label {
    position: relative;
    z-index: 1;
    display: inline-block;
    transform: translateY(-50%);
    padding: 0.22em 1em;
    border-radius: 10px;
    font-size: clamp(19.8px, 3.52vmin, 37.4px);
    font-weight: bold;
    color: #fff;
    text-align: center;
    line-height: 1.15;
    background: rgba(42, 10, 62, 0.9);
    box-shadow: 0 2px 14px rgba(20, 0, 36, 0.65), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    text-shadow:
        0 0 3px #2a0a3e,
        0 0 6px #2a0a3e,
        0 0 12px rgba(140, 60, 200, 0.95),
        0 0 18px rgba(180, 100, 240, 0.85),
        0 2px 4px rgba(0, 0, 0, 0.95),
        0 1px 0 #2a0a3e,
        0 -1px 0 #2a0a3e,
        1px 0 0 #2a0a3e,
        -1px 0 0 #2a0a3e;
    font-family: "微軟正黑體", sans-serif;
}

/* SEO／無障礙用的頁面主標題：內容與 <title> 一致，僅螢幕閱讀器與爬蟲取用 */
.seo-page-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.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;
}

.announcement-parchment-body .announcement-content-well,
#AnnouncementContentWell.announcement-content-well,
.announcement-content-well {
    position: relative;
    top: auto;
    left: auto;
    margin-left: 0;
    align-self: stretch;
    flex-shrink: 0;
    width: 100%;
    max-width: none;
    height: var(--well-h);
    z-index: 1;
    pointer-events: auto;
    box-sizing: border-box;
    overflow: hidden;
    touch-action: pan-y;
    border-radius: 20px;
    border: 2px solid rgba(255, 130, 90, 0.5);
    box-shadow: inset 0 0 12px rgba(255, 120, 80, 0.22);
    padding: clamp(10px, 2vmin, 14px);
    opacity: 0;
}

.announcement-speaker-layer.announcement-shown .announcement-content-well {
    animation: announcement-stagger-fade-in 0.42s ease-out 0.12s forwards;
}

.announcement-speaker-pages {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 14px;
    background: rgba(255, 205, 175, 0.42);
    box-sizing: border-box;
    overflow: hidden;
}

.announcement-speaker-pages img,
.announcement-v1-img {
    position: relative;
    z-index: 0;
    display: block;
    max-width: 83.6%;
    max-height: min(58%, 240px);
    width: auto;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
    box-sizing: border-box;
}

img.announcement-v2-full {
    position: relative;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    border-radius: 12px;
    object-position: center center;
    object-fit: contain;
    box-sizing: border-box;
}

.announcement-deco-pen {
    position: absolute;
    right: calc(var(--pen-right-out) * -1);
    bottom: calc(var(--pen-bottom-gap) - 22px * var(--ann-s));
    left: auto;
    top: auto;
    width: var(--pen-w);
    height: var(--pen-h);
    z-index: 45;
    object-fit: contain;
    object-position: right bottom;
    pointer-events: none;
    user-select: none;
    opacity: 0;
    transform: rotate(15deg) translateX(calc(20px * var(--ann-s) - var(--pen-w) / 5));
    transform-origin: right bottom;
}

.announcement-speaker-layer.announcement-shown .announcement-deco-pen {
    animation: announcement-stagger-fade-in 0.42s ease-out 0.2s forwards;
}

.announcement-speaker-bottom-nav {
    position: absolute;
    top: 80%;
    left: var(--well-hole-center-left);
    width: auto;
    max-width: 90%;
    height: auto;
    z-index: 42;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 1.2vmin, 12px);
    box-sizing: border-box;
    opacity: 0;
    pointer-events: auto;
    transform: translateX(-50%);
}

.announcement-speaker-bottom-nav .announcement-arrow-swing {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: clamp(56px, 13vmin, 96px);
    height: clamp(56px, 13vmin, 96px);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transform: none;
    opacity: 1;
    pointer-events: auto;
}

.announcement-speaker-bottom-nav .announcement-arrow-swing-prev {
    animation: announcement-arrow-sway-prev 2s ease-in-out infinite;
}

.announcement-speaker-bottom-nav .announcement-arrow-swing-next {
    animation: announcement-arrow-sway-next 2s ease-in-out infinite;
}

.announcement-speaker-bottom-nav .announcement-speaker-dots {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    z-index: 1;
    transform: none;
    opacity: 1;
    flex: 0 0 auto;
}

.announcement-speaker-layer.announcement-shown .announcement-speaker-bottom-nav {
    animation: announcement-bottom-nav-fade-in 0.38s ease-out 0.26s forwards;
}

.announcement-speaker-arrow {
    width: 100%;
    height: 100%;
    min-width: clamp(56px, 13vmin, 96px);
    min-height: clamp(56px, 13vmin, 96px);
    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 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 4vmin, 36px);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.announcement-dot {
    width: clamp(44px, 9.6vmin, 84px);
    height: clamp(44px, 9.6vmin, 84px);
    border: none;
    padding: 0;
    cursor: pointer;
    background: url('./img/UI/Button_Page_3.png') no-repeat center;
    background-size: contain;
    background-color: transparent;
    flex-shrink: 0;
    opacity: 0.65;
    filter: none;
}

.announcement-dot.is-active {
    background-image: url('./img/UI/Button_Page_4.png');
    opacity: 1;
    filter: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
    border-radius: 50%;
}

.announcement-slide {
    display: none;
    position: absolute;
    inset: 0;
    align-items: stretch;
    justify-content: stretch;
    padding: clamp(6px, 1.2vmin, 14px);
    box-sizing: border-box;
}

.announcement-slide.is-active {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

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

.announcement-slide-v1 .announcement-slide-body {
    justify-content: flex-start;
    align-items: stretch;
    flex: 0 0 78.75%;
    height: 78.75%;
    max-height: 78.75%;
}

.announcement-slide-v1 .announcement-v1-inner {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: clamp(4px, 0.75vmin, 10px);
    width: 100%;
    max-width: 100%;
    flex: 1 1 0;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.announcement-v1-img-wrap {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-radius: 12px;
}

.announcement-slide-v1 .announcement-v1-img-wrap {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    max-height: min(42%, 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(4px, 1vmin, 8px);
    box-sizing: border-box;
}

.announcement-v1-img {
    display: block;
    width: auto;
    height: auto;
    max-width: 83.6%;
    max-height: min(52%, 220px);
    object-fit: contain;
    object-position: center center;
    border-radius: 12px;
    margin: 0 auto;
}

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

.announcement-v1-text {
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    font-size: clamp(11px, 1.85vmin, 16px);
    line-height: 1.5;
    color: #8B4513;
    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;
}

img.announcement-v2-full.announcement-v2-fit-responsive {
    object-fit: contain;
}

.announcement-slide-v2 .announcement-slide-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: clamp(8px, 1.5vmin, 14px) clamp(8px, 1.5vmin, 14px) 0;
    box-sizing: border-box;
}

.announcement-slide-v2 img.announcement-v2-full {
    flex: 1 1 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    object-fit: contain;
}

@media (min-aspect-ratio: 1/1) {
    .announcement-speaker-layer {
        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;
    }

    .announcement-speaker-modal {
        width: 713px;
        max-width: 713px;
        height: min(1542px, 92vh);
        aspect-ratio: auto;
        max-height: 92vh;
    }

    .announcement-speaker-stage {
        --ann-s: 1.8282051282;
        --parchment-w: calc(340px * var(--ann-s));
        --parchment-h: calc(399px * var(--ann-s));
        --parchment-left: calc(50% - var(--parchment-w) / 2);
        --parchment-top: calc(50% - var(--parchment-h) / 2);
        --ribbon-w: calc(245px * var(--ann-s));
        --ribbon-h: calc(92px * var(--ann-s));
        --well-w: calc(280px * var(--ann-s));
        --well-h: calc(309px * var(--ann-s));
        --well-offset-top: calc(64px * var(--ann-s));
        --nav-w: calc(240px * var(--ann-s));
        --nav-bottom-gap: calc(34px * var(--ann-s));
        --pen-w: calc(47px * 2.0736 * var(--ann-s));
        --pen-h: calc(108px * 2.0736 * var(--ann-s));
        --pen-right-out: calc(25px * var(--ann-s));
        --pen-bottom-gap: calc(32px * var(--ann-s));
        --ribbon-overlap: calc(9px * var(--ann-s));
        --nav-arrow-h: calc(48px * var(--ann-s));
        overflow: visible;
    }

    .announcement-speaker-frame-bg {
        top: var(--parchment-top);
        left: calc(50% - 170px * var(--ann-s));
        width: var(--parchment-w);
        height: var(--parchment-h);
        max-width: none;
        transform: none;
        background-size: contain;
    }

    .announcement-cloth-ribbon {
        top: calc(var(--parchment-top) - var(--ribbon-overlap));
        left: calc(50% - 122.5px * var(--ann-s));
        width: var(--ribbon-w);
        height: var(--ribbon-h);
        max-width: none;
        margin-left: 0;
        transform: none;
        object-fit: contain;
        object-position: center center;
        z-index: 50;
    }

    .announcement-speaker-title {
        top: calc(var(--parchment-top) - var(--ribbon-overlap));
        left: calc(50% - 170px * var(--ann-s));
        width: var(--parchment-w);
        max-width: none;
        height: var(--ribbon-h);
        z-index: 51;
    }

    .announcement-speaker-title-label {
        font-size: calc(19.8px * var(--ann-s));
        color: #fff;
        background: transparent;
        box-shadow: none;
        text-shadow:
            0 0 3px #2a0a3e,
            0 0 6px #2a0a3e,
            0 0 12px rgba(140, 60, 200, 0.95),
            0 0 18px rgba(180, 100, 240, 0.85),
            0 2px 4px rgba(0, 0, 0, 0.95),
            0 1px 0 #2a0a3e,
            0 -1px 0 #2a0a3e,
            1px 0 0 #2a0a3e,
            -1px 0 0 #2a0a3e;
    }

    .announcement-parchment-body .announcement-content-well,
    #AnnouncementContentWell.announcement-content-well,
    .announcement-content-well {
        position: relative;
        top: auto;
        left: auto;
        align-self: stretch;
        width: 100%;
        height: var(--well-h);
        max-width: none;
        bottom: auto;
        max-height: none;
        padding: 0;
        border-radius: calc(25px * var(--ann-s));
        border: none;
        box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .announcement-speaker-pages {
        position: absolute;
        inset: 0;
        width: auto;
        height: auto;
        border-radius: calc(14px * var(--ann-s));
        padding: 0;
        background: transparent;
        overflow: hidden;
        box-sizing: border-box;
    }

    .announcement-speaker-bottom-nav {
        top: calc(var(--parchment-top) + var(--parchment-h) - var(--nav-bottom-gap) - var(--nav-arrow-h) + 11px * var(--ann-s));
        bottom: auto;
        left: var(--well-hole-center-left);
        transform: translateX(-50%);
        width: auto;
        max-width: none;
        min-width: 0;
        justify-content: center;
        gap: calc(6px * var(--ann-s));
        padding: 0;
        box-sizing: border-box;
        z-index: 43;
    }

    .announcement-speaker-bottom-nav .announcement-arrow-swing {
        width: calc(20px * var(--ann-s));
        height: calc(22px * var(--ann-s));
    }

    .announcement-speaker-arrow {
        width: calc(20px * var(--ann-s));
        height: calc(22px * var(--ann-s));
        min-width: calc(20px * var(--ann-s));
        min-height: calc(22px * var(--ann-s));
    }

    .announcement-speaker-dots {
        gap: calc(20px * var(--ann-s));
    }

    .announcement-dot {
        width: calc(20px * var(--ann-s));
        height: calc(20px * var(--ann-s));
    }

    .announcement-dot.is-active {
        width: calc(22px * var(--ann-s));
        height: calc(22px * var(--ann-s));
    }

    .announcement-deco-pen {
        top: calc(var(--parchment-top) + var(--parchment-h) - var(--pen-bottom-gap) - var(--pen-h) + 22px * var(--ann-s));
        bottom: auto;
        left: calc(50% + 195px * var(--ann-s) - var(--pen-w) * 6 / 5 + 20px * var(--ann-s));
        right: auto;
        width: var(--pen-w);
        height: var(--pen-h);
        max-height: none;
        object-fit: contain;
        transform: rotate(15deg);
        transform-origin: right bottom;
        z-index: 41;
    }

    .announcement-slide {
        position: absolute;
        inset: 0;
        padding: 0;
        min-height: 0;
    }

    .announcement-slide.is-active {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .announcement-slide-v1 .announcement-v1-inner {
        flex: 1 1 0;
        height: 100%;
        min-height: 0;
        overflow: hidden;
        gap: 0;
    }

    .announcement-slide-v1 .announcement-v1-img-wrap {
        flex: 0 0 auto;
        width: calc(247px * var(--ann-s));
        height: calc(118px * var(--ann-s));
        max-height: calc(118px * var(--ann-s));
        min-height: 0;
        margin: calc(12px * var(--ann-s)) auto 0;
        padding: 0;
        border-radius: calc(15px * var(--ann-s));
        overflow: hidden;
    }

    .announcement-slide-v1 .announcement-v1-img {
        width: calc(247px * var(--ann-s));
        height: calc(118px * var(--ann-s));
        max-width: calc(247px * var(--ann-s));
        max-height: calc(118px * var(--ann-s));
        border-radius: calc(15px * var(--ann-s));
        margin: calc(12px * var(--ann-s)) auto 0;
        object-fit: cover;
    }

    .announcement-slide-v1 .announcement-v1-img {
        margin: 0 auto;
    }

    .announcement-slide-v2 .announcement-slide-body {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        flex: 0 0 78.75%;
        height: 78.75%;
        max-height: 78.75%;
        overflow: hidden;
        padding: calc(12px * var(--ann-s)) calc(12px * var(--ann-s)) 0;
        box-sizing: border-box;
    }

    .announcement-slide-v2 img.announcement-v2-full,
    .announcement-slide-v2 img.announcement-v2-full.announcement-v2-fit-responsive {
        flex: 1 1 0;
        width: 100%;
        height: 100%;
        min-height: 0;
        max-width: 100%;
        max-height: 100%;
        margin: 0;
        border-radius: calc(15px * var(--ann-s));
        object-fit: contain;
        object-position: center center;
    }

    .announcement-v1-text {
        flex: 1 1 0;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        font-size: calc(14px * var(--ann-s));
        line-height: 1.6;
        color: #5d3a1a;
        padding: calc(10px * var(--ann-s)) calc(16px * var(--ann-s)) calc(12px * var(--ann-s));
    }
}

@media (aspect-ratio < 1/1) {
    .announcement-speaker-layer {
        padding: 0;
        align-items: center;
        justify-content: center;
    }

    .announcement-speaker-modal {
        width: 390px;
        max-width: 100vw;
        height: 844px;
        max-height: 100vh;
        max-height: 100dvh;
        aspect-ratio: auto;
        min-height: 0;
    }

    .announcement-speaker-stage {
        --ann-s: 1;
        --parchment-w: calc(340px * var(--ann-s));
        --parchment-h: calc(399px * var(--ann-s));
        --parchment-left: calc(50% - var(--parchment-w) / 2);
        --parchment-top: calc(48% - var(--parchment-h) / 2);
        --ribbon-w: calc(245px * var(--ann-s));
        --ribbon-h: calc(92px * var(--ann-s));
        --well-w: calc(280px * var(--ann-s));
        --well-h: calc(309px * var(--ann-s));
        --well-offset-top: calc(64px * var(--ann-s));
        --nav-w: calc(240px * var(--ann-s));
        --nav-bottom-gap: calc(34px * var(--ann-s));
        --pen-w: calc(47px * 2.0736 * var(--ann-s));
        --pen-h: calc(108px * 2.0736 * var(--ann-s));
        --pen-right-out: calc(25px * var(--ann-s));
        --pen-bottom-gap: calc(32px * var(--ann-s));
        --ribbon-overlap: calc(9px * var(--ann-s));
        --nav-arrow-h: calc(48px * var(--ann-s));
        overflow: visible;
    }

    .announcement-speaker-frame-bg {
        top: var(--parchment-top);
        left: calc(50% - 170px * var(--ann-s));
        width: var(--parchment-w);
        height: var(--parchment-h);
        max-width: none;
        transform: none;
        background-size: contain;
    }

    .announcement-cloth-ribbon {
        top: calc(var(--parchment-top) - var(--ribbon-overlap));
        left: calc(50% - 122.5px * var(--ann-s));
        width: var(--ribbon-w);
        height: var(--ribbon-h);
        max-width: none;
        margin-left: 0;
        transform: none;
        object-fit: contain;
        object-position: center center;
        z-index: 50;
    }

    .announcement-speaker-title {
        top: calc(var(--parchment-top) - var(--ribbon-overlap));
        left: calc(50% - 170px * var(--ann-s));
        width: var(--parchment-w);
        max-width: none;
        height: var(--ribbon-h);
        z-index: 51;
    }

    .announcement-speaker-title-label {
        font-size: calc(19.8px * var(--ann-s));
        color: #fff;
        padding: 0.18em 0.8em;
        background: transparent;
        box-shadow: none;
        text-shadow:
            0 0 3px #2a0a3e,
            0 0 6px #2a0a3e,
            0 0 12px rgba(140, 60, 200, 0.95),
            0 0 18px rgba(180, 100, 240, 0.85),
            0 2px 4px rgba(0, 0, 0, 0.95),
            0 1px 0 #2a0a3e,
            0 -1px 0 #2a0a3e,
            1px 0 0 #2a0a3e,
            -1px 0 0 #2a0a3e;
    }

    .announcement-parchment-body .announcement-content-well,
    #AnnouncementContentWell.announcement-content-well,
    .announcement-content-well {
        position: relative;
        top: auto;
        left: auto;
        align-self: stretch;
        width: 100%;
        height: var(--well-h);
        max-width: none;
        bottom: auto;
        max-height: none;
        padding: 0;
        border-radius: calc(25px * var(--ann-s));
        border: none;
        box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
    }

    .announcement-speaker-pages {
        position: absolute;
        inset: 0;
        width: auto;
        height: auto;
        border-radius: calc(14px * var(--ann-s));
        padding: 0;
        box-sizing: border-box;
        background: transparent;
        overflow: hidden;
    }

    .announcement-slide {
        position: absolute;
        inset: 0;
        padding: 0;
        min-height: 0;
    }

    .announcement-slide.is-active {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .announcement-slide-v1 .announcement-v1-inner {
        flex: 1 1 0;
        height: 100%;
        min-height: 0;
        overflow: hidden;
        gap: 0;
    }

    .announcement-slide-v1 .announcement-v1-img-wrap {
        flex: 0 0 auto;
        width: calc(247px * var(--ann-s));
        height: calc(118px * var(--ann-s));
        max-height: calc(118px * var(--ann-s));
        min-height: 0;
        margin: calc(12px * var(--ann-s)) auto 0;
        padding: 0;
        border-radius: calc(15px * var(--ann-s));
        overflow: hidden;
    }

    .announcement-slide-v1 .announcement-v1-img {
        width: calc(247px * var(--ann-s));
        height: calc(118px * var(--ann-s));
        max-width: calc(247px * var(--ann-s));
        max-height: calc(118px * var(--ann-s));
        border-radius: calc(15px * var(--ann-s));
        margin: 0 auto;
        object-fit: cover;
    }

    .announcement-slide-v2 .announcement-slide-body {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        flex: 0 0 78.75%;
        height: 78.75%;
        max-height: 78.75%;
        overflow: hidden;
        padding: calc(12px * var(--ann-s)) calc(12px * var(--ann-s)) 0;
        box-sizing: border-box;
    }

    .announcement-slide-v2 img.announcement-v2-full,
    .announcement-slide-v2 img.announcement-v2-full.announcement-v2-fit-responsive,
    .announcement-slide-v2 img.announcement-v2-full.announcement-v2-fit-cover {
        flex: 1 1 0;
        width: 100%;
        height: 100%;
        min-height: 0;
        max-width: 100%;
        max-height: 100%;
        margin: 0;
        border-radius: calc(15px * var(--ann-s));
        object-fit: contain;
        object-position: center center;
    }

    .announcement-v1-text {
        flex: 1 1 0;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        font-size: calc(14px * var(--ann-s));
        line-height: 1.6;
        color: #5d3a1a;
        padding: calc(10px * var(--ann-s)) calc(16px * var(--ann-s)) calc(12px * var(--ann-s));
    }

    .announcement-speaker-bottom-nav {
        top: calc(var(--parchment-top) + var(--parchment-h) - var(--nav-bottom-gap) - var(--nav-arrow-h) + 11px * var(--ann-s));
        bottom: auto;
        left: var(--well-hole-center-left);
        transform: translateX(-50%);
        width: auto;
        max-width: none;
        min-width: 0;
        height: auto;
        gap: calc(6px * var(--ann-s));
        justify-content: center;
        padding: 0;
        box-sizing: border-box;
        z-index: 43;
    }

    .announcement-speaker-bottom-nav .announcement-arrow-swing {
        width: calc(20px * var(--ann-s));
        height: calc(22px * var(--ann-s));
    }

    .announcement-speaker-arrow {
        width: calc(20px * var(--ann-s));
        height: calc(22px * var(--ann-s));
        min-width: calc(20px * var(--ann-s));
        min-height: calc(22px * var(--ann-s));
    }

    .announcement-speaker-dots {
        gap: calc(20px * var(--ann-s));
        flex: 0 0 auto;
    }

    .announcement-dot {
        width: calc(20px * var(--ann-s));
        height: calc(20px * var(--ann-s));
        opacity: 1;
        filter: none;
    }

    .announcement-dot.is-active {
        width: calc(22px * var(--ann-s));
        height: calc(22px * var(--ann-s));
        box-shadow: none;
        filter: none;
    }

    .announcement-deco-pen {
        top: calc(var(--parchment-top) + var(--parchment-h) - var(--pen-bottom-gap) - var(--pen-h) + 22px * var(--ann-s));
        bottom: auto;
        left: calc(50% + 195px * var(--ann-s) - var(--pen-w) * 6 / 5 + 20px * var(--ann-s));
        right: auto;
        width: var(--pen-w);
        height: var(--pen-h);
        max-height: none;
        object-fit: contain;
        transform: rotate(15deg);
        transform-origin: right bottom;
        z-index: 41;
    }

}

@media (min-aspect-ratio: 1/1) and (min-height: 801px) {
    .announcement-cloth-ribbon {
        transform: scale(1.1);
        transform-origin: center top;
    }

    .announcement-deco-pen {
        transform: rotate(15deg);
        transform-origin: right bottom;
    }
}

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

#AnnouncementSpeakerLayer.announcement-tablet-well-tight .announcement-content-well {
    width: 100%;
    max-width: none;
}

/*#endregion*/

/*#region 排行榜彈窗*/

@keyframes leaderboard-pop-in {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    62% {
        opacity: 1;
        transform: scale(1.06);
    }
    82% {
        transform: scale(0.97);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes leaderboard-pop-in-center {
    0% {
        opacity: 0;
        transform: translateX(-50%) scale(0);
    }
    62% {
        opacity: 1;
        transform: translateX(-50%) scale(1.06);
    }
    82% {
        transform: translateX(-50%) scale(0.97);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
}

@keyframes leaderboard-slide-in-right {
    from {
        opacity: 0;
        transform: translateX(42%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes leaderboard-bounce-in {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    62% {
        transform: scale(1.06);
        opacity: 1;
    }
    82% {
        transform: scale(0.97);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.leaderboard-layer {
    position: fixed;
    inset: 0;
    z-index: 9999;
    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;
}

.leaderboard-backdrop {
    position: fixed;
    inset: 0;
    width: 100%;
    min-height: 100%;
    min-height: 100dvh;
    background: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    z-index: 1;
    -webkit-tap-highlight-color: transparent;
}

.leaderboard-modal {
    position: relative;
    z-index: 1000;
    width: min(96vw, calc(393px * var(--lb-s, 1) + 40px));
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    background: none;
    box-sizing: border-box;
    pointer-events: none;
    overflow: visible;
}

.leaderboard-modal-scale {
    width: 100%;
    transform: scale(0);
    opacity: 0;
    transform-origin: center center;
    pointer-events: none;
    overflow: visible;
}

.leaderboard-layer.leaderboard-shown .leaderboard-modal-scale {
    animation: leaderboard-bounce-in 0.5s cubic-bezier(0.34, 1.45, 0.64, 1) forwards;
    pointer-events: auto;
}

.leaderboard-layer.leaderboard-shown .leaderboard-frame-bg,
.leaderboard-layer.leaderboard-shown .leaderboard-btn-close,
.leaderboard-layer.leaderboard-shown .leaderboard-deco-top,
.leaderboard-layer.leaderboard-shown .leaderboard-title-ribbon,
.leaderboard-layer.leaderboard-shown .leaderboard-title-text,
.leaderboard-layer.leaderboard-shown .leaderboard-rank-btn,
.leaderboard-layer.leaderboard-shown .leaderboard-left-line,
.leaderboard-layer.leaderboard-shown .leaderboard-deco-bottom {
    max-width: 100%;
    animation-fill-mode: both;
}

.leaderboard-stage {
    position: relative;
    width: calc(393px * var(--lb-s, 1));
    height: calc(569px * var(--lb-s, 1));
    margin: calc(var(--lb-block-shift) + var(--lb-btn-quarter-shift) + var(--lb-btn-eighth-shift)) auto 0 auto;
    pointer-events: none;
    box-sizing: border-box;
    isolation: isolate;
    --lb-s: 0.9;
    --lb-frame-w: calc(393px * var(--lb-s));
    --lb-frame-h: calc(569px * var(--lb-s));
    /* 標題／按鈕區位置微調：全 viewport 共用，隨 --lb-s 等比縮放 */
    --lb-title-shift: clamp(9px, calc(13px * var(--lb-s)), 16px);
    --lb-btn-half-shift: 8.35%;
    --lb-block-shift: calc(var(--lb-frame-h) * 0.167 / 3);
    --lb-btn-fifth-shift: calc(var(--lb-frame-h) * 0.167 / 5);
    --lb-btn-quarter-shift: calc(var(--lb-frame-h) * 0.167 / 4);
    --lb-btn-eighth-shift: calc(var(--lb-frame-h) * 0.167 / 8);
    overflow: visible;
}

.leaderboard-frame-bg {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: var(--lb-frame-w);
    height: var(--lb-frame-h);
    z-index: 1;
    background: url('./img/Frame/Frame_Rank_1.png') no-repeat center center;
    background-size: contain;
    pointer-events: none;
    opacity: 0;
}

.leaderboard-layer.leaderboard-shown .leaderboard-frame-bg {
    animation: leaderboard-pop-in-center 0.3s cubic-bezier(0.34, 1.45, 0.64, 1) forwards;
}

.leaderboard-btn-close {
    position: absolute;
    top: 4%;
    right: -1%;
    width: 14.8%;
    height: 10%;
    aspect-ratio: 58 / 57;
    z-index: 20;
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
    pointer-events: auto;
    background: url('./img/Button/Button_Close.png') no-repeat center;
    background-size: 100% 100%;
    background-color: transparent;
    opacity: 0;
}

.leaderboard-layer.leaderboard-shown .leaderboard-btn-close {
    animation: leaderboard-pop-in 0.3s cubic-bezier(0.34, 1.45, 0.64, 1) forwards;
}

.leaderboard-deco-top {
    position: absolute;
    top: -24%;
    left: 50%;
    transform: translateX(-50%);
    width: 103.8%;
    height: auto;
    max-height: 30.2%;
    object-fit: contain;
    z-index: 5;
    pointer-events: none;
    user-select: none;
    opacity: 0;
}

.leaderboard-layer.leaderboard-shown .leaderboard-deco-top {
    animation: leaderboard-pop-in-center 0.3s cubic-bezier(0.34, 1.45, 0.64, 1) 0.15s forwards;
}

.leaderboard-title-ribbon {
    position: absolute;
    top: -9%;
    left: 50%;
    transform: translateX(-50%);
    width: 88.5%;
    height: auto;
    object-fit: contain;
    z-index: 10;
    pointer-events: none;
    user-select: none;
    opacity: 0;
}

.leaderboard-layer.leaderboard-shown .leaderboard-title-ribbon {
    animation: leaderboard-pop-in-center 0.3s cubic-bezier(0.34, 1.45, 0.64, 1) 0.15s forwards;
}

.leaderboard-title-text {
    position: absolute;
    top: calc(-9% + var(--lb-title-shift));
    left: 50%;
    transform: translateX(-50%);
    z-index: 11;
    color: #fff;
    font-size: clamp(18px, calc(26px * var(--lb-s)), 32px);
    font-weight: bold;
    font-family: "微軟正黑體", "Microsoft JhengHei", sans-serif;
    text-shadow:
        0 2px 3px rgba(0, 0, 0, 0.8),
        0 0 8px rgba(80, 30, 10, 0.5);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
}

.leaderboard-layer.leaderboard-shown .leaderboard-title-text {
    animation: leaderboard-pop-in-center 0.3s cubic-bezier(0.34, 1.45, 0.64, 1) 0.15s forwards;
}

.leaderboard-buttons {
    position: absolute;
    top: calc(19% - var(--lb-block-shift) - var(--lb-btn-fifth-shift));
    left: 50%;
    transform: translateX(-50%);
    width: 75.1%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.5%;
    z-index: 10;
    pointer-events: none;
}

.leaderboard-rank-btn {
    width: 100%;
    aspect-ratio: 295 / 95;
    min-height: calc(var(--lb-frame-h) * 0.167);
    margin: 0;
    padding: 0 0.5em;
    border: none;
    cursor: pointer;
    pointer-events: auto;
    box-sizing: border-box;
    background: url('./img/Button/Button_Rank_Main.png') no-repeat center;
    background-size: 100% 100%;
    color: #fff;
    font-size: clamp(13px, calc(18px * var(--lb-s)), 24px);
    font-weight: bold;
    font-family: "微軟正黑體", "Microsoft JhengHei", sans-serif;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.85),
        0 0 6px rgba(80, 30, 10, 0.65),
        1px 0 0 rgba(90, 40, 10, 0.5),
        -1px 0 0 rgba(90, 40, 10, 0.5);
    opacity: 0;
    transform: translateX(42%);
    -webkit-tap-highlight-color: transparent;
}

.leaderboard-rank-btn:active {
    filter: brightness(0.94);
}

.leaderboard-layer.leaderboard-shown .leaderboard-rank-btn:nth-child(1) {
    animation: leaderboard-slide-in-right 0.1875s ease-out 0.375s forwards;
}

.leaderboard-layer.leaderboard-shown .leaderboard-rank-btn:nth-child(2) {
    animation: leaderboard-slide-in-right 0.1875s ease-out 0.475s forwards;
}

.leaderboard-layer.leaderboard-shown .leaderboard-rank-btn:nth-child(3) {
    animation: leaderboard-slide-in-right 0.1875s ease-out 0.575s forwards;
}

.leaderboard-layer.leaderboard-shown .leaderboard-rank-btn:nth-child(4) {
    animation: leaderboard-slide-in-right 0.1875s ease-out 0.675s forwards;
}

.leaderboard-layer.leaderboard-shown .leaderboard-rank-btn:nth-child(5) {
    animation: leaderboard-slide-in-right 0.1875s ease-out 0.775s forwards;
}

.leaderboard-left-line {
    position: absolute;
    top: calc(19% - var(--lb-block-shift) - var(--lb-btn-fifth-shift));
    left: calc(50% - 37.55% - 2%);
    width: calc(3px * var(--lb-s));
    height: calc(var(--lb-frame-h) * 0.72);
    z-index: 9;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(
        to bottom,
        #8b5a2b 0%,
        #a06830 8%,
        #8b5a2b 16%,
        #a06830 24%,
        #8b5a2b 32%,
        #a06830 40%,
        #8b5a2b 48%,
        #a06830 56%,
        #8b5a2b 64%,
        #a06830 72%,
        #8b5a2b 80%,
        #a06830 88%,
        #8b5a2b 100%
    );
    border-radius: 2px;
    box-shadow: 0 0 2px rgba(60, 30, 10, 0.35);
}

.leaderboard-left-line::before,
.leaderboard-left-line::after {
    content: '';
    position: absolute;
    left: 50%;
    width: calc(10px * var(--lb-s));
    height: calc(10px * var(--lb-s));
    margin-left: calc(-5px * var(--lb-s));
    background: #c48a3a;
    transform: rotate(45deg);
    box-shadow: 0 0 3px rgba(60, 30, 10, 0.4);
}

.leaderboard-left-line::before {
    top: 0;
}

.leaderboard-left-line::after {
    bottom: 0;
}

.leaderboard-layer.leaderboard-shown .leaderboard-left-line {
    animation: leaderboard-slide-in-right 0.15s ease-out 0.3s forwards;
}

.leaderboard-deco-bottom {
    max-width: 100%;
    position: absolute;
    bottom: -11%;
    left: 50%;
    transform: translateX(-50%);
    width: 105.3%;
    height: auto;
    max-height: 25.8%;
    object-fit: contain;
    z-index: 30;
    pointer-events: none;
    user-select: none;
    opacity: 0;
}

.leaderboard-layer.leaderboard-shown .leaderboard-deco-bottom {
    max-width: 100%;
    animation: leaderboard-pop-in-center 0.3s cubic-bezier(0.34, 1.45, 0.64, 1) 0.1s forwards;
}

@media (max-width: 767px) {
    .leaderboard-deco-bottom {
    max-width: 100%;
        bottom: -5%;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .leaderboard-stage {
        --lb-s: 0.9;
    }
}

@media (min-width: 1024px) {
    .leaderboard-stage {
        --lb-s: 0.95;
        margin-top: calc(4vh + var(--lb-block-shift) + var(--lb-btn-quarter-shift) + var(--lb-btn-eighth-shift));
    }
}

/*#endregion*/

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

.rankdetail-layer {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100vw;
    height: 100%;
    max-height: 100dvh;
    padding:
        env(safe-area-inset-top, 0)
        env(safe-area-inset-right, 0)
        max(20px, env(safe-area-inset-bottom, 0))
        env(safe-area-inset-left, 0);
    box-sizing: border-box;
    overflow-x: clip;
    overflow-y: visible;
}

.rankdetail-backdrop {
    position: fixed;
    inset: 0;
    width: 100%;
    min-height: 100%;
    min-height: 100dvh;
    background: rgba(0, 0, 0, 0.68);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
    z-index: 1;
    -webkit-tap-highlight-color: transparent;
}

.rankdetail-modal {
    position: relative;
    z-index: 2;
    width: min(90vw, calc(425px * var(--rd-s, 0.776)));
    max-width: calc(100vw - 2px);
    margin: 0 auto;
    padding: 0;
    background: none;
    box-sizing: border-box;
    pointer-events: none;
    overflow: visible;
}

.rankdetail-modal-scale {
    width: 100%;
    --rd-s: 0.776;
    transform: scale(0);
    opacity: 0;
    transform-origin: center top;
    pointer-events: none;
    overflow: visible;
    max-width: none;
}

.rankdetail-layer.rankdetail-shown .rankdetail-modal-scale {
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
    animation: none;
}

@keyframes rankdetail-pop-in {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    62% {
        opacity: 1;
        transform: scale(1.06);
    }
    82% {
        transform: scale(0.97);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes rankdetail-slide-in-right {
    from {
        opacity: 0;
        transform: translateX(38%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes rankdetail-ribbon-in {
    from {
        opacity: 0;
        transform: rotate(-9deg) translateX(32%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: rotate(-9deg) translateX(0) scale(1);
    }
}

@keyframes rankdetail-title-text-in {
    from {
        opacity: 0;
        transform: rotate(-9deg) translateY(calc(-38px * var(--rd-s))) translateX(24%);
    }
    to {
        opacity: 1;
        transform: rotate(-9deg) translateY(calc(-38px * var(--rd-s))) translateX(0);
    }
}

@keyframes rankdetail-close-in {
    0% {
        opacity: 0;
        transform: rotate(5deg) translateY(calc(72px * var(--rd-s))) translateX(calc(-24px * var(--rd-s))) scale(0);
    }
    62% {
        opacity: 1;
        transform: rotate(5deg) translateY(calc(72px * var(--rd-s))) translateX(calc(-24px * var(--rd-s))) scale(1.06);
    }
    100% {
        opacity: 1;
        transform: rotate(5deg) translateY(calc(72px * var(--rd-s))) translateX(calc(-24px * var(--rd-s))) scale(1);
    }
}

@keyframes rankdetail-deco-in {
    from {
        opacity: 0;
        transform: rotate(-8deg) translateY(14%);
    }
    to {
        opacity: 1;
        transform: rotate(-8deg) translateY(0);
    }
}

@keyframes rankdetail-medal-1st-in {
    0% {
        opacity: 0;
        transform: translateY(calc(var(--rd-close-btn-h) / -6)) scale(0);
    }
    62% {
        opacity: 1;
        transform: translateY(calc(var(--rd-close-btn-h) / -6)) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translateY(calc(var(--rd-close-btn-h) / -6)) scale(1);
    }
}

@keyframes rankdetail-medal-2nd-in {
    from {
        opacity: 0;
        transform: translateX(calc(24px * var(--rd-s) + 34%)) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateX(calc(24px * var(--rd-s))) scale(1);
    }
}

@keyframes rankdetail-medal-3rd-in {
    from {
        opacity: 0;
        transform: translateX(calc(-24px * var(--rd-s) - 34%)) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateX(calc(-24px * var(--rd-s))) scale(1);
    }
}

@keyframes rankdetail-scrollbar-in {
    from {
        opacity: 0;
        transform: translateX(24%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.rankdetail-layer.rankdetail-shown .rankdetail-frame-bg,
.rankdetail-layer.rankdetail-shown .rankdetail-btn-close,
.rankdetail-layer.rankdetail-shown .rankdetail-deco,
.rankdetail-layer.rankdetail-shown .rankdetail-title-ribbon,
.rankdetail-layer.rankdetail-shown .rankdetail-title-text,
.rankdetail-layer.rankdetail-shown .rankdetail-medal,
.rankdetail-layer.rankdetail-shown .rankdetail-list > .rankdetail-row,
.rankdetail-layer.rankdetail-shown .rankdetail-list-divider,
.rankdetail-layer.rankdetail-shown .rankdetail-player-row .rankdetail-row,
.rankdetail-layer.rankdetail-shown .rankdetail-player-marker,
.rankdetail-layer.rankdetail-shown .rankdetail-scrollbar {
    animation-fill-mode: both;
}

.rankdetail-layer.rankdetail-shown .rankdetail-frame-bg {
    animation: rankdetail-pop-in 0.3s cubic-bezier(0.34, 1.45, 0.64, 1) 0s forwards;
}

.rankdetail-title-ribbon,
.rankdetail-title-text,
.rankdetail-btn-close,
.rankdetail-deco,
.rankdetail-medal,
.rankdetail-list > .rankdetail-row,
.rankdetail-list-divider,
.rankdetail-player-row .rankdetail-row,
.rankdetail-player-marker,
.rankdetail-scrollbar {
    opacity: 0;
}

.rankdetail-layer.rankdetail-shown .rankdetail-title-ribbon {
    animation: rankdetail-ribbon-in 0.28s cubic-bezier(0.34, 1.45, 0.64, 1) 0.12s forwards;
}

.rankdetail-layer.rankdetail-shown .rankdetail-title-text {
    animation: rankdetail-title-text-in 0.28s cubic-bezier(0.34, 1.45, 0.64, 1) 0.12s forwards;
}

.rankdetail-layer.rankdetail-shown .rankdetail-btn-close {
    animation: rankdetail-close-in 0.28s cubic-bezier(0.34, 1.45, 0.64, 1) 0.2s forwards;
}

.rankdetail-layer.rankdetail-shown .rankdetail-medal--2nd {
    animation: rankdetail-medal-2nd-in 0.3s cubic-bezier(0.34, 1.45, 0.64, 1) 0.28s forwards;
}

.rankdetail-layer.rankdetail-shown .rankdetail-medal--1st {
    animation: rankdetail-medal-1st-in 0.32s cubic-bezier(0.34, 1.45, 0.64, 1) 0.36s forwards;
}

.rankdetail-layer.rankdetail-shown .rankdetail-medal--3rd {
    animation: rankdetail-medal-3rd-in 0.3s cubic-bezier(0.34, 1.45, 0.64, 1) 0.44s forwards;
}

.rankdetail-layer.rankdetail-shown .rankdetail-list > .rankdetail-row {
    animation: rankdetail-slide-in-right 0.1875s ease-out calc(0.52s + var(--rd-row-index, 0) * 0.08s) forwards;
}

.rankdetail-layer.rankdetail-shown .rankdetail-list-divider {
    animation: rankdetail-slide-in-right 0.1875s ease-out calc(0.52s + var(--rd-list-row-count, 3) * 0.08s) forwards;
}

.rankdetail-layer.rankdetail-shown .rankdetail-player-row .rankdetail-row {
    animation: rankdetail-slide-in-right 0.1875s ease-out calc(0.6s + var(--rd-list-row-count, 3) * 0.08s) forwards;
}

.rankdetail-layer.rankdetail-shown .rankdetail-player-marker.is-visible {
    animation: rankdetail-slide-in-right 0.1875s ease-out calc(0.64s + var(--rd-list-row-count, 3) * 0.08s) forwards;
}

.rankdetail-layer.rankdetail-shown .rankdetail-scrollbar {
    animation: rankdetail-scrollbar-in 0.22s ease-out calc(0.56s + var(--rd-list-row-count, 3) * 0.08s) forwards;
}

.rankdetail-layer.rankdetail-shown .rankdetail-deco {
    animation: rankdetail-deco-in 0.32s cubic-bezier(0.34, 1.45, 0.64, 1) calc(0.72s + var(--rd-list-row-count, 3) * 0.08s) forwards;
}

@media (prefers-reduced-motion: reduce) {
    .rankdetail-layer.rankdetail-shown .rankdetail-modal-scale {
        transform: scale(1);
        opacity: 1;
        animation: none;
    }

    .rankdetail-layer.rankdetail-shown .rankdetail-frame-bg,
    .rankdetail-layer.rankdetail-shown .rankdetail-btn-close,
    .rankdetail-layer.rankdetail-shown .rankdetail-deco,
    .rankdetail-layer.rankdetail-shown .rankdetail-title-ribbon,
    .rankdetail-layer.rankdetail-shown .rankdetail-title-text,
    .rankdetail-layer.rankdetail-shown .rankdetail-medal,
    .rankdetail-layer.rankdetail-shown .rankdetail-list > .rankdetail-row,
    .rankdetail-layer.rankdetail-shown .rankdetail-list-divider,
    .rankdetail-layer.rankdetail-shown .rankdetail-player-row .rankdetail-row,
    .rankdetail-layer.rankdetail-shown .rankdetail-player-marker.is-visible,
    .rankdetail-layer.rankdetail-shown .rankdetail-scrollbar {
        animation: none !important;
        opacity: 1 !important;
    }

    .rankdetail-title-ribbon {
        transform: rotate(-9deg);
    }

    .rankdetail-title-text {
        transform: rotate(-9deg) translateY(calc(-38px * var(--rd-s)));
    }

    .rankdetail-btn-close {
        transform: rotate(5deg) translateY(calc(72px * var(--rd-s))) translateX(calc(-24px * var(--rd-s)));
    }

    .rankdetail-deco {
        transform: rotate(-8deg);
    }

    .rankdetail-medal--1st {
        transform: translateY(calc(var(--rd-close-btn-h) / -6));
    }

    .rankdetail-medal--2nd {
        transform: translateX(calc(24px * var(--rd-s)));
    }

    .rankdetail-medal--3rd {
        transform: translateX(calc(-24px * var(--rd-s)));
    }

    .rankdetail-list > .rankdetail-row,
    .rankdetail-player-row .rankdetail-row {
        transform: none;
    }

    .rankdetail-scrollbar {
        transform: none;
    }
}

.rankdetail-stage {
    position: relative;
    width: calc(425px * var(--rd-s));
    padding-top: calc(127px * var(--rd-s));
    box-sizing: content-box;
    margin: 0 auto;
    pointer-events: none;
    isolation: isolate;
    overflow: visible;
    transform: scale(1.2);
    transform-origin: center center;
}

.rankdetail-frame-box {
    position: relative;
    width: calc(425px * var(--rd-s));
    height: calc(570px * var(--rd-s));
    --rd-frame-h: calc(570px * var(--rd-s));
    --rd-close-btn-w: calc(425px * var(--rd-s) * 0.136);
    --rd-close-btn-h: calc(570px * var(--rd-s) * 0.10);
    --rd-row-h: calc(60px * var(--rd-s) + var(--rd-close-btn-h) / 8);
    --rd-flag-opaque-bottom-ratio: calc(157 / 159);
    --rd-banner-pad-y-ratio: calc(3 / 63);
    --rd-medal2-opaque-bottom: calc(var(--rd-frame-h) * (0.165 + 0.251 * var(--rd-flag-opaque-bottom-ratio)));
    --rd-visual-gap-medal2-row4: calc(7.913px * var(--rd-s));
    --rd-row-visual-gap: calc(5.1964px * var(--rd-s));
    --rd-row-box-gap: calc(var(--rd-row-visual-gap) - (6 / 63) * var(--rd-row-h));
    --rd-list-top-offset: calc(var(--rd-medal2-opaque-bottom) + var(--rd-visual-gap-medal2-row4) - var(--rd-banner-pad-y-ratio) * var(--rd-row-h));
    --rd-list-view-h: calc(3 * var(--rd-row-h) + 2 * var(--rd-row-box-gap));
    --rd-list-footer-gap: var(--rd-row-box-gap);
    --rd-list-row-count: 3;
    --rd-row-anim-base: 0.52s;
    --rd-row-anim-step: 0.08s;
    pointer-events: none;
    overflow: visible;
}

.rankdetail-frame-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: url('./img/Frame/Frame_Rank_2.png') no-repeat center center;
    background-size: 100% 100%;
    pointer-events: none;
    opacity: 0;
}

.rankdetail-btn-close {
    position: absolute;
    top: -2%;
    left: 89%;
    right: auto;
    width: 13.6%;
    height: 10%;
    max-height: none;
    aspect-ratio: 58 / 57;
    transform: rotate(5deg) translateY(calc(72px * var(--rd-s))) translateX(calc(-24px * var(--rd-s)));
    transform-origin: 78% 22%;
    z-index: 20;
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
    pointer-events: auto;
    background: url('./img/Button/Button_Close.png') no-repeat center;
    background-size: 100% 100%;
    background-color: transparent;
}

.rankdetail-header {
    display: contents;
}

.rankdetail-deco {
    position: absolute;
    top: -24.5%;
    left: 6%;
    bottom: auto;
    width: 50.4%;
    height: auto;
    max-width: 50.4%;
    max-height: none;
    object-fit: contain;
    object-position: bottom center;
    transform: rotate(-8deg);
    transform-origin: 36% 92%;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

.rankdetail-title-ribbon {
    position: absolute;
    top: -2%;
    left: 0.8%;
    display: block;
    width: 79.5%;
    height: auto;
    margin: 0;
    object-fit: contain;
    transform: rotate(-9deg);
    transform-origin: 18% 72%;
    z-index: 4;
    pointer-events: none;
    user-select: none;
}

.rankdetail-title-text {
    position: absolute;
    top: 7%;
    left: 24%;
    width: 28%;
    transform: rotate(-9deg) translateY(calc(-38px * var(--rd-s)));
    transform-origin: 50% 50%;
    z-index: 5;
    color: #fff;
    font-size: clamp(15px, calc(22px * var(--rd-s)), 28px);
    line-height: 1.15;
    font-weight: bold;
    font-family: "微軟正黑體", "Microsoft JhengHei", sans-serif;
    text-align: center;
    text-shadow:
        0 2px 3px rgba(0, 0, 0, 0.8),
        0 0 8px rgba(80, 30, 10, 0.5);
    pointer-events: none;
    white-space: nowrap;
}

.rankdetail-top3 {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
}

.rankdetail-medal {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    pointer-events: none;
}

.rankdetail-medal-flag {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: url('./img/Frame/Frame_Rank_Flag.png') no-repeat center bottom;
    background-size: contain;
}

.rankdetail-medal-label {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

.rankdetail-medal-body {
    position: absolute;
    left: 50%;
    top: 26%;
    transform: translateX(-50%);
    width: 82%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(2px * var(--rd-s));
    z-index: 6;
    pointer-events: none;
}

.rankdetail-medal-avatar {
    position: relative;
    flex: 0 0 auto;
    width: calc(56px * var(--rd-s));
    height: calc(54px * var(--rd-s));
    background: url('./img/Icon/Icon_Rank_White.png') no-repeat center;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rankdetail-medal-avatar-face {
    width: 68%;
    height: 68%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.rankdetail-medal-id {
    max-width: 100%;
    color: #fff;
    font-size: clamp(10px, calc(13px * var(--rd-s)), 15px);
    font-weight: bold;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.rankdetail-medal-score {
    color: #fff;
    font-size: clamp(10px, calc(13px * var(--rd-s)), 15px);
    font-weight: bold;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.rankdetail-medal--1st {
    top: 13%;
    left: 36%;
    width: 28%;
    height: 27.9%;
    transform: translateY(calc(var(--rd-close-btn-h) / -6));
    z-index: 5;
}

.rankdetail-medal--2nd {
    top: 16.5%;
    left: 11.5%;
    width: 25.2%;
    height: 25.1%;
    transform: translateX(calc(24px * var(--rd-s)));
    z-index: 3;
}

.rankdetail-medal--3rd {
    top: 16.5%;
    left: 63.5%;
    width: 25.2%;
    height: 25.1%;
    right: auto;
    transform: translateX(calc(-24px * var(--rd-s)));
    z-index: 2;
}

.rankdetail-list {
    position: absolute;
    top: var(--rd-list-top-offset);
    left: calc(16.5% - 36px * var(--rd-s));
    width: calc(64.5% + 72px * var(--rd-s));
    max-height: var(--rd-list-view-h);
    z-index: 9;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-x: clip;
    overflow-y: auto;
    pointer-events: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-left: calc(6px * var(--rd-s));
    padding-right: calc(6px * var(--rd-s));
    padding-bottom: 0;
    box-sizing: border-box;
}

.rankdetail-list::-webkit-scrollbar {
    display: none;
}

.rankdetail-list > .rankdetail-row + .rankdetail-row {
    margin-top: var(--rd-row-box-gap);
}

.rankdetail-row {
    position: relative;
    flex: 0 0 var(--rd-row-h);
    width: 90%;
    align-self: center;
    height: var(--rd-row-h);
    min-height: var(--rd-row-h);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: calc(4px * var(--rd-s));
    box-sizing: border-box;
    padding: 0 calc(8px * var(--rd-s)) 0 calc(4px * var(--rd-s));
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    overflow: hidden;
}

.rankdetail-row-lead {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    position: relative;
    min-width: 0;
    padding-left: calc(46px * var(--rd-s));
}

.rankdetail-row-deco {
    position: absolute;
    left: calc(2px * var(--rd-s));
    top: 50%;
    transform: translateY(-50%);
    width: calc(48px * var(--rd-s));
    height: calc(46px * var(--rd-s));
    object-fit: contain;
    z-index: 3;
    pointer-events: none;
    display: block;
}

.rankdetail-row-deco--blue {
    left: calc(3px * var(--rd-s));
    width: calc(47px * var(--rd-s));
    height: calc(46px * var(--rd-s));
}

.rankdetail-row-scorebar,
.rankdetail-row [class*="progress"],
.rankdetail-row [class*="scorebar"] {
    display: none !important;
}

.rankdetail-row--dark {
    background-image: url('./img/Frame/Frame_Rank_Black.png');
}

.rankdetail-row--light {
    background-image: url('./img/Frame/Frame_Rank_White.png');
}

.rankdetail-row-rank {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 0;
}

.rankdetail-row-rank .rankdetail-rank-digits {
    margin-right: 0;
}

.rankdetail-row-rank--empty {
    width: calc(13px * var(--rd-s));
    min-width: calc(13px * var(--rd-s));
    flex: 0 0 calc(13px * var(--rd-s));
}

.rankdetail-row-avatar {
    position: relative;
    flex: 0 0 auto;
    width: calc(55px * var(--rd-s));
    height: calc(53px * var(--rd-s));
    margin-left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    overflow: visible;
}

.rankdetail-row-avatar-face {
    width: 68%;
    height: 68%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.rankdetail-row-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rankdetail-row-avatar--dark {
    width: calc(54px * var(--rd-s));
    background-image: url('./img/Icon/Icon_Rank_Black.png');
}

.rankdetail-row-avatar--light {
    background-image: url('./img/Icon/Icon_Rank_White.png');
}

.rankdetail-row-id {
    color: #fff;
    font-size: clamp(11px, calc(14px * var(--rd-s)), 16px);
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rankdetail-row--light .rankdetail-row-id {
    color: #4a2808;
}

.rankdetail-row-score {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: calc(2px * var(--rd-s));
    min-width: calc(52px * var(--rd-s));
    color: #fff;
    font-size: clamp(13px, calc(16px * var(--rd-s)), 18px);
    font-weight: bold;
    text-align: right;
    padding-right: calc(4px * var(--rd-s));
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
    transform: translateX(calc(var(--rd-close-btn-w) * -0.25));
}

.rankdetail-row-score::before {
    content: '';
    display: block;
    width: calc(44px * var(--rd-s));
    height: calc(12px * var(--rd-s));
    background: url('./img/Number/Score2.png') no-repeat center;
    background-size: contain;
}

.rankdetail-row--light .rankdetail-row-score::before {
    background-image: url('./img/Number/Score.png');
}

.rankdetail-row--light .rankdetail-row-score {
    color: #4a2808;
    text-shadow: none;
}

.rankdetail-list-divider {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    height: calc(6px * var(--rd-s));
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.rankdetail-footer {
    position: absolute;
    left: calc(16.5% - 36px * var(--rd-s));
    width: calc(64.5% + 72px * var(--rd-s));
    top: calc(var(--rd-list-top-offset) + var(--rd-list-view-h) + var(--rd-list-footer-gap));
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--rd-row-box-gap);
    padding: 0 calc(6px * var(--rd-s));
    box-sizing: border-box;
    pointer-events: none;
    overflow: visible;
}

.rankdetail-player-slot {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    height: var(--rd-row-h);
    overflow: visible;
}

.rankdetail-player-row {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: block;
    pointer-events: none;
    overflow: visible;
}

.rankdetail-player-row .rankdetail-row {
    width: 90%;
    max-width: 90%;
    margin: 0 auto;
    flex: none;
    align-self: auto;
}

.rankdetail-list-divider img {
    width: 96%;
    height: 100%;
    object-fit: fill;
    display: block;
}

.rankdetail-scrollbar {
    position: absolute;
    top: var(--rd-list-top-offset);
    left: 88.2%;
    right: auto;
    width: calc(27px * var(--rd-s));
    height: var(--rd-list-view-h);
    z-index: 12;
    overflow: visible;
    pointer-events: none;
}

.rankdetail-scrollbar-track {
    position: absolute;
    top: 0;
    left: calc(9.8px * var(--rd-s));
    width: calc(7px * var(--rd-s));
    height: 100%;
    max-height: 100%;
    margin: 0;
    border-radius: calc(3px * var(--rd-s));
    background: url('./img/Bar/Bar_1.png') no-repeat center;
    background-size: 100% 100%;
    overflow: visible;
}

.rankdetail-scrollbar-thumb {
    position: absolute;
    top: 0;
    left: 50%;
    width: calc(25px * var(--rd-s));
    height: calc(46px * var(--rd-s));
    min-height: calc(46px * var(--rd-s));
    border-radius: calc(12px * var(--rd-s));
    background: url('./img/Bar/Bar_2.png') no-repeat center;
    background-size: 100% 100%;
    transform: translateX(-50%) translateY(0);
    will-change: transform;
}

.rankdetail-player-marker {
    position: absolute;
    left: 0;
    bottom: calc(-3px * var(--rd-s));
    width: calc(80px * var(--rd-s));
    height: calc(26px * var(--rd-s));
    transform: none;
    z-index: 11;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.rankdetail-player-marker.is-visible {
    display: flex;
}

.rankdetail-player-marker img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

html.rankdetail-open,
body.rankdetail-open {
    overflow: hidden !important;
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100vw;
    height: 100%;
    overscroll-behavior: none;
    position: fixed;
    inset: 0;
}

@media (max-width: 767px) {
    .rankdetail-layer {
        align-items: flex-start;
        justify-content: center;
        height: 100svh;
        max-height: 100svh;
        overflow: visible;
        padding-top: max(
            env(safe-area-inset-top, 0px),
            calc(50svh - (127px * var(--rd-s, 0.776) + 570px * var(--rd-s, 0.776)) / 2 - 36px)
        );
        padding-right: env(safe-area-inset-right, 0);
        padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
        padding-left: env(safe-area-inset-left, 0);
    }

    .rankdetail-modal {
        margin-top: 0;
        overflow: visible;
        max-width: none;
    }

    .rankdetail-modal-scale {
        overflow: visible;
        max-width: none;
    }

    .rankdetail-stage,
    .rankdetail-frame-box {
        overflow: visible;
    }

    .rankdetail-stage {
        transform: scale(1.15);
        transform-origin: center center;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .rankdetail-modal {
        --rd-s: 0.85;
        width: min(calc(425px * 0.85 + 20px), calc(100vw - 24px));
        max-width: calc(100vw - 24px);
        overflow: visible;
    }

    .rankdetail-modal-scale {
        --rd-s: 0.85;
        overflow: visible;
        max-width: none;
    }

    .rankdetail-stage,
    .rankdetail-frame-box {
        overflow: visible;
    }

    .rankdetail-list {
        overflow-x: clip;
    }
}

@media (min-width: 1024px) {
    .rankdetail-layer {
        align-items: center;
        justify-content: center;
        padding-top: 0;
        padding-bottom: env(safe-area-inset-bottom, 0);
        overflow: hidden;
    }

    .rankdetail-modal {
        --rd-s: 0.81;
        width: min(calc(445px * var(--rd-s)), calc(100vw - 32px));
        max-width: calc(100vw - 32px);
        overflow: visible;
    }

    .rankdetail-modal-scale {
        --rd-s: 0.81;
        overflow: visible;
        max-width: none;
    }

    .rankdetail-stage {
        overflow: visible;
    }

    .rankdetail-frame-box {
        overflow: visible;
    }

    .rankdetail-list {
        overflow-x: clip;
        max-height: var(--rd-list-view-h);
    }
}

/*#endregion*/

/*#region 關於我們*/

.AboutBtnClose {
    background: url('./img/Button/Button_Close.png') no-repeat center;
    background-size: 100% 100%;
    position: absolute;
    z-index: 2;
    cursor: pointer;
    width: calc(var(--vh,1vh)*8);
    height: calc(var(--vh,1vh)*8);
    aspect-ratio: 1 / 1;
    top: calc(var(--vh, 1vh) * 5 - var(--vh, 1vh) * 8 + var(--vh, 1vh) * 2);
    right: calc(var(--vh, 1vh) * 2.5 - var(--vh, 1vh) * 4 + var(--vh, 1vh) * 2);
    margin: 0;
}

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

#AboutHeaderDiv {
    width: calc(calc(var(--vh,1vh)*10)*3.632183908045977);
    height: calc(var(--vh,1vh)*10);
    margin: calc(var(--vh,1vh)*-5) auto auto auto;
    left: 50%;
    transform: translateX(-50%);
    background: url('./img/Frame/Frame_AboutUs_2.png') no-repeat center;
    background-size: 100% 100%;
    position: absolute;
    z-index: 2;
}

.AboutHeaderContentDiv {
    width: 100%;
    margin: calc(var(--vh,1vh)*3.2) auto auto auto;
    position: relative;
    text-align: center;
    z-index: 2;
}

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

.AboutScrollContent {
    margin: auto;
}

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

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

#AboutOfficialSite.about-official {
    font-size: calc(var(--vh,1vh)*1.85);
    color: #5c3a28;
    font-weight: bold;
    margin: calc(var(--vh,1vh)*2.5) auto 0 auto;
    padding: 0;
    text-align: justify;
}

#AboutOfficialSite.about-official a {
    color: #8b4518;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

#AboutFutureHeaderDiv {
    width: calc(calc(var(--vh,1vh)*6)*4.027777777777778);
    height: calc(var(--vh,1vh)*6);
    margin: calc(var(--vh,1vh)*5) auto auto auto;
    background: url('./img/Button/Button_White.png') no-repeat center;
    background-size: 100% 100%;
    z-index: 2;
}

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

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

#AboutTicketDiv {
    width: calc(calc(var(--vh,1vh)*18)*1.7875);
    height: calc(var(--vh,1vh)*18);
    position: absolute;
    top: calc(var(--vh,1vh)*10.5);
    left: 50%;
    transform: translateX(-50%);
    background: url('./img/Frame/Frame_AboutUs_3.png') no-repeat center;
    background-size: 100% 100%;
    z-index: 2;
}

.AboutFutureContentDiv {
    width: 100%;
    margin: calc(var(--vh,1vh)*2.5) auto calc(var(--vh,1vh)*0) auto;
    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: #5c3a28;
    font-weight: bold;
    margin: 0 auto 0 auto;
}

/*#endregion*/

/*#region 隱私權政策面板（Frame_Board 紅橘外框＋綠色內容區；ui_relative_layout_v2） */

.PrivacyPolicyPanel {
    /* main_wood_frame 縮放根：子元件皆以面板寬高百分比定位 */
    --pp-green-top: 8.1%;
    --pp-green-left: 8%;
    --pp-green-right: 8%;
    --pp-green-bottom: 10%;
    --pp-content-top: 8.5%;
    --pp-content-left: 8.5%;
    --pp-content-right: 15%;
    --pp-content-bottom: 3.5%;
    --pp-title-top: 4.27%;
    --pp-title-width: 52.7%;
    --pp-title-height: 10.1%;

    width: calc(calc(var(--vh,1vh)*85)*0.685121107266436);
    height: calc(var(--vh,1vh)*85);
    background: url('./img/Frame/Frame_Board.png') no-repeat;
    background-size: calc(calc(var(--vh,1vh)*85)*0.685121107266436) calc(var(--vh,1vh)*85);
    margin: calc(var(--vh,1vh)*10) auto 0 auto;
    padding: 0px;
    display: none;
    position: relative;
    container-type: size;
    container-name: privacy-panel;
}

#PrivacyPolicyHeaderDiv {
    width: var(--pp-title-width);
    height: var(--pp-title-height);
    top: var(--pp-title-top);
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    background: url('./img/Button/Button_White.png') no-repeat center;
    background-size: 100% 100%;
    position: absolute;
    z-index: 3;
}

.PrivacyPolicyHeaderContentDiv {
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
    z-index: 2;
}

#PrivacyPolicyLabel {
    font-size: calc(var(--vh,1vh)*2.2);
    font-size: 4.2cqh;
    color: #6b3d22;
    font-weight: bold;
    margin: 0;
    line-height: 1.05;
}

.PrivacyPolicyBtnClose {
    background: url('./img/Button/Button_Close.png') no-repeat center;
    background-size: 100% 100%;
    position: absolute;
    z-index: 4;
    cursor: pointer;
    width: calc(var(--vh,1vh)*8);
    height: calc(var(--vh,1vh)*8);
    aspect-ratio: 1 / 1;
    top: calc(var(--vh,1vh)*7);
    right: calc(var(--vh,1vh)*4.5);
    margin: 0;
}

.privacypolicyScrollbar {
    margin: 0;
}

.PrivacyPolicyContentDiv {
    margin: 0;
    z-index: 2;
    padding: 3.5% 5.5% 3.5% 4.5%;
    text-align: justify;
    box-sizing: border-box;
    max-width: 100%;
}

#PrivacyPolicyContentLabel {
    font-family: PumpkinGames, sans-serif;
    font-size: calc(var(--vh,1vh)*1.45);
    font-size: 2.75cqh;
    color: #fff;
    font-weight: 600;
    line-height: 1.38;
    letter-spacing: 0.01em;
    margin: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}
/*#endregion*/

/*#region 關於我們卷軸*/

#aboutScrollbar {
    max-height: calc(var(--vh,1vh)*46.5);
    width: calc(var(--vh,1vh)*38);
    margin: calc(var(--vh,1vh)*31) auto auto auto;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    overflow: visible;
}

#aboutscrollableElement {
    max-height: calc(var(--vh,1vh)*46.5);
    width: calc(100% - 14px);
    margin: 0;
    padding-right: 0;
    box-sizing: border-box;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch
}

    #aboutscrollableElement::-webkit-scrollbar {
        width: 0 !important;
        overflow: hidden;
    }

/*#endregion*/

/*#region 隱私權政策卷軸*/

#privacypolicyScrollbar {
    position: absolute;
    top: var(--pp-green-top);
    left: var(--pp-green-left);
    right: var(--pp-green-right);
    bottom: var(--pp-green-bottom);
    width: auto;
    height: auto;
    max-height: none;
    margin: 0;
    overflow: hidden;
}

#privacypolicyscrollableElement {
    position: absolute;
    top: var(--pp-content-top);
    left: var(--pp-content-left);
    right: var(--pp-content-right);
    bottom: var(--pp-content-bottom);
    width: auto;
    height: auto;
    max-height: none;
    margin: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch
}

privacypolicy-scrollbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}

    #privacypolicyscrollableElement::-webkit-scrollbar {
        width: 0 !important;
        overflow: hidden;
    }

/*#endregion*/

/*#region 卡牌圖鑑面板（對齊 CardFrontEnd style.css：寬版 min-aspect-ratio 1/1、窄版 aspect-ratio < 1/1） */
@media (min-aspect-ratio: 1/1) {
    #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;
        border: none;
        color: #fff;
        font-family: PumpkinGames, sans-serif;
        font-size: calc(var(--vh, 1vh) * 2.5);
        font-weight: bold;
        text-align: center;
        cursor: default;
    }

    .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;
        cursor: pointer;
    }

    .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);
        /* 書本下移 EncyclopediaTitle 高度（15vh）後再上移半個標題高（7.5vh）；標題以 margin 補償維持原位 */
        margin: calc(var(--vh, 1vh) * 17.5) auto 0 auto;
        padding: 0;
        display: none;
    }

    #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: #fff;
        font-weight: bold;
        position: absolute;
        /* 書本 margin 17.5vh、標題高 15vh：-9 維持標題原位，書本較全下移少 7.5vh */
        margin: calc(var(--vh, 1vh) * -9) auto 0 calc(var(--vh, 1vh) * 31);
        cursor: default;
    }

    #EncyclopediaCloseButton {
        position: absolute;
        z-index: 5;
        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);
        cursor: pointer;
        background: url('./img/Button/Button_Close_2.png') no-repeat center/100% 100%;
    }

    #CardCategoryDiv {
        position: relative;
        /* 關閉鈕改 absolute 後少 7.5vh 流式占位，-12+7.5=-4.5 維持與書本對齊 */
        margin: calc(var(--vh, 1vh) * -4.5) calc(var(--vh, 1vh) * 0) calc(var(--vh, 1vh) * 0) calc(var(--vh, 1vh) * 6);
        z-index: 4;
    }

    #CardCategorySelect {
        appearance: none;
        -webkit-appearance: none;
        width: calc(calc(var(--vh, 1vh) * 5.5) * 4.414634146341463);
        height: calc(var(--vh, 1vh) * 5.5);
        font-family: PumpkinGames, sans-serif;
        font-size: calc(var(--vh, 1vh) * 2.5);
        color: #3b1f14;
        font-weight: bold;
        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);
    }

    #CardCategorySelect option {
        color: #3b1f14;
        background: #f5e6c8;
    }

    #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;
        z-index: 3;
    }

    #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;
        z-index: 3;
    }

    .EncyclopediaGridContainerItem {
        width: calc(var(--vh, 1vh) * 11);
        height: calc(var(--vh, 1vh) * 11);
        border-radius: 5%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        box-shadow: 0 calc(var(--vh, 1vh) * 0.3) calc(var(--vh, 1vh) * 0.6) rgba(0, 0, 0, 0.35);
        position: relative;
        overflow: hidden;
    }

    .EncyclopediaCover {
        border: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.85);
        border-radius: 5%;
        position: absolute;
        left: 0;
        top: 0;
        pointer-events: none;
    }

    #EncyclopediaPageDIV {
        position: absolute;
        margin: calc(var(--vh, 1vh) * 65) calc(var(--vh, 1vh) * 0) calc(var(--vh, 1vh) * 0) calc(var(--vh, 1vh) * 40);
        z-index: 4;
    }
}

@media (aspect-ratio < 1/1) {
    #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;
        border: none;
        color: #fff;
        font-family: PumpkinGames, sans-serif;
        font-size: calc(var(--vh, 1vh) * 2.5);
        font-weight: bold;
        text-align: center;
        cursor: default;
    }

    .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;
        cursor: pointer;
    }

    .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);
        margin: calc(var(--vh, 1vh) * 16) auto 0 auto;
        padding: 0;
        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: #fff;
        font-weight: bold;
        position: absolute;
        margin: calc(var(--vh, 1vh) * -5) auto 0 calc(var(--vh, 1vh) * 15);
        cursor: default;
    }

    #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);
        cursor: pointer;
        background: url('./img/Button/Button_Close_2.png') no-repeat center/100% 100%;
    }

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

    #CardCategorySelect {
        appearance: none;
        -webkit-appearance: none;
        width: calc(calc(var(--vh, 1vh) * 5.5) * 4.414634146341463);
        height: calc(var(--vh, 1vh) * 5.5);
        font-family: PumpkinGames, sans-serif;
        font-size: calc(var(--vh, 1vh) * 2.75);
        color: #3b1f14;
        font-weight: bold;
        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;
    }

    #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) * 2) calc(var(--vh, 1vh) * 0) calc(var(--vh, 1vh) * 0) calc(var(--vh, 1vh) * 8);
        position: absolute;
        z-index: 3;
    }

    #EncyclopediaGridContainerRight {
        display: none !important;
    }

    .EncyclopediaGridContainerItem {
        width: calc(var(--vh, 1vh) * 10);
        height: calc(var(--vh, 1vh) * 10);
        border-radius: 5%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        box-shadow: 0 calc(var(--vh, 1vh) * 0.3) calc(var(--vh, 1vh) * 0.6) rgba(0, 0, 0, 0.35);
        position: relative;
        overflow: hidden;
    }

    .EncyclopediaCover {
        border: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.85);
        margin: 0;
        border-radius: 5%;
        position: absolute;
        left: 0;
        top: 0;
        pointer-events: none;
    }

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

@media (max-width: 480px) {
    .AboutPanel {
        width: 92vw;
        max-width: 92vw;
        background-size: 92vw calc(var(--vh,1vh) * 85);
        margin-left: auto;
        margin-right: auto;
    }

    /* Privacy 開啟時隱藏 About／票券殘留，避免 QR／ticket 浮在面板外 */
    .mask:has(.PrivacyPolicyPanel[style*="display: block"]) .AboutPanel,
    .mask:has(.PrivacyPolicyPanel[style*="display: block"]) #AboutTicketDiv {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        opacity: 0 !important;
    }

    .PrivacyPolicyPanel {
        width: 92vw;
        max-width: 92vw;
        height: calc(var(--vh, 1vh) * 85);
        max-height: calc(var(--vh, 1vh) * 85);
        background-size: 92vw calc(var(--vh,1vh) * 85);
        margin-top: calc(var(--vh,1vh)*10);
        margin-bottom: max(10px, env(safe-area-inset-bottom, 0px));
        margin-left: auto;
        margin-right: auto;
        z-index: 5;
    }

    .PrivacyPolicyPanel[style*="display: block"] {
        z-index: 5;
    }

    #AboutTicketDiv {
        width: min(78vw, calc(calc(var(--vh,1vh)*18)*1.7875));
        height: auto;
        aspect-ratio: 286 / 160;
        top: calc(var(--vh,1vh)*10.5);
    }

    #aboutScrollbar {
        max-height: calc(var(--vh,1vh)*47.5);
        width: min(calc(92vw - 8 * var(--vh, 1vh)), calc(var(--vh,1vh)*38));
        margin: calc(var(--vh,1vh)*31) auto auto auto;
        left: 50%;
        transform: translateX(-50%);
        overflow: visible;
    }

    #aboutscrollableElement {
        max-height: calc(var(--vh,1vh)*47.5);
        width: calc(100% - 14px);
        padding-right: 0;
        box-sizing: border-box;
    }

    .AboutIntroduceContentDiv,
    .AboutFutureContentDiv {
        width: 100%;
    }

    #PrivacyPolicyLabel {
        font-size: calc(var(--vh,1vh)*1.9);
        font-size: 3.8cqh;
    }

    .PrivacyPolicyContentDiv {
        width: 100%;
    }

    #PrivacyPolicyContentLabel {
        font-size: calc(var(--vh,1vh)*1.28);
        font-size: 2.45cqh;
        font-weight: 500;
        line-height: 1.32;
    }
}

/* === PC 修正（1210+）=== */
@media (min-width: 800px) {
    .announcement-speaker-frame-bg {
        max-width: none;
    }
}