:root {
    --liuyao-moving-yao: #ff7c5e;
    --liuyao-canggua-highlight: #c59e77;
    --liuyao-canggua-highlight-light: #ff7c5e;
    --liuyao-canggua-muted: #4a4a4a;
    --liuyao-canggua-muted-light: #a8a8a8;
}

/* 神煞卡片 */
.shensha-grid {
    color: var(--text-color-1);
}

.shensha-list {
    display:flex;
    flex-direction: column;
    border-radius:5px;
    border: 1px solid var(--border-color-1);
    border-collapse: collapse;
    overflow: hidden;
}

.shensha-list-row1,
.shensha-list-row2 {
    display: grid;
    /* 关键：定义6组列，每组由 "auto"(时间格) 和 "1fr"(神煞格) 组成 */
    /* 1fr 表示剩余空间的平均分配，保证上下行的比例完全一致 */
    grid-template-columns: repeat(6, auto 1fr);
    width: 100%;
}

/* 为表格添加边框 */
.shensha-list-shen {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    border: 0.5px solid var(--border-color-1);
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0; /* 允许 Flex/Grid 子项缩小 */
}

/* 为子、丑等单元格设置灰色背景 */
.shensha-list-time {
    display: flex;
    width: 25px;
    min-height: 25px;
    padding: 2px; /* 内边距 */
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    border: 0.5px solid var(--border-color-1)
}

.shensha-list-row1 > * {
    border-top:none;
}
.shensha-list-row1 > *:first-child {
    border-left:none;
}
.shensha-list-row1 > *:last-child {
    border-right:none;
}
.shensha-list-row2 > * {
    border-bottom:none;
}
.shensha-list-row2 > *:first-child {
    border-left:none;
}
.shensha-list-row2 > *:last-child {
    border-right:none;
}



/* 干支显示卡片 */
.gz-time {
    display: flex;
    color: var(--text-color-1);
    align-items: center;
}

.liuyao-gztime-layout {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    font-size: 0.8rem;
    border: 1px solid var(--border-color-1);
    border-radius: 5px;
}

.gz-show {
    padding:4px;
    text-align: center;
    align-items: center;
    border-right: 1px solid var(--border-color-1);
}

.liuyao-gztime-layout >*:last-child {
    border-right:none
}


/* 排盘卡片 */
.paipan {
    margin: 10px;
    padding: 10px;
    display: grid;
    grid-template-columns: 5fr 15fr 10fr;
    gap: 5px;
    border: 1px solid var(--border-color-1);
    color: var(--text-color-1);
}

.biangua-wai {
    grid-column: 3;
}

.bengua-wai {
    grid-column: 2;
}

.canggua-wai {
    grid-column: 1;
}

.cg {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.bengua {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.shiying {
    display: block;
    min-width: 5px;
    min-height: 10px;
    text-align: center;
    align-items: center;
}

.dongyao {
    display: block;
    min-width: 5px;
    min-height: 10px;
    text-align: center;
}

.biangua {
    display: grid;
    grid-template-columns: 1fr;
    height: 1rem;
    gap: 1rem;
}

.cg-guaming, .biangua-guaming, .bengua-guaming {
    display: flex;
    width: 100%;
    height: 30px;
    min-height: 30px;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    padding: 0;
}

.gua-name-text {
    white-space: nowrap;
}

.cg-symbol {
    display: grid;
    height: 1rem;
    width: 100%;
}

.bengua-symbol:focus {
    outline: none;
}

.bengua-symbol:focus-visible .symbol-img {
    outline: 2px solid var(--primary-color-1);
    outline-offset: 2px;
}

/* 六神列只有一个值，占满首列，避免被三列模板压窄 */
.bengua-symbol > .fill-symbol:first-child {
    grid-template-columns: 1fr;
}

.bengua-symbol {
    display: grid;
    height: 1rem;
    grid-template-columns: 2fr 5fr 5fr 3fr;
    white-space: nowrap;
    font-size: 0.8rem;
}

.biangua-symbol {
    display: grid;
    height: 1rem;
    grid-template-columns: 1fr 1fr;
    white-space: nowrap;
    font-size: min(14px, 2vw);
}

.xiaolinger-gua-group {
    display: contents;
}

.fill-symbol {
    display: grid;
    width: 100%;
    grid-template-columns: 2fr 2fr 1fr;
    white-space: nowrap; /* 防止文字换行 */
    font-size: 0.8rem; /* 响应式文字大小 */
    line-height: 0.8rem; /* 确保行高一致 */
    animation: liuyaoFadeIn 0.6s ease-in-out forwards;
}

/* 添加span元素的样式 */
.cg-symbol span,
.symbol span,
.biangua-symbol span {
    width: 100%;
    text-overflow: ellipsis; /* 文字溢出显示省略号 */
    white-space: nowrap;
    align-items: center;
    justify-self: center;
    animation: liuyaoFadeIn 0.6s ease-in-out forwards;
}

:root.light .canggua-yao--highlight {
    color: var(--liuyao-canggua-highlight-light);
}
.canggua-yao--highlight {
    color: var(--liuyao-canggua-highlight);
}
:root.light .canggua-yao--muted {
    color: var(--liuyao-canggua-muted-light);
}
.canggua-yao--muted {
    color: var(--liuyao-canggua-muted);
}

.liuyao-shen {
    color: var(--primary-color-2);
}

.liuyao-liuqin {
    color:var(--primary-color-1);
}

:root.light .liuyao-shen,
:root.light .liuyao-liuqin {
    color: var(--text-color-1);
}


/* 爻的公共样式 */
.symbol-img {
    width: 100%;
    height: 1rem;
    position: relative;
    cursor: pointer;
    display: block; /* 确保显示为块元素 */
    transition: all 0.3s ease-in-out;
    transform-style: preserve-3d; /* 确保3D变换生效 */
    animation: flipShrinkFade 0.6s ease-in-out forwards;
}

/* 起卦完成或开始解读后，爻位不可再点击修改 */
.bengua-symbol.symbol-locked .symbol-img {
    cursor: default;
}

/* 阳爻 */
.symbol-img.yang::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%; /* 设置一个具体高度 */
    background: var(--text-color-1);
    display: block; /* 确保显示 */
    transition: all 0.3s ease-in-out;
    transform-style: preserve-3d; /* 确保3D变换生效 */
    animation: flipShrinkFade 0.6s ease-in-out forwards;
}

/* 阴爻 */
.symbol-img.yin::before {
    content: '';
    position: absolute;
    width: 40%;
    height: 100%; /* 设置一个具体高度 */
    background: var(--text-color-1);
    left: 0;
    display: block; /* 确保显示 */
    transition: all 0.3s ease-in-out;
    transform-style: preserve-3d; /* 确保3D变换生效 */
    animation: flipShrinkFade 0.6s ease-in-out forwards;
}

.symbol-img.yin::after {
    content: '';
    position: absolute;
    width: 40%;
    height: 100%;
    background: var(--text-color-1);
    right: 0;
    display: block; /* 确保显示 */
    transition: all 0.3s ease-in-out;
    transform-style: preserve-3d; /* 确保3D变换生效 */
    animation: flipShrinkFade 0.6s ease-in-out forwards;
}

/* 老阳 */
.symbol-img.yang.lao-yang::before {
    background: var(--liuyao-moving-yao);
    transition: all 0.3s ease-in-out;
    transform-style: preserve-3d; /* 确保3D变换生效 */
    animation: flipShrinkFade 0.6s ease-in-out forwards;
}

/* 老阴 */
.symbol-img.yin.lao-yin::before,
.symbol-img.yin.lao-yin::after {
    background: var(--liuyao-moving-yao);
    transition: all 0.3s ease-in-out;
    transform-style: preserve-3d; /* 确保3D变换生效 */
    animation: flipShrinkFade 0.6s ease-in-out forwards;
}

/* 关键帧动画：缩小+翻转+透明度变化 */
@keyframes flipShrinkFade {
    0% {
        transform: scale(1) rotateX(0deg);
        opacity: 1;
    }
    50% {
        transform: scale(0.8) rotateX(180deg);
        opacity: 0.5;
    }
    100% {
        transform: scale(1) rotateX(0deg);
        opacity: 1;
    }
}

@keyframes liuyaoFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px); /* 可选：从下方轻微滑入 */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


@media (max-width: 768px) {
    .shensha-list-time {
        width: 20px;
        font-size: 0.8rem;
    }
    .shensha-list-shen {
        font-size: 0.5rem;
    }
    .fill-symbol{
       font-size: 0.6rem;
    }

    .cg-guaming, .biangua-guaming, .bengua-guaming {
        height: 20px;
        min-height: 20px;
        font-size: 0.6rem;
    }
}