/* 全局重置 */
body {
    margin: 0;
    padding: 0;
}

/* 统一盒模型 - 边框包含在宽高内，避免九宫与地支宽度不一致导致偏移 */
.paipan-result *,
.paipan-result *::before,
.paipan-result *::after {
    box-sizing: border-box;
}

/* 在CSS最顶部添加 */
:root {
    /* 计算九宫格基础尺寸（基于父容器宽度的1/3减去17px） */
    --jiugong-size: calc(33.33% - 17px);
    --tb--gray: #999;
    --tb--base: #000;
}/* ==============================================
1. 通用清除浮动工具类
作用：解决父容器因子元素浮动导致的高度塌陷问题
适用场景：所有需要清除浮动的容器（如.paipan-result .-col、.-horizontal等）
============================================== */


/* 针对更小屏幕的进一步优化 */
@media (max-width: 320px) {
    /* 可以根据需要添加更细致的调整 */
    .paipan-result {
        /* 可以进一步调整缩放比例或其他样式 */
    }
}
.clear::after {
    display: block; /* 转换为块级元素，确保独占一行 */
    clear: both; /* 清除左右两侧浮动影响 */
    content: ""; /* 伪元素必须有content属性（空值也可），否则不生效 */
}

/* 去除所有链接下划线 */
a {
    text-decoration: none;
}

/* 先天奇门标签链接样式 - 添加底部浅蓝色分割线 */
a > .dutian-qimen-label {
    position: relative;
}

a > .dutian-qimen-label::after {
    content: '';
    position: absolute;
    bottom: -15px; /* 调整位置，使其在标签底部下方显示 */
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background-color: #2196F3; /* 浅蓝色，与xt.html中的分割线颜色一致 */
    border-radius: 2px;
}

/* 先天奇门标签样式 */
.dutian-qimen-label {
    text-align: center; /* 文字居中显示 */
    font-size: 24px; /* 增大字体，突出显示 */
    font-weight: bold; /* 字体加粗 */
    color: #000000; /* 使用红色，与其他重要信息保持一致 */
    margin-bottom: 35px; /* 与下方内容保持适当间距 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0); /* 添加轻微阴影，增强立体感 */
    letter-spacing: 2px; /* 增加字间距，提升美观度 */
}

/* 原局时不显示九星转运标签 */
.dutian-qimen-label.original-game {
    display: none;
}

/* 手机端：将九星转运信息显示在最底部 */
@media (max-width: 768px) {
    /* 调整九星转运标签位置，使其显示在页面底部 */
    .dutian-qimen-label {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 14px;
        font-weight: normal;
        color: var(--text-secondary);
        background: var(--background-white);
        box-shadow: var(--shadow-medium);
        padding: 8px 16px;
        margin: 0;
        text-shadow: none;
        letter-spacing: normal;
        border-radius: var(--border-radius);
        z-index: 100;
    }
    
    /* 原局时不显示九星转运标签 */
    .dutian-qimen-label.original-game {
        display: none;
    }
}

/* 排盘结果整体容器 - 宽度与顶部文字区域严格一致 */
.paipan-result {
    width: 360px;
    max-width: 100%;
    margin: 60px auto 0;
    box-sizing: border-box;
}

/* ==============================
   4. CSS Grid 九宫格布局
   ============================== */

/* 九宫Grid容器 - 5列×5行 */
.paipan-grid {
    display: grid;
    grid-template-columns: auto 1fr 1fr 1fr auto;
    width: 400px;
    margin: -18px auto 0 -15px;
    box-sizing: border-box;
}

/* 空占位格（四角） */
.-grid-empty {
    /* 仅占位，无内容 */
}

/* 地支在Grid中 - 水平方向（顶部/底部） */
.paipan-grid .dizhi.-horizontal {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    padding: 4px 0;
}

/* 地支在Grid中 - 垂直方向（侧边） */
.paipan-grid .dizhi.-vertical {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding: 0 4px;
}

/* 九宫格在Grid中 */
.paipan-grid .jiuGong {
    width: 100%;
    aspect-ratio: 1;
    position: relative;
    box-sizing: border-box;
}

/* ==============================
   4.2 九宫格内部样式（保持不变）
   ============================== */
/* 4.5 内部井字格边框样式（控制九宫、元素的边框显示） */
.paipan-result .-line {
    border-width: 0; /* 默认无边框 */
    border-style: solid; /* 边框样式为实线 */
    border-color: var(--tb--gray); /* 边框颜色：使用全局灰色变量（需提前定义） */
}

/* 4.7 九宫格边框方向控制（单独控制某一侧边框显示） */
.paipan-result .-l {
    border-left-width: 1px; /* 显示左边框 */
}
.paipan-result .-r {
    border-right-width: 1px; /* 显示右边框 */
}
.paipan-result .-b {
    border-bottom-width: 1px; /* 显示下边框 */
}
.paipan-result .-t {
    border-top-width: 1px; /* 显示上边框 */
}

/* 4.8 内边距控制（不同方向/大小的内边距，调整元素内部间距） */
.paipan-result .-pd-t {
    padding-top: 12px; /* 顶部内边距12px */
}
.paipan-result .-pd-t10 {
    padding-top: 8px; /* 顶部内边距8px（命名为t10是历史习惯，实际为8px） */
}
.paipan-result .-pd-b {
    padding-bottom: 8px; /* 底部内边距8px */
}
.paipan-result .-pd-b1 {
    padding-bottom: 1px; /* 底部内边距1px（微调） */
}
.paipan-result .-pd-l {
    padding-left: 8px; /* 左侧内边距8px */
}
.paipan-result .-pd-r {
    padding-right: 8px; /* 右侧内边距8px */
}
/* 4.9 马星样式（显示“马”字的容器） */
.paipan-result .maxing {
    position: absolute; /* 绝对定位，用于定位到九宫格四角 */
    font-size: 18px; /* 马星字体调整为更小，更易辨别 */
    color: #a43c34; /* 红色显示，与击刑、门迫等凶性状态颜色一致 */
    font-weight: bold;
}
/* 特定位置的马星定位到九宫格外部的角上 */
.paipan-result .maxing.si {
    top: -25px; /* 顶部位于九宫格外，继续外移 */
    left: -25px; /* 左侧位于九宫格外，继续外移 */
    transform: translate(0%, 0%); /* 定位到左上角外部 */
}

.paipan-result .maxing.shen {
    top: -25px; /* 顶部位于九宫格外，继续外移 */
    right: -25px; /* 右侧位于九宫格外，继续外移 */
    transform: translate(0%, 0%); /* 定位到右上角外部 */
}

.paipan-result .maxing.yin {
    bottom: -25px; /* 底部位于九宫格外，继续外移 */
    left: -25px; /* 左侧位于九宫格外，继续外移 */
    transform: translate(0%, 0%); /* 定位到左下角外部 */
}

.paipan-result .maxing.hai {
    bottom: -25px; /* 底部位于九宫格外，继续外移 */
    right: -25px; /* 右侧位于九宫格外，继续外移 */
    transform: translate(0%, 0%); /* 定位到右下角外部 */
}

/* 空亡相关的标记样式（使用 `-kw` 前缀，可能是 "kong wang" 的缩写） */
.paipan-result .-kw{position:relative}
.paipan-result .-kw::after{
    position:absolute;
    content:"";
    width:13px;
    height:13px;
    border-radius:50%; /* 圆形效果 */
    background:#ffffff; 
    border:2px solid #999999; /* 中性灰色边框，适应不同背景 */
    z-index:1
}
/* 空亡标记在左上角 */
.paipan-result .-kw-tl::after{top:-6px;left:-6px}
/* 空亡标记在右下角 */
.paipan-result .-kw-br::after{bottom:-6px;right:-6px}

/* 4.10 地支容器 */
.paipan-result .dizhi {
    position: relative;
}

/* 隐干样式 */
.paipan-result .yangan {
    color: #666;
    font-size: 17px;
}

/* 建星样式 */
.paipan-result .jianxing {
    color: #666;
    font-size: 17px;
}

/* 月将-天将包装容器 */
.yuejiang-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 月将文字 */
.paipan-result .yuejiang {
    color: #666;
    font-size: 17px;
}

/* 天将文字 */
.paipan-result .tianJiang {
    color: #999;
    font-size: 17px;
}

/* === 四方天将相对定位 === */

/* 顶部：天将在月将上方，垂直排列 */
.-tjt .yuejiang-wrap {
    flex-direction: column;
}
.-tjt .tianJiang {
    order: -1;
}

/* 底部：天将在月将下方，垂直排列 */
.-tjb .yuejiang-wrap {
    flex-direction: column;
}
.-tjb .tianJiang {
    order: 1;
}

/* 左侧：天将在月将左侧，横向对齐 */
.-tjl .yuejiang-wrap {
    flex-direction: row;
}
.-tjl .tianJiang {
    order: -1;
}

/* 右侧：天将在月将右侧，横向对齐 */
.-tjr .yuejiang-wrap {
    flex-direction: row;
}
.-tjr .tianJiang {
    order: 1;
}

/* 四方地支文字对齐 */
 /* 顶部：隐干、月将、建星底部对齐 */
 .paipan-grid .dizhi.-tjt.-horizontal {
     align-items: flex-end;
 }
 /* 底部：隐干、月将、建星顶部对齐 */
 .paipan-grid .dizhi.-tjb.-horizontal {
     align-items: flex-start;
 }
 /* 左侧：垂直居中，水平左对齐 */
 .paipan-grid .dizhi.-tjl.-vertical {
     justify-content: center;
     align-items: flex-start;
     padding: 6px;
     gap: 4px;
 }
 /* 右侧：垂直居中，水平左对齐 */
 .paipan-grid .dizhi.-tjr.-vertical {
     justify-content: center;
     align-items: flex-start;
     padding: 6px;
     gap: 4px;
 }
 /* 左侧：天将绝对定位到月将左侧，不影响对齐 */
 .paipan-grid .dizhi.-tjl.-vertical .yuejiang-wrap {
     flex-direction: row;
     position: relative;
 }
 .paipan-grid .dizhi.-tjl.-vertical .tianJiang {
     position: absolute;
     right: 100%;
     margin-right: 2px;
     order: 0;
 }
 /* 右侧：天将绝对定位到月将右侧，不影响对齐 */
 .paipan-grid .dizhi.-tjr.-vertical .yuejiang-wrap {
     flex-direction: row;
     position: relative;
 }
 .paipan-grid .dizhi.-tjr.-vertical .tianJiang {
     position: absolute;
     left: 100%;
     margin-left: 2px;
     order: 0;
 }

/* 4.21 颜色控制（红色/绿色文字，用于标记特殊状态） */
.paipan-result .-red {
    color: #a43c34; /* 深红色：用于标记"击刑""门迫"等凶性状态 */
}
.paipan-result .kong-wang {
    color: #a43c34;
}
.paipan-result .-green {
    color: #629469; /* 深绿色：用于标记"入墓"等中性/特殊状态 */
}

/* 天目文字颜色 */
.paipan-result .tianmu span {
    color: var(--tb--base);
}

/* 地支名称标签 - 已隐藏 */
.paipan-result .dizhi::after {
    display: none;
}

/* 九宫格内地支对应标签 - 已隐藏 */
.paipan-result .dizhi-label {
    display: none;
}

/* 九宫内部容器（九宫格内的内容区域，flex布局，三等分行） */
.jiuGong .-inner {
    position: absolute; /* 绝对定位，铺满九宫容器 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-around; /* 均匀分布行 */
}

/* 九宫格内部行 - flex横向布局 */
.gong-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    min-height: 0;
}

/* 顶部行 - 天八神左对齐 */
.gong-row-top {
    justify-content: flex-start;
}

/* 中部行 - 天目与天元分居两侧 */
.gong-row-mid {
    justify-content: space-between;
}

/* 底部行 - 地耳与八门分居两侧 */
.gong-row-bot {
    justify-content: space-between;
}

/* 九宫格内文字统一样式 */
.jiuGong .-inner .jiushen,
.jiuGong .-inner .tianyuan,
.jiuGong .-inner .tianmu,
.jiuGong .-inner .tianmu-text,
.jiuGong .-inner .dier,
.jiuGong .-inner .bamen {
    font-size: 20px;
    line-height: 1;
    font-weight: bold;
}

/* 地耳组合（2宫寄5宫，两个地耳紧挨） */
.jiuGong .-inner .dier-group {
    letter-spacing: -1px;
}

/* 天目组合（天芮星寄天禽星，两个天目紧挨） */
.jiuGong .-inner .tianmu-group {
    letter-spacing: -1px;
}

/* 天目文本容器 */
.jiuGong .-inner .tianmu-text {
    display: flex;
    align-items: center;
}

/* 5.10 背景定位容器（备用背景元素，默认隐藏） */
.bgdw {
    position: absolute; /* 绝对定位 */
    z-index: 0; /* 层级0，在其他内容下方 */
    top: 19px; /* 顶部距离父容器19px */
    display: none; /* 默认隐藏，需通过JS控制显示 */
}

/* 5.11 排盘基础信息容器（显示公历、阴历、四柱等基础信息） */
.paipan-base {
    position: relative; /* 相对定位 */
    z-index: 1; /* 层级1，在背景上方 */
    width: 330px; /* 固定宽度 */
    margin: 0 auto 40px auto; /* 九宫格整体移动水平居中，减小底部外边距 */
    line-height: 1; /* 行高重置为1 */
    font-weight: bold; /* 顶部区域文字全部加粗 */
}
/* 公历、阴历样式 */
.paipan-base .gong-li,
.paipan-base .yin-li {
    font-size: 15px; /* 基础字体大小，与旬首保持一致 */
    margin-bottom: 14px; /* 底部外边距，行与行之间间距 */
}
/* 天干地支样式 */
.paipan-base .zhu {
    font-size: 15px; /* 基础字体大小，与旬首保持一致 */
    padding-right: 18px; /* 右侧内边距，与其他柱间距 */
}
/* 纳音全局样式 - 与地支行左对齐 */
.paipan-result .nayin {
    font-size: 15px;/* 与旬首保持一致的字体大小 */
    margin-left: 0px; /* 左间距设为0，与地支行左对齐 */
    margin-right: 0px; /* 右间距 */
    display: block; /* 确保作为块元素显示 */
}
/* 排盘基础信息的行容器（弹性布局，横向排列） */
.paipan-base>div {
    display: flex;
    margin-bottom: 14px; /* 底部外边距，行与行之间间距 */
}
/* 排盘基础信息的弹性容器（两端对齐，如“旬首”和“遁局”分居两侧） */
.paipan-base .-flex {
    justify-content: space-between; /* 两端对齐 */
    font-size: 15px; /* 基础字体大小，与其他文字保持一致 */
}
/* 节气时间字体大小 */
.paipan-base .-flex i {
    font-size: 10px; /* 小字体 */
    font-style: normal; /* 取消斜体，作为普通文字 */
}

/* 四柱标签（如“天干：”“地支：”） */
.paipan-base .sizhu-label {
    display: inline-block; /* 行内块级，可设置宽度 */
    width: 51px; /* 固定宽度，确保标签对齐 */
    font-size: 15px; /* 基础字体大小，与其他文字保持一致 */
}
/* 四柱内容（如“甲”“子”） */
.paipan-base .zhu {
    padding-right: 18px; /* 右侧内边距，与其他柱间距 */
}