/* 玩法 3：灭庄五尾主防五码，三头两波杀肖单双，三门主12码 样式 */

/* ===== 1. 灭庄五尾主防五码 ===== */
.mzww-card-box {
    margin: 0.12rem 0;
    border: 2px solid #409eff;
    border-radius: 0.12rem;
    background-color: #ecf5ff;
    padding: 0.08rem;
    box-shadow: 0 0.04rem 0.1rem rgba(64, 158, 255, 0.12);
}

.mzww-title-banner {
    background: linear-gradient(135deg, #409eff 0%, #2b8dfc 100%);
    color: #ffffff;
    font-size: 0.16rem;
    font-weight: bold;
    text-align: center;
    padding: 0.08rem 0;
    border-radius: 0.08rem;
    margin-bottom: 0.08rem;
}

.mzww-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.08rem;
    padding: 0.04rem 0;
}

.mzww-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.08rem;
}

.mzww-tail-pill {
    background-color: #ffffff;
    color: #409eff;
    font-size: 0.14rem;
    font-weight: bold;
    padding: 0.03rem 0.08rem;
    border-radius: 0.04rem;
    border: 1px solid #dcdfe6;
}

.mzww-tail-pill.mzww-hit-red {
    background-color: #ff0000 !important;
    color: #ffffff !important;
    border-color: #ff0000 !important;
}

.mzww-num-pill {
    background-color: #ffffff;
    color: #409eff;
    font-size: 0.15rem;
    font-weight: bold;
    padding: 0.04rem 0.08rem;
    border-radius: 0.04rem;
    border: 1px solid #dcdfe6;
    min-width: 0.32rem;
    text-align: center;
}

.mzww-num-pill.mzww-hit-yellow {
    background-color: #fff3a8 !important;
    color: #1f2937 !important;
    border-color: #fde047 !important;
}


/* ===== 2. 三头两波杀肖单双 ===== */
.stlb-wrapper {
    margin: 0.12rem 0;
    width: 100%;
}

.stlb-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #b3d8ff;
    border-radius: 0.08rem;
    overflow: hidden;
    font-size: 0.17rem;
    background-color: #ffffff;
    box-shadow: 0 0.02rem 0.06rem rgba(0, 0, 0, 0.06);
}

.stlb-table thead th {
    background-color: #3b82f6;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    padding: 0.1rem 0.04rem;
    border: 1px solid #60a5fa;
    font-size: 0.18rem;
}

.stlb-table tbody td {
    border: 1px solid #dcdfe6;
    text-align: center;
    padding: 0.1rem 0.02rem;
    vertical-align: middle;
    color: #333333;
}

.stlb-table tbody td.stlb-period-col {
    background-color: #f0f7ff;
    font-weight: bold;
    color: #333333;
}

.stlb-period-red {
    color: #e60000;
    font-weight: bold;
}


/* ===== 3. 三门主12码 ===== */
.sm12-card-box {
    margin: 0.12rem 0;
    border: 2px solid #409eff;
    border-radius: 0.12rem;
    background-color: #ecf5ff;
    padding: 0.08rem;
    box-shadow: 0 0.04rem 0.1rem rgba(64, 158, 255, 0.12);
}

.sm12-title-banner {
    background: linear-gradient(135deg, #409eff 0%, #2b8dfc 100%);
    color: #ffffff;
    font-size: 0.16rem;
    font-weight: bold;
    text-align: center;
    padding: 0.08rem 0;
    border-radius: 0.08rem;
    margin-bottom: 0.08rem;
}

.sm12-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.08rem;
    padding: 0.04rem 0;
}

.sm12-doors-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.08rem;
}

.sm12-door-pill {
    background-color: #ffffff;
    color: #409eff;
    font-size: 0.14rem;
    font-weight: bold;
    padding: 0.03rem 0.08rem;
    border-radius: 0.04rem;
    border: 1px solid #dcdfe6;
}

.sm12-door-pill.sm12-hit-red {
    background-color: #ff0000 !important;
    color: #ffffff !important;
    border-color: #ff0000 !important;
}

.sm12-grid-nums {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.06rem 0.08rem;
    width: 100%;
    max-width: 3.2rem;
    justify-items: center;
}

.sm12-num-pill {
    background-color: #ffffff;
    color: #409eff;
    font-size: 0.15rem;
    font-weight: bold;
    padding: 0.04rem 0;
    width: 0.42rem;
    text-align: center;
    border-radius: 0.04rem;
    border: 1px solid #dcdfe6;
}

.sm12-num-pill.sm12-hit-yellow {
    background-color: #fff3a8 !important;
    color: #1f2937 !important;
    border-color: #fde047 !important;
}