/* 第二關專用介面：固定遊戲框架與合成圓環。 */
#game-layout.level-2 {
    /* 使用 Grid 固定第二關三欄版面，避免視窗縮放時重新排列。 */
    display: grid !important;
    /* 固定設計畫布寬度。 */
    width: 1280px !important;
    /* 固定設計畫布高度。 */
    height: 720px !important;
    /* 角色區、中央遊戲區、右側圓環區的寬度比例。右欄需容納約 224px 的圓環。 */
    grid-template-columns: 35% 40% 25% !important;
    /* 三個欄位填滿整個畫布高度。 */
    grid-template-rows: 100% !important;
    /* 禁止內容超出固定畫布。 */
    overflow: hidden !important;
    background-color: #071329;
    background-image:
        radial-gradient(circle at 16% 20%, rgba(91, 150, 255, 0.2) 0 1px, transparent 2px),
        radial-gradient(circle at 78% 24%, rgba(180, 224, 255, 0.28) 0 1px, transparent 2px),
        radial-gradient(circle at 54% 72%, rgba(91, 150, 255, 0.18) 0 1px, transparent 2px),
        radial-gradient(ellipse at 52% 40%, rgba(45, 96, 182, 0.3), transparent 42%),
        linear-gradient(135deg, #081a38 0%, #071126 52%, #10103a 100%);
    color: #dcecff;
}

#game-layout.level-2::before {
    background:
        repeating-linear-gradient(90deg, rgba(122, 177, 255, 0.06) 0 1px, transparent 1px 96px),
        repeating-linear-gradient(0deg, rgba(122, 177, 255, 0.05) 0 1px, transparent 1px 84px),
        linear-gradient(115deg, transparent 20%, rgba(66, 124, 220, 0.14) 48%, transparent 72%);
}

#game-layout.level-2::after {
    top: 8%;
    left: 4%;
    border-color: rgba(108, 173, 255, 0.35);
    background:
        linear-gradient(140deg, rgba(161, 211, 255, 0.16), transparent 52%),
        repeating-linear-gradient(0deg, #17345f 0 13px, #295589 13px 17px, #102849 17px 28px);
    box-shadow: 0 0 0 3px rgba(74, 135, 224, 0.14), 0 18px 30px rgba(0, 7, 24, 0.35);
}

#game-layout.level-2 .scene-accent {
    border-color: rgba(111, 184, 255, 0.45);
    background: repeating-linear-gradient(90deg, #1d4e89 0 88px, #4387c5 88px 104px, #77b9e8 104px 148px, #274875 148px 184px);
    box-shadow: 0 0 18px rgba(79, 159, 255, 0.24);
}

#game-layout.level-2 #character-panel,
#game-layout.level-2 #main-game-panel,
#game-layout.level-2 #future-panel {
    background: rgba(6, 18, 43, 0.38);
    border-color: rgba(112, 177, 255, 0.2);
}

#game-layout.level-2 #character-panel {
    box-shadow: inset -1px 0 0 rgba(123, 190, 255, 0.18);
}

#game-layout.level-2 #main-game-panel {
    box-shadow: inset 1px 0 0 rgba(123, 190, 255, 0.12), inset -1px 0 0 rgba(123, 190, 255, 0.12);
}

#game-layout.level-2 #future-panel {
    box-shadow: inset 1px 0 0 rgba(123, 190, 255, 0.18);
}

#game-layout.level-2 #info-panel,
#game-layout.level-2 .level2-info-panel {
    background: rgba(11, 31, 67, 0.82);
    border-color: rgba(115, 190, 255, 0.35);
    color: #dcecff;
    box-shadow: 0 0 22px rgba(36, 116, 219, 0.18);
}

#game-layout.level-2 .info-label,
#game-layout.level-2 #next-name,
#game-layout.level-2 #unlocked-count {
    color: #91caff;
}

#game-layout.level-2 .level2-recipe-ring {
    border-color: rgba(101, 170, 255, 0.42);
    background: rgba(10, 31, 70, 0.58);
    box-shadow: inset 0 0 28px rgba(47, 117, 219, 0.16), 0 0 20px rgba(28, 91, 190, 0.14);
}

#game-layout.level-2 .level2-recipe-circle {
    border-color: rgba(139, 201, 255, 0.62);
    background-color: rgba(15, 41, 83, 0.78);
    box-shadow: 0 0 10px rgba(75, 157, 255, 0.2);
}

#game-layout.level-2 .level2-recipe-item.recipe-ready .level2-recipe-circle {
    border-color: #ffd34e;
    box-shadow:
        0 0 0 5px rgba(255, 211, 78, 0.35),
        0 0 28px rgba(255, 211, 78, 1);
}

#game-layout.level-2 .level2-recipe-item.recipe-used:not(.recipe-ready) .level2-recipe-circle,
#game-layout.level-2 .level2-recipe-item[data-skill-used="true"]:not(.recipe-ready) .level2-recipe-circle {
    border-color: #73d66f;
    box-shadow:
        0 0 0 4px rgba(115, 214, 111, 0.45),
        0 0 26px rgba(115, 214, 111, 1);
}

#game-layout.level-2 .level2-recipe-center.recipe-used.recipe-ready .level2-recipe-circle {
    border-color: #73d66f;
    box-shadow:
        0 0 0 4px rgba(115, 214, 111, 0.45),
        0 0 0 9px rgba(255, 211, 78, 0.38),
        0 0 30px rgba(255, 211, 78, 1),
        0 0 42px rgba(115, 214, 111, 0.8);
}

#game-layout.level-2 .level2-recipe-center:not(.recipe-unlocked) {
    filter: grayscale(1) opacity(0.45);
}

#game-layout.level-2 .level2-recipe-center.recipe-unlocked {
    filter: none;
}

#game-layout.level-2 .level2-recipe-center.recipe-ready,
#game-layout.level-2 .level2-recipe-center.recipe-used {
    filter: none;
}

#game-layout.level-2 .level2-recipe-center[data-tooltip]::after {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    z-index: 20;
    width: 220px;
    padding: 8px 10px;
    border: 1px solid rgba(154, 207, 255, 0.55);
    border-radius: 6px;
    background: rgba(7, 18, 43, 0.86);
    box-shadow: 0 6px 18px rgba(0, 5, 20, 0.35);
    color: #e5f3ff;
    content: attr(data-tooltip);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(4px);
    transition: opacity 160ms ease, transform 160ms ease;
    visibility: hidden;
}

#game-layout.level-2 .level2-recipe-center[data-tooltip]:hover::after,
#game-layout.level-2 .level2-recipe-center[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    visibility: visible;
}

#game-layout.level-2 #character-panel,
#game-layout.level-2 #main-game-panel,
#game-layout.level-2 #future-panel {
    /* 允許欄位在固定 Grid 中縮小，不讓內容撐開畫布。 */
    min-width: 0;
    min-height: 0;
    /* 讓 padding 計入欄位設定尺寸。 */
    box-sizing: border-box;
}

#game-layout.level-2 #character-panel {
    /* 角色區放在第一欄第一列。 */
    grid-column: 1;
    grid-row: 1;
    /* 角色與欄位邊界的內距。 */
    padding: 40px;
}

#game-layout.level-2 #main-game-panel {
    /* 中央遊戲區放在第二欄第一列。 */
    grid-column: 2;
    grid-row: 1;
    /* 中央區內部再分成遊戲箱與垂直配置區。 */
    display: grid;
    /* 左側填滿剩餘寬度，右側依內容寬度配置。 */
    grid-template-columns: minmax(0, 1fr) auto;
    /* 第一列放資訊，第二列放遊戲箱。 */
    grid-template-rows: auto minmax(0, 1fr);
    /* 遊戲箱與右側內容的水平間距。 */
    column-gap: 8px;
    /* 中央遊戲區的上下、左右內距。 */
    padding: 20px 8px;
    /* 讓中央內容在欄位中水平置中。 */
    justify-content: center;
    /* 讓中央內容在欄位中垂直對齊。 */
    align-items: center;
}

#game-layout.level-2 #info-panel {
    /* 資訊列目前被 Level2UI 移到右側欄位，保留 Grid 定位作為未移動時的基準。 */
    grid-column: 2;
    grid-row: 1;
    /* GemoP 與 Next 在資訊列內垂直排列。 */
    display: flex;
    flex-direction: column;
    /* 資訊內容水平置中。 */
    align-items: center;
    /* 資訊內容垂直置中。 */
    justify-content: center;
    /* GemoP 與 Next 的間距。 */
    gap: 5px;
    /* 移除共用樣式可能帶入的外距。 */
    margin: 0;
    /* 資訊列內距。 */
    padding: 4px 10px;
    /* 依內容決定寬度，避免文字換行。 */
    width: max-content;
    /* 取消共用資訊列的位置偏移。 */
    transform: none;
    /* 資訊文字大小。 */
    font-size: 14px;
    /* 資訊文字置中。 */
    text-align: center;
    /* 禁止 GemoP / Next 文字換行。 */
    white-space: nowrap;
}

#game-layout.level-2 #next-preview {
    /* Next 標籤與預覽圖片的間距。 */
    gap: 4px;
    /* 取消共用樣式的位置偏移。 */
    transform: none;
}

#game-layout.level-2 .game-stage {
    /* 遊戲箱放在中央區第一欄第二列。 */
    grid-column: 1;
    grid-row: 2;
    /* 讓遊戲箱視覺上填滿中央區。 */
    width: 130%;
    /* 防止欄位內容撐開 Grid。 */
    min-width: 0;
    /* 不限制遊戲箱的最大寬度。 */
    max-width: none;
    /* 不限制遊戲箱的最大高度。 */
    max-height: none;
    /* 遊戲箱的固定位置偏移。 */
    transform: translate(-10px, 0px);
}

#game-layout.level-2 canvas {
    /* 遊戲畫布固定寬度。 */
    width: 440px;
    /* 遊戲畫布固定高度，內部比例為 2:3。 */
    height: 650px;
    /* 畫布仍不可超出中央欄位寬度。 */
    max-width: 100%;
    /* 不用視窗高度重新縮放畫布。 */
    max-height: none;
    /* 邊框計入畫布尺寸。 */
    box-sizing: border-box;
}

#game-layout.level-2 #dex-container {
    /* 第二關不使用第一關的底部/垂直圖鑑。 */
    display: none !important;
}

#game-layout.level-2 #future-panel {
    /* 右側合成區放在第三欄第一列。 */
    grid-column: 3;
    grid-row: 1;
    /* 右側資訊與兩個圓環上下排列。 */
    display: flex;
    flex-direction: column;
    /* 圓環與資訊水平置中。 */
    align-items: center;
    /* 僅保留垂直留白，避免水平 padding 壓縮圓環可用寬度。 */
    padding: 72px 0 24px !important;
    /* 不讓內容改變固定欄位高度。 */
    max-height: none;
    /* 允許固定尺寸圓環完整顯示，必要時只在垂直方向捲動。 */
    overflow-x: visible;
    overflow-y: auto;
    /* 取消會把整個右欄推到畫布外的水平位移。 */
    transform: none;
}

#game-layout.level-2 #future-panel > .level2-info-panel {
    /* 資訊列不參與圓環區的壓縮。 */
    flex: 0 0 auto;
    /* GemoP / Next 垂直排列。 */
    display: flex;
    flex-direction: column;
    /* 資訊內容水平置中。 */
    align-items: center;
    /* 資訊內容垂直置中。 */
    justify-content: center;
    /* GemoP 與 Next 的垂直間距。 */
    gap: 16px;
    /* 依內容決定資訊列寬度。 */
    width: max-content;
    /* 與第一個圓環的下方間距。 */
    margin: 0 auto 18px;
    /* 資訊列內距。 */
    padding: 8px 20px;
    /* 取消其他資訊列定位。 */
    transform: none !important;
    /* 資訊文字大小。 */
    font-size: 28px;
    /* 禁止文字換行。 */
    white-space: nowrap;
}

#game-layout.level-2 #future-panel > .level2-info-panel .info-item {
    /* GemoP / Next 各自水平排列標籤與內容。 */
    display: flex;
    /* 垂直方向置中。 */
    align-items: center;
    /* 水平方向置中。 */
    justify-content: center;
    /* 標籤與數值/圖片間距。 */
    gap: 10px;
}

#game-layout.level-2 #future-panel > .level2-info-panel #next-preview {
    /* 取消 Next 元件原本的位移。 */
    transform: none !important;
}

#game-layout.level-2 #future-panel > .level2-info-panel #next-image {
    /* Next 預覽圖與資訊列同步放大。 */
    width: 56px;
    height: 56px;
}

#game-layout.level-2 #level2-recipe-dex {
    /* 兩個圓環不參與右側欄位的彈性壓縮。 */
    flex: 0 0 auto;
    /* 圓環容器在右側欄位中水平置中。 */
    margin: 0 auto;
}