/* ============================================
 * 六爻智慧网站 - 手机端深度优化 v1.0
 * 2026-05-05
 * ============================================
 *
 * 设计目标：
 * - 适配移动端小屏（320px~480px）
 * - 触摸友好（最小点击区域 44px）
 * - 安全区适配（iPhone刘海/底部条）
 * - 内容可读性优先
 * - 平滑滚动
 */

/* ==================== 安全区适配 ==================== */
@supports (padding: env(safe-area-inset-top)) {
    header {
        padding-top: calc(env(safe-area-inset-top) + 0.5rem);
    }
    .container {
        padding-left: calc(1rem + env(safe-area-inset-left));
        padding-right: calc(1rem + env(safe-area-inset-right));
    }
    .footer {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }
    /* 弹窗安全区 */
    .subcategory-panel {
        max-height: calc(85vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        margin-top: env(safe-area-inset-top);
    }
    .modal-box {
        margin: env(safe-area-inset-top) env(safe-area-inset-left) env(safe-area-inset-bottom) env(safe-area-inset-right);
    }
}

/* ==================== 全局滚动优化 ==================== */
html {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

body {
    -webkit-text-size-adjust: 100%;
    overscroll-behavior-y: contain;
}

/* 禁止长按弹出菜单（避免干扰占卜交互） */
.coin, .start-btn, .nav a, .tool-link, .category-item, .question-item {
    -webkit-touch-callout: none;
}

/* ==================== 首页移动端优化 ==================== */
@media (max-width: 480px) {
    body.index-page {
        justify-content: flex-start;
        padding-top: 15vh;
    }
    
    .index-page .taiji-container {
        width: 160px;
        height: 160px;
        margin-bottom: 20px;
    }
    
    .index-page .taiji {
        width: 120px;
        height: 120px;
        font-size: 96px;
        margin: 20px auto;
    }
    
    .index-page .taiji-outer {
        width: 160px;
        height: 160px;
    }
    
    .index-page .title {
        font-size: 40px;
        letter-spacing: 4px;
    }
    
    .index-page .subtitle {
        font-size: 13px;
        margin-bottom: 28px;
    }
    
    .index-page .btn-enter {
        width: 240px;
        padding: 14px 20px;
        font-size: 18px;
    }
}

/* iPhone SE/5 等超小屏 */
@media (max-width: 360px) {
    .index-page .taiji-container {
        width: 130px;
        height: 130px;
        margin-bottom: 15px;
    }
    .index-page .taiji {
        width: 100px;
        height: 100px;
        font-size: 80px;
        margin: 15px auto;
    }
    .index-page .taiji-outer {
        width: 130px;
        height: 130px;
    }
    .index-page .title {
        font-size: 34px;
    }
    .index-page .subtitle {
        font-size: 12px;
    }
    .index-page .btn-enter {
        width: 200px;
        padding: 12px 16px;
        font-size: 16px;
    }
}

/* ==================== 导航栏移动优化 ==================== */
@media (max-width: 480px) {
    .nav-container {
        padding: 0.3rem 0 !important;
        gap: 0 !important;
    }
    
    .nav {
        gap: 0.2rem !important;
        padding: 0.2rem 0 !important;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .nav a {
        font-size: 0.72rem !important;
        padding: 0.3rem 0.5rem !important;
        margin: 0.1rem 0 !important;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        border-radius: 20px;
    }
    
    .header-title {
        font-size: 1.8rem !important;
    }
    
    .header-subtitle {
        font-size: 0.8rem !important;
    }
}

@media (max-width: 380px) {
    .nav a {
        font-size: 0.65rem !important;
        padding: 0.25rem 0.4rem !important;
        min-height: 32px;
    }
    .header-title {
        font-size: 1.5rem !important;
    }
}

/* ==================== 选择卡片移动优化 ==================== */
@media (max-width: 480px) {
    .question-item {
        padding: 0.7rem 0.4rem !important;
        min-height: 44px;
    }
    
    .question-item .icon {
        font-size: 1.3rem !important;
    }
    
    .question-item .label {
        font-size: 0.85rem !important;
    }
    
    .category-item {
        padding: 0.8rem 0.4rem !important;
        min-height: 44px;
    }
    
    .category-item .cat-icon {
        font-size: 1.4rem !important;
    }
    
    .category-item .cat-name {
        font-size: 0.82rem !important;
    }
    
    .subcategory-panel {
        width: 96% !important;
        max-width: 98% !important;
        padding: 1rem !important;
        max-height: 75vh !important;
    }
    
    .sub-item {
        padding: 0.8rem 0.6rem !important;
    }
    
    .sub-item .sub-name {
        font-size: 0.9rem !important;
    }
    
    .sub-item .sub-detail {
        font-size: 0.78rem !important;
    }
}

/* ==================== 铜钱交互优化 ==================== */
@media (max-width: 480px) {
    .coin-row {
        gap: 0.8rem !important;
    }
    
    .coin {
        width: 65px !important;
        height: 65px !important;
        border-width: 3px !important;
    }
    
    .coin-top, .coin-bottom {
        font-size: 1rem !important;
    }
    
    .coin-left, .coin-right {
        font-size: 0.8rem !important;
    }
    
    .coin::before {
        width: 18px !important;
        height: 18px !important;
    }
    
    /* 确保铜钱可点击区域足够 */
    .coin:active {
        transform: scale(0.92) !important;
    }
}

/* ==================== 步骤指示器优化 ==================== */
@media (max-width: 480px) {
    .steps {
        gap: 0.15rem !important;
    }
    
    .step {
        padding: 0 0.2rem !important;
    }
    
    .step-num {
        width: 26px !important;
        height: 26px !important;
        font-size: 0.75rem !important;
    }
    
    .step div:last-child {
        font-size: 0.65rem !important;
    }
    
    .step-line {
        width: 18px !important;
        margin-bottom: 0.7rem !important;
    }
}

/* ==================== 结果展示折叠优化 ==================== */
@media (max-width: 600px) {
    .analysis-section {
        padding: 0.8rem !important;
        margin: 0.6rem 0 !important;
    }
    
    .analysis-title {
        font-size: 0.9rem !important;
        cursor: pointer;
        user-select: none;
        position: relative;
        padding-right: 1.5rem !important;
    }
    
    .analysis-title::after {
        content: '▼';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.7rem;
        color: var(--ink-light);
        transition: transform 0.3s ease;
    }
    
    .analysis-title.collapsed::after {
        content: '▶';
    }
    
    .analysis-content {
        font-size: 0.85rem !important;
        line-height: 1.7 !important;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    
    .analysis-content.collapsed {
        max-height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin: 0 !important;
    }
    
    .hexagram-name {
        font-size: 1.6rem !important;
    }
    
    .hexagram-structures {
        gap: 2rem !important;
    }
    
    .gua-struct-lines {
        font-size: 2rem !important;
    }
    
    .yao-lines {
        max-width: 100% !important;
        margin: 1rem auto !important;
    }
    
    .yao-line-row {
        gap: 0.5rem !important;
        padding: 0.5rem 0 !important;
    }
    
    .yao-pos {
        width: 50px !important;
        font-size: 0.95rem !important;
    }
    
    .yao-symbol {
        width: 50px !important;
        font-size: 1.2rem !important;
    }
    
    .yao-line-symbol {
        width: 60px !important;
        height: 6px !important;
    }
    
    .yao-yaoci {
        width: auto !important;
        flex: 1;
        font-size: 0.85rem !important;
        min-width: 0;
        word-break: break-all;
    }
}

/* ==================== 最终决断区优化 ==================== */
@media (max-width: 480px) {
    .final-verdict {
        padding: 1.2rem !important;
    }
    
    .verdict-title {
        font-size: 1rem !important;
    }
    
    .verdict-conclusion {
        font-size: 1.4rem !important;
    }
    
    .verdict-quote {
        font-size: 0.85rem !important;
    }
}

/* ==================== 弹窗/模态框优化 ==================== */
@media (max-width: 480px) {
    .modal-overlay {
        padding: 0 !important;
        align-items: flex-end;
    }
    
    .modal-box {
        max-width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
        animation: modalSlideUp 0.3s ease-out !important;
    }
    
    @keyframes modalSlideUp {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }
    
    .modal-header {
        padding: 1rem !important;
        font-size: 1rem !important;
    }
    
    .modal-body {
        padding: 1rem !important;
    }
    
    .modal-body > p:first-of-type {
        font-size: 0.95rem !important;
    }
    
    .confirm-list li {
        font-size: 0.88rem !important;
        padding: 0.4rem 0 !important;
    }
    
    .rule-disclaimer-mini {
        padding: 0.8rem !important;
        font-size: 0.82rem !important;
    }
    
    .modal-warning {
        font-size: 0.82rem !important;
    }
    
    .modal-footer {
        padding: 0.8rem 1rem 1rem !important;
        flex-direction: column;
        gap: 0.6rem !important;
    }
    
    .modal-footer .btn {
        padding: 12px 20px !important;
        font-size: 0.9rem !important;
        width: 100%;
        justify-content: center;
    }
}

/* ==================== 确认按钮 AI解读区优化 ==================== */
@media (max-width: 480px) {
    .ai-section {
        padding: 0.8rem !important;
    }
    
    .ai-section .btn {
        width: 100% !important;
        justify-content: center;
    }
    
    .rule-disclaimer {
        padding: 0.8rem !important;
    }
    
    .rule-disclaimer h4 {
        font-size: 0.95rem !important;
    }
    
    .rule-disclaimer ul {
        font-size: 0.82rem !important;
        line-height: 1.7 !important;
    }
    
    .btn {
        padding: 12px 24px !important;
        font-size: 0.9rem !important;
    }
    
    .btn-primary {
        min-height: 44px;
    }
    
    .btn-secondary {
        min-height: 44px;
    }
    
    .btn-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
    }
    
    .btn-row .btn {
        flex: 1;
        min-width: 120px;
    }
}

/* ==================== 提示横幅优化 ==================== */
@media (max-width: 480px) {
    .accuracy-tips {
        padding: 0.7rem 0.8rem !important;
        font-size: 0.82rem !important;
    }
    
    .accuracy-tips ul {
        padding-left: 1rem !important;
        line-height: 1.6 !important;
    }
    
    .yehe-quote {
        font-size: 0.78rem !important;
        padding: 0.5rem 0.8rem !important;
        margin: 0.5rem 0 !important;
    }
    
    .entropy-info {
        padding: 0.6rem !important;
        font-size: 0.82rem !important;
    }
    
    .entropy-info ul {
        padding-left: 1rem !important;
    }
    
    .card-title {
        font-size: 1.1rem !important;
        margin-bottom: 0.8rem !important;
    }
}

/* ==================== 八字输入区优化 ==================== */
@media (max-width: 480px) {
    .bazi-input-section > div:first-child {
        flex-wrap: wrap;
    }
    
    .bazi-input-section > div:first-child span:last-child {
        font-size: 0.9rem;
    }
    
    .bazi-input-section div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
}

/* ==================== 页码说明 ==================== */
@media (max-width: 480px) {
    .card {
        padding: 0.8rem !important;
        margin: 0.6rem 0 !important;
        border-radius: 10px !important;
    }
    
    .container:first-child {
        /* the outer container */
    }
    
    footer {
        font-size: 0.72rem !important;
        padding: 1rem 0 !important;
    }
    
    footer p {
        margin: 0.2rem 0 !important;
    }
}

/* ==================== 超小屏兜底 (<=360px) ==================== */
@media (max-width: 360px) {
    .nav a {
        font-size: 0.6rem !important;
        padding: 0.22rem 0.35rem !important;
    }
    
    .coin {
        width: 55px !important;
        height: 55px !important;
    }
    
    .coin-top, .coin-bottom {
        font-size: 0.85rem !important;
    }
    
    .hexagram-name {
        font-size: 1.4rem !important;
    }
    
    .analysis-content {
        font-size: 0.8rem !important;
    }
    
    .step-num {
        width: 22px !important;
        height: 22px !important;
        font-size: 0.7rem !important;
    }
    
    .step div:last-child {
        font-size: 0.6rem !important;
    }
    
    .step-line {
        width: 14px !important;
    }
}

/* ==================== 横屏提示（可选） ==================== */
@media (max-height: 480px) and (orientation: landscape) {
    .steps {
        flex-direction: row !important;
        flex-wrap: wrap;
    }
    
    .hero h1 {
        font-size: 1.5rem !important;
    }
    
    .coin-area {
        padding: 1rem 0 !important;
    }
    
    .entropy-info {
        display: none !important;
    }
}

/* ==================== 触摸设备通用优化 ==================== */
@media (hover: none) and (pointer: coarse) {
    /* 移除所有 hover 效果（触摸设备不需要） */
    .category-item:hover,
    .question-item:hover,
    .tool-card:hover,
    .sub-item:hover,
    .coin:hover {
        transform: none !important;
    }
    
    /* 保留 active 触感 */
    .category-item:active,
    .question-item:active,
    .sub-item:active {
        transform: scale(0.97) !important;
    }
    
    /* 按钮触感 */
    .btn-primary:active,
    .btn-secondary:active,
    .start-btn:active {
        transform: scale(0.96) !important;
    }
}

/* ==================== iOS 专用修复 ==================== */
@supports (-webkit-touch-callout: none) {
    /* iOS 100vh 修复（固定元素不会被地址栏影响） */
    .modal-overlay {
        height: -webkit-fill-available;
    }
    
    /* iOS 输入框圆角/阴影修复 */
    input, select, textarea {
        -webkit-appearance: none;
        border-radius: 4px;
    }
    
    select {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23c41e3a' stroke-width='1.5' fill='none'/></svg>");
        background-repeat: no-repeat;
        background-position: right 10px center;
        padding-right: 28px;
    }
}