/* M9 玩法样式 - 严格对比图片排版与配色 */

.m9-play-card {
    background-color: #ffffff;
    border: 1px solid #c892e6;
    border-radius: 0.04rem;
    margin: 0.12rem 0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.m9-card-header {
    background-color: #d594da;
    text-align: center;
    font-size: 0.18rem;
    font-weight: bold;
    color: #000000;
    padding: 0.08rem 0.10rem;
    letter-spacing: 0.01rem;
}

.m9-card-body {
    padding: 0.08rem 0.10rem;
    background-color: #ffffff;
}

.m9-card-body.m9-no-padding {
    padding: 0;
}

.m9-text-red {
    color: #cc0000;
    font-weight: bold;
}

/* 黄色高亮背景 */
.m9-yellow-bg {
    background-color: #ffff00;
    color: #cc0000 !important;
    font-weight: bold;
    padding: 0 0.03rem;
    border-radius: 0.02rem;
    display: inline-block;
}

/* 右侧状态 - 未开 */
.m9-status-undrawn {
    color: #cc0000;
    font-size: 0.18rem;
    font-weight: bold;
}

/* 右侧状态 - 错 */
.m9-status-miss {
    color: #cc0000;
    font-size: 0.16rem;
    font-weight: bold;
}

/* 右侧状态 - 中奖黄色方块徽框 */
.m9-badge-yellow {
    background-color: #ffff00;
    border-radius: 0.04rem;
    padding: 0.04rem 0.08rem;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.25;
}

.m9-badge-yellow .badge-line {
    color: #cc0000;
    font-size: 0.14rem;
    font-weight: bold;
    white-space: nowrap;
}

/* --- 1. 精准单双 (Image 1) --- */
.m9-ds-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.10rem 0.08rem;
    border-bottom: 1px solid #e5e5e5;
    background-color: #ffffff;
}

.m9-ds-row:last-child {
    border-bottom: none;
}

.m9-ds-left {
    width: 30%;
    font-size: 0.15rem;
    font-weight: bold;
    color: #000000;
    text-align: left;
    white-space: nowrap;
}

.m9-ds-mid {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.12rem;
    font-size: 0.15rem;
    font-weight: bold;
    color: #cc0000;
}

.m9-ds-right {
    width: 22%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- 2. 6尾中特 (Image 2) --- */
.m9-lw-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.08rem 0.08rem;
    border-bottom: 1px solid #e5e5e5;
    background-color: #ffffff;
}

.m9-lw-row:last-child {
    border-bottom: none;
}

.m9-lw-left {
    width: 25%;
    font-size: 0.14rem;
    font-weight: bold;
    color: #000000;
    line-height: 1.35;
    text-align: left;
}

.m9-lw-mid {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.04rem 0.10rem;
    font-size: 0.15rem;
    font-weight: bold;
    color: #cc0000;
}

.m9-lw-right {
    width: 22%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- 3. 精准七肖 (Image 3) --- */
.m9-qx-card {
    border: 1px solid #d0d0d0;
    border-radius: 0.06rem;
    padding: 0.06rem 0.08rem;
    margin-bottom: 0.08rem;
    background-color: #ffffff;
}

.m9-qx-card:last-child {
    margin-bottom: 0;
}

.m9-qx-subrow {
    padding: 0.04rem 0;
    border-bottom: 1px solid #e8e8e5;
    font-size: 0.14rem;
    font-weight: bold;
    line-height: 1.6;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.m9-qx-subrow:last-child {
    border-bottom: none;
}

.m9-qx-label {
    color: #000000;
    margin-right: 0.02rem;
}

.m9-qx-zodiacs {
    color: #06c;
    margin-right: 0.08rem;
    letter-spacing: 0.01rem;
}

.m9-qx-zodiacs .m9-yellow-bg {
    color: #000000 !important;
}

.m9-code-label {
    color: #cc0000;
    margin-right: 0.02rem;
}

.m9-qx-numbers {
    color: #cc0000;
}

.m9-qx-numbers span {
    margin-right: 0.03rem;
}

.m9-qx-numbers span:last-child {
    margin-right: 0;
}

.m9-qx-numbers .m9-yellow-bg {
    color: #cc0000 !important;
}

/* --- 4. 三头中特 & 七尾中特 & 两波中特 (3行格式) --- */
.m9-st-row,
.m9-qw-row,
.m9-lb-row,
.m9-pmqj-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.08rem 0.08rem;
    border-bottom: 1px solid #e5e5e5;
    background-color: #ffffff;
}

.m9-st-row:last-child,
.m9-qw-row:last-child,
.m9-lb-row:last-child,
.m9-pmqj-row:last-child {
    border-bottom: none;
}

.m9-st-left,
.m9-qw-left {
    width: 25%;
    font-size: 0.14rem;
    font-weight: bold;
    color: #000000;
    line-height: 1.35;
    text-align: left;
}

.m9-lb-left,
.m9-pmqj-left {
    width: 30%;
    font-size: 0.15rem;
    font-weight: bold;
    color: #000000;
    text-align: left;
    white-space: nowrap;
}

.m9-st-mid,
.m9-qw-mid,
.m9-lb-mid,
.m9-pmqj-mid {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.04rem 0.08rem;
    font-size: 0.15rem;
    font-weight: bold;
    color: #cc0000;
}

.m9-st-right,
.m9-qw-right,
.m9-lb-right,
.m9-pmqj-right {
    width: 22%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- 5. 十六码中特 & 精准24码 --- */
.m9-slm-card,
.m9-24m-card {
    border-bottom: 1px solid #e0e0e0;
    padding: 0.08rem 0;
    text-align: center;
}

.m9-slm-card:last-child,
.m9-24m-card:last-child {
    border-bottom: none;
}

.m9-slm-title,
.m9-24m-title {
    font-size: 0.15rem;
    font-weight: bold;
    color: #000000;
    margin-bottom: 0.06rem;
}

.m9-purple-tag {
    color: #b840a0;
    font-weight: bold;
}

.m9-slm-line,
.m9-24m-line {
    border-bottom: 1px solid #e0e0e0;
    padding: 0.04rem 0;
    font-size: 0.14rem;
    font-weight: bold;
    color: #cc0000;
    text-align: center;
}

.m9-slm-line:last-child,
.m9-24m-line:last-child {
    border-bottom: none;
}

/* 单字黄色徽框 (如 "中") */
.m9-badge-yellow-single {
    background-color: #ffff00;
    color: red;
    font-weight: bold;
    padding: 0.03rem 0.08rem;
    border-radius: 0.03rem;
    display: inline-block;
    font-size: 0.2rem;
}

/* --- 6. 平特一肖 绿框样式 --- */
.m9-ptyx-green-box {
    background-color: #12b846;
    border-radius: 0.06rem;
    padding: 0.08rem 0.10rem;
    margin: 0.06rem 0.08rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #004d1a;
    font-weight: bold;
    font-size: 0.15rem;
}

.m9-ptyx-text {
    color: #004d1a;
    font-weight: bold;
    font-size: 0.2rem;
}

.m9-ptyx-right {
    display: flex;
    align-items: center;
    justify-content: center;
}

.m9-ptyx-undrawn {
    color: #ffff00;
    font-weight: bold;
    font-size: 0.16rem;
}

.m9-ptyx-miss {
    color: red;
    font-weight: bold;
    font-size: 0.2rem;
}

/* --- 7. 阴阳肖 & 天地肖 & 平特二尾 --- */
.m9-yyx-row,
.m9-tdx-row,
.m9-ptew-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.08rem 0.06rem;
    border-bottom: 1px solid #e5e5e5;
    background-color: #ffffff;
}

.m9-yyx-row:last-child,
.m9-tdx-row:last-child,
.m9-ptew-row:last-child {
    border-bottom: none;
}

.m9-yyx-left,
.m9-tdx-left {
    width: 18%;
    font-size: 0.14rem;
    font-weight: bold;
    color: #000000;
    text-align: left;
    white-space: nowrap;
}

.m9-ptew-left {
    width: 25%;
    font-size: 0.15rem;
    font-weight: bold;
    color: #000000;
    text-align: left;
    white-space: nowrap;
}

.m9-yyx-mid,
.m9-tdx-mid {
    flex: 1;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    font-size: 0.135rem;
    font-weight: bold;
    color: #cc0000;
}

.m9-ptew-mid {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.04rem;
    font-size: 0.15rem;
    font-weight: bold;
    color: #cc0000;
}

.m9-yyx-right,
.m9-tdx-right {
    width: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
}

.m9-ptew-right {
    width: 22%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.m9-type-tag {
    color: #cc0000;
    font-weight: bold;
    white-space: nowrap;
}