/**
 * 天机阁 · 六爻卦象图形样式
 * 配合 assets/js/hexagram-figure.js 使用
 *
 * 色板沿用站内设计系统（tianji-design-system.css 的 --tj-* 变量），
 * 若该文件未加载，则退回到这里的兜底值。
 */

.hxf-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px;
    flex-wrap: wrap;
    /* 可调尺寸 */
    --hxf-line-w: 116px;
    --hxf-line-h: 13px;
    --hxf-row-gap: 9px;
    --hxf-break: 24px;
    --hxf-gold: var(--tj-gold-primary, #d4af37);
    --hxf-gold-light: var(--tj-gold-light, #f4e4c1);
    --hxf-gold-dark: var(--tj-gold-dark, #b8960c);
    --hxf-muted: var(--tj-text-muted, rgba(255, 255, 255, 0.6));
}

/* ---------- 单个卦 ---------- */
.hxf {
    margin: 0;
    text-align: center;
}

.hxf-title {
    margin-bottom: 14px;
    font-size: 13px;
    letter-spacing: 0.16em;
    color: var(--hxf-gold);
    font-family: var(--tj-font-primary, 'Noto Serif SC', serif);
}

.hxf-yao-box {
    display: inline-block;
}

.hxf-row {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: var(--hxf-row-gap);
}

.hxf-row:last-child {
    margin-bottom: 0;
}

.hxf-label {
    width: 30px;
    flex: none;
    text-align: right;
    font-size: 11px;
    color: var(--hxf-muted);
    font-family: var(--tj-font-primary, 'Noto Serif SC', serif);
}

/* ---------- 爻线 ---------- */
.hxf-yao {
    display: flex;
    width: var(--hxf-line-w);
    height: var(--hxf-line-h);
    flex: none;
    transition: transform 0.35s ease;
}

.hxf-yao i {
    display: block;
    flex: 1;
    min-width: 0;
    border-radius: 2px;
    background: linear-gradient(
        180deg,
        var(--hxf-gold-light) 0%,
        var(--hxf-gold) 38%,
        var(--hxf-gold-dark) 74%,
        #8b6914 100%
    );
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.28);
}

/* 阴爻：中间断开 */
.hxf-yao.yin i:first-child {
    margin-right: var(--hxf-break);
}

/* ---------- 动爻高亮 ---------- */
.hxf-yao.changing {
    animation: hxf-pulse 1.8s ease-in-out infinite;
}

.hxf-yao.changing i {
    background: linear-gradient(
        180deg,
        #fff6dd 0%,
        #ffd75e 38%,
        var(--hxf-gold) 100%
    );
    box-shadow: 0 0 16px rgba(255, 215, 94, 0.62);
}

@keyframes hxf-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.035); }
}

.hxf-mark {
    width: 15px;
    flex: none;
    font-size: 14px;
    line-height: 1;
    color: #ffd75e;
}

/* ---------- 本卦 → 变卦 之间的箭头 ---------- */
.hxf-arrow {
    font-size: 22px;
    color: rgba(212, 175, 55, 0.5);
    align-self: center;
    flex: none;
}

/* ---------- 结果页里的容器 ---------- */
.hexagram-visual {
    display: flex;
    justify-content: center;
    padding: 26px 16px 10px;
    margin-bottom: 8px;
    border-bottom: 1px dashed rgba(212, 175, 55, 0.18);
}

/* ---------- 移动端 ---------- */
@media (max-width: 640px) {
    .hxf-wrap {
        gap: 22px;
        --hxf-line-w: 92px;
        --hxf-line-h: 12px;
        --hxf-break: 19px;
        --hxf-row-gap: 8px;
    }

    .hxf-arrow {
        font-size: 18px;
    }

    .hxf-label {
        width: 26px;
        font-size: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hxf-yao.changing {
        animation: none;
    }
}

/* ==========================================================
   六爻排盘表
   传统排盘版式（从左到右）：
     六神 | 六亲 | 本卦爻线 + 纳甲五行 | 世应 | 变卦
   行序自上而下为：上爻 → 初爻
   ========================================================== */

.paipan {
    --pp-gold: var(--tj-gold-primary, #d4af37);
    --pp-gold-light: var(--tj-gold-light, #f4e4c1);
    --pp-muted: var(--tj-text-muted, rgba(255, 255, 255, 0.55));
    --pp-line: rgba(212, 175, 55, 0.2);
    margin: 22px 0 8px;
}

/* ---------- 盘面信息条 ---------- */
.paipan-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-bottom: 14px;
    font-size: 13px;
}

.paipan-meta .pp-tag {
    padding: 4px 12px;
    border: 1px solid var(--pp-line);
    border-radius: 999px;
    color: var(--pp-muted);
    background: rgba(212, 175, 55, 0.05);
    white-space: nowrap;
}

.paipan-meta .pp-tag b {
    color: var(--pp-gold);
    font-weight: 400;
    margin-left: 4px;
}

.paipan-meta .pp-tag.pp-strong {
    color: var(--pp-gold);
    border-color: rgba(212, 175, 55, 0.5);
}

/* ---------- 排盘表 ---------- */
.paipan-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--pp-line);
    border-radius: 12px;
}

table.paipan-table {
    width: 100%;
    min-width: 460px;
    border-collapse: collapse;
    font-size: 14px;
}

table.paipan-table th {
    padding: 10px 8px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.12em;
    color: var(--pp-gold);
    background: rgba(212, 175, 55, 0.09);
    border-bottom: 1px solid var(--pp-line);
    white-space: nowrap;
}

table.paipan-table td {
    padding: 9px 8px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.09);
    vertical-align: middle;
    text-align: center;
    white-space: nowrap;
}

table.paipan-table tr:last-child td {
    border-bottom: none;
}

/* 动爻整行提示 */
table.paipan-table tr.pp-changing td {
    background: rgba(212, 175, 55, 0.06);
}

.pp-spirit {
    color: rgba(232, 224, 204, 0.62);
    font-size: 13px;
    letter-spacing: 0.06em;
}

.pp-relative {
    color: var(--pp-gold-light);
    font-size: 13px;
    letter-spacing: 0.06em;
}

/* ---------- 爻线单元格 ---------- */
.pp-yao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

/* 复用小节里的 .hxf-yao 造型，尺寸收窄以适配表格 */
.pp-yao .hxf-yao {
    width: 64px;
    height: 9px;
    flex: none;
}

.pp-yao .hxf-yao.yin i:first-child {
    margin-right: 13px;
}

/* 纳甲干支 + 五行 */
.pp-jiazi {
    min-width: 58px;
    font-size: 12px;
    color: rgba(232, 224, 204, 0.72);
    letter-spacing: 0.04em;
    text-align: left;
}

.pp-el {
    display: inline-block;
    margin-left: 3px;
    padding: 0 3px;
    border-radius: 3px;
    font-size: 11px;
    line-height: 1.5;
    color: #14100a;
    background: var(--pp-gold);
}

/* 五行配色（沿用中式习惯：木青 火赤 土黄 金白 水黑/蓝） */
.pp-el.el-木 { background: #4f9d69; color: #f2fff5; }
.pp-el.el-火 { background: #c0463b; color: #fff3f1; }
.pp-el.el-土 { background: #b58b2f; color: #fffaf0; }
.pp-el.el-金 { background: #c9c4b4; color: #26221a; }
.pp-el.el-水 { background: #3f6f9d; color: #f0f7ff; }

/* 旬空 */
.pp-empty {
    display: inline-block;
    margin-left: 4px;
    padding: 0 4px;
    border-radius: 3px;
    font-size: 11px;
    color: #ff9a9a;
    border: 1px solid rgba(255, 154, 154, 0.45);
}

/* ---------- 世应 ---------- */
.pp-seat {
    font-size: 13px;
    min-width: 34px;
}

.pp-seat .pp-seat-mark {
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 22px;
    border-radius: 50%;
    font-size: 12px;
    color: #14100a;
    background: var(--pp-gold);
}

.pp-seat .pp-respond-mark {
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 22px;
    border-radius: 50%;
    font-size: 12px;
    color: var(--pp-gold);
    border: 1px solid rgba(212, 175, 55, 0.6);
}

/* 伏神/动爻标记 */
.pp-change-mark {
    display: inline-block;
    margin-left: 4px;
    font-size: 12px;
    color: #ffd75e;
}

/* ---------- 兜底提示 ---------- */
.paipan-note {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.8;
    color: rgba(232, 224, 204, 0.4);
}

/* ---------- 移动端 ---------- */
@media (max-width: 640px) {
    table.paipan-table {
        min-width: 400px;
        font-size: 13px;
    }

    .pp-yao .hxf-yao {
        width: 52px;
        height: 8px;
    }

    .pp-yao .hxf-yao.yin i:first-child {
        margin-right: 11px;
    }

    .pp-jiazi {
        min-width: 50px;
        font-size: 11px;
    }

    .paipan-meta {
        font-size: 12px;
    }
}