/* ============================================================
    全域 UI 環境架構系統
   ============================================================ */

/* ─────────────────────────────────────────────
    §1 全域重置
    目的：移除瀏覽器預設干擾，讓尺寸計算可預期
   ───────────────────────────────────────────── */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-anchor: none; /* 避免 scroll anchoring 造成跳動 */
}

/* ─────────────────────────────────────────────
    §2 視窗層
    類似Unity MainCamera拍攝出的畫面，是整個「場景」的最底層 
    目的：尺寸至少等於 viewport(視窗)，所有 UI 在此之內
   ───────────────────────────────────────────── */
.scene {
    --base-ratio: 390/659;
    width: 100%;
    min-height: max(100svh, calc(100vw / (var(--base-ratio))));
    height: auto;
    
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ─────────────────────────────────────────────
    §3 Container Query 邊界
    類似Unity的Canvas，是UI最外層的根容器
    目的：1. 填滿 scene，建立 absolute 參考座標 
            2. 讓子元素使用 cqw / cqh / @container
   ───────────────────────────────────────────── */
.content-frame {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    container-type: inline-size;
    align-items: center;
    min-height: 100%;
}

/* ─────────────────────────────────────────────
    §4 背景層
    主要顯示已被限制寬度後的底層，類似 Unity SkyBox
    目的：不參與 layout，不攔截事件，固定在容器內
   ───────────────────────────────────────────── */
.bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1; /* 設定層級順序，確保此層為最底層 */ 
    background: no-repeat center top / cover;   /* 設定底層背景，參數依序為 圖片路徑 重複方式 貼齊位置 /圖片尺寸 */
}

/* ─────────────────────────────────────────────
    §5 三段式背景容器
    目的：1. 讓三段式背景隨內容滾動，但不佔 layout flow
            2. 高度跟著 content-frame 撐高
   ───────────────────────────────────────────── */
.bg-scroll {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100cqh;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    display: flex;
    flex-direction: column;
}
/* ─────────────────────────────────────────────
    §6 背景拼接系統
    三段式背景（上半圖 / 延伸圖 / 下半圖）
    目的：適應不同內容高度
   ───────────────────────────────────────────── */

/* 共用設定 */
.bg-top,
.bg-fill,
.bg-bottom {
    width: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    margin-top: -1px; /* 消除拼接縫隙 */
}

/* 上半圖 & 下半圖：固定比例 */
.bg-top,
.bg-bottom {
    aspect-ratio: 390 / 659;
}

/* 延伸區：縱向 repeat，flex 填滿剩餘空間 */
.bg-fill {
    background-repeat: repeat-y;
    flex: 1;
}

/* ─────────────────────────────────────────────
    §7 PC 模式
    目的：桌機時固定 viewport，居中顯示 UI，內容內部 scroll
   ───────────────────────────────────────────── */
@media (min-width: 1024px) {
    .scene {
        height: 100vh;
        min-height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .bg-layer,
    .content-frame {
        width: auto;
        aspect-ratio: var(--base-ratio);
        min-height: 100vh;
        overflow: visible;
    }
    .content-frame{
        /* 外圍添加陰影，以加強和底層區別 */
        box-shadow: 0 0 30px rgba(0,0,0,0.5);
    }
}

/* ─────────────────────────────────────────────
    §8 DOM 架構備註（供開發者參考）

    body
        └ .scene                    §2 視窗層            
            └ .content-frame            §3 container query 邊界
                ├ .bg-layer                 §4 固定滿版背景（absolute，不隨 scroll 移動）
                ├ .bg-scroll                §5 三段式背景容器（absolute，隨 content-frame 撐高）
                │   ├ .bg-top                   §6 上半圖
                │   ├ .bg-fill                  §6 延伸區
                │   └ .bg-bottom                §6 下半圖
                └ UI Content            z-index 高於 bg-scroll

   ───────────────────────────────────────────── *