/*
 * 第一關專屬介面設定
 *
 * 這個檔案只放第一關的尺寸、位置、字型與元件比例。
 * 想調整第一關介面時，優先從下面的變數與對應區塊修改，不必回到 style.css。
 */
#game-layout.level-1 {
    /* 角色欄的外距；數值越大，角色與欄位邊界距離越遠。 */
    --level1-panel-padding: 40px;
    /* GemoP/Next 資訊文字大小。 */
    --level1-info-font-size: 14px;
    /* 圖鑑寬度上限；目前垂直圖鑑主要由內容寬度決定。 */
    --level1-dex-width: min(520px, 70px);
    /* 圖鑑外框的上下、左右內距。 */
    --level1-dex-padding: 8px 12px;
    /* 圖鑑項目之間的間距。 */
    --level1-dex-gap: 6px;
    /* 圖鑑項目下方文字的字體大小。 */
    --level1-dex-item-size: 11px;
    /* 圖鑑球形圖示的寬度與高度。 */
    --level1-dex-circle-size: 35px;
    /* 圖鑑每個項目的固定寬度與最小高度。 */
    --level1-dex-item-width: 28px;
    --level1-dex-item-height: 26px;
    /* 進化進度條外框的寬度。 */
    --level1-progress-width: 25px;
    /* 進化進度條的高度。 */
    --level1-progress-height: 240px;
    /* 固定設計稿中的 BOX 高度。 */
    --level1-canvas-height: 650px;
    /* BOX 寬度；可直接調整 BOX 在左側區域的佔比。 */
    --level1-canvas-width: 440px;
    /* BOX 上下位置；正值往下，負值往上。 */
    --level1-canvas-offset-y: 0px;
    --level1-canvas-offset-x: -10px;
    /* 垂直圖鑑外框的高度。 */
    --level1-dex-height: 560px;
    --level1-dex-width: 70px;
    /* 固定設計稿中的中央欄內距。 */
    --level1-main-panel-padding: 20px 8px;
    /* 固定設計稿中的任務欄內距。 */
    --level1-future-panel-padding: 24px 28px;
    /* 任務標題、卡片與按鈕的尺寸設定。 */
    --level1-task-header-margin: 16px;
    --level1-task-title-size: 22px;
    --level1-task-hint-size: 12px;
    --level1-task-gap: 12px;
    --level1-task-padding: 14px;
    --level1-task-fruit-gap: 12px;
    --level1-task-fruit-margin: 14px;
    --level1-task-fruit-size: 42px;
    --level1-task-button-padding: 8px 10px;
    --level1-task-button-font-size: 13px;
    /* 對話框相對角色欄的寬度。 */
    --level1-dialogue-width: 72%;
    /* 對話框相對角色欄的最大高度。 */
    --level1-dialogue-max-height: 32%;
    /* 對話文字大小。 */
    --level1-dialogue-font-size: clamp(10px, min(2.2vw, 2.2vh), 18px);
    /* 對話文字與對話框邊界之間的內距。 */
    --level1-dialogue-padding: 0.7em 0.9em;
    /* 對話框邊框粗細。 */
    --level1-dialogue-border-width: max(1px, 0.12em);
    /* 對話框四角圓角大小。 */
    --level1-dialogue-radius: 0.8em;
}

/* 左側角色欄的內距。 */
#game-layout.level-1 #character-panel {
    padding: var(--level1-panel-padding);
}

#game-layout.level-1 #level2-recipe-dex {
    display: none !important;
}

/* 中央資訊列：GemoP、下一個水果與圖鑑解鎖數量。 */
#game-layout.level-1 #info-panel {
    /* 資訊列內 GemoP 與 Next 之間的距離。 */
    gap: 15px;
    /* 資訊列下方的外距。 */
    margin-bottom: 6px;
    /* 資訊列內部上下、左右留白。 */
    padding: 4px 10px;
    /* 使用上方變數控制資訊文字大小。 */
    font-size: var(--level1-info-font-size);
    /* 資訊列向左平移；目前主要設定會在下方固定框架區覆寫。 */
    transform: translateX(-100px);
}

/* 下一個水果預覽的文字與圖示間距。 */
#game-layout.level-1 #next-preview {
    /* Next 文字與水果圖示之間的距離。 */
    gap: 5px;
    /* Next 預覽的水平位置偏移。 */
    transform: translateX(5px);
}

/* 角色進化進度條的寬度、間距與高度。 */
#game-layout.level-1 #evolution-progress {
    /* 進度條區塊的寬度。 */
    width: var(--level1-progress-width);
    /* 標籤、進度條與數值之間的距離。 */
    gap: 8px;
    /* 進度文字大小。 */
    font-size: 10px;
}

#game-layout.level-1 .evolution-progress-track {
    /* 進度條實際填充區的寬度。 */
    width: 16px;
    /* 使用上方變數控制進度條高度。 */
    height: var(--level1-progress-height);
}

/* 第一關底部圖鑑列的整體寬度、內距與項目大小。 */
#game-layout.level-1 #dex-container {
    /* 圖鑑外框寬度。 */
    width: var(--level1-dex-width);
    max-width: var(--level1-dex-width);
    /* 圖鑑外框內距。 */
    padding: var(--level1-dex-padding);
    /* 圖鑑項目間距。 */
    gap: var(--level1-dex-gap);
}

#game-layout.level-1 .dex-item {
    /* 圖鑑項目文字大小。 */
    font-size: var(--level1-dex-item-size);
}

#game-layout.level-1 .dex-circle {
    /* 每顆圖鑑球的尺寸。 */
    width: var(--level1-dex-circle-size);
    height: var(--level1-dex-circle-size);
}

/* 第一關任務清單與任務卡片的間距。 */
#game-layout.level-1 #task-list {
    /* 任務卡片彼此之間的垂直距離。 */
    gap: 12px;
}

#game-layout.level-1 .task-item {
    /* 任務卡片內容與邊界之間的內距。 */
    padding: 14px;
}

#game-layout.level-1 .task-fruits {
    /* 任務水果圖示之間的距離。 */
    gap: 12px;
    /* 水果列與完成按鈕之間的距離。 */
    margin-bottom: 14px;
}

#game-layout.level-1 .task-fruit-dot {
    /* 任務卡片內每顆水果圖示的寬度。 */
    width: 42px;
    /* 任務卡片內每顆水果圖示的高度。 */
    height: 42px;
    /* 固定 flex 基準尺寸，避免被任務欄壓縮。 */
    flex-basis: 42px;
}

#game-layout.level-1 .task-complete-button {
    /* 任務完成按鈕的上下、左右內距。 */
    padding: 8px 10px;
}

/* 第一關中央遊戲畫布的大小；內部繪圖比例固定為 2:3。 */
#game-layout.level-1 canvas {
    /* BOX 寬度跟隨固定高度與 2:3 比例計算。 */
    width: var(--level1-canvas-width);
    /* BOX 的設計高度。 */
    height: var(--level1-canvas-height);
    /* BOX 不可超過左側遊戲區。 */
    max-width: 100%;
    /* 邊框計入 BOX 尺寸，避免外框額外撐大。 */
    box-sizing: border-box;
}

/*
 * 第一關中央區域：左側是遊戲箱子，右側是垂直圖鑑。
 * 圖鑑不再放在箱子下方，也不使用全域的 flex 等分寬度。
 */
#game-layout.level-1 #main-game-panel {
    /* 中央區切成兩欄：左邊 BOX，右邊資訊與圖鑑。 */
    display: grid;
    /* 左欄填滿剩餘空間，右欄依內容寬度固定。 */
    grid-template-columns: minmax(0, 1fr) auto;
    /* 第一列放 GemoP/Next，第二列放 BOX 與圖鑑。 */
    grid-template-rows: auto minmax(0, 1fr);
    /* BOX 與圖鑑之間的水平距離。 */
    column-gap: 8px;
    /* 內容在中央區水平置中。 */
    justify-content: center;
    /* 內容在中央區垂直對齊。 */
    align-items: center;
}

/* GemoP 與 Next 放在右側圖鑑的上方。 */
#game-layout.level-1 #info-panel {
    /* 放到中央區的右欄、圖鑑上方。 */
    grid-column: 2;
    grid-row: 1;
    /* GemoP 與 Next 改成上下排列。 */
    flex-direction: column;
    /* 資訊內容水平置中。 */
    justify-content: center;
    align-items: center;
    /* GemoP 與 Next 的垂直距離。 */
    gap: 5px;
    /* 不額外增加外距。 */
    margin: 0;
    /* 取消全域資訊列的水平位移。 */
    transform: none;
    /* 避免窄欄時文字換行。 */
    white-space: nowrap;
}

/* GemoP 與 Next 各自使用「標題一行、數值或圖案下一行」。 */
#game-layout.level-1 .info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
}

/* 右上資訊區的標題文字。 */
#game-layout.level-1 .info-label {
    display: block;
    font-size: var(--level1-info-font-size);
    line-height: 1.1;
}

/* GemoP 數字顯示在標題下一行。 */
#game-layout.level-1 #gemop-value {
    display: block;
    font-size: var(--level1-info-font-size);
    line-height: 1.1;
}

/* 箱子與進化條維持在左側主區域。 */
#game-layout.level-1 .game-stage {
    /* BOX 與進化條放在中央區左欄。 */
    grid-column: 1;
    grid-row: 2;
    /* 允許左欄依中央區寬度縮放。 */
    min-width: 0;
    width: 130%;
    /* BOX 與進化條一起上下移動；正值往下，負值往上。 */
    transform: translate(
        var(--level1-canvas-offset-x),
        var(--level1-canvas-offset-y)
    );
}

/* 垂直圖鑑緊靠箱子右側，空間不足時只在圖鑑內滾動。 */
#game-layout.level-1 #dex-container {
    /* 圖鑑放在中央區右欄。 */
    grid-column: 2;
    grid-row: 2;
    /* 圖鑑球由上到下排列。 */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 垂直圖鑑不再被橫向寬度限制。 */
    width: auto;
    max-width: none;
    /* 圖鑑固定設計高度。 */
    height: min(100%, 460px);
    /* 視窗較矮時限制最大高度。 */
    max-height: calc(100vh - 190px);
    /* 不另外偏移圖鑑。 */
    margin: 0;
    /* 圖鑑外框內距。 */
    padding: 5px 4px;
    /* 僅允許垂直方向滾動。 */
    overflow-x: hidden;
    overflow-y: auto;
}

/* 每個圖鑑項目固定寬度，避免被 flex 等分壓扁。 */
#game-layout.level-1 .dex-item {
    /* 禁止 flex 壓縮每一顆圖鑑項目。 */
    flex: 0 0 auto;
    /* 圖鑑項目的固定寬度。 */
    width: 28px;
    /* 圖鑑項目的最小高度。 */
    min-height: 35px;
}

/* 第一關角色對話框：所有尺寸跟著角色欄與舞台比例縮放。 */
#game-layout.level-1 .character-dialogue {
    /* 對話框寬度跟隨角色欄比例。 */
    width: var(--level1-dialogue-width);
    /* 對話框高度上限，避免蓋住角色區。 */
    max-height: var(--level1-dialogue-max-height);
    /* 對話框內距。 */
    padding: var(--level1-dialogue-padding);
    /* 對話框邊框粗細。 */
    border-width: var(--level1-dialogue-border-width);
    /* 對話框圓角。 */
    border-radius: var(--level1-dialogue-radius);
}

/* 對話文字使用 em，會與對話框內距及邊框同步縮放。 */
#game-layout.level-1 .character-dialogue p {
    /* 對話文字大小。 */
    font-size: var(--level1-dialogue-font-size);
    /* 對話文字行高。 */
    line-height: 1.35;
}

/* 第一關橫向版面：任務區縮小約三分之一，空間分給左側角色區。 */
@media (orientation: landscape) {
    /* 橫向時：角色 40%、BOX 45%、任務 15%。 */
    #game-layout.level-1 {
        display: grid !important;
        grid-template-columns: 35% 57% 8%;
        grid-template-rows: 100%;
        overflow: hidden;
    }

    #game-layout.level-1 #character-panel {
        /* 左欄角色區。 */
        grid-column: 1;
        grid-row: 1;
    }

    #game-layout.level-1 #main-game-panel {
        /* 中央 BOX 區。 */
        grid-column: 2;
        grid-row: 1;
    }

    #game-layout.level-1 #future-panel {
        /* 右欄任務區。 */
        grid-column: 3;
        grid-row: 1;
    }
}

@media (orientation: landscape) and (max-height: 700px) {
    /* 矮螢幕橫向模式：此區原本是手機縮小值；固定設計框架會在檔案末端覆寫它。 */
    #game-layout.level-1 #main-game-panel {
        /* 手機橫向中央區內距。 */
        padding: 8px 4px;
    }

    #game-layout.level-1 #future-panel {
        /* 手機橫向任務欄內距。 */
        padding: 34px 8px 8px;
    }

    #game-layout.level-1 #info-panel {
        /* 手機橫向資訊列內距與間距。 */
        margin: 0;
        padding: 3px 6px;
        gap: 3px;
        transform: none;
    }

    #game-layout.level-1 #next-preview {
        /* 手機橫向 Next 預覽間距。 */
        gap: 3px;
        transform: none;
    }

    #game-layout.level-1 #next-image {
        /* 手機橫向 Next 圖示尺寸。 */
        width: 20px;
        height: 20px;
    }

    #game-layout.level-1 #evolution-progress {
        /* 手機橫向進化條寬度與文字大小。 */
        gap: 4px;
        font-size: 8px;
    }

    #game-layout.level-1 .evolution-progress-track {
        /* 手機橫向進化條寬度。 */
        width: 10px;
    }

    #game-layout.level-1 #dex-container {
        /* 手機橫向圖鑑高度、內距與項目間距。 */
        width: auto;
        max-width: none;
        height: min(100%, 300px);
        max-height: calc(100vh - 110px);
        margin: 0;
        padding: 2px 3px;
        gap: 0;
        border-radius: 5px;
    }

    #game-layout.level-1 .dex-item {
        /* 手機橫向圖鑑項目寬高。 */
        width: 22px;
        min-height: 20px;
    }

    #game-layout.level-1 .dex-circle {
        /* 手機橫向圖鑑球尺寸與邊框。 */
        width: 14px;
        height: 14px;
        margin-bottom: 1px;
        border-width: 1px;
    }

    #game-layout.level-1 .task-panel-header {
        /* 手機橫向任務標題區下方距離。 */
        margin-bottom: 8px;
    }

    #game-layout.level-1 .task-panel-header h2 {
        /* 手機橫向任務標題大小。 */
        margin-bottom: 2px;
        font-size: 15px;
    }

    #game-layout.level-1 .task-panel-header span {
        /* 手機橫向任務提示文字大小。 */
        font-size: 9px;
    }

    #game-layout.level-1 #task-list {
        /* 手機橫向任務卡片間距。 */
        gap: 6px;
    }

    #game-layout.level-1 .task-item {
        /* 手機橫向任務卡片內距與圓角。 */
        padding: 6px;
        border-radius: 5px;
    }

    #game-layout.level-1 .task-fruits {
        /* 手機橫向任務水果間距。 */
        gap: 4px;
        margin-bottom: 6px;
    }

    #game-layout.level-1 .task-fruit-dot {
        /* 手機橫向任務水果尺寸。 */
        width: 26px;
        height: 26px;
        flex-basis: 26px;
    }

    #game-layout.level-1 .task-complete-button {
        /* 手機橫向完成按鈕尺寸。 */
        padding: 5px 6px;
        font-size: 10px;
    }

    #game-layout.level-1 canvas {
        /* 手機橫向 BOX 寬度跟隨欄位，高度自動維持比例。 */
        width: 100%;
        height: auto;
        max-height: calc(100vh - 50px);
    }
}

/*
 * 固定設計框架
 * 第一關使用 1280x720 設計稿，瀏覽器只縮放整個遊戲框架。
 * 因此上方 media query 的手機縮小值，會在這裡被固定設計值覆寫。
 */
#game-layout.level-1 {
    /* 固定設計畫布寬度。 */
    display: grid !important;
    width: 1280px !important;
    /* 固定設計畫布高度。 */
    height: 720px !important;
    /* 固定設計稿的角色、BOX、任務三欄比例。 */
    /* 固定設計稿的三欄分配。 */
    grid-template-columns: 37.33% 44% 18.67%;
    /* 三欄填滿整個設計畫布高度。 */
    grid-template-rows: 100%;
    /* 禁止內容撐開固定畫布。 */
    overflow: hidden;
}

#game-layout.level-1 #character-panel,
#game-layout.level-1 #main-game-panel,
#game-layout.level-1 #future-panel {
    /* 三個主欄位不可因內容而超出固定框架。 */
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
}

#game-layout.level-1 #character-panel {
    /* 固定框架中的角色欄。 */
    grid-column: 1;
    grid-row: 1;
}

#game-layout.level-1 #main-game-panel {
    /* 固定框架中的 BOX 欄。 */
    grid-column: 2;
    grid-row: 1;
    padding: var(--level1-main-panel-padding);
}

#game-layout.level-1 .game-stage {
    /* 固定框架內不使用 viewport 最大尺寸限制。 */
    max-width: none;
    max-height: none;
}

#game-layout.level-1 #info-panel {
    /* 固定框架中的 GemoP/Next 間距。 */
    gap: 5px;
    padding: 4px 10px;
    font-size: var(--level1-info-font-size);
}

#game-layout.level-1 #next-preview {
    /* 固定框架中的 Next 預覽間距。 */
    gap: 4px;
    transform: none;
}

/* 固定框架中讓右上 GemoP/Next 整欄位水平置中。 */
#game-layout.level-1 #info-panel {
    justify-self: center;
    justify-items: center;
    width: max-content;
    text-align: center;
}

/* 固定框架中讓 Next 標題與球圖案保持正中央。 */
#game-layout.level-1 #next-preview {
    justify-self: center;
    align-self: center;
    transform: none;
}

#game-layout.level-1 #future-panel {
    /* 固定框架中的任務欄。 */
    grid-column: 3;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: var(--level1-future-panel-padding);
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
}

#game-layout.level-1 #future-panel > #info-panel {
    /* GemoP/Next 與第二關一樣置於任務區頂端。 */
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: max-content;
    margin: 0 auto 18px;
    padding: 8px 20px;
    transform: none;
    text-align: center;
    white-space: nowrap;
}

#game-layout.level-1 #future-panel > #info-panel .info-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

#game-layout.level-1 #future-panel > #info-panel #next-preview {
    transform: none;
}

#game-layout.level-1 #future-panel > #info-panel #next-image {
    width: 56px;
    height: 56px;
}

#game-layout.level-1 #future-panel > .task-panel-header {
    flex: 0 0 auto;
}

#game-layout.level-1 #future-panel > #task-list {
    flex: 0 0 auto;
}

#game-layout.level-1 canvas {
    /* 固定設計稿中的 BOX 高度。 */
    width: var(--level1-canvas-width);
    height: var(--level1-canvas-height);
    max-width: 100%;
    max-height: none;
}

#game-layout.level-1 #dex-container {
    /* 固定設計稿中的垂直圖鑑高度。 */
    height: var(--level1-dex-height);
    width: var(--level1-dex-width);
    max-height: none;
    padding: var(--level1-dex-padding);
    gap: var(--level1-dex-gap);
}

#game-layout.level-1 .dex-item {
    /* 固定框架中的圖鑑項目尺寸。 */
    width: var(--level1-dex-item-width);
    min-height: var(--level1-dex-item-height);
}

#game-layout.level-1 .dex-circle {
    /* 固定框架中的圖鑑球尺寸。 */
    width: var(--level1-dex-circle-size);
    height: var(--level1-dex-circle-size);
}

#game-layout.level-1 #evolution-progress {
    /* 固定框架中的進化條寬度、間距與文字大小。 */
    width: var(--level1-progress-width);
    gap: 8px;
    font-size: 10px;
}

#game-layout.level-1 .task-panel-header {
    /* 任務標題與任務列表的距離。 */
    margin-bottom: var(--level1-task-header-margin);
}

#game-layout.level-1 .task-panel-header h2 {
    /* 任務標題字體大小。 */
    margin-bottom: 4px;
    font-size: var(--level1-task-title-size);
}

#game-layout.level-1 .task-panel-header span {
    /* 任務提示字體大小。 */
    font-size: var(--level1-task-hint-size);
}

#game-layout.level-1 #task-list {
    /* 固定設計稿中的任務卡片間距。 */
    gap: var(--level1-task-gap);
}

#game-layout.level-1 .task-item {
    /* 固定設計稿中的任務卡片尺寸與圓角。 */
    padding: var(--level1-task-padding);
    border-radius: 8px;
}

#game-layout.level-1 .task-fruits {
    /* 固定設計稿中的任務水果排列間距。 */
    gap: var(--level1-task-fruit-gap);
    margin-bottom: var(--level1-task-fruit-margin);
}

#game-layout.level-1 .task-fruit-dot {
    /* 固定設計稿中的任務水果尺寸。 */
    width: var(--level1-task-fruit-size);
    height: var(--level1-task-fruit-size);
    flex-basis: var(--level1-task-fruit-size);
}

#game-layout.level-1 .task-complete-button {
    /* 固定設計稿中的完成按鈕內距與文字大小。 */
    padding: var(--level1-task-button-padding);
    font-size: var(--level1-task-button-font-size);
}

#game-layout.level-1 .game-menu {
    /* 固定設計稿中的遊戲選單位置。 */
    top: 18px;
    right: 22px;
}

#game-layout.level-1 .game-menu summary {
    /* 固定設計稿中的遊戲選單按鈕尺寸。 */
    padding: 8px 12px;
    font-size: 13px;
}

#game-layout.level-1 .evolution-progress-track {
    /* 固定設計稿中的進化條高度。 */
    height: var(--level1-progress-height);
}