/* ============================================================ */
/* 全局基础 —— 适配平板 / 横屏 / 全屏                            */
/* ============================================================ */

/*
 * 关键说明：
 *   - 目标设备:Android 平板(项目说明文档写明)
 *   - 屏幕方向:强制横屏
 *   - 操作:仅点击 / 拖拽,无复杂手势
 *   - 用户:3-4 岁幼儿,经常误触
 *
 * 因此 CSS 需要：
 *   1) 禁用系统级手势(双指缩放/双击放大/下拉刷新/滑动返回)
 *   2) 禁用文字选择 / 长按弹菜单
 *   3) 页面 fixed 定位,杜绝橡皮筋滚动
 *   4) 用 dynamic viewport 高度(100dvh)处理移动浏览器地址栏
 *   5) 隐藏滚动条
 *   6) v2.1 2026-07-24: 移除 safe-area padding,内容撑满整个 webview
 *      (Phaser Scale.FIT + CSS 渐变背景已经处理了 letterbox,
 *      safe-area padding 反而导致底部留黑边/白边)
 */

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    width: 100vw;
    height: 100%;
    height: 100vh;
    height: 100dvh;
    height: -webkit-fill-available;
    overflow: hidden;
    color: #ffffff;
    font-family: 'Microsoft YaHei', 'PingFang SC', 'Heiti SC', Arial, sans-serif;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    inset: 0;

    /* ----- 关键:禁用所有会"打断游戏"的手势 ----- */
    touch-action: none;                    /* 禁止双指缩放/双击放大/滚动 */
    -webkit-touch-callout: none;           /* 禁止 iOS 长按弹菜单 */
    -webkit-user-select: none;             /* 禁止文字选中 */
    user-select: none;
    -webkit-tap-highlight-color: transparent; /* 禁止 Android 点击高亮 */
    overscroll-behavior: none;             /* 禁止下拉刷新 / 滑动返回 */
}

/* ============================================================ */
/* 背景延伸 —— 消除横屏 letterbox 留白                            */
/* ------------------------------------------------------------ */
/* Phaser canvas 16:9 FIT,手机横屏宽于 16:9 时,canvas 两侧出现 */
/* letterbox 留白。纯色留白跟 canvas 内丰富的渐变+装饰对比,视觉 */
/* 跳出。                                                       */
/*                                                            */
/* 修复:用 CSS 渐变 + 右上光晕模拟 Phaser 内的背景延伸,让 letterbox */
/* 区域跟 canvas 内看起来"是一个整体"。                          */
/*                                                            */
/* 颜色由 JS 端 syncPageBackground 动态设置 (CSS 变量):        */
/*   --bg-start  顶部颜色 (lighten(p.bg, 0.12))                */
/*   --bg        主底色 (p.bg)                                  */
/*   --bg-end    底部颜色 (darken(p.bg, 0.05))                 */
/*   --glow      右上光晕 (p.primary @ 12% alpha)              */
/*                                                            */
/* background-attachment: fixed 让背景不随滚动变化(虽然也不滚)。*/
/* transition 让切场景时颜色平滑过渡。                          */
/* ============================================================ */
body {
    background-color: #fff5f2;
    background-image:
        /* 右上光晕 —— 模拟 canvas 内 W+80, -80 位置的 280px 柔边圆 */
        radial-gradient(
            circle at 95% 0%,
            var(--glow, rgba(255, 181, 167, 0.18)) 0%,
            transparent 45%
        ),
        /* 左上小光晕 —— 模拟 c2 (W-100, 60, 140px @ 20% alpha) */
        radial-gradient(
            circle at 5% 8%,
            var(--glow-2, rgba(255, 212, 204, 0.22)) 0%,
            transparent 40%
        ),
        /* 主渐变:顶亮底暗 —— 跟 drawBackground 的 16 段渐变方向一致 */
        linear-gradient(
            180deg,
            var(--bg-start, #fffaf5) 0%,
            var(--bg, #fff5f2) 50%,
            var(--bg-end, #f5ebe2) 100%
        );
    background-attachment: fixed;
    transition: background 0.4s ease;
}

/* 整个文档 + canvas 都不允许拖动选中 */
html, body, canvas, * {
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

/* 隐藏滚动条(万一子元素出现滚动) */
::-webkit-scrollbar {
    display: none;
}
* {
    scrollbar-width: none;
}

/* ============================================================ */
/* #app —— 根容器,占满全屏,flex 居中放游戏画布                  */
/* ============================================================ */

#app {
    /* v2.1 2026-07-24: 彻底撑满,不使用 viewport 单位(vh/dvh),
       直接用 100% + fixed + inset:0 确保覆盖整个 webview
       (某些 Android WebView 中 vh/dvh 不包含导航栏区域,
       导致底部留白;100% 直接继承父元素(webview)的高度) */
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    inset: 0;              /* top/right/bottom/left:0 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: stretch;

    /* v2.1 2026-07-24: 移除 safe-area padding,游戏内容直接撑满到屏幕边缘
       Phaser Scale.FIT 会自动适配,letterbox 区域由 CSS 渐变背景填充
       之前 env(safe-area-inset-bottom) 会在底部留白,在沉浸式模式下
       这个留白变成黑条 */
    padding: 0;
    margin: 0;

    box-sizing: border-box;
}

/* ============================================================ */
/* #game-container —— Phaser 画布的宿主 div                     */
/* ============================================================ */

/*
 * Phaser 的画布会被插入到 #game-container 内部。
 * 我们让它**填满整个父容器 (#app)**,这样画布会占满整个视口。
 * 配合 Phaser 的 Scale.FIT 模式:
 *   - 画布尺寸 = 视口尺寸(平板 1280×800、1920×1200 等都能撑满)
 *   - 4:3 的 1024×768 游戏世界居中显示
 *   - 上下 / 左右多出来的"letterbox 区域"由 Phaser 的 backgroundColor 填充
 *
 * 所以 #game-container 必须显式拉满,而不是固定 1024×768(否则平板上画布周围
 * 还会露出 body 背景 —— 用户反馈"外面有东西"就是因为这个)。
 */
#game-container {
    width: 100%;
    height: 100%;
    flex: 1;
    position: relative;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}

/* v2.1 2026-07-24: canvas 是 inline 元素,默认 baseline 对齐会在底部留 2-3px 缝隙,
   改成 block 彻底消除底部缝隙 */
canvas {
    display: block;
}