/* ============================================================================
 * qdmp-mobile.css — 千岛小程序 手机 / 平板 适配层
 * ----------------------------------------------------------------------------
 * 这是一个「纯新增」文件。它不覆盖、不删除游戏原有的任何一条布局规则。
 * 所有规则都挂在 html.qdmp-mobile 之下 —— 桌面端不会加上这个 class，
 * 因此桌面浏览器里的表现和原版一模一样。
 *
 * 缩放策略：不用 transform: scale()，而是改写 viewport meta 的虚拟宽度。
 * 这样 window.innerWidth / innerHeight / 100vw / 100vh 全部自动跟着变，
 * 游戏原有的窗口居中、图标吸附网格逻辑一行都不用动就能正确工作。
 * ========================================================================== */

/* --- 竖屏遮罩底色 ------------------------------------------------------------
 * 用 html::before 画，纯 CSS 首帧就生效，不等 JS 建 DOM，
 * 避免竖屏进来时先闪一眼被压扁的桌面。
 * 配色取自 pc.css 里 body 的原始渐变，看起来就像系统自己的桌面底。 */
html.qdmp-mobile.qdmp-portrait::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #005A9E;
    background-image: radial-gradient(circle at bottom right, #0078D7, #001A68);
    z-index: 2147483000;
}

/* --- 触摸端基础硬化 --------------------------------------------------------- */
html.qdmp-mobile,
html.qdmp-mobile body {
    overscroll-behavior: none;          /* 关掉下拉刷新 / 橡皮筋回弹 */
    -webkit-text-size-adjust: 100%;     /* 禁止 WebView 自作主张放大字号 */
    text-size-adjust: 100%;
}

html.qdmp-mobile body {
    touch-action: manipulation;         /* 去掉 300ms 点击延迟，双击更跟手 */
}

html.qdmp-mobile * {
    -webkit-tap-highlight-color: transparent;   /* 去掉安卓点一下的灰色方块 */
}

/* 拖拽把手：不许滚动、不许长按弹「拷贝/查找」气泡 */
html.qdmp-mobile .desktop-icon,
html.qdmp-mobile .title-bar,
html.qdmp-mobile #wechat-call-header {
    touch-action: none;
    -webkit-touch-callout: none;
}

/* 输入框反而要允许选中，否则手机上没法改密码 */
html.qdmp-mobile input,
html.qdmp-mobile textarea {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

/* ============================================================================
 * 竖屏提示对话框
 * ----------------------------------------------------------------------------
 * 样式逐条对齐 pc.css 里游戏自带的 .win-modal-* （同样的 400px 宽、
 * #0078D7 边框、白色标题栏、#f0f0f0 页脚、#e1e1e1 按钮），
 * 让它看起来就是这台「电脑」自己弹出来的系统对话框。
 * ========================================================================== */
#qdmp-rotate {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2147483001;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
}

html.qdmp-mobile.qdmp-portrait #qdmp-rotate {
    display: flex;
}

#qdmp-rotate .qdmp-rotate-box {
    width: 400px;
    max-width: 100%;
    background: #fff;
    border: 1px solid #0078D7;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    animation: qdmp-modal-in 0.16s ease-out;
}

@keyframes qdmp-modal-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

#qdmp-rotate .qdmp-rotate-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    background: #fff;
    font-size: 12px;
    color: #000;
}

#qdmp-rotate .qdmp-rotate-title .qdmp-x {
    border: none;
    background: transparent;
    width: 30px;
    height: 25px;
    font-size: 12px;
    line-height: 1;
    color: #666;
    padding: 0;
}

#qdmp-rotate .qdmp-rotate-body {
    display: flex;
    padding: 20px;
    gap: 15px;
    background: #fff;
    align-items: flex-start;
}

#qdmp-rotate .qdmp-rotate-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    margin-top: 2px;
}

#qdmp-rotate .qdmp-rotate-icon svg {
    display: block;
    width: 42px;
    height: 42px;
}

#qdmp-rotate .qdmp-rotate-head {
    font-size: 15px;
    color: #003399;
    line-height: 1.4;
    margin-bottom: 8px;
}

#qdmp-rotate .qdmp-rotate-sub {
    font-size: 13px;
    color: #333;
    line-height: 1.6;
}

#qdmp-rotate .qdmp-rotate-hint {
    font-size: 12px;
    color: #767676;
    line-height: 1.6;
    margin-top: 10px;
}

#qdmp-rotate .qdmp-rotate-footer {
    background: #f0f0f0;
    padding: 12px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #dfdfdf;
}

#qdmp-rotate .qdmp-rotate-ok {
    padding: 4px 25px;
    font-size: 13px;
    font-family: inherit;
    background: #e1e1e1;
    border: 1px solid #adadad;
    color: #6d6d6d;
}