/**
 * ESL词汇学习系统 - 手机端适配样式
 */

/* 基础移动端适配 */
@media (max-width: 768px) {
    /* 导航栏适配 */
    nav {
        padding: 0.5rem 0.75rem !important;
    }
    
    nav .text-lg {
        font-size: 1rem !important;
    }
    
    /* 主内容区适配 */
    #main-container {
        padding: 0.75rem !important;
    }
    
    /* 登录卡片适配 */
    .login-card {
        padding: 1.5rem !important;
    }
    
    /* 学生仪表盘网格 */
    .grid-cols-3 {
        grid-template-columns: repeat(1, 1fr) !important;
    }
    
    .md\:grid-cols-3 {
        grid-template-columns: repeat(1, 1fr) !important;
    }
    
    .md\:grid-cols-2 {
        grid-template-columns: repeat(1, 1fr) !important;
    }
    
    /* 任务卡片适配 */
    .task-card {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .task-card > div:first-child {
        margin-bottom: 0.75rem;
        width: 100%;
    }
    
    .task-card button {
        width: 100%;
    }
    
    /* 学习模式按钮 */
    .task-card .flex.space-x-3 {
        flex-direction: column;
        width: 100%;
        gap: 0.5rem;
    }
    
    .task-card .flex.space-x-3 button {
        width: 100%;
    }
    
    /* 学习界面适配 */
    #flexible-learning-view .max-w-3xl,
    #word-learning-view .max-w-3xl,
    #context-test-view .max-w-2xl,
    #spelling-test-view .max-w-xl,
    #matching-test-view .max-w-xl,
    #flashcard-learning-view .max-w-md {
        max-width: 100% !important;
        padding: 0 0.5rem;
    }
    
    /* 四维学习区 */
    .grid-cols-1.md\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    
    /* 单词大小 */
    #flexible-word,
    #learning-word {
        font-size: 2.5rem !important;
    }
    
    /* 掌握程度按钮 */
    .grid-cols-3 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.5rem !important;
    }
    
    .grid-cols-3 button {
        padding: 0.75rem 0.25rem !important;
        font-size: 0.75rem !important;
    }
    
    .grid-cols-3 button i {
        font-size: 1.25rem !important;
    }
    
    /* 选项按钮 */
    #context-options,
    #matching-options {
        grid-template-columns: 1fr !important;
    }
    
    /* 卡片翻转 */
    #flashcard-learning-view .h-80 {
        height: 16rem !important;
    }
    
    /* 模态框适配 */
    .fixed.inset-0 > .bg-white,
    .fixed.inset-0 > .bg-gradient-to-br {
        margin: 0.5rem !important;
        max-height: 95vh;
        overflow-y: auto;
    }
    
    /* 表格适配 */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    /* 输入框 */
    input, select, textarea {
        font-size: 16px !important; /* 防止iOS缩放 */
    }
    
    /* 底部按钮固定 */
    .fixed.bottom-0 {
        padding: 0.75rem !important;
    }
}

/* 小屏幕手机 */
@media (max-width: 375px) {
    nav .text-lg {
        font-size: 0.875rem !important;
    }
    
    #flexible-word,
    #learning-word {
        font-size: 2rem !important;
    }
    
    .grid-cols-3 button span:first-of-type {
        font-size: 0.625rem !important;
    }
}

/* 横屏模式 */
@media (max-height: 500px) and (orientation: landscape) {
    #flexible-learning-view,
    #word-learning-view {
        overflow-y: auto;
    }
    
    .grid-cols-1.md\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* 触摸优化 */
@media (pointer: coarse) {
    button, 
    .cursor-pointer,
    [onclick] {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* 增大点击区域 */
    .context-option,
    .matching-option,
    .test-option {
        padding: 1rem !important;
    }
}

/* 安全区域适配（iPhone X+） */
@supports (padding-top: env(safe-area-inset-top)) {
    nav {
        padding-top: env(safe-area-inset-top) !important;
    }
    
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* 禁用文本选择（提升触摸体验） */
.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 滚动优化 */
.scroll-smooth {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* 防止水平滚动 */
body {
    overflow-x: hidden;
}

/* 模态框滚动锁定 */
body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}