/* ============================================================
   Mobile patch v1.0 - 手机端适配补丁 (2026-09-13)
   必须在 style.css 之后加载，用于修正小屏布局问题
   ============================================================ */

/* ---------- 全局防溢出 ---------- */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}
body, .container, .nav-container,
.match-input-section, .matches-section, .results-section {
    min-width: 0;
    box-sizing: border-box;
}
img, svg { max-width: 100%; }

/* 关键修复：header 网格子项最小宽度归零——
   否则 cases-table 的 min-width 会把整个 header 布局连坐撑爆到 700px+ */
.header-layout,
.header-layout > *,
.hero-section,
.success-cases,
.cases-table-container {
    min-width: 0;
    max-width: 100%;
}
.cases-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.cases-table-container table {
    max-width: none;  /* 表格自身保持内容宽度，在容器内滑动 */
}

/* 输入框 16px，防止 iOS 聚焦时自动放大页面 */
input, select, textarea {
    font-size: 16px;
    max-width: 100%;
}

/* ---------- 顶部导航（改 sticky，高度自适应） ---------- */
@media (max-width: 820px) {
    .navbar {
        position: sticky !important;
        height: auto !important;
        min-height: 60px;
    }
    body { padding-top: 0 !important; }
    .nav-container {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.6rem 0.75rem;
    }
    .nav-brand { font-size: 1.1rem; }
    .nav-menu { width: 100%; gap: 0.4rem; }
    .nav-btn {
        flex: 1;
        padding: 0.5rem 0.3rem;
        min-height: 44px;
        justify-content: center;
    }
    .nav-btn span { font-size: 0.78rem; }
    .nav-user {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .user-details { display: none; }  /* 小屏隐藏用户名详情，保留头像与退出 */
    .predictions-remaining { display: none; }
}

/* ---------- 页头 / 成功案例 ---------- */
@media (max-width: 820px) {
    .header-layout {
        grid-template-columns: 1fr !important;
        padding: 1rem;
        gap: 1rem;
    }
    .hero-section { padding: 1rem; }
    .hero-section h1 { font-size: 1.6rem; }
    .usage-guide { padding: 0.75rem; }
    .success-cases { padding: 1rem; }
    .cases-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 8px;
    }
    .cases-table { min-width: 640px; }  /* 保持可读宽度，容器内横向滑动 */
    .cases-stats {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.5rem;
    }
    .stat-number { font-size: 1.4rem; }
    .stat-label { font-size: 0.68rem; }
}

/* ---------- 模式区块 / 表单 ---------- */
@media (max-width: 820px) {
    .classic-layout, .lottery-layout, .ai-layout,
    .individual-results {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
    .classic-layout > *, .lottery-layout > *, .ai-layout > *,
    .individual-results > *, .cases-stats > * {
        min-width: 0;
        max-width: 100%;
    }
    .match-input-section { padding: 1rem !important; }
    .match-selection-panel, .selected-matches-panel,
    .lottery-matches-panel, .lottery-cart-panel {
        padding: 1rem !important;
    }
    .form-row { grid-template-columns: 1fr !important; gap: 0.75rem; }
    .odds-row { grid-template-columns: repeat(3, 1fr) !important; gap: 0.5rem; }
    .form-group { margin-bottom: 0.5rem; }
    input, select { width: 100%; }
    .classic-actions, .action-buttons {
        flex-direction: column;
        gap: 0.5rem;
    }
    .classic-actions .btn, .action-buttons .btn { width: 100%; }
    .controls-row { gap: 0.5rem; }
    .controls-row .btn {
        flex: 1 1 auto;
        min-width: 0;
        white-space: nowrap;   /* 防止按钮文字被挤成竖排 */
    }
    .controls-row select { max-width: 110px; }
}

/* ---------- 比赛卡片 / 赔率 ---------- */
@media (max-width: 820px) {
    .lottery-match-card, .match-card { width: 100%; }
    .odds-section { padding: 0.5rem; }
    .odds-group { width: 100%; }
    .odds-values { flex-wrap: wrap; gap: 0.35rem; }
    .teams { flex-direction: column !important; gap: 0.35rem; }
    .vs { transform: none !important; }
    .match-actions { flex-wrap: wrap; }
    .match-actions .btn { min-height: 44px; }
}

/* ---------- 结果 / 串关 / AI 分析 ---------- */
@media (max-width: 820px) {
    .individual-results { grid-template-columns: 1fr !important; }
    .parlay-stats { flex-wrap: wrap; gap: 0.5rem; }
    .parlay-selections { padding: 0.5rem; }
    .ai-analysis-text, .analysis-content, .parlay-analysis,
    .prediction-item, .result-item, .result-card {
        word-break: break-word;
        overflow-wrap: anywhere;
        font-size: 0.9rem;
    }
}

/* ---------- 弹窗（原样式 min-width:400px 会撑爆手机屏） ---------- */
@media (max-width: 820px) {
    .auth-modal { padding: 1rem; }
    .modal-content {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 420px;
        max-height: 86vh;
    }
}

/* ---------- 消息提示 ---------- */
@media (max-width: 820px) {
    .message { left: 0.75rem; right: 0.75rem; top: 0.75rem; }
}

/* ---------- 超小屏 (≤400px) ---------- */
@media (max-width: 400px) {
    .nav-btn span { font-size: 0.7rem; }
    .hero-section h1 { font-size: 1.4rem; }
    .btn { font-size: 0.8rem; }
}