/* M10 玩法样式 - 每个模块为一个整体，背景色 #fdbd28，模块之间有间隔 */

.m10-play-card {
    background-color: #fdbd28;
    border-radius: 0.08rem;
    padding: 0.12rem 0.10rem;
    margin-bottom: 0.14rem;
    box-sizing: border-box;
}

.m10-play-card:last-child {
    margin-bottom: 0;
}

/* 1. 连准八肖 (Image 3) */
.m10-lzbx-card {
    background-color: #ffffff;
    border: 2px solid #e6a000;
    border-radius: 0.06rem;
    overflow: hidden;
    margin-bottom: 0.12rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.m10-lzbx-card:last-child {
    margin-bottom: 0;
}

.m10-lzbx-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.14rem;
}

.m10-lzbx-table th,
.m10-lzbx-table td {
    border: 1px solid #e5e7eb;
    padding: 0.06rem 0.04rem;
    text-align: center;
    vertical-align: middle;
}

.m10-lzbx-table th {
    background-color: #ffffff;
    font-weight: bold;
    color: #333333;
    font-size: 0.15rem;
}

.m10-lzbx-col-period {
    width: 20%;
    font-weight: bold;
    color: #333333;
}

.m10-lzbx-col-title {
    width: 60%;
    font-weight: bold;
    color: #333333;
}

.m10-lzbx-col-result {
    width: 20%;
    font-weight: bold;
    color: #333333;
}

.m10-lzbx-label {
    font-weight: bold;
    color: #333333;
    font-size: 0.14rem;
}

.m10-lzbx-content-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.04rem;
}

.m10-lzbx-pill {
    background-color: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 0.03rem;
    padding: 0.02rem 0.05rem;
    font-size: 0.13rem;
    font-weight: bold;
    color: #1f2937;
    display: inline-block;
    min-width: 0.22rem;
    text-align: center;
}

.m10-lzbx-pill.m10-wave-hit {
    background-color: #ffe885;
    border-color: #e6a000;
    color: #1f2937;
}

.m10-lzbx-zodiac-str {
    font-size: 0.14rem;
    font-weight: bold;
    color: #333333;
    letter-spacing: 0.01rem;
}

.m10-hit-text {
    color: #dc2626 !important;
    font-weight: bold;
}

.m10-lzbx-result {
    font-weight: bold;
    color: #333333;
    font-size: 0.14rem;
    white-space: nowrap;
}

/* 2. 精准24码 (Image 2) */
.m10-24m-card {
    background-color: #fdbd28;
    padding: 0.04rem 0;
    margin-bottom: 0.14rem;
}

.m10-24m-card:last-child {
    margin-bottom: 0;
}

.m10-24m-title {
    text-align: center;
    font-size: 0.16rem;
    font-weight: bold;
    color: #dc2626;
    margin-bottom: 0.08rem;
    letter-spacing: 0.01rem;
}

.m10-24m-grid {
    display: flex;
    flex-direction: column;
    gap: 0.06rem;
    align-items: center;
}

.m10-24m-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.05rem;
    width: 100%;
}

.m10-num-box {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.04rem;
    width: 0.38rem;
    height: 0.38rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.14rem;
    font-weight: bold;
    color: #1e293b;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.m10-num-box.m10-box-hit {
    border: 1px solid #ef4444;
    background-color: #ffe6e6;
    color: #dc2626;
}

/* 3. 七尾中特 (Image 1) */
.m10-qw-card {
    background-color: #fdbd28;
    padding: 0.04rem 0;
    margin-bottom: 0.14rem;
}

.m10-qw-card:last-child {
    margin-bottom: 0;
}

.m10-qw-title {
    text-align: center;
    font-size: 0.16rem;
    font-weight: bold;
    color: #222222;
    margin-bottom: 0.08rem;
    letter-spacing: 0.01rem;
}

.m10-qw-tails-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.05rem;
    margin-bottom: 0.08rem;
}

.m10-tail-box {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.04rem;
    padding: 0.04rem 0.06rem;
    font-size: 0.13rem;
    font-weight: bold;
    color: #2563eb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.m10-tail-box.m10-box-hit {
    border: 1px solid #ef4444;
    background-color: #ffe6e6;
    color: #dc2626;
}

.m10-qw-num-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.05rem;
    margin-bottom: 0.06rem;
}

.m10-qw-badge {
    background-color: #fffbeb;
    border: 1px solid #f59e0b;
    border-radius: 0.04rem;
    padding: 0.04rem 0.06rem;
    font-size: 0.14rem;
    font-weight: bold;
    color: #b45309;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 0.38rem;
    box-sizing: border-box;
}

.m10-qw-nums {
    display: flex;
    align-items: center;
    gap: 0.05rem;
}

/* 4. 双波主16码 (Image 1) */
.m10-sb16-card {
    background-color: #fdbd28;
    padding: 0.04rem 0;
    margin-bottom: 0.14rem;
}

.m10-sb16-card:last-child {
    margin-bottom: 0;
}

.m10-sb16-title {
    text-align: center;
    font-size: 0.16rem;
    font-weight: bold;
    color: #222222;
    margin-bottom: 0.08rem;
    letter-spacing: 0.01rem;
}

.m10-sb16-waves-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.08rem;
    margin-bottom: 0.08rem;
}

.m10-wave-box {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.04rem;
    padding: 0.04rem 0.08rem;
    font-size: 0.13rem;
    font-weight: bold;
    color: #2563eb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.m10-wave-box.m10-box-hit {
    border: 1px solid #ef4444;
    background-color: #ffe6e6;
    color: #dc2626;
}

.m10-sb16-grid {
    display: flex;
    flex-direction: column;
    gap: 0.06rem;
    align-items: center;
}

.m10-sb16-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.05rem;
    width: 100%;
}

/* 5. 白小姐9肖18码 (Image 2) */
.m10-bxj-card {
    background-color: #ffffff;
    border: 2px solid #e6a000;
    border-radius: 0.06rem;
    overflow: hidden;
    margin-bottom: 0.12rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.m10-bxj-card:last-child {
    margin-bottom: 0;
}

.m10-bxj-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.14rem;
}

.m10-bxj-table th,
.m10-bxj-table td {
    border: 1px solid #e5e7eb;
    padding: 0.08rem 0.04rem;
    text-align: center;
    vertical-align: middle;
}

.m10-bxj-table th {
    background-color: #ffffff;
    font-weight: bold;
    color: #333333;
    font-size: 0.15rem;
}

.m10-bxj-col-period {
    width: 25%;
    font-weight: bold;
    color: #333333;
}

.m10-bxj-col-title {
    width: 50%;
    font-weight: bold;
    color: #333333;
}

.m10-bxj-col-result {
    width: 25%;
    font-weight: bold;
    color: #333333;
}

.m10-bxj-cell {
    width: 33.33%;
}

.m10-bxj-cell-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.04rem;
}

.m10-bxj-zodiac-tag {
    font-weight: bold;
    color: #dc2626;
    font-size: 0.15rem;
    display: inline-block;
    padding: 0.02rem 0.04rem;
}

.m10-bxj-zodiac-tag.m10-zodiac-hit {
    background-color: #ffd500;
    border: 1px solid #e6a000;
    border-radius: 0.04rem;
    color: #1f2937;
}

.m10-bxj-num-pill {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.04rem;
    padding: 0.02rem 0.05rem;
    font-size: 0.13rem;
    font-weight: bold;
    color: #1f2937;
    display: inline-block;
}

/* 6. 四门二十八码 (Image 3) */
.m10-sm28-card {
    background-color: #fdbd28;
    padding: 0.04rem 0;
    margin-bottom: 0.14rem;
}

.m10-sm28-card:last-child {
    margin-bottom: 0;
}

.m10-sm28-title {
    text-align: center;
    font-size: 0.16rem;
    font-weight: bold;
    color: #222222;
    margin-bottom: 0.08rem;
    letter-spacing: 0.01rem;
}

.m10-sm28-body {
    display: flex;
    flex-direction: column;
    gap: 0.06rem;
    align-items: center;
}

.m10-sm28-gate-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.05rem;
    width: 100%;
}

.m10-gate-badge {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.04rem;
    width: 0.38rem;
    height: 0.38rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.14rem;
    font-weight: bold;
    color: #2563eb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.m10-gate-badge.m10-box-hit {
    border: 1px solid #ef4444;
    background-color: #ffe6e6;
    color: #dc2626;
}

.m10-gate-nums {
    display: flex;
    align-items: center;
    gap: 0.05rem;
}

/* 7. 平码七剑 (Image 3 Top) */
.m10-pmqj-card {
    background-color: #fdbd28;
    padding: 0.04rem 0;
    margin-bottom: 0.12rem;
}

.m10-pmqj-card:last-child {
    margin-bottom: 0;
}

.m10-pmqj-title {
    text-align: center;
    font-size: 0.16rem;
    font-weight: bold;
    color: #222222;
    margin-bottom: 0.08rem;
    letter-spacing: 0.01rem;
}

.m10-pmqj-nums {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.05rem;
}

/* 8. 平特三肖 / 铁算盘平特二组三连 (Image 3 Bottom) */
.m10-ptsx-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.08rem;
    padding: 0.06rem 0.04rem;
    margin-bottom: 0.08rem;
}

.m10-ptsx-row:last-child {
    margin-bottom: 0;
}

.m10-ptsx-left {
    font-size: 0.15rem;
    font-weight: bold;
    color: #222222;
}

.m10-ptsx-right {
    display: flex;
    align-items: center;
    gap: 0.05rem;
}

.m10-zbox {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.04rem;
    padding: 0.04rem 0.08rem;
    font-size: 0.14rem;
    font-weight: bold;
    color: #2563eb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.m10-zbox.m10-box-hit {
    border: 1px solid #ef4444;
    background-color: #ffe6e6;
    color: #dc2626;
}

/* 9. 东南西北 (Image 2) */
.m10-dnxb-card {
    background-color: #fdbd28;
    padding: 0.04rem 0;
    margin-bottom: 0.14rem;
}

.m10-dnxb-card:last-child {
    margin-bottom: 0;
}

.m10-dnxb-title {
    text-align: center;
    font-size: 0.16rem;
    font-weight: bold;
    color: #dc2626;
    margin-bottom: 0.08rem;
    letter-spacing: 0.01rem;
}

.m10-dnxb-body {
    display: flex;
    flex-direction: column;
    gap: 0.06rem;
    align-items: center;
}

.m10-dnxb-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.05rem;
    width: 100%;
}

.m10-dir-badge {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.04rem;
    width: 0.38rem;
    height: 0.38rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.14rem;
    font-weight: bold;
    color: #1e293b;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.m10-dir-badge.m10-box-hit {
    border: 1px solid #ef4444;
    background-color: #ffe6e6;
    color: #dc2626;
}

.m10-dir-nums {
    display: flex;
    align-items: center;
    gap: 0.05rem;
}

/* 10. 五行必中 (Image 1 Top) */
.m10-wx-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.08rem;
    padding: 0.06rem 0.04rem;
    margin-bottom: 0.08rem;
}

.m10-wx-row:last-child {
    margin-bottom: 0;
}

.m10-wx-left {
    font-size: 0.15rem;
    font-weight: bold;
    color: #222222;
}

.m10-wx-right {
    display: flex;
    align-items: center;
    gap: 0.05rem;
}

/* 11. 输尽光 (Image 1 Bottom) */
.m10-sjg-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.06rem 0.04rem;
    margin-bottom: 0.08rem;
}

.m10-sjg-row:last-child {
    margin-bottom: 0;
}

.m10-sjg-prefix,
.m10-sjg-suffix {
    font-size: 0.15rem;
    font-weight: bold;
    color: #222222;
}

.m10-sjg-zodiacs {
    display: flex;
    align-items: center;
    gap: 0.05rem;
}

.m10-sjg-zbox {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.04rem;
    padding: 0.04rem 0.06rem;
    font-size: 0.14rem;
    font-weight: bold;
    color: #dc2626;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.m10-sjg-zbox.m10-sjg-blue {
    border: 1px solid #2563eb;
    background-color: #ffffff;
    color: #2563eb;
}

/* 12. 平特二尾 */
.m10-ptew-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.12rem;
    padding: 0.05rem 0;
    margin-bottom: 0.08rem;
}

.m10-ptew-row:last-child {
    margin-bottom: 0;
}

.m10-ptew-left {
    font-size: 0.15rem;
    font-weight: bold;
    color: #222222;
}

.m10-ptew-pnum {
    color: #dc2626;
    font-weight: bold;
}

.m10-ptew-mid {
    display: flex;
    align-items: center;
    gap: 0.06rem;
}

.m10-ptew-tbox {
    background-color: #ffffff;
    border: 1px solid #60a5fa;
    border-radius: 0.04rem;
    padding: 0.03rem 0.06rem;
    font-size: 0.14rem;
    font-weight: bold;
    color: #2563eb;
    min-width: 0.38rem;
    text-align: center;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.m10-ptew-tbox.m10-tail-hit {
    border: 1px solid #ef4444;
    color: #dc2626;
}

.m10-ptew-right {
    display: flex;
    align-items: center;
}

.m10-ptew-status-undrawn {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.04rem;
    padding: 0.03rem 0.06rem;
    font-size: 0.14rem;
    font-weight: bold;
    color: #2563eb;
    min-width: 0.32rem;
    text-align: center;
    box-sizing: border-box;
    display: inline-block;
}

.m10-ptew-status-hit {
    background-color: #fef08a;
    border-radius: 0.04rem;
    padding: 0.03rem 0.06rem;
    font-size: 0.14rem;
    font-weight: bold;
    color: #b45309;
    min-width: 0.32rem;
    text-align: center;
    box-sizing: border-box;
    display: inline-block;
}

.m10-ptew-status-miss {
    background-color: #fef08a;
    border-radius: 0.04rem;
    padding: 0.03rem 0.06rem;
    font-size: 0.14rem;
    font-weight: bold;
    color: #dc2626;
    min-width: 0.32rem;
    text-align: center;
    box-sizing: border-box;
    display: inline-block;
}

/* 13. 五肖单双20码杀两肖 */
.m10-wxds-list-row {
    font-size: 0.18rem;
    font-weight: bold;
    color: #2563eb;
    text-decoration: underline;
    text-align: center;
    padding: 0.08rem 0;
    cursor: pointer;
    letter-spacing: 0.01rem;
}

.m10-wxds-list-row:hover {
    color: #1d4ed8;
}

/* 全屏弹框 Overlay (限制宽度不超过 #app，固定定位居中) */
.m10-wxds-modal-overlay {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    background-color: #f7ed5e;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

@media (min-aspect-ratio: 5/8) {
    .m10-wxds-modal-overlay {
        width: 480px;
        max-width: 480px;
    }
}

.m10-wxds-modal-header {
    height: 0.50rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.16rem;
    background-color: #f7ed5e;
    flex-shrink: 0;
    box-sizing: border-box;
}

.m10-wxds-back-btn {
    background-color: #ffffff;
    border-radius: 0.06rem;
    width: 0.32rem;
    height: 0.32rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    font-size: 0.20rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.m10-wxds-modal-title {
    font-size: 0.18rem;
    font-weight: bold;
    color: #111827;
    flex: 1;
    text-align: center;
    margin-right: 0.32rem;
}

.m10-wxds-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.10rem 0.12rem 0.20rem 0.12rem;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

.m10-wxds-content-card {
    background-color: #ffffff;
    border-radius: 0.12rem;
    padding: 0.16rem 0.14rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 0.14rem;
}

.m10-wxds-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.10rem;
}

.m10-wxds-period {
    font-size: 0.14rem;
    font-weight: bold;
    color: #333333;
}

.m10-wxds-pnum {
    color: #2563eb;
    font-weight: bold;
    margin: 0 0.03rem;
}

.m10-wxds-label {
    font-size: 0.13rem;
    font-weight: bold;
    color: #666666;
}

.m10-wxds-zodiac-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.08rem;
    margin-bottom: 0.10rem;
}

.m10-wxds-zbox {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.04rem;
    width: 0.34rem;
    height: 0.34rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.15rem;
    font-weight: bold;
    color: #1e293b;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.m10-wxds-zbox.m10-box-hit {
    border: 1px solid #ef4444;
    background-color: #ffe6e6;
    color: #dc2626;
}

.m10-wxds-zbox.m10-box-blue {
    border: 1px solid #93c5fd;
    color: #2563eb;
}

.m10-wxds-row-label {
    text-align: right;
    font-size: 0.13rem;
    font-weight: bold;
    color: #666666;
    margin-top: 0.08rem;
    margin-bottom: 0.06rem;
}

.m10-wxds-single-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.08rem;
    margin-bottom: 0.10rem;
}

.m10-wxds-ds-box {
    background-color: #ffffff;
    border: 1px solid #93c5fd;
    border-radius: 0.04rem;
    width: 0.34rem;
    height: 0.34rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.15rem;
    font-weight: bold;
    color: #2563eb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.m10-wxds-ds-box.m10-box-hit {
    border: 1px solid #ef4444;
    background-color: #ffe6e6;
    color: #dc2626;
}

.m10-wxds-ds-box.m10-box-blue {
    border: 1px solid #93c5fd;
    background-color: #ffffff;
    color: #2563eb;
}

.m10-wxds-nums-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 0.04rem;
    margin-bottom: 0.10rem;
}

.m10-wxds-num-box {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.04rem;
    height: 0.30rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.12rem;
    font-weight: bold;
    color: #1e293b;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.m10-wxds-num-box.m10-box-hit {
    border: 1px solid #ef4444;
    background-color: #ffe6e6;
    color: #dc2626;
}

.m10-wxds-page-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.12rem;
    margin-bottom: 0.14rem;
}

.m10-wxds-btn-prev {
    background-color: #fef08a;
    border: none;
    border-radius: 0.06rem;
    padding: 0.06rem 0.14rem;
    font-size: 0.13rem;
    font-weight: bold;
    color: #333333;
    cursor: pointer;
}

.m10-wxds-btn-prev:disabled,
.m10-wxds-btn-next:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.m10-wxds-page-text {
    font-size: 0.13rem;
    font-weight: bold;
    color: #333333;
}

.m10-wxds-btn-next {
    background-color: #dbeafe;
    border: none;
    border-radius: 0.06rem;
    padding: 0.06rem 0.14rem;
    font-size: 0.13rem;
    font-weight: bold;
    color: #2563eb;
    cursor: pointer;
}

.m10-wxds-image-card {
    text-align: center;
}

.m10-wxds-img-wrap {
    width: 100%;
    border-radius: 0.08rem;
    overflow: hidden;
    margin-bottom: 0.06rem;
}

.m10-wxds-pic-image {
    width: 100%;
    display: block;
}

.m10-wxds-img-caption {
    font-size: 0.14rem;
    font-weight: bold;
    color: #333333;
}