/**
 * 移动端覆盖样式（responsive-overrides.css）
 * - 包含六爻页面在小屏下的关键响应式覆盖规则。
 * - 仅处理 @media 覆盖，不承载桌面端基础样式。
 * - 建议在相关基础模块样式后加载，以确保覆盖生效。
 */
/* 响应式设计 */
@media (max-width: 480px) {

    .header h1 {
        font-size: 24px;
    }

    .liuyao-header-toolbar {
        padding: 4px 8px 5px;
    }

    .liuyao-header-center {
        padding-left: 70px;
        padding-right: 70px;
    }

    .liuyao-header-title {
        font-size: 1.22rem;
        letter-spacing: 0.05em;
    }

    .liuyao-header-auth-btn {
        padding: 5px 11px;
        font-size: 12px;
        right: max(8px, env(safe-area-inset-right, 0px));
    }

    .liuyao-header-auth-btn:active {
        transform: translateY(-50%) scale(0.98);
    }

    .gua-display {
        max-width: 100%;
    }

    .yao-item {
        max-width: 100%;
        gap: 4px;
    }

    /* 主爻图尺寸见 gua-layout.css @media (max-width:767px) --liuyao-yao-symbol-* */

    #liuyao-gua-visual-stack #ben-gua.gua-display .yao-item > .yao-fushen-symbol-wrap {
        flex: 0 0 1em;
        width: 1em;
        min-width: 1em;
        max-width: 1em;
    }

    .yao-ganzhi-wrap {
        min-width: 2.2em;
        font-size: 15px;
    }

    .yao-liuqin {
        min-width: 2em;
        font-size: 15px;
    }

    .yao-wangshuai {
        min-width: 1em;
        font-size: 15px;
    }

    .yao-shiying {
        flex: 0 0 1.5em;
        width: 1.5em;
        font-size: 15px;
    }

    .yao-liushou {
        min-width: 1.6em;
        font-size: 15px;
    }

    /* 与全局 .yao-kongwang 一致：随月日标签内容宽，勿用固定 em（否则窄屏仍像「空亡列」占位） */
    .yao-kongwang {
        flex: 0 0 auto;
        width: auto;
        min-width: max-content;
        max-width: none;
        font-size: 14px;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        align-content: center;
        gap: 3px 5px;
        white-space: nowrap;
        text-align: left;
    }
    .yao-kongwang:empty {
        display: none;
    }
}