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

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

/* --- 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));
        z-index: 1;
    }

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

    /* 右前景 Right_2：三明治＋草莓塔，在廚王前方、右下角 */
    .ChefArea--right .ChefFoodLayer--front {
        width: 82%;
        height: 56%;
        right: -8%;
        bottom: 0;
        background-position: right bottom;
        transform: scale(0.64) 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);
    }

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

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

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

    .ChefArea--right .ChefFoodLayer--front {
        width: 82%;
        height: 56%;
        right: -8%;
        bottom: 0;
        background-position: right bottom;
    }

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