/* ============================================================================
 * globalAdapt.css —— 全局一次性移动端适配底层（viewport 等比缩放方案）
 * ----------------------------------------------------------------------------
 * 配合 js/globalAdapt.js。JS 已把 viewport 逻辑宽锁成 390，浏览器自动等比缩放，
 * 故本 CSS 不需要 transform，只负责另外两层 + 宽屏居中：
 *   【第2层】视口高度：100vh → 100dvh，主体可滚，底部按钮永不被截断。
 *   【第3层】安全区：env(safe-area-inset-*) 让位刘海/灵动岛/底部手势条。
 *   【附加】平板/宽屏：逻辑宽 390 已由 JS 锁定，这里保证内容居中、两侧留边不拉伸。
 *
 * ⚠️ 不写死机型；纯原生 CSS。页面原有 px/样式全部不动。
 * ========================================================================== */

/* ------------------------------------------------------------------ *
 * 【全局禁用原生图片/链接拖拽】—— 配合 js/globalAdapt.js 的 dragstart 拦截，
 * 双保险根治「拖动装备图后点哪都进人物页 / 卡页 / 卡登录页」。
 * 全站无拖拽换装等需求，img/a 一律不可原生拖动。
 * ------------------------------------------------------------------ */
img, a {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

/* ------------------------------------------------------------------ *
 * 基础：html/body 占满可视区域。viewport 逻辑宽=390，此处宽度用 100%
 * 即等于 390 逻辑像素；高度用 100dvh 动态视口高（自动扣地址栏）。
 * ------------------------------------------------------------------ */
html.ga-root,
html.ga-root body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;      /* 老浏览器回退 */
    min-height: 100dvh;     /* 【第2层】动态视口高度，覆盖上一行 */
    overflow-x: hidden;     /* 逻辑宽恒 390，横向不溢出 */
}

/* ------------------------------------------------------------------ *
 * 【第3层】安全区避让
 * viewport-fit=cover 已由 JS 写入 meta，env() 变量此时有值。
 * 顶部/底部/左右内边距自动让位刘海、灵动岛、底部手势条、曲面边。
 * 加在 body 上：不影响页面内部写死 px 布局，只在最外层留出物理安全边。
 * ------------------------------------------------------------------ */
html.ga-root body {
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);

    /* 【第2层】主体纵向可滚：内容超一屏时可滚动，底部按钮不会被系统条盖住 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;   /* iOS 惯性滚动 */

    /* 修正：部分页面 body 用 flex+align-items:center 垂直居中，内容超屏时会把
       顶部裁掉且滚不到。这里把纵向对齐改为顶对齐，超高内容从顶部开始、可完整滚动。
       （不影响水平居中；页面内部布局不受影响） */
    align-items: flex-start;
}

/* ------------------------------------------------------------------ *
 * 【附加】平板 / 宽屏居中留边
 * JS 已把逻辑宽锁 390，宽屏上浏览器会把 390 页面放大铺满 —— 为避免超宽屏
 * (如横置平板)页面被过度放大，这里给 body 一个最大内容宽并水平居中，
 * 两侧留出背景色边，页面比例恒定、不拉伸变形。
 * 说明：多数手机逻辑宽=390 时此规则不触发（body 本就=390）；仅超宽设备生效。
 * ------------------------------------------------------------------ */
@media (min-aspect-ratio: 3/4) {
    /* 偏方/偏宽的屏幕（平板横屏、折叠屏展开）：内容居中，两侧留边 */
    html.ga-root body {
        max-width: 430px;      /* 内容最大宽度，略大于 390 容错；超出居中留边 */
        margin-left: auto;
        margin-right: auto;
        background: #0f1117;   /* 两侧留边底色，可按你主色调整 */
    }
}

/* ------------------------------------------------------------------ *
 * 【关键修复】全屏页面容器死高 667px → 动态视口高
 * ----------------------------------------------------------------------------
 * 各页最外层容器（.game-container / .login-container 等）历史上写死
 * height:375×667（照旧 iPhone 逻辑尺寸定的）。globalAdapt 只锁了逻辑宽=390 由
 * 浏览器等比放大，但高度仍是死的 667 → 放大后容器高常常超过手机"刨掉上下地址栏
 * 后的可见区"，加上 body 居中 + 容器 overflow:hidden，顶部底部同时被系统横条挡住
 * 且滚不出来。
 *
 * 修法：仅对顶层全屏态（html.ga-root；浮层嵌入态是 html.embed，由 embed.css 处理，
 * 不受此规则影响）把容器高度覆盖成 100dvh（动态视口高，地址栏收起/展开自动跟随，
 * 永不被横条挡）。宽度、body 顶对齐、min-height 已由上文规则处理，此处只管高度。
 * 各容器内部已有 flex:1+overflow:auto 的滚动区，压到实际可见高后内容不会被裁。
 * ------------------------------------------------------------------ */
html.ga-root .game-container,
html.ga-root .login-container,
html.ga-root .create-container,
html.ga-root .role-select-panel,
html.ga-root .bag-container,
html.ga-root .skill-container,
html.ga-root .set-container,
html.ga-root .char-container,
html.ga-root .tower-container {
    height: 100vh;              /* 老浏览器回退 */
    height: 100dvh;             /* 动态视口高：自动扣掉地址栏/工具栏，覆盖上一行 */
    max-height: 100vh;
    max-height: 100dvh;
}

/* ------------------------------------------------------------------ *
 * iframe 嵌入态（embed）：不自缩放，跟随父窗口已缩好的坐标系。
 * embedMode.js / 本 JS 已给这些页面 <html> 加 class="embed"。
 * 嵌入页在浮层里铺满、可滚、不叠加安全区（安全区由最外层父窗口处理）。
 * ------------------------------------------------------------------ */
html.embed,
html.embed body {
    margin: 0;
    padding: 0;                 /* 安全区归父窗口，嵌入态不再重复留白 */
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    background: transparent;
    max-width: none;            /* 覆盖上面的宽屏居中，嵌入态跟随浮层卡片宽 */
}