/* css/wechat-guide.css —— 微信内置浏览器引导遮罩（2026-10-23 定稿 PNG 整图方案）
 *
 * UI 形态：全屏深色引导图（WechatMark 的 open-mark 系列 PNG），箭头指向右上角
 *   「···」，两步文字烤在图里。市场已教育用户，看到即懂。
 *   无「仍要在微信中继续」穿透口：点遮罩任意处即关闭，下次照拦。
 *
 * z-index：10020，高于登录弹层 .lm-mask（10010）。两者实际不会同时出现
 * （遮罩弹起时登录框还没开），但留一级余量，防止未来改动让它们同屏。
 */

.wg-mask {
    position: fixed;
    inset: 0;
    z-index: 10020;
    background: #323232;        /* 与引导图底色 rgb(50,50,50) 一致：contain 时屏幕多出的底部
                                   区域无缝衔接（勿改纯黑——高瘦屏会露出分界） */
    display: flex;
    align-items: stretch;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease-out, visibility .2s ease-out;
}

.wg-mask.is-open {
    opacity: 1;
    visibility: visible;
}

/* 引导图：等比缩放、顶对齐。
 * 图源 720×1280（9:16），而现代手机视口更瘦长（约 9:19.5~9:22）。
 * 不能用 object-fit:fill——会把图纵向拉长，图里的圆变竖椭圆
 * （2026-10-23 微信实机截图反馈）。改用 contain：宽度铺满、高度按比例，
 * 视口多出的底部是遮罩的纯黑背景，与图片黑底无缝衔接，肉眼不可见；
 * object-position:top 让图片顶边贴住视口顶边，右上角箭头正对
 * 原生标题栏里那颗真实的「···」。 */
.wg-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
    display: block;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}