/* mobile-hexagram.css - 手机端专用卦象样式 v1.2 */
/* 只在手机端生效，不影响电脑端 */

@media (max-width: 768px) {
    /* 默认隐藏后6个卦 - 收起状态 */
    .gua-grid-9.mobile-optimized.collapsed .hidden-guas {
        display: none !important;
    }

    /* 展开状态显示所有卦 */
    .gua-grid-9.mobile-optimized:not(.collapsed) .hidden-guas {
        display: contents !important;
    }

    /* 9宫格容器 - 3x3布局 */
    .gua-grid-9.mobile-optimized {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        padding: 8px !important;
        margin: 15px auto !important;
    }

    /* 卦象卡片 - 降低高度 */
    .gua-grid-9.mobile-optimized .gua-card {
        min-height: 140px !important;
        padding: 6px 3px !important;
        margin-top: 20px !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* 顶部标签 - 调整位置更清晰 */
    .gua-grid-9.mobile-optimized .card-header-embedded {
        position: absolute !important;
        top: -16px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 95% !important;
        max-width: none !important;  /* 移除最大宽度限制 */
        padding: 5px 8px !important;
        font-size: 11px !important;  /* 增大字体 10px -> 11px */
        font-weight: 700 !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
        overflow: visible !important;  /* 允许显示完整文字 */
        text-overflow: clip !important;
        text-align: center !important;
    }

    /* 标签内的含义文字 */
    .gua-grid-9.mobile-optimized .tag-meaning {
        font-size: 8px !important;
        font-weight: 600 !important;
        opacity: 0.85 !important;
        margin-left: 2px !important;
    }

    /* 主内容区 - 减小上边距 */
    .gua-grid-9.mobile-optimized .gua-main-content {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        flex: 1 !important;
        margin-top: 8px !important;
        position: relative !important;  /* 为绝对定位的含义标签提供定位上下文 */
    }

    /* 卦象含义标签 - 显示在卦象图像正上方 */
    .gua-grid-9.mobile-optimized .gua-meaning-label {
        position: absolute !important;
        top: 8px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #FFFFFF !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
        white-space: nowrap !important;
        text-align: center !important;
        pointer-events: none !important;
        z-index: 10 !important;
    }

    /* 隐藏顶部header内的含义文字 */
    .gua-grid-9.mobile-optimized .tag-meaning {
        display: none !important;
    }

    /* 左侧八卦五行 - 优化对齐 */
    .gua-grid-9.mobile-optimized .gua-left-labels {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-around !important;
        min-width: 24px !important;
        height: 90px !important;
    }

    .gua-grid-9.mobile-optimized .left-upper,
    .gua-grid-9.mobile-optimized .left-lower {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        flex: 1 !important;
        justify-content: center !important;
    }

    .gua-grid-9.mobile-optimized .bagua-name,
    .gua-grid-9.mobile-optimized .wuxing-name {
        font-size: 12px !important;
        font-weight: 700 !important;
        writing-mode: vertical-rl !important;
        text-orientation: upright !important;
    }

    .gua-grid-9.mobile-optimized .left-relation {
        display: flex !important;
        flex-direction: row !important;  /* 改为横向布局 */
        align-items: center !important;
        gap: 3px !important;  /* 增加间距 */
    }

    .gua-grid-9.mobile-optimized .arrow {
        font-size: 10px !important;
        font-weight: bold !important;
    }

    .gua-grid-9.mobile-optimized .relation-text {
        font-size: 10px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    /* 中间SVG容器 - 调整高度对齐 */
    .gua-grid-9.mobile-optimized .gua-center {
        min-width: 45px !important;
        width: 45px !important;
        min-height: 90px !important;
        height: 90px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
        flex-shrink: 0 !important;
    }

    .gua-grid-9.mobile-optimized .gua-center svg {
        width: 45px !important;
        height: 90px !important;
        max-width: 45px !important;
        max-height: 90px !important;
        display: block !important;
    }

    /* 右侧爻位 - 优化对齐 */
    .gua-grid-9.mobile-optimized .gua-right-labels {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-around !important;
        min-width: 26px !important;
        height: 90px !important;
    }

    .gua-grid-9.mobile-optimized .yao-label {
        font-size: 9px !important;
        font-weight: 600 !important;
        text-align: center !important;
        height: 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 !important;
    }

    /* 底部卦名 */
    .gua-grid-9.mobile-optimized .card-footer {
        width: 80px !important;
        padding: 4px 5px !important;
        margin: 5px auto 6px auto !important;
        font-size: 11px !important;
        font-weight: 700 !important;
    }

    /* 展开按钮样式 */
    .gua-grid-9.mobile-optimized + .toggle-9gua-btn {
        display: block !important;
        width: 90% !important;
        max-width: 300px !important;
        margin: 10px auto !important;
        padding: 10px !important;
        background: linear-gradient(135deg, var(--gold) 0%, #d4af37 100%) !important;
        color: #000 !important;
        border: none !important;
        border-radius: 8px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
    }
}