/*-----------------干支卡片-----------------*/
.ganzhi-card{
    width: 100%;
    color: var(--text-color-1);
}

.qimen-gz-time {
    color: var(--text-color-1);
    align-items: center;
}

.qimen-gztime-layout {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    justify-content: center;
    align-items: center;
    border: 1px solid #616161;
    border-radius: 5px;
}

.qimen-gz-show {
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #616161;
    line-height: 2rem;
    font-size: 0.8rem;
}
.qimen-gztime-layout >*:nth-child(1) {
    border-bottom:1px solid #616161;
}
.qimen-gztime-layout >*:nth-child(2) {
    border-bottom:1px solid #616161;
}
.qimen-gztime-layout >*:nth-child(3) {
    border-bottom:1px solid #616161;
}
.qimen-gztime-layout >*:nth-child(4) {
    border-bottom:1px solid #616161;
    border-right:none;
}
.qimen-gztime-layout >*:last-child {
    border-right:none;
}
/*-----------------干支卡片-----------------*/


/*-----------------盘局卡片-----------------*/
.ju-card{
    color: var(--text-color-1);
}

.ju-layout {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    justify-content: center;
    align-items: center;
    border: 1px solid #616161;
    border-radius: 5px;
}

.ju-show {
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #616161;
    white-space: nowrap;
    line-height: 2rem;
    font-size: 0.8rem;
}

.ju-layout > *:last-child {
    border-right:none;
}
/*-----------------盘局卡片-----------------*/

/*-----------------排盘卡片-----------------*/

.qimen-jiugong{
    display:flex;
    flex-direction: column;
}

.jiugong {
    overflow: visible;
    border: 1px solid #616161;
    border-radius: 5px;
}

.jiugong-row,
.jiugong-row3 {
    display:grid;
    grid-template-columns: repeat(3, 1fr);
}

.jiugong-row > * {
    border-bottom:1px solid #616161;
    border-right:1px solid #616161;
}

.jiugong-row > *:last-child {
    border-right:none;
}

.jiugong-row3 > * {
    border-right:1px solid #616161;
}

.jiugong-row3 > *:last-child {
    border-right:none;
}


.gong-ge{
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}


.gong {
    width:35px;
    height:35px;
    display: flex;
    color: var(--text-color-1);
    align-items: center;
    justify-content:center;
    grid-row: 2;
    grid-column: 2;
    border: 1px dotted;
    border-radius: 50%;
    transition: background-color 0.5s ease-in-out;
}

.kong {
    border: 1px solid red;
}

/* 天盘 */
.tianpan {
    display: flex;
    color:var(--primary-color-1);
    align-items: center;
    justify-content:center;
    grid-column: 1;
    grid-row: 1;
    white-space: nowrap;
    font-size: clamp(6px, 12px, 24px);
}

/* 地盘 */
.dipan {
    display: flex;
    color:var(--primary-color-1);
    align-items: center;
    justify-content:center;
    grid-column: 3;
    grid-row: 2;
    font-size: clamp(6px, 12px, 24px);
}


/* 门 */
.renpan {
    display: flex;
    color:var(--primary-color-2);
    align-items: center;
    justify-content:center;
    grid-column: 2;
    grid-row: 1;
    font-size: clamp(6px, 12px, 24px);
}

/* 神 */
.shenpan {
    display: flex;
    color:var(--primary-color-3);
    align-items: center;
    justify-content:center;
    white-space: nowrap;
    grid-column: 3;
    grid-row: 1;
    font-size: clamp(6px, 12px, 24px); 
}

.tianpan-gan {
    display: flex;
    color:var(--text-color-1);
    align-items: center;
    justify-content:center;
    grid-column: 1;
    grid-row: 2;
    font-size: clamp(6px, 12px, 24px);
}

.dipan-zhi {
    display: flex;
    color: var(--text-color-1);
    align-items: center;
    justify-content:center;
    grid-column: 1;
    grid-row: 3;
    font-size: clamp(6px, 12px, 24px);
}

.fangwei {
    display: flex;
    color: var(--text-color-1);
    align-items: center;
    justify-content:center;
    grid-column: 2;
    grid-row: 3;
    font-size: clamp(6px, 12px, 24px);
}

.num {
    display: flex;
    color: var(--text-color-1);
    align-items: center;
    justify-content:center;
    grid-column: 3;
    grid-row: 3;
    font-size: 0.6rem;
}

.kong-wang {
    background-color: rgba(var(--bg-rgb-1),0.1);
    transition: background-color 0.5s ease-in-out;
}
/*-----------------排盘卡片-----------------*/

.animate-in {
    animation: flipShrinkFadeY 0.5s ease-out forwards;
}


@keyframes flipShrinkFadeY {
    0% {
        transform: scale(1) rotateY(0deg);
        opacity: 1;
    }
    50% {
        transform: scale(0.8) rotateY(90deg);
        opacity: 0.5;
    }
    100% {
        transform: scale(1) rotateY(0deg);
        opacity: 1;
    }
}


@media (max-width: 768px) {
    .qimen-gz-show,
    .ju-show {
        white-space: nowrap;
        font-size: 0.6rem;
    }
    .tianpan,
    .dipan,
    .renpan,
    .shenpan,
    .tianpan-gan,
    .dipan-zhi,
    .fangwei {
        font-size:0.7rem;
    }
    .gong {
        width:30px;
        height:30px;
        font-size:0.7rem;
    }
}