.elementor-8876 .elementor-element.elementor-element-64da8fc{--display:flex;--min-height:100vh;}/* Start custom CSS for container, class: .elementor-element-64da8fc *//* ====================================================
   文心书院 - 汉字拼拼乐移动端优化 CSS
   Vision Chinese Academy - Hanzi Puzzle Mobile Fix
   ==================================================== */

/* ===== 通用移动端优化 ===== */

/* 1. 游戏容器响应式 */
@media screen and (max-width: 768px) {
    
    /* 游戏主容器 */
    .game-container,
    #game-container,
    .hanzi-puzzle-game {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* 游戏画布/Canvas */
    canvas {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* 2. 汉字部件区域 */
    .components-area,
    .parts-container,
    .hanzi-parts,
    #parts-area {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 10px !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
    }
    
    /* 单个部件 */
    .component,
    .part,
    .hanzi-part,
    .draggable-part {
        min-width: 60px !important;
        max-width: 80px !important;
        height: 60px !important;
        font-size: 36px !important;
        flex-shrink: 0 !important;
        margin: 5px !important;
        /* 确保可见 */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        /* 触摸优化 */
        touch-action: none !important;
    }
    
    /* 3. 目标区域/拼字区 */
    .target-area,
    .drop-zone,
    .answer-area,
    #drop-area {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100px !important;
        padding: 15px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
    }
    
    /* 目标区域中的部件 */
    .target-area .component,
    .drop-zone .part {
        min-width: 70px !important;
        height: 70px !important;
        font-size: 40px !important;
    }
    
    /* 4. 控制按钮区域 */
    .controls,
    .game-controls,
    .button-container {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
        padding: 10px !important;
    }
    
    /* 按钮 */
    .btn,
    button,
    .game-button {
        min-width: 100px !important;
        height: 44px !important;
        font-size: 16px !important;
        padding: 10px 20px !important;
        margin: 5px !important;
        /* 触摸优化 */
        touch-action: manipulation !important;
    }
    
    /* 5. 得分/进度显示 */
    .score-board,
    .progress-bar,
    .game-info {
        width: 100% !important;
        text-align: center !important;
        font-size: 18px !important;
        padding: 10px !important;
    }
    
    /* 6. 汉字显示 */
    .character,
    .hanzi,
    .target-character {
        font-size: 48px !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }
    
    /* 7. 滚动优化 */
    .scrollable,
    .parts-list {
        -webkit-overflow-scrolling: touch !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }
    
    /* 隐藏滚动条但保持功能 */
    .parts-container::-webkit-scrollbar {
        height: 6px !important;
    }
    
    .parts-container::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.3) !important;
        border-radius: 3px !important;
    }
}

/* ===== 小屏幕手机优化 (iPhone SE, 小型 Android) ===== */
@media screen and (max-width: 375px) {
    
    /* 进一步缩小部件 */
    .component,
    .part,
    .hanzi-part {
        min-width: 50px !important;
        max-width: 60px !important;
        height: 50px !important;
        font-size: 30px !important;
        margin: 3px !important;
    }
    
    /* 按钮更紧凑 */
    .btn,
    button {
        min-width: 80px !important;
        height: 40px !important;
        font-size: 14px !important;
        padding: 8px 15px !important;
    }
    
    /* 汉字稍小 */
    .character,
    .hanzi {
        font-size: 40px !important;
    }
}

/* ===== 横屏模式优化 ===== */
@media screen and (max-width: 768px) and (orientation: landscape) {
    
    /* 横屏时利用宽度 */
    .game-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }
    
    /* 部件区域和目标区域并排 */
    .components-area,
    .target-area {
        width: 48% !important;
        margin: 1% !important;
    }
    
    /* 控制按钮横向排列 */
    .controls {
        width: 100% !important;
        flex-direction: row !important;
    }
}

/* ===== 触摸交互优化 ===== */

/* 增大触摸区域 */
.component::before,
.part::before {
    content: '' !important;
    position: absolute !important;
    top: -10px !important;
    left: -10px !important;
    right: -10px !important;
    bottom: -10px !important;
    z-index: -1 !important;
}

/* 触摸反馈 */
.component:active,
.part:active,
.btn:active {
    transform: scale(0.95) !important;
    opacity: 0.8 !important;
}

/* 防止误触 */
* {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* 但保留输入框的选择功能 */
input,
textarea {
    user-select: text !important;
    -webkit-user-select: text !important;
}

/* ===== 可访问性增强 ===== */

/* 高对比度模式 */
@media (prefers-contrast: high) {
    .component,
    .part {
        border: 3px solid #000 !important;
    }
}

/* 减少动画（省电模式） */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* ===== 特定元素修复 ===== */

/* 如果部件在 flex 容器中 */
.flex-container .component,
.flex-container .part {
    flex: 0 0 auto !important;
}

/* 如果部件在 grid 容器中 */
.grid-container {
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)) !important;
    gap: 8px !important;
}

/* 确保游戏不会溢出屏幕 */
body,
html {
    overflow-x: hidden !important;
    width: 100% !important;
}

/* 游戏外层容器 */
.elementor-widget-container {
    width: 100% !important;
    overflow-x: hidden !important;
}

/* ===== 调试辅助（开发时使用，生产环境删除） ===== */

/* 
.component,
.part {
    border: 2px dashed red !important;
}

.target-area,
.components-area {
    border: 2px solid blue !important;
}
*/

/* ===== 性能优化 ===== */

/* GPU 加速 */
.component,
.part,
.hanzi-part {
    transform: translateZ(0) !important;
    will-change: transform !important;
}

/* 减少重绘 */
.game-container * {
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}/* End custom CSS */