/* =========================================================
   大乐透专属样式扩展 (复用双色球 style.css 基础)
========================================================= */

/* 后区使用紫色主题色 (区别于蓝球的蓝色) */
:root {
    --back-ball: #7c3aed;
    --back-ball-dark: #5b21b6;
}

/* 后区矩阵球体样式 — 继承蓝球的 .blue-matrix 但颜色用紫色 */
.blue-matrix .num-cell:not(.strike-text) span {
    background-color: var(--back-ball) !important;
    color: #ffffff !important;
    border: 2px solid var(--back-ball) !important;
    font-weight: 700;
    box-shadow: 0 3px 6px rgba(124, 58, 237, 0.25);
}
.blue-matrix .num-cell:not(.strike-text):not(.win-blue):hover span {
    transform: scale(1.08);
    box-shadow: 0 5px 10px rgba(124, 58, 237, 0.4);
}

/* 🟣 开奖后区球 */
.blue-matrix .num-cell.win-blue span {
    background-color: var(--back-ball-dark) !important;
    border: 2px solid #3b0764 !important;
    font-weight: 800;
    box-shadow: 0 5px 12px rgba(124, 58, 237, 0.4) !important;
    transform: scale(1.15);
    z-index: 10;
}

/* 🟣 高亮后区 */
.blue-matrix .num-cell.highlight-bg { background-color: #fef08a !important; border-radius: 8px; }
.blue-matrix .num-cell.highlight-bg span {
    box-shadow: 0 0 0 3px #f59e0b, 0 4px 10px rgba(124, 58, 237, 0.5) !important;
    transform: scale(1.15) !important;
    z-index: 5;
}

/* 后区遗漏标签颜色 */
.blue-matrix .num-cell:not(.strike-text) .mod-tag {
    background: #f5f3ff !important;
    color: #7c3aed !important;
    border-color: #ddd6fe !important;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(124, 58, 237, 0.1);
}
.blue-matrix .num-cell.win-blue .mod-tag {
    background: #ede9fe !important;
    color: #5b21b6 !important;
    border-color: #c4b5fd !important;
    font-weight: 800;
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.2);
}

/* 后区频次标签颜色 */
.blue-matrix .freq-tag {
    background: #f5f3ff !important;
    color: #6d28d9 !important;
    border: 1px solid #ddd6fe !important;
    box-shadow: 0 1px 3px rgba(124, 58, 237, 0.1);
}

/* 4x3 矩阵后区间距 */
#matrix-back-4x3, #matrix-back-4x3-tab { border-spacing: 16px 20px !important; margin-bottom: 10px; }
#matrix-back-freq-4x3, #matrix-back-freq-4x3-tab { border-spacing: 16px 20px !important; margin-bottom: 10px; }
#matrix-back-4x3 .row-header, #matrix-back-4x3-tab .row-header,
#matrix-back-freq-4x3 .row-header, #matrix-back-freq-4x3-tab .row-header {
    width: 70px; font-size: 13.5px; color: #475569; font-weight: 700; vertical-align: middle;
}

/* 大乐透导航 — 与双色球一致：隐藏同步按钮和状态，单行居左 */
#btn-sync-data { display: none !important; }
.nav-status { display: none !important; }
/* 导航工具区单行不换行 */
.master-toolbar { flex-wrap: nowrap !important; }
.nav-tools { flex-shrink: 0; }

/* 双色球切换按钮样式（桌面端红色，适配 btn-blue 覆盖） */
.nav-tools a.action-btn.btn-blue {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3) !important;
}
.nav-tools a.action-btn.btn-blue:hover {
    background: linear-gradient(135deg, #b91c1c, #991b1b) !important;
}

/* 移动端：隐藏同步按钮和状态（与SSQ保持一致） */
@media (max-width: 768px) {
    #btn-sync-data { display: none !important; }
    .nav-status { display: none !important; }
}

/* ================== 移动端完整适配 ================== */
@media (max-width: 768px) {
    body { padding: 8px 6px; padding-bottom: max(130px, calc(100px + env(safe-area-inset-bottom, 0px))); }
    .container { margin: 0; }

    /* 底部导航栏 */
    .master-toolbar {
        position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 100;
        display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
        padding: 8px 10px;
        padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
        border-radius: 16px 16px 0 0; margin-bottom: 0;
        background: rgba(255,255,255,0.97); box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
        backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    }
    .brand, .brand-icon, .brand-text, .brand-subtitle, .nav-divider { display: none; }

    /* 移动端 tabs：两行布局 — 第一行4个tab，第二行工具区 */
    .master-toolbar .tabs-header {
        flex: 1 1 100%; flex-wrap: nowrap; gap: 4px;
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        justify-content: stretch; display: flex;
    }
    .master-toolbar .tab-btn {
        flex: 1 1 0; text-align: center; font-size: 13px;
        padding: 10px 6px; min-width: 0; border-radius: 10px;
        white-space: nowrap; font-weight: 700; letter-spacing: 0.3px;
    }
    .master-toolbar .tab-btn.active {
        background: rgba(67, 56, 202, 0.12); box-shadow: none; color: #4338ca;
    }
    .master-toolbar .tab-btn.active::after { bottom: 2px; width: 30%; height: 3px; }

    /* 工具区第二行 */
    .nav-tools {
        flex: 1 1 100%; margin-left: 0; gap: 8px;
        display: flex; align-items: center; justify-content: center;
        padding-top: 2px; border-top: 1px solid rgba(0,0,0,0.06);
    }
    .nav-tools a.action-btn {
        font-size: 12px; padding: 5px 12px; flex-shrink: 0;
    }
    .mobile-backtest-result {
        flex: 1 1 100%; text-align: center; font-size: 12px;
        padding: 4px 8px 6px; border-top: 1px solid rgba(0,0,0,0.06);
        color: #4c1d95; font-weight: 600;
    }
    .mobile-backtest-result.show { display: block !important; }

    #btn-export-json {
        display: inline-flex !important; font-size: 13px;
        padding: 7px 16px; border-radius: 8px;
        background: linear-gradient(135deg, #4338ca, #6366f1);
        color: #fff; border: none; cursor: pointer; font-weight: 700; letter-spacing: 0.3px;
    }
    .nav-select {
        font-size: 13px; padding: 7px 24px 7px 8px;
        min-width: 0; max-width: none; flex: 1;
        background-position: right 8px center; border-radius: 8px;
        background-color: #f1f5f9; border: 1px solid #e2e8f0; font-weight: 600;
    }

    /* 画笔悬浮面板 */
    .drawing-tools {
        position: fixed; right: 6px; top: 40%; transform: translateY(-50%);
        bottom: auto; z-index: 90; flex-direction: column;
        gap: 5px; padding: 8px 6px; border-radius: 16px;
    }
    .drawing-tools .tool-label { width: 26px; height: 26px; }
    .drawing-tools .tool-label span { font-size: 11px; }
    .drawing-tools .tool-label-title { font-size: 8px; letter-spacing: 1px; padding-bottom: 2px; padding-right: 0; }
    .drawing-tools .action-btn { width: 26px; height: 26px; padding: 3px; font-size: 9px; }
    .brush-sep { width: 16px; height: 1px; margin: 2px 0; }

    /* 统计面板 */
    .stats-panel { padding: 16px 18px; font-size: 13px; }

    /* 矩阵列 */
    .matrix-flex-container { flex-direction: column; gap: 18px; }
    .matrix-col { padding: 18px; min-width: 100% !important; }
    .matrix-col:hover { transform: none; }

    /* 表格 */
    .table-responsive { overflow-x: auto; }
    table.matrix-table { border-spacing: 4px 3px; }
    .row-header { font-size: 11px; min-width: 28px; max-width: 38px; padding: 0 2px; }
    .num-cell { padding: 1px; }
    .num-cell span { width: 26px; height: 26px; font-size: 12px; }

    /* 后区矩阵 */
    .blue-matrix .num-cell { height: 52px !important; }
    .blue-matrix .num-cell span { width: 30px; height: 30px; font-size: 13px; }
    .blue-matrix .mod-tag { font-size: 9px; padding: 1px 5px; }
    #matrix-back-4x3, #matrix-back-4x3-tab,
    #matrix-back-freq-4x3, #matrix-back-freq-4x3-tab {
        border-spacing: 8px 12px !important;
    }
    #matrix-back-4x3 .row-header, #matrix-back-4x3-tab .row-header,
    #matrix-back-freq-4x3 .row-header, #matrix-back-freq-4x3-tab .row-header {
        width: auto; font-size: 11px; min-width: 36px; max-width: 48px;
    }

    /* 卡片和数据表 */
    .data-card h3 { font-size: 14px; padding: 12px 16px; }
    .data-card table.data-table th, .data-card table.data-table td { padding: 8px 10px; font-size: 12px; }

    /* 历史摘要 */
    .history-summary { padding: 10px 0; }
    .history-summary .table-responsive { overflow-x: auto; }
    .history-summary .data-table th, .history-summary .data-table td { padding: 8px 10px; }
    .history-summary .row-header { font-size: 11px !important; min-width: 32px !important; max-width: 44px !important; }
}

/* 超小屏 (<400px) */
@media (max-width: 400px) {
    body { padding-bottom: max(100px, calc(72px + env(safe-area-inset-bottom, 0px))); }
    .master-toolbar { padding: 6px 6px; padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)); gap: 4px; border-radius: 12px 12px 0 0; }
    .master-toolbar .tabs-header { gap: 2px; }
    .master-toolbar .tab-btn { font-size: 11px; padding: 8px 4px; border-radius: 8px; font-weight: 700; }
    .master-toolbar .tab-btn.active::after { width: 24%; height: 2px; }
    .nav-tools { gap: 6px; padding-top: 4px; }
    .nav-select { font-size: 12px; padding: 7px 20px 7px 6px; }
    #btn-export-json { font-size: 12px; padding: 6px 12px; }
    .blue-matrix .num-cell { height: 44px !important; }
    .blue-matrix .num-cell span { width: 26px; height: 26px; font-size: 11px; }
    .blue-matrix .mod-tag { font-size: 8px; padding: 1px 4px; }
    .num-cell span { width: 22px; height: 22px; font-size: 11px; }
}