/* ============================================================
   六爻智慧 · 移动端增强组件 v1.0
   统一适配 iPhone/Android 触控体验、安全区、滚动、键盘避让
   ============================================================ */

/* ===== 1. iOS 安全区适配（刘海屏）===== */
@supports (padding: max(0px)) {
    body {
        padding-top: max(0px, env(safe-area-inset-top));
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }
    .container {
        padding-bottom: max(1.5rem, env(safe-area-inset-bottom)) !important;
    }
}

/* ===== 2. 触控目标最小尺寸（Apple HIG: 44pt × 44pt）===== */
@media (max-width: 768px) and (pointer: coarse) {
    button:not(.my-opt):not(.toss-undo-btn):not(.mode-btn),
    .btn,
    a.tool-link,
    .nav a {
        min-height: 44px;
        min-width: 44px;
        touch-action: manipulation;
    }
    /* 小按钮特例：在移动端把 padding 提升 */
    .my-opt, .toss-undo-btn, .mode-btn {
        min-height: 38px;
        touch-action: manipulation;
    }
}

/* ===== 3. 输入框：防止 iOS 自动缩放 ===== */
@media (max-width: 768px) {
    input[type="text"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="number"],
    input[type="email"],
    input[type="tel"],
    select,
    textarea {
        font-size: 16px !important; /* < 16px 会触发 iOS 缩放 */
    }
}

/* ===== 4. 滚动惯性 + 隐藏滚动条 ===== */
body, html {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

/* ===== 5. 禁用双击缩放，但保留双指捏合 ===== */
html {
    touch-action: manipulation;
}

/* ===== 6. 全局按钮触控反馈 ===== */
@media (pointer: coarse) {
    .btn:active,
    button:active,
    .grid-card:active,
    .category-item:active,
    .sub-item:active,
    .coin:active,
    .my-opt:active,
    .tool-card:active {
        transform: scale(0.97) !important;
        transition: transform 0.08s ease-out !important;
    }
    .tool-card:active {
        transform: scale(0.98) !important;
    }
}

/* ===== 7. 长按禁止系统弹出菜单（铜钱/按钮）===== */
.coin, .grid-card, .my-opt, .gua-board, .btn {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* ===== 8. 隐藏点击高亮（保留我们自定义的 active 反馈）===== */
* {
    -webkit-tap-highlight-color: transparent;
}

/* ===== 9. 加载骨架（首屏未渲染时）===== */
.skeleton-loader {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, #f5f0e8 0%, #faf6ed 50%, #f5f0e8 100%);
    background-size: 200% 100%;
    animation: skLoading 1.5s linear infinite;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Ma Shan Zheng', serif;
    font-size: 1.5rem;
    color: var(--vermilion, #c41e3a);
}
.skeleton-loader.hide {
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}
@keyframes skLoading {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ===== 10. 软键盘弹出时，输入框自动滚动到可视区域 ===== */
@media (max-width: 768px) {
    input:focus, textarea:focus, select:focus {
        scroll-margin-top: 80px;
        scroll-margin-bottom: 120px;
    }
}

/* ===== 11. 卡片在移动端的边距收紧 ===== */
@media (max-width: 480px) {
    .card {
        padding: 1.1rem 0.9rem !important;
        margin-bottom: 1rem !important;
        border-radius: 10px !important;
    }
    .card-title {
        font-size: 1.25rem !important;
        margin-bottom: 1rem !important;
    }
    .container {
        padding: 0.8rem 0.6rem !important;
    }
}

/* ===== 12. 横屏适配（手机横放时压缩纵向间距）===== */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    .hero { padding: 1rem 0 !important; }
    .hero h1 { font-size: 1.8rem !important; }
    .card { padding: 0.8rem !important; }
    .coin { width: 60px !important; height: 60px !important; }
}

/* ===== 13. 长按提示气泡 ===== */
.touch-hint {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.85);
    color: #fff;
    padding: 0.6rem 1.2rem;
    border-radius: 20px;
    font-size: 0.9rem;
    z-index: 9998;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.touch-hint.show { opacity: 1; }

/* ===== 14. 网络慢时的等待提示 ===== */
.slow-network-tip {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(243, 156, 18, 0.95);
    color: #fff;
    padding: 0.6rem 1.4rem;
    border-radius: 20px;
    font-size: 0.85rem;
    z-index: 9997;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: slowTipDown 0.4s ease-out;
}
@keyframes slowTipDown {
    from { transform: translate(-50%, -100px); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}