/* ==========================================================================
   响应式样式
   ========================================================================== */

/* --- 1. 中等屏幕 / 横屏平板 (<= 992px) --- */
@media (max-width: 992px) {
    .main-content {
        gap: 1rem;
        max-width: 100%;
        padding: 0 1rem;
    }
}

/* --- 2. 竖屏平板 / 大型手机 (<= 768px) --- */
@media (max-width: 768px) {
    body {
        padding: 0.5rem;
        align-items: flex-start;
    }

    /* 主内容区改为垂直堆叠 */
    .main-content {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 0;
    }

    /* 卡片和例句容器都占据全部宽度 */
    .card-container,
    .sentences-container {
        max-width: 100%;
        padding: 1rem;
    }

    .card-container:last-child {
        margin-bottom: 2rem;
    }

    .definition-container {
        display: flex;
        flex-direction: column;
    }

    /* 取消单词卡片的最小高度限制，让其自适应内容 */
    .word-card {
        min-height: auto;
    }

    /* 取消短语区的滚动条，让其自然展开 */
    .phrase-list {
        max-height: none;
        overflow-y: visible;
    }

    /* 调整字体大小以适应小屏幕 */
    .page-title {
        font-size: 1.25rem;
    }

    .word-text {
        font-size: 1.75rem;
    }

    /* 调整浮动按钮位置，避免遮挡内容 */
    .theme-toggle {
        top: 0.5rem;
        right: 0.5rem;
    }

    .settings-btn {
        bottom: 0.5rem;
        right: 0.5rem;
    }

    /* 减小浮动按钮的尺寸和内边距 */
    .theme-toggle,
    .settings-btn {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1.1rem;
    }

    /* 减小卡片内部控制按钮的内边距 */
    .control-btn,
    .search-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }

    /* 减少例句列表的最大高度 */
    .sentences-list {
        max-height: none;
    }

    .modal-card {
        padding: 1rem;
        max-width: 30rem;
    }

    .modal-header {
        padding-bottom: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .close-btn {
        font-size: 2rem;
        top: 0.25rem;
        right: 0.75rem;
    }
}

/* --- 3. 小型手机 (<= 480px) --- */
@media (max-width: 480px) {
    body {
        padding: 0.25rem;
    }

    .card-container,
    .sentences-container {
        padding: 0.75rem;
    }

    .modal-card {
        max-width: 20rem;
    }

    .word-text {
        font-size: 1.5rem;
    }

    .word-phonetic,
    .word-pos,
    .word-def {
        font-size: 0.875rem;
    }

    .sentence-en,
    .sentence-cn {
        font-size: 0.85rem;
    }

    /* 调整发音区域布局，使其垂直堆叠 */
    .phonetic-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .pronounce-group {
        width: 100%;
        justify-content: flex-start;
    }

    .pronounce-group .pronounce-item:last-child {
        text-align: left;
        margin-top: 0;
    }

    .control-area {
        display: flex;
        justify-content: center;
        gap: 1rem;
    }

    .control-btn {
        font-size: 0.875rem;
    }

    .control-btn span {
        display: none;
    }

    .progress-text {
        text-align: center;
    }
}