/* =========================================================
   Viewport Scaling（全局）— 預設使用穩定視口 svh/svw
   ========================================================= */

/* 1) 基礎回退 */
:root {
    --_vh: 100vh;
    --_vw: 100vw;
    /* 1% viewport units（給 JS/CSS 計算用） */
    --_1vh: 1vh;
    --_1vw: 1vw;
}

/* 2) 動態視口（先提供作為更精準回退） */
@supports (height: 100dvh) {
    :root {
        --_vh: 100dvh;
        --_1vh: 1dvh;
    }
}
@supports (width: 100dvw) {
    :root {
        --_vw: 100dvw;
        --_1vw: 1dvw;
    }
}

/* 3) 穩定視口（預設採用），需要最大再啟用 l* 覆蓋 */
@supports (height: 100svh) {
    :root {
        --_vh: 100svh;
        --_1vh: 1svh;
    }
}
@supports (width: 100svw) {
    :root {
        --_vw: 100svw;
        --_1vw: 1svw;
    }
}
/* 最大視口（如需「永遠最大」可打開）
  @supports (height: 100lvh) { :root { --_vh: 100lvh; } }
  @supports (width: 100lvw)  { :root { --_vw: 100lvw; } }
  */

/* 4) 設計尺寸與縮放計算（橫屏基準） */
:root {
    --design-w: 677;
    --design-h: 375;

    --vw: var(--_vw);
    --vh: var(--_vh);

    /* vfs = min(vw/設計寬, vh/設計高) */
    --vfs: min(calc(var(--vw) / var(--design-w)), calc(var(--vh) / var(--design-h)));
    --vfs-clamped: clamp(0.5px, var(--vfs), 4px);
    font-size: var(--vfs-clamped);

    /* 參考資訊 */
    --app-design-width: calc(var(--design-w) * 1px);
    --app-design-height: calc(var(--design-h) * 1px);
    --app-design-ratio: calc(var(--design-w) / var(--design-h));

    font-family:
        "Gilroy",
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        Arial,
        sans-serif;
}

/* 5) 型別註冊 */
@supports (property: --vfs) {
    @property --vfs {
        syntax: "<length>";
        inherits: true;
        initial-value: 1px;
    }
    @property --vfs-clamped {
        syntax: "<length>";
        inherits: true;
        initial-value: 1px;
    }
}

/* =========================================================
     策略快速切換（選用）
     ========================================================= */
:root.dynamic-vh {
    --_vh: 100dvh;
} /* 跟地址列/鍵盤 */
:root.max-vh {
    --_vh: 100lvh;
} /* 永遠最大 */
:root.dynamic-vw {
    --_vw: 100dvw;
}
:root.max-vw {
    --_vw: 100lvw;
}

/* =========================================================
     容器驅動（選用，局部縮放）
     ========================================================= */
.stage-scale {
    container-type: size;
    font-size: min(calc(100cqw / var(--design-w)), calc(100cqh / var(--design-h)));
}
.stage-scale.max-height {
    font-size: calc(100cqh / var(--design-h));
}
.stage-scale.clamped {
    font-size: clamp(
        0.5px,
        min(calc(100cqw / var(--design-w)), calc(100cqh / var(--design-h))),
        4px
    );
}

/* =========================================================
     iOS 安全區（選用）
     ========================================================= */
@supports (padding: env(safe-area-inset-top)) {
    :root {
        --safe-top: env(safe-area-inset-top);
        --safe-bottom: env(safe-area-inset-bottom);
        --safe-left: env(safe-area-inset-left);
        --safe-right: env(safe-area-inset-right);
    }
}
.safe-pads {
    padding-top: max(0px, var(--safe-top, 0px));
    padding-bottom: max(0px, var(--safe-bottom, 0px));
    padding-left: max(0px, var(--safe-left, 0px));
    padding-right: max(0px, var(--safe-right, 0px));
}

/* =========================================================
     Reset / 基礎
     ========================================================= */
:root::-webkit-scrollbar {
    display: none;
}
* {
    padding: 0;
    margin: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    box-sizing: border-box;
    user-select: none;
    touch-action: manipulation; /* 禁止雙擊放大、雙指縮放 */
    -ms-touch-action: manipulation;
    overscroll-behavior: none; /* 禁止滾動回彈 */
    /* 禁止文字被選取 */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    /* 手機點擊時不要出現藍色/灰色高亮 */
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

html {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    background-color: #000;
    min-height: var(--_vh);
    overflow: hidden;
    user-select: none;
    overscroll-behavior: none;
}
body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    flex: 1;
    overflow: hidden;
}
div#root {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* =========================================================
     Portrait（豎屏）：高當寬、寬當高，並旋轉整個 html 90deg
     ========================================================= */
@media (orientation: portrait) {
    :root {
        /* 交換參與縮放的視口值：用“高度作為寬度”、“寬度作為高度” */
        --vw: var(--_vh);
        --vh: var(--_vw);

        /* 旋轉時同步置換 1% 視口單位（方便你用 var(--_1vh) 做高度計算） */
        --_1vw: calc(var(--_vh) / 100);
        --_1vh: calc(var(--_vw) / 100);

        /* 以交換後的 vw/vh 重新計算縮放與字號 */
        --vfs: min(calc(var(--vw) / var(--design-w)), calc(var(--vh) / var(--design-h)));
        --vfs-clamped: clamp(0.5px, var(--vfs), 4px);
        font-size: var(--vfs-clamped);
    }

    /* 固定定位 + 經典旋轉置中：不裁切、完整鋪滿 */
    div#root {
        position: fixed;
        top: 0;
        left: 0;
        /* 使用原始物理視口，避免 100vh/100vw 偏差 */
        width: var(--_vh); /* 旋轉後的視覺寬（= 物理高） */
        height: var(--_vw); /* 旋轉後的視覺高（= 物理寬） */
        transform-origin: top left;
        transform: rotateZ(90deg) translateY(-100%);
        overflow: hidden;
        min-height: var(--_vw);
        min-width: var(--_vh);
    }

    /* 撐滿與無滾動 */
    html,
    body,
    #root {
        overflow: hidden;
    }
    body,
    #root {
        width: 100%;
        height: 100%;
    }
}

/* =========================================================
     Landscape（橫屏）：保持原設定（此區塊僅為明確性）
     ========================================================= */
@media (orientation: landscape) {
    :root {
        --vw: var(--_vw);
        --vh: var(--_vh);
        /* 橫屏保持原語意 */
        --_1vw: calc(var(--_vw) / 100);
        --_1vh: calc(var(--_vh) / 100);
        --vfs: min(calc(var(--vw) / var(--design-w)), calc(var(--vh) / var(--design-h)));
        --vfs-clamped: clamp(0.5px, var(--vfs), 4px);
        font-size: var(--vfs-clamped);
    }
    div#root {
        position: static;
        transform: none;
        overflow: hidden;
        min-height: var(--_vh);
        min-width: var(--_vw);
    }
}

/* =========================================================
     Button, Input, Select, etc.
     ========================================================= */
button,
input,
select,
textarea {
    border: none;
    outline: none;
    appearance: none;
    background: transparent;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    box-shadow: none;
    font-family: Inter;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px your-desired-color inset !important;
    -webkit-text-fill-color: your-desired-text-color !important;
    /* Optional: To prevent a transition effect if you are changing the background color */
    transition: background-color 5000s ease-in-out 0s;
}