/* M6 Play Modes Styles - Strictly Matching Reference Images */

/* Common Card Header */
.m6-play-card {
    background-color: #ffffff;
    border-radius: 0.08rem;
    margin: 0.12rem 0;
    overflow: hidden;
    box-shadow: 0 0.02rem 0.06rem rgba(0, 0, 0, 0.06);
    border: 1px solid #e2d2d2;
}

.m6-card-header {
    background-color: #fcebe9;
    color: #222222;
    text-align: center;
    font-size: 0.18rem;
    font-weight: bold;
    padding: 0.08rem 0;
    letter-spacing: 0.01rem;
    border-bottom: 1px solid #f2d3d0;
}

/* Yellow Badge for Hits */
.m6-badge-yellow {
    background-color: #ffeb3b;
    color: #000000;
    font-weight: bold;
    border-radius: 3px;
    padding: 1px 3px;
    display: inline-block;
    line-height: 1.1;
}

/* Common text colors */
.m6-text-red {
    color: #d81e06;
    font-weight: bold;
}

.m6-text-blue {
    color: #105db0;
    font-weight: bold;
}

/* ===================================================
   1. 精准七肖 / 精准一肖一码
   =================================================== */
.m6-qx-body {
    padding: 0.08rem;
}

.m6-qx-period-block {
    background-color: #ffffff;
    border: 1px solid #dedede;
    border-radius: 0.06rem;
    margin-bottom: 0.08rem;
    padding: 0.06rem 0.08rem;
}

.m6-qx-period-block:last-child {
    margin-bottom: 0;
}

.m6-qx-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0.05rem 0;
    font-size: 0.14rem;
    border-bottom: 1px solid #f4f4f4;
}

.m6-qx-row:last-child {
    border-bottom: none;
}

.m6-qx-left {
    display: flex;
    align-items: center;
    gap: 0.02rem;
    font-weight: bold;
    color: #222222;
    flex: 0 0 49%;
    min-width: 49%;
}

.m6-qx-zodiacs {
    display: flex;
    gap: 0.02rem;
    color: #06c;
    font-weight: bold;
}

.m6-qx-right {
    display: flex;
    align-items: center;
    gap: 0.04rem;
    font-weight: bold;
    flex: 1;
}

.m6-qx-code-label {
    color: #d81e06;
    font-weight: bold;
}

.m6-qx-numbers {
    display: flex;
    gap: 0.04rem;
    color: #d81e06;
    font-weight: bold;
}


/* ===================================================
   2. 平特三肖
   =================================================== */
.m6-ptsx-body {
    padding: 0;
}

.m6-ptsx-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #e8e8e8;
    font-size: 0.15rem;
}

.m6-ptsx-row:last-child {
    border-bottom: none;
}

.m6-ptsx-col-left {
    width: 30%;
    padding: 0.08rem 0.06rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #222222;
}

.m6-ptsx-col-mid {
    flex: 1;
    padding: 0.08rem 0.06rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.08rem;
    color: #d81e06;
    font-weight: bold;
}

.m6-ptsx-col-right {
    width: 18%;
    background-color: #fbf1f0;
    border-left: 1px solid #f0dedc;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.08rem 0.04rem;
    font-weight: bold;
}

.m6-ptsx-status-hit {
    background-color: #ffeb3b;
    color: #000000;
    font-weight: bold;
    padding: 1px 6px;
    border-radius: 3px;
}

.m6-ptsx-status-miss {
    color: #d81e06;
    font-weight: bold;
}

.m6-ptsx-status-undrawn {
    color: #d81e06;
    font-weight: bold;
}


/* ===================================================
   3. 精准24码
   =================================================== */
.m6-jz24-body {
    padding: 0.08rem;
}

.m6-jz24-period-block {
    background-color: #ffffff;
    padding: 0.06rem 0;
    border-bottom: 1px solid #e0e0e0;
}

.m6-jz24-period-block:last-child {
    border-bottom: none;
}

.m6-jz24-title-row {
    text-align: center;
    font-size: 0.15rem;
    font-weight: bold;
    color: #222222;
    margin-bottom: 0.06rem;
}

.m6-jz24-nums-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.04rem 0.04rem;
    border-bottom: 1px solid #eeeeee;
    margin-bottom: 0.04rem;
    font-size: 0.14rem;
    font-weight: bold;
    color: #d81e06;
}

.m6-jz24-nums-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.m6-jz24-num-item {
    display: inline-block;
    min-width: 0.18rem;
    text-align: center;
}

/* ===================================================
   4. 五行必中 顶部信息栏
   =================================================== */
.m6-wx-info {
    text-align: center;
    padding: 0.08rem 0.05rem;
    font-size: 0.13rem;
    line-height: 1.5;
    background-color: #ffffff;
    border-bottom: 1px solid #eeeeee;
    font-family: SimSun, "Microsoft YaHei", sans-serif;
}

.m6-wx-info div {
    margin-bottom: 0.02rem;
}

.m6-wx-info div:nth-child(1) { color: #f29a98; }
.m6-wx-info div:nth-child(2) { color: #80cfc1; }
.m6-wx-info div:nth-child(3) { color: #7cbfe1; }
.m6-wx-info div:nth-child(4) { color: #eea47e; }
.m6-wx-info div:nth-child(5) { color: #b091cb; }

.m6-wx-info .wx-jin { font-weight: bold; }
.m6-wx-info .wx-mu { font-weight: bold; }
.m6-wx-info .wx-shui { font-weight: bold; }
.m6-wx-info .wx-huo { font-weight: bold; }
.m6-wx-info .wx-tu { font-weight: bold; }

/* ===================================================
   5. 春夏秋冬 & 九肖 特殊字间距
   =================================================== */
.m6-cxqd-seasons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.04rem 0.08rem;
    font-size: 0.14rem;
}

.m6-jx-zodiacs-grid {
    gap: 0.04rem;
}