/* ============================================================
   math.css - 数学模块专属样式
   颜色主题：数学蓝（--math-color: #3498DB）
   ============================================================ */

/* ===== 数学模块容器 ===== */
.page-math {
    padding-top: 0;
}

/* ===== 子模块 Tab 颜色覆盖（数学蓝） ===== */
.page-math .sub-tab.active {
    background: linear-gradient(135deg, var(--math-color) 0%, #1F68A8 100%);
    color: white;
    box-shadow: var(--shadow-medium);
}

/* ============================================================
   一、认识数字 - 数字列表
   ============================================================ */
.number-view {
    animation: pageFadeIn 0.3s ease;
}

.number-list-header {
    text-align: center;
    margin-bottom: 20px;
}

.number-list-header h2 {
    font-size: 36px;
    color: var(--math-color);
    text-shadow: 0 2px 0 rgba(52, 152, 219, 0.2);
}

.number-list-header p {
    font-size: 18px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* 数字网格：10 列 */
.number-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 6px;
    background: rgba(255, 255, 255, 0.6);
    padding: 12px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}

.number-card {
    aspect-ratio: 1;
    background: linear-gradient(135deg, #FFFFFF 0%, #E8F4FD 100%);
    border: 2px solid var(--math-color);
    border-radius: var(--radius-md);
    font-size: 24px;
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    color: var(--math-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    box-shadow: var(--shadow-soft);
    position: relative;
}

.number-card:hover {
    transform: translateY(-3px) scale(1.08);
    box-shadow: var(--shadow-medium);
    background: linear-gradient(135deg, #FFFFFF 0%, #BBE3F9 100%);
}

.number-card.completed {
    background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
    border-color: var(--grass-primary);
    color: var(--grass-deep);
}

.number-card.completed::after {
    content: '✓';
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    background: var(--grass-primary);
    color: white;
    border-radius: 50%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-soft);
}

/* ============================================================
   数字详情视图
   ============================================================ */
.number-detail-view {
    animation: pageFadeIn 0.4s ease;
}

/* 数字大显示卡片 */
.number-card-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
}

.number-display {
    width: 220px;
    height: 220px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #E8F4FD 0%, #BBE3F9 100%);
    border: 6px solid var(--math-color);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 140px;
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    color: var(--math-color);
    box-shadow: var(--shadow-medium);
    text-shadow: 4px 4px 0 rgba(52, 152, 219, 0.2);
    animation: numberPop 0.4s ease;
}

@keyframes numberPop {
    0% { transform: scale(0.5); opacity: 0; }
    60% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

.number-actions {
    display: flex;
    gap: 12px;
}

/* 数学模块按钮主题色覆盖 */
.page-math .action-btn {
    background: linear-gradient(135deg, var(--math-color) 0%, #1F68A8 100%);
    border-color: white;
}

/* 数数动画区 */
.count-section {
    background: var(--bg-card);
    padding: 24px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    margin-bottom: 20px;
    border-top: 6px solid var(--math-color);
    text-align: center;
}

.count-section h3 {
    font-size: 26px;
    color: var(--math-color);
    margin-bottom: 16px;
}

.count-area {
    min-height: 120px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    background: rgba(135, 206, 235, 0.1);
    border-radius: var(--radius-md);
}

.count-tip {
    color: var(--text-secondary);
    font-size: 16px;
}

.count-fruit {
    font-size: 40px;
    animation: fruitDrop 0.4s ease;
}

@keyframes fruitDrop {
    0% { transform: translateY(-30px) scale(0); opacity: 0; }
    60% { transform: translateY(5px) scale(1.2); }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

.count-result {
    width: 100%;
    margin-top: 12px;
    font-size: 24px;
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    color: var(--math-color);
}

/* 比大小 */
.compare-section {
    background: var(--bg-card);
    padding: 24px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    margin-bottom: 20px;
    border-top: 6px solid var(--math-color);
    text-align: center;
}

.compare-section h3 {
    font-size: 26px;
    color: var(--math-color);
    margin-bottom: 16px;
}

.compare-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.compare-num {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #FFF 0%, #E8F4FD 100%);
    border: 4px solid var(--math-color);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    color: var(--math-color);
    box-shadow: var(--shadow-soft);
}

.compare-symbol {
    font-size: 60px;
    font-weight: 700;
    color: var(--sun-orange);
    min-width: 80px;
}

.compare-symbol.correct {
    color: var(--grass-primary);
    animation: correctBounce 0.5s ease;
}

.compare-symbol.wrong {
    color: var(--chinese-color);
    animation: shakeX 0.4s ease-in-out;
}

.compare-options {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.compare-btn {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #FFF8E7 0%, #FFE9B0 100%);
    border: 3px solid var(--math-color);
    border-radius: var(--radius-md);
    font-size: 40px;
    font-weight: 700;
    color: var(--math-color);
    transition: all 0.2s;
    box-shadow: var(--shadow-soft);
}

.compare-btn:hover:not(:disabled) {
    transform: translateY(-3px) scale(1.05);
    box-shadow: var(--shadow-medium);
}

.compare-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.compare-btn.correct {
    background: linear-gradient(135deg, var(--grass-primary) 0%, var(--grass-deep) 100%);
    color: white;
    border-color: var(--grass-primary);
}

.compare-btn.wrong {
    background: linear-gradient(135deg, var(--chinese-color) 0%, #C0392B 100%);
    color: white;
    border-color: var(--chinese-color);
    animation: shakeX 0.4s ease-in-out;
}

/* ============================================================
   二、加减法保卫战
   ============================================================ */
.arithmetic-view {
    animation: pageFadeIn 0.4s ease;
}

.arithmetic-header {
    text-align: center;
    margin-bottom: 16px;
}

.arithmetic-header h2 {
    font-size: 32px;
    color: var(--math-color);
    margin-bottom: 4px;
}

.arithmetic-header p {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.arithmetic-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: var(--radius-full);
    font-size: 16px;
    color: var(--text-primary);
    box-shadow: var(--shadow-soft);
}

.stat-pill strong {
    color: var(--math-color);
    font-size: 20px;
    font-family: 'Fredoka', sans-serif;
}

/* 战场 Canvas */
.battle-field {
    background: linear-gradient(180deg, #87CEEB 0%, #B5E48C 60%, #6BBF59 100%);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-medium);
    margin-bottom: 20px;
    position: relative;
}

#mathCanvas {
    display: block;
    width: 100%;
    height: auto;
    max-height: 220px;
}

.battle-fallback {
    padding: 40px;
    text-align: center;
    color: var(--grass-dark);
}

/* 题目区 */
.problem-area {
    background: var(--bg-card);
    padding: 24px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    margin-bottom: 20px;
    border-top: 6px solid var(--math-color);
    text-align: center;
}

.problem-text {
    font-size: 64px;
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    color: var(--math-color);
    margin-bottom: 20px;
    line-height: 1;
    text-shadow: 3px 3px 0 rgba(52, 152, 219, 0.15);
    animation: problemIn 0.3s ease;
}

@keyframes problemIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.answer-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
}

.answer-option {
    padding: 20px 12px;
    background: linear-gradient(135deg, #FFF8E7 0%, #FFE9B0 100%);
    border: 3px solid var(--math-color);
    border-radius: var(--radius-lg);
    font-size: 36px;
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    color: var(--grass-dark);
    transition: all 0.2s;
    box-shadow: var(--shadow-soft);
}

.answer-option:hover:not(:disabled) {
    transform: translateY(-3px) scale(1.05);
    box-shadow: var(--shadow-medium);
}

.answer-option.correct {
    background: linear-gradient(135deg, var(--grass-primary) 0%, var(--grass-deep) 100%);
    color: white;
    border-color: var(--grass-primary);
    animation: correctBounce 0.5s ease;
}

.answer-option.wrong {
    background: linear-gradient(135deg, var(--chinese-color) 0%, #C0392B 100%);
    color: white;
    border-color: var(--chinese-color);
    animation: shakeX 0.4s ease-in-out;
}

.answer-option:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

/* 难度切换 */
.difficulty-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-md);
}

.diff-label {
    font-size: 16px;
    color: var(--text-secondary);
    font-weight: 600;
}

.diff-btn {
    padding: 8px 14px;
    background: var(--bg-card);
    border: 2px solid var(--text-secondary);
    border-radius: var(--radius-full);
    font-size: 14px;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.diff-btn:hover {
    border-color: var(--math-color);
    color: var(--math-color);
}

.diff-btn.active {
    background: var(--math-color);
    border-color: var(--math-color);
    color: white;
    box-shadow: var(--shadow-soft);
}

/* ============================================================
   三、思维练习
   ============================================================ */
.thinking-view {
    animation: pageFadeIn 0.4s ease;
}

.thinking-header {
    text-align: center;
    margin-bottom: 20px;
}

.thinking-header h2 {
    font-size: 36px;
    color: var(--math-color);
    text-shadow: 0 2px 0 rgba(52, 152, 219, 0.2);
}

.thinking-header p {
    font-size: 18px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* 找规律 */
.pattern-section,
.sort-section {
    background: var(--bg-card);
    padding: 24px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    margin-bottom: 20px;
    border-top: 6px solid var(--math-color);
    text-align: center;
}

.pattern-section h3,
.sort-section h3 {
    font-size: 26px;
    color: var(--math-color);
    margin-bottom: 16px;
}

.pattern-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.pattern-cell {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #FFF 0%, #E8F4FD 100%);
    border: 3px solid var(--math-color);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    color: var(--math-color);
    box-shadow: var(--shadow-soft);
}

.pattern-cell.question {
    background: linear-gradient(135deg, #FFE066 0%, #FF8C42 100%);
    border-color: var(--sun-orange);
    color: white;
    animation: questionPulse 1.5s ease infinite;
}

@keyframes questionPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

.pattern-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
}

.pattern-option {
    padding: 16px 8px;
    background: linear-gradient(135deg, #FFF8E7 0%, #FFE9B0 100%);
    border: 3px solid var(--math-color);
    border-radius: var(--radius-md);
    font-size: 32px;
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    color: var(--grass-dark);
    transition: all 0.2s;
    box-shadow: var(--shadow-soft);
}

.pattern-option:hover:not(:disabled) {
    transform: translateY(-3px) scale(1.05);
}

.pattern-option.correct {
    background: linear-gradient(135deg, var(--grass-primary) 0%, var(--grass-deep) 100%);
    color: white;
    border-color: var(--grass-primary);
    animation: correctBounce 0.5s ease;
}

.pattern-option.wrong {
    background: linear-gradient(135deg, var(--chinese-color) 0%, #C0392B 100%);
    color: white;
    border-color: var(--chinese-color);
    animation: shakeX 0.4s ease-in-out;
}

/* 排序 */
.sort-target {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}

.sort-slot {
    width: 80px;
    height: 80px;
    border: 3px dashed var(--math-color);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    color: var(--text-secondary);
    background: rgba(52, 152, 219, 0.05);
    transition: all 0.2s;
}

.sort-slot.filled {
    background: linear-gradient(135deg, #FFF 0%, #E8F4FD 100%);
    border-style: solid;
    color: var(--math-color);
    box-shadow: var(--shadow-soft);
}

.sort-slot.drag-over {
    background: rgba(255, 217, 61, 0.3);
    border-color: var(--sun-orange);
    transform: scale(1.05);
}

.sort-slot.correct {
    background: linear-gradient(135deg, var(--grass-primary) 0%, var(--grass-deep) 100%);
    color: white;
    border-color: var(--grass-primary);
}

.sort-slot.wrong {
    background: linear-gradient(135deg, var(--chinese-color) 0%, #C0392B 100%);
    color: white;
    border-color: var(--chinese-color);
}

.sort-options {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.sort-card {
    padding: 14px 8px;
    background: linear-gradient(135deg, #FFE066 0%, #FFD93D 100%);
    border: 3px solid var(--sun-deep);
    border-radius: var(--radius-md);
    font-size: 32px;
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    color: var(--grass-dark);
    cursor: grab;
    user-select: none;
    min-width: 70px;
    text-align: center;
    box-shadow: var(--shadow-soft);
    transition: transform 0.2s;
}

.sort-card:hover {
    transform: translateY(-2px) scale(1.05);
}

.sort-card.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.sort-card.used {
    opacity: 0.3;
    pointer-events: none;
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 768px) {
    .number-grid {
        grid-template-columns: repeat(8, 1fr);
        gap: 4px;
        padding: 8px;
    }

    .number-card {
        font-size: 18px;
    }

    .number-display {
        width: 180px;
        height: 180px;
        font-size: 110px;
    }

    .compare-num {
        width: 80px;
        height: 80px;
        font-size: 48px;
    }

    .compare-symbol {
        font-size: 44px;
        min-width: 60px;
    }

    .compare-btn {
        width: 64px;
        height: 64px;
        font-size: 32px;
    }

    .problem-text {
        font-size: 44px;
    }

    .answer-option {
        font-size: 26px;
        padding: 14px 8px;
    }

    .pattern-cell,
    .sort-slot {
        width: 64px;
        height: 64px;
        font-size: 30px;
    }

    .stat-pill {
        font-size: 14px;
        padding: 4px 10px;
    }

    .diff-btn {
        font-size: 12px;
        padding: 6px 10px;
    }
}

@media (max-width: 480px) {
    .number-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .number-card {
        font-size: 16px;
    }

    .pattern-row {
        gap: 6px;
    }

    .pattern-cell {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }

    .sort-slot {
        width: 56px;
        height: 56px;
        font-size: 24px;
    }
}