/* ===== [GROUP] 01. 基礎環境設定 (Environment) ===== */

/* 全域 */
* {
    /* 去除邊距，達到不出現白邊的效果 */
    margin: 0;        /* 外邊距 */
    padding: 0;       /* 內邊距 */
    /* 設定尺寸定義邏輯，尺寸會固定不動，確保布局百分比絕對精確 */
    box-sizing: border-box; 
    
}
/* 環境底層 */
html, body {
    /* 再次重設邊距 */
    margin: 0;
    padding: 0;
}
/* 畫布 */
/* 類似Unity MainCamera拍攝出的畫面，是整個「場景」的最底層 */
.canvas {
    /* 定義變數 */
    --base-ratio: 1170 / 1977;

    /* 設定尺寸 */
    width: 100%;            /* 跟隨父層(body)撐滿，不包含捲軸寬度，最穩定 */
    min-height: 100vh;      /* 強制等於「瀏覽器視窗高度」*/
    /* 設定佈局 */
    display: flex;          /* 使用佈局模式 (Layout Group) */
    flex-direction: column; /* 方向是縱向的 (Vertical Layout Group) */
    align-items: center;    /* 水平置中 (Child Alignment: Middle Center) */    
    overflow: hidden;       /* 不顯示滑桿*/
}
/* 畫布框架 */
/* 類似Unity的Canvas，是UI最外層的根容器，負責定義顯示畫面的最大寬度 */
/* 會隨滑動而滾動 */
.canvas-wrapper {
    /* 設定尺寸 */
    width: 100%;
    /* 設定最小高度為：寬度 * (1977/1170) */
    min-height: 100vh;    /* 設定佈局 */
    display: flex;
    flex-direction: column;
    /* 設定座標基準點
       1. 使內部「絕對定位(absolute)」的子物件，改以本容器左上角為座標原點 (0,0)
       2. 類比 Unity：將此物件視為父層 RectTransform，建立子物件的 Anchor 參考範圍 */
    position: relative;
    container-type: inline-size;
    height: auto; /* 允許隨內容伸展 */
    overflow-y: auto;
}
/* 環境底層背景 */
/* 主要顯示已被限制寬度後的底層，類似 Unity SkyBox */
/* 固定在原位，不會滾動 */
.environment-bg{
    /* 設定位置完全對齊父層 */
    position: fixed;
    top: 0;
    /* 設定尺寸和父層一樣 */
    width: 100%;
    min-height: 100vh;
    /* 不攔截滑鼠事件 */
    pointer-events: none;   /* 類比 Unity: 取消 Raycast Target */
    /* 設定層級順序，確保此層為最底層 */ 
    z-index: 0; /* 類比 Unity: Sorting Order */
    /* 設定底層背景 */
    /* 簡寫參數依序為 圖片路徑 重複方式 貼齊位置 /圖片尺寸 */
    background: none no-repeat center top / cover;
}

/* ===== [GROUP] 02. 背景設定 (Background) ===== */
/* 背景共用設定 */
.bg-top, .bg-extension, .bg-bottom{
    /* 尺寸 */
    width: 100%;
    /* 圖片參數，依序為 重複方式 貼齊位置 圖片尺寸 */
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    /* 縫隙補丁 */
    /* 渲染兩個緊鄰的區塊時，中間偶爾會出現一條極細的縫隙，
    所以讓下方的延伸區「往上疊 1 像素」，強制覆蓋掉縫隙 */
    margin-top: -1px;
}

/* 背景 - 上半部 & 下半部 */
.bg-top, .bg-bottom {    
    /* 設定圖片比例，預設為 1170 * 1977 */
    aspect-ratio: 1170/1977;
}
/* 背景 - 延伸補丁 */
.bg-extension {      
    /* 設定圖片垂直重複 */
    background-repeat: repeat-y; 
    /* 自動填滿剩餘空間 */
    flex: 1;     
}

/* ===== [GROUP] 03. 電腦版設定 (PC) ===== */
@media (min-width: 1024px) {
    .canvas {
        /* 設定尺寸，高度固定為視窗高度、寬度滿版 */
        height: 100vh;
        overflow: hidden;   /* 不允許出現捲軸 */
        align-items: center; 
    }
    .environment-bg, .canvas-wrapper {
        /* 設定尺寸，高度固定為視窗高度、寬度依比例自適應 */
        width: auto;
        aspect-ratio: var(--base-ratio); 
        min-height: 100vh; /* 至少要滿版 */
        height: auto;      /* 但允許被內容撐高 */
        overflow-y: auto;  /* 內容多時產生內部捲軸 */  
        
    }
    .environment-bg {
        /* 修正 fixed 物件在 PC 版的位置，使其置中 */
        left: 50%;    
        transform: translateX(-50%);
    }
    .canvas-wrapper{
        /* 外圍添加陰影，以加強和底層區別 */
        box-shadow: 0 0 30px rgba(0,0,0,0.5);
    }

    .bg-top, .bg-extension, .bg-bottom {
        /* 不再自主決定寬度，而是百分之百填滿由 .bg-wrapper 限制出的寬度 */
        width: 100%;
    }
}