/* ========================================
   Word Cannon 主题系统
   ======================================== */

/* 默认主题（当前蓝色渐变风格） */
:root,
body.theme-default {
    --theme-bg-primary: #1e3c72;
    --theme-bg-secondary: #2a5298;
    --theme-text-primary: #ffffff;
    --theme-text-secondary: rgba(255, 255, 255, 0.8);
    --theme-accent: #3498db;
    --theme-accent-hover: #2980b9;
    --theme-gold: #ffd700;
    --theme-panel-bg: rgba(255, 255, 255, 0.1);
    --theme-panel-bg-solid: rgba(30, 60, 114, 0.9);
    --theme-panel-bg-dark: rgba(0, 0, 0, 0.3);
    --theme-panel-border: rgba(255, 255, 255, 0.2);
    --theme-success: #4CAF50;
    --theme-success-hover: #45a049;
    --theme-error: #f44336;
    --theme-error-hover: #d32f2f;
    --theme-warning: #ff9800;
    --theme-canvas-bg: #0e1f3d;
    --theme-canvas-border: #ffd700;
    --theme-input-bg: rgba(255, 255, 255, 0.95);
    --theme-input-border: #3498db;
    --theme-input-text: #333333;
    --theme-modal-bg: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    --theme-shadow: rgba(0, 0, 0, 0.3);
    --theme-glow: rgba(255, 215, 0, 0.3);
    /* 按钮颜色 */
    --theme-btn-secondary: #9e9e9e;
    --theme-btn-disabled: #757575;
    --theme-btn-settings: #9b59b6;
    --theme-btn-settings-hover: #8e44ad;
    --theme-btn-test: #204455;
    --theme-btn-test-hover: #214b5e;
    /* 统计数值颜色 */
    --theme-stats-value: #4fc3f7;
    --theme-stats-percentage: #81c784;
    --theme-light-border: #333;
    /* 学习页面颜色 */
    --study-container-bg: #ffffff;
    --study-text: #2c3e50;
    --study-title: #2c3e50;
    --study-meta: #7f8c8d;
    --study-word-bg: #f8f9fa;
    --study-word-border: #ecf0f1;
    --study-word: #2c3e50;
    --study-phonetic: #3498db;
    --study-meaning: #7f8c8d;
    --study-section-title: #2c3e50;
    --study-story-bg: #fffaf1;
    --study-story-border: #ffe3a3;
    --study-story-text: #2c3e50;
    --study-btn-secondary: #ecf0f1;
    --study-speak-border: #d9e2ea;
    --study-speak-bg: #eef3f7;
    --study-speak-hover: #e2f2ff;
    /* 音标学习页面 */
    --phonics-guide-bg: #e3f2fd;
    --phonics-tips-bg: #fff3cd;
    --phonics-rules-bg: #d5f4e6;
}

/* ========================================
   赛博朋克主题 - 科技黄+银灰色
   ======================================== */
body.theme-cyberpunk {
    --theme-bg-primary: #3a3a42;
    --theme-bg-secondary: #52525c;
    --theme-text-primary: #f5f5f5;
    --theme-text-secondary: rgba(245, 245, 245, 0.8);
    --theme-accent: #f0c030;
    --theme-accent-hover: #d4a820;
    --theme-gold: #f0c030;
    --theme-panel-bg: rgba(192, 192, 200, 0.12);
    --theme-panel-bg-solid: rgba(58, 58, 66, 0.95);
    --theme-panel-bg-dark: rgba(0, 0, 0, 0.4);
    --theme-panel-border: rgba(240, 192, 48, 0.35);
    --theme-success: #7cb342;
    --theme-success-hover: #689f38;
    --theme-error: #e53935;
    --theme-error-hover: #c62828;
    --theme-warning: #f0c030;
    --theme-canvas-bg: #2a2a30;
    --theme-canvas-border: #f0c030;
    --theme-input-bg: rgba(82, 82, 92, 0.9);
    --theme-input-border: #f0c030;
    --theme-input-text: #f0c030;
    --theme-modal-bg: linear-gradient(135deg, #3a3a42 0%, #52525c 100%);
    --theme-shadow: rgba(0, 0, 0, 0.3);
    --theme-glow: rgba(240, 192, 48, 0.4);
    /* 按钮颜色 */
    --theme-btn-secondary: #707078;
    --theme-btn-disabled: #505058;
    --theme-btn-settings: #f0c030;
    --theme-btn-settings-hover: #d4a820;
    --theme-btn-test: #52525c;
    --theme-btn-test-hover: #62626c;
    /* 统计数值颜色 */
    --theme-stats-value: #f0c030;
    --theme-stats-percentage: #7cb342;
    --theme-light-border: #f0c030;
    /* 学习页面颜色 - 赛博朋克 */
    --study-container-bg: #42424a;
    --study-text: #f5f5f5;
    --study-title: #f0c030;
    --study-meta: #c8c8d0;
    --study-word-bg: #52525c;
    --study-word-border: rgba(240, 192, 48, 0.3);
    --study-word: #f5f5f5;
    --study-phonetic: #f0c030;
    --study-meaning: #c8c8d0;
    --study-section-title: #f0c030;
    --study-story-bg: #3a3a42;
    --study-story-border: rgba(240, 192, 48, 0.4);
    --study-story-text: #f5f5f5;
    --study-btn-secondary: #62626c;
    --study-speak-border: rgba(240, 192, 48, 0.4);
    --study-speak-bg: #52525c;
    --study-speak-hover: #62626c;
    /* 音标学习页面 - 赛博朋克 */
    --phonics-guide-bg: rgba(240, 192, 48, 0.1);
    --phonics-tips-bg: rgba(240, 192, 48, 0.15);
    --phonics-rules-bg: rgba(124, 179, 66, 0.15);
}

/* 赛博朋克特效 - 银灰金属质感 */
body.theme-cyberpunk {
    background: 
        linear-gradient(135deg, var(--theme-bg-primary) 0%, var(--theme-bg-secondary) 100%);
}

body.theme-cyberpunk .game-header h1 {
    color: #f0c030;
    text-shadow: 
        0 0 10px rgba(240, 192, 48, 0.5),
        0 0 20px rgba(240, 192, 48, 0.3);
    letter-spacing: 3px;
}

body.theme-cyberpunk #gameCanvas {
    box-shadow: 
        0 0 15px rgba(240, 192, 48, 0.3),
        inset 0 0 20px rgba(0, 0, 0, 0.3);
    border-width: 2px;
}

body.theme-cyberpunk .info-item span:last-child,
body.theme-cyberpunk .sidebar h3 {
    color: var(--theme-gold);
    text-shadow: 0 0 8px rgba(240, 192, 48, 0.4);
}

body.theme-cyberpunk .sidebar > div,
body.theme-cyberpunk .left-panel > .image-showcase,
body.theme-cyberpunk .left-panel > .game-controls {
    border: 1px solid rgba(240, 192, 48, 0.25);
    background: rgba(192, 192, 200, 0.08);
}

/* 赛博朋克主题：控制按钮专门适配 */
body.theme-cyberpunk #startBtn {
    background: #f0c030;
    color: #2a2a30;
    font-weight: bold;
}

body.theme-cyberpunk #startBtn:hover {
    background: #d4a820;
}

body.theme-cyberpunk #pauseBtn {
    background: #f0c030;
    color: #2a2a30;
    font-weight: bold;
}

body.theme-cyberpunk #pauseBtn:hover {
    background: #d4a820;
}

body.theme-cyberpunk #resetBtn {
    background: #e53935;
    color: #fff;
}

body.theme-cyberpunk #resetBtn:hover {
    background: #c62828;
}

body.theme-cyberpunk .settings-btn {
    background: #f0c030;
    color: #2a2a30;
    font-weight: bold;
}

body.theme-cyberpunk .settings-btn:hover {
    background: #d4a820;
}

body.theme-cyberpunk .toggle-speech {
    background: #52525c;
    color: #f0c030;
    border: 1px solid rgba(240, 192, 48, 0.4);
}

body.theme-cyberpunk .toggle-speech:hover {
    background: #62626c;
}

body.theme-cyberpunk .toggle-speech.disabled {
    background: #3a3a42;
    color: #666;
    border-color: #555;
}

body.theme-cyberpunk .test-btn {
    background: #52525c;
    color: #f0c030;
    border: 1px solid rgba(240, 192, 48, 0.4);
}

body.theme-cyberpunk .test-btn:hover {
    background: #62626c;
}

body.theme-cyberpunk .give-up-btn {
    background: #707078;
    color: #f5f5f5;
}

body.theme-cyberpunk .give-up-btn:hover {
    background: #808088;
}

body.theme-cyberpunk #exportBtn {
    background: #52525c;
    color: #f0c030;
    border: 1px solid rgba(240, 192, 48, 0.3);
}

body.theme-cyberpunk #exportBtn:hover:not(:disabled) {
    background: #62626c;
}

/* ========================================
   Kitty猫主题 - 温柔粉红风
   ======================================== */
body.theme-doraemon {
    --theme-bg-primary: #d4789c;
    --theme-bg-secondary: #e8a4bc;
    --theme-text-primary: #ffffff;
    --theme-text-secondary: rgba(255, 255, 255, 0.85);
    --theme-accent: #c9557a;
    --theme-accent-hover: #b34567;
    --theme-gold: #f5d76e;
    --theme-panel-bg: rgba(255, 255, 255, 0.2);
    --theme-panel-bg-solid: rgba(212, 120, 156, 0.95);
    --theme-panel-bg-dark: rgba(160, 64, 96, 0.3);
    --theme-panel-border: rgba(255, 255, 255, 0.35);
    --theme-success: #7dcea0;
    --theme-success-hover: #58d68d;
    --theme-error: #e57373;
    --theme-error-hover: #ef5350;
    --theme-warning: #f5d76e;
    --theme-canvas-bg: #fdf2f5;
    --theme-canvas-border: #c9557a;
    --theme-input-bg: #ffffff;
    --theme-input-border: #d4789c;
    --theme-input-text: #a04060;
    --theme-modal-bg: linear-gradient(135deg, #d4789c 0%, #e8a4bc 100%);
    --theme-shadow: rgba(212, 120, 156, 0.3);
    --theme-glow: rgba(201, 85, 122, 0.35);
    /* 按钮颜色 - Kitty主题使用实心按钮确保可见 */
    --theme-btn-secondary: #b08090;
    --theme-btn-disabled: #c0a0a8;
    --theme-btn-settings: #c9557a;
    --theme-btn-settings-hover: #a04060;
    --theme-btn-test: #7a3050;
    --theme-btn-test-hover: #8a4060;
    /* 统计数值颜色 */
    --theme-stats-value: #7a3050;
    --theme-stats-percentage: #58a060;
    --theme-light-border: #c9557a;
    /* 学习页面颜色 - Kitty猫（亮色主题需要深色文字） */
    --study-container-bg: rgba(255, 255, 255, 0.95);
    --study-text: #5a2040;
    --study-title: #7a2040;
    --study-meta: #8a5070;
    --study-word-bg: rgba(255, 240, 245, 0.9);
    --study-word-border: #d4789c;
    --study-word: #5a2040;
    --study-phonetic: #a04060;
    --study-meaning: #7a4060;
    --study-section-title: #7a2040;
    --study-story-bg: rgba(255, 245, 248, 0.95);
    --study-story-border: #d4789c;
    --study-story-text: #5a2040;
    --study-btn-secondary: #e8c0d0;
    --study-speak-border: #c9557a;
    --study-speak-bg: rgba(255, 240, 245, 0.9);
    --study-speak-hover: rgba(201, 85, 122, 0.2);
    /* 音标学习页面 - Kitty猫 */
    --phonics-guide-bg: rgba(201, 85, 122, 0.1);
    --phonics-tips-bg: rgba(245, 215, 110, 0.3);
    --phonics-rules-bg: rgba(125, 206, 160, 0.2);
}

/* Kitty猫特效 - 圆润可爱 */
body.theme-doraemon .game-container {
    border-radius: 20px;
}

body.theme-doraemon .game-header h1 {
    font-weight: 800;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px rgba(160, 64, 96, 0.25);
}

body.theme-doraemon #gameCanvas {
    border-radius: 15px;
    border-width: 4px;
    box-shadow: 0 0 15px rgba(201, 85, 122, 0.25);
}

body.theme-doraemon button {
    border-radius: 20px !important;
}

/* Kitty猫主题：控制按钮专门适配 */
body.theme-doraemon #startBtn {
    background: linear-gradient(135deg, #c9557a, #d87598);
    color: #fff;
    font-weight: bold;
}

body.theme-doraemon #startBtn:hover {
    background: linear-gradient(135deg, #b04565, #c86088);
}

body.theme-doraemon #pauseBtn {
    background: linear-gradient(135deg, #e8a070, #f0b088);
    color: #5a3020;
    font-weight: bold;
}

body.theme-doraemon #pauseBtn:hover {
    background: linear-gradient(135deg, #d89060, #e8a078);
}

body.theme-doraemon #resetBtn {
    background: linear-gradient(135deg, #d85050, #e86868);
    color: #fff;
}

body.theme-doraemon #resetBtn:hover {
    background: linear-gradient(135deg, #c84040, #d85858);
}

body.theme-doraemon .settings-btn {
    background: linear-gradient(135deg, #c9557a, #d87598);
    color: #fff;
    font-weight: bold;
}

body.theme-doraemon .settings-btn:hover {
    background: linear-gradient(135deg, #b04565, #c86088);
}

body.theme-doraemon .toggle-speech {
    background: linear-gradient(135deg, #7a8fdd, #8fa0e8);
    color: #fff;
}

body.theme-doraemon .toggle-speech:hover {
    background: linear-gradient(135deg, #6a7fcd, #7f90d8);
}

body.theme-doraemon .toggle-speech.disabled {
    background: #ccc;
    color: #888;
}

body.theme-doraemon .test-btn {
    background: linear-gradient(135deg, #6a8ad0, #7a9ae0);
    color: #fff;
}

body.theme-doraemon .test-btn:hover {
    background: linear-gradient(135deg, #5a7ac0, #6a8ad0);
}

body.theme-doraemon .give-up-btn {
    background: linear-gradient(135deg, #c0c0c0, #d0d0d0);
    color: #555;
}

body.theme-doraemon .give-up-btn:hover {
    background: linear-gradient(135deg, #b0b0b0, #c0c0c0);
}

body.theme-doraemon #exportBtn {
    background: linear-gradient(135deg, #c9557a, #d87598);
    color: #fff;
}

body.theme-doraemon #exportBtn:hover:not(:disabled) {
    background: linear-gradient(135deg, #b04565, #c86088);
}

body.theme-doraemon .sidebar > div,
body.theme-doraemon .left-panel > .image-showcase,
body.theme-doraemon .left-panel > .game-controls {
    border-radius: 15px;
}

body.theme-doraemon .light {
    border-radius: 50%;
    border-width: 3px;
}

/* Kitty主题：游戏页面特殊适配 - 确保文字可读 */
body.theme-doraemon .game-info,
body.theme-doraemon .exam-stats {
    background: rgba(255, 255, 255, 0.85);
}

body.theme-doraemon .info-item .label,
body.theme-doraemon .stats-item .label {
    color: #7a3050;
}

body.theme-doraemon .info-item span:last-child {
    color: #a04060;
}

body.theme-doraemon .stats-item span:not(.label):not(.percentage) {
    color: #7a3050;
}

body.theme-doraemon .stats-item .percentage {
    color: #58a060;
}

body.theme-doraemon .sidebar > div,
body.theme-doraemon .left-panel > .image-showcase,
body.theme-doraemon .left-panel > .game-controls {
    background: rgba(255, 255, 255, 0.85);
}

body.theme-doraemon .sidebar h3 {
    color: #a04060;
}

body.theme-doraemon #nextWord {
    background: rgba(160, 64, 96, 0.15);
    color: #7a3050;
}

body.theme-doraemon .vocab-item {
    background: rgba(160, 64, 96, 0.1);
}

body.theme-doraemon .vocab-word {
    color: #a04060;
}

body.theme-doraemon .vocab-count {
    color: #8a5070;
}

body.theme-doraemon .input-section label {
    color: #a04060;
}

body.theme-doraemon .keyboard-hint {
    color: #8a5070;
    border-color: rgba(201, 85, 122, 0.3);
}

body.theme-doraemon .real-time-preview {
    color: #a04060;
    border-color: #c9557a;
}

body.theme-doraemon .game-instructions li {
    color: #7a3050;
}

body.theme-doraemon .game-instructions li:before {
    color: #c9557a;
}

body.theme-doraemon .game-intro h4 {
    color: #a04060;
}

/* Kitty主题：弹窗适配 */
body.theme-doraemon .modal-content {
    background: linear-gradient(135deg, #fdf2f5 0%, #fff 100%);
}

body.theme-doraemon .modal-content h2 {
    color: #a04060;
}

body.theme-doraemon .modal-content p {
    color: #7a3050;
}

body.theme-doraemon .modal-buttons button {
    background: linear-gradient(135deg, #c9557a, #a04060);
}

/* ========================================
   蝙蝠侠主题 - 暗黑哥特风
   ======================================== */
body.theme-batman {
    --theme-bg-primary: #0d0d0d;
    --theme-bg-secondary: #1a1a2e;
    --theme-text-primary: #e0e0e0;
    --theme-text-secondary: rgba(224, 224, 224, 0.7);
    --theme-accent: #ffd700;
    --theme-accent-hover: #e6c200;
    --theme-gold: #ffd700;
    --theme-panel-bg: rgba(255, 215, 0, 0.05);
    --theme-panel-bg-solid: rgba(13, 13, 13, 0.95);
    --theme-panel-bg-dark: rgba(0, 0, 0, 0.5);
    --theme-panel-border: rgba(255, 215, 0, 0.3);
    --theme-success: #4caf50;
    --theme-success-hover: #43a047;
    --theme-error: #b71c1c;
    --theme-error-hover: #8b1515;
    --theme-warning: #ffd700;
    --theme-canvas-bg: #0d0d0d;
    --theme-canvas-border: #ffd700;
    --theme-input-bg: rgba(13, 13, 13, 0.9);
    --theme-input-border: #ffd700;
    --theme-input-text: #ffd700;
    --theme-modal-bg: linear-gradient(135deg, #0d0d0d 0%, #1a1a2e 100%);
    --theme-shadow: rgba(0, 0, 0, 0.5);
    --theme-glow: rgba(255, 215, 0, 0.4);
    /* 按钮颜色 */
    --theme-btn-secondary: #3a3a4a;
    --theme-btn-disabled: #2a2a3a;
    --theme-btn-settings: #ffd700;
    --theme-btn-settings-hover: #e6c200;
    --theme-btn-test: #1a1a2e;
    --theme-btn-test-hover: #2a2a3e;
    /* 统计数值颜色 */
    --theme-stats-value: #ffd700;
    --theme-stats-percentage: #4caf50;
    --theme-light-border: #ffd700;
    /* 学习页面颜色 - 蝙蝠侠 */
    --study-container-bg: #1a1a2e;
    --study-text: #e0e0e0;
    --study-title: #ffd700;
    --study-meta: #8a8a9a;
    --study-word-bg: #0d0d0d;
    --study-word-border: rgba(255, 215, 0, 0.3);
    --study-word: #e0e0e0;
    --study-phonetic: #ffd700;
    --study-meaning: #8a8a9a;
    --study-section-title: #ffd700;
    --study-story-bg: #0d0d0d;
    --study-story-border: rgba(255, 215, 0, 0.4);
    --study-story-text: #e0e0e0;
    --study-btn-secondary: #2a2a3e;
    --study-speak-border: rgba(255, 215, 0, 0.4);
    --study-speak-bg: #1a1a2e;
    --study-speak-hover: #2a2a3e;
    /* 音标学习页面 - 蝙蝠侠 */
    --phonics-guide-bg: rgba(255, 215, 0, 0.1);
    --phonics-tips-bg: rgba(255, 215, 0, 0.15);
    --phonics-rules-bg: rgba(76, 175, 80, 0.15);
}

/* 蝙蝠侠特效 - 暗黑戏剧性 */
body.theme-batman {
    background: 
        radial-gradient(ellipse at top, #1a1a2e 0%, #0d0d0d 70%),
        linear-gradient(135deg, #0d0d0d 0%, #1a1a2e 100%);
}

body.theme-batman .game-header h1 {
    color: var(--theme-gold);
    text-shadow: 
        0 0 10px rgba(255, 215, 0, 0.5),
        0 0 20px rgba(255, 215, 0, 0.3);
    letter-spacing: 4px;
    font-weight: 900;
}

body.theme-batman #gameCanvas {
    box-shadow: 
        0 0 15px rgba(255, 215, 0, 0.3),
        inset 0 0 30px rgba(0, 0, 0, 0.5);
}

body.theme-batman .sidebar > div,
body.theme-batman .left-panel > .image-showcase,
body.theme-batman .left-panel > .game-controls {
    border: 1px solid var(--theme-panel-border);
}

body.theme-batman button {
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 蝙蝠侠主题：控制按钮专门适配 */
body.theme-batman #startBtn {
    background: #ffd700;
    color: #0d0d0d;
    font-weight: bold;
}

body.theme-batman #startBtn:hover {
    background: #e6c200;
}

body.theme-batman #pauseBtn {
    background: #ffd700;
    color: #0d0d0d;
    font-weight: bold;
}

body.theme-batman #pauseBtn:hover {
    background: #e6c200;
}

body.theme-batman #resetBtn {
    background: #8b0000;
    color: #fff;
    border: 1px solid #ffd700;
    font-weight: bold;
}

body.theme-batman #resetBtn:hover {
    background: #a00000;
    color: #ffd700;
}

body.theme-batman .settings-btn {
    background: #ffd700;
    color: #0d0d0d;
    font-weight: bold;
}

body.theme-batman .settings-btn:hover {
    background: #e6c200;
}

body.theme-batman .toggle-speech {
    background: #2a2a4a;
    color: #ffd700;
    border: 1px solid rgba(255, 215, 0, 0.5);
}

body.theme-batman .toggle-speech:hover {
    background: #3a3a5a;
}

body.theme-batman .toggle-speech.disabled {
    background: #1a1a2e;
    color: #666;
    border-color: #444;
}

body.theme-batman .test-btn {
    background: #2a2a4a;
    color: #ffd700;
    border: 1px solid rgba(255, 215, 0, 0.5);
}

body.theme-batman .test-btn:hover {
    background: #3a3a5a;
}

body.theme-batman .give-up-btn {
    background: #4a4a5a;
    color: #e0e0e0;
}

body.theme-batman .give-up-btn:hover {
    background: #5a5a6a;
}

body.theme-batman #exportBtn {
    background: #2a2a4a;
    color: #ffd700;
    border: 1px solid rgba(255, 215, 0, 0.4);
}

body.theme-batman #exportBtn:hover:not(:disabled) {
    background: #3a3a5a;
}

/* ========================================
   蜘蛛侠主题 - 红黑色系
   ======================================== */
body.theme-spiderman {
    --theme-bg-primary: #1a0a0a;
    --theme-bg-secondary: #2d1515;
    --theme-text-primary: #ffffff;
    --theme-text-secondary: rgba(255, 255, 255, 0.8);
    --theme-accent: #e23636;
    --theme-accent-hover: #c42020;
    --theme-gold: #e23636;
    --theme-panel-bg: rgba(226, 54, 54, 0.1);
    --theme-panel-bg-solid: rgba(26, 10, 10, 0.95);
    --theme-panel-bg-dark: rgba(0, 0, 0, 0.4);
    --theme-panel-border: rgba(226, 54, 54, 0.3);
    --theme-success: #4caf50;
    --theme-success-hover: #43a047;
    --theme-error: #ff5252;
    --theme-error-hover: #ff1744;
    --theme-warning: #ffc107;
    --theme-canvas-bg: #0d0505;
    --theme-canvas-border: #e23636;
    --theme-input-bg: rgba(45, 21, 21, 0.9);
    --theme-input-border: #e23636;
    --theme-input-text: #e23636;
    --theme-modal-bg: linear-gradient(135deg, #1a0a0a 0%, #2d1515 100%);
    --theme-shadow: rgba(226, 54, 54, 0.2);
    --theme-glow: rgba(226, 54, 54, 0.4);
    /* 按钮颜色 */
    --theme-btn-secondary: #4a2020;
    --theme-btn-disabled: #3a1515;
    --theme-btn-settings: #e23636;
    --theme-btn-settings-hover: #c42020;
    --theme-btn-test: #2d1515;
    --theme-btn-test-hover: #3d2020;
    /* 统计数值颜色 */
    --theme-stats-value: #e23636;
    --theme-stats-percentage: #4caf50;
    --theme-light-border: #e23636;
    /* 学习页面颜色 - 蜘蛛侠 */
    --study-container-bg: #2d1515;
    --study-text: #ffffff;
    --study-title: #e23636;
    --study-meta: #ccaaaa;
    --study-word-bg: #1a0a0a;
    --study-word-border: rgba(226, 54, 54, 0.3);
    --study-word: #ffffff;
    --study-phonetic: #e23636;
    --study-meaning: #ccaaaa;
    --study-section-title: #e23636;
    --study-story-bg: #1a0a0a;
    --study-story-border: rgba(226, 54, 54, 0.4);
    --study-story-text: #ffffff;
    --study-btn-secondary: #3d2020;
    --study-speak-border: rgba(226, 54, 54, 0.4);
    --study-speak-bg: #2d1515;
    --study-speak-hover: #3d2020;
    /* 音标学习页面 - 蜘蛛侠 */
    --phonics-guide-bg: rgba(226, 54, 54, 0.1);
    --phonics-tips-bg: rgba(255, 193, 7, 0.15);
    --phonics-rules-bg: rgba(76, 175, 80, 0.15);
}

/* 蜘蛛侠特效 - 蛛网纹理感 */
body.theme-spiderman {
    background: 
        linear-gradient(135deg, var(--theme-bg-primary) 0%, var(--theme-bg-secondary) 100%);
}

body.theme-spiderman .game-header h1 {
    color: #e23636;
    text-shadow: 
        0 0 10px rgba(226, 54, 54, 0.6),
        0 0 20px rgba(226, 54, 54, 0.4),
        2px 2px 0 #000;
    letter-spacing: 2px;
    font-weight: 900;
}

body.theme-spiderman #gameCanvas {
    box-shadow: 
        0 0 20px rgba(226, 54, 54, 0.4),
        inset 0 0 30px rgba(0, 0, 0, 0.5);
    border-width: 3px;
}

body.theme-spiderman .info-item span:last-child,
body.theme-spiderman .sidebar h3 {
    color: #e23636;
    text-shadow: 0 0 8px rgba(226, 54, 54, 0.5);
}

body.theme-spiderman .sidebar > div,
body.theme-spiderman .left-panel > .image-showcase,
body.theme-spiderman .left-panel > .game-controls {
    border: 1px solid rgba(226, 54, 54, 0.25);
    background: rgba(226, 54, 54, 0.08);
}

body.theme-spiderman button {
    text-transform: uppercase;
}

/* 蜘蛛侠主题：控制按钮专门适配 */
body.theme-spiderman #startBtn {
    background: #e23636;
    color: #fff;
    font-weight: bold;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

body.theme-spiderman #startBtn:hover {
    background: #c42020;
}

body.theme-spiderman #pauseBtn {
    background: #e67e22;
    color: #fff;
    font-weight: bold;
}

body.theme-spiderman #pauseBtn:hover {
    background: #d35400;
}

body.theme-spiderman #resetBtn {
    background: #7b0000;
    color: #fff;
    border: 1px solid rgba(226, 54, 54, 0.5);
}

body.theme-spiderman #resetBtn:hover {
    background: #9b0000;
}

body.theme-spiderman .settings-btn {
    background: #e23636;
    color: #fff;
    font-weight: bold;
}

body.theme-spiderman .settings-btn:hover {
    background: #c42020;
}

body.theme-spiderman .toggle-speech {
    background: #2d1515;
    color: #e23636;
    border: 1px solid rgba(226, 54, 54, 0.5);
}

body.theme-spiderman .toggle-speech:hover {
    background: #3d2020;
}

body.theme-spiderman .toggle-speech.disabled {
    background: #1a0a0a;
    color: #666;
    border-color: #444;
}

body.theme-spiderman .test-btn {
    background: #2d1515;
    color: #e23636;
    border: 1px solid rgba(226, 54, 54, 0.5);
}

body.theme-spiderman .test-btn:hover {
    background: #3d2020;
}

body.theme-spiderman .give-up-btn {
    background: #4a2020;
    color: #fff;
}

body.theme-spiderman .give-up-btn:hover {
    background: #5a2525;
}

body.theme-spiderman #exportBtn {
    background: #2d1515;
    color: #e23636;
    border: 1px solid rgba(226, 54, 54, 0.4);
}

body.theme-spiderman #exportBtn:hover:not(:disabled) {
    background: #3d2020;
}

/* ========================================
   主题加载脚本（内联在页面中）
   ======================================== */