/* 手机端CLS（累积布局偏移）优化样式 */

/* 1. 广告容器稳定性优化 - 解决主要CLS问题 */
.ad-container {
    /* 简化广告容器样式 */
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    overflow: visible !important;
    min-height: 0 !important; /* 移除最小高度限制 */
    transition: none !important;
}

/* 空广告容器完全隐藏（当容器内没有实际内容时） */
.ad-container:empty {
    display: none !important;
    min-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* 被拦截的广告容器完全隐藏 */
.ad-container.ad-blocked,
.ad-container[data-ad-status="blocked"] {
    display: none !important;
    min-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
    clip: rect(0, 0, 0, 0) !important;
    overflow: hidden !important;
}

/* 默认隐藏底部导航 */
.mobile-bottom-nav {
    display: none !important;
}

/* 广告位置特定优化 */
.ad-position-after_subtitle {
    min-height: 0 !important; /* 移除最小高度限制 */
    margin: 0 !important;
    padding: 0 !important;
}

.ad-position-header {
    min-height: 0 !important; /* 移除最小高度限制 */
    margin: 0 !important;
    padding: 0 !important;
}

.ad-position-footer {
    min-height: 0 !important; /* 移除最小高度限制 */
    margin: 0 !important;
    padding: 0 !important;
}

.ad-position-sidebar {
    min-height: 0 !important; /* 移除最小高度限制 */
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 移除广告加载占位符 */
.ad-container::before {
    display: none !important;
}

.ad-container.loaded::before {
    display: none !important;
}

@keyframes ad-loading {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 2. 导航栏伪元素稳定性优化 */
.minecraft-nav::before {
    /* 固定伪元素尺寸，防止动画导致的布局偏移 */
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, 
        var(--minecraft-green) 0%, 
        var(--minecraft-secondary) 25%, 
        var(--minecraft-green) 50%, 
        var(--minecraft-secondary) 75%, 
        var(--minecraft-green) 100%) !important;
    background-size: 200% 100% !important;
    will-change: background-position !important;
    transform: translateZ(0) !important; /* 启用硬件加速 */
}

/* 移动端导航栏固定高度 */
@media (max-width: 768px) {
    .minecraft-nav {
        min-height: 70px !important;
        height: auto !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
    }
    
    .nav-container {
        min-height: 60px !important;
        padding: 0.8rem 1rem !important;
    }
    
    .nav-header {
        min-height: 44px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    
    .nav-logo {
        font-size: 1.3rem !important;
        line-height: 1.2 !important;
        min-height: 1.56rem !important;
    }
    
    .nav-toggle {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        flex-shrink: 0 !important;
    }
}

/* 3. 字体加载优化 - 防止字体切换导致的布局偏移 */
@media (max-width: 768px) {
    /* 预设字体尺寸和行高，减少字体加载时的偏移 */
    body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
        font-size: 16px !important;
        line-height: 1.6 !important;
        font-display: swap !important;
    }
    
    h1, h2, h3, h4, h5, h6 {
        font-family: 'VT323-Fallback', 'VT323', monospace !important;
        font-display: swap !important;
        line-height: 1.2 !important;
    }
    
    h1 {
        font-size: 2rem !important;
        min-height: 2.4rem !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
        min-height: 1.8rem !important;
    }
    
    h3 {
        font-size: 1.2rem !important;
        min-height: 1.44rem !important;
    }
    
    /* 搜索标题特殊处理 */
    .search-title {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
        min-height: 2.16rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .search-subtitle {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        min-height: 1.5rem !important;
        margin-bottom: 2rem !important;
    }
}

/* 4. 主要内容区域稳定性 */
@media (max-width: 768px) {
    main {
        min-height: 600px !important;
        padding: 0 !important; /* 移除左右内边距，让内容延伸到边缘 */
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important; /* 防止水平滚动 */
    }
    
    .content-section {
        min-height: 400px !important;
        padding: 1rem 0 !important; /* 只保留上下内边距 */
        width: 100% !important;
    }
    
    /* 搜索区域稳定性 - 修复Find Minecraft Resources布局偏移 */
    .resource-search-section {
        min-height: 320px !important; /* 增加高度适应移动端布局 */
        padding: 2rem 0 !important; /* 移除左右内边距 */
        margin: 1rem 0 !important; /* 与主样式保持一致 */
        /* 确保移动端居中显示 */
        width: 100% !important; /* 改为100%，不使用100vw */
        margin-left: 0 !important; /* 移除负margin */
        text-align: center !important;
        border-radius: 0 !important;
        background: var(--minecraft-dark) !important;
        border: none !important;
    }
    
    /* 增加特异性，确保样式能覆盖原有样式 */
    body main .mega-card .resource-search-section {
        min-height: 320px !important;
        padding: 2rem 0 !important;
        margin: 0 !important;
        width: 100% !important;
        margin-left: 0 !important;
        text-align: center !important;
        border-radius: 0 !important;
        background: var(--minecraft-dark) !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    .search-container {
        min-height: 220px !important; /* 增加容器高度 */
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 1rem !important; /* 添加左右内边距 */
    }
    
    .search-title {
        font-size: 2rem !important; /* 固定移动端标题大小 */
        line-height: 1.2 !important;
        min-height: 2.4rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .search-subtitle {
        font-size: 1rem !important; /* 固定副标题大小 */
        line-height: 1.5 !important;
        min-height: 1.5rem !important;
        margin-bottom: 2rem !important;
    }
    
    .search-box-wrapper {
        min-height: 80px !important; /* 增加高度适应垂直布局 */
        margin-bottom: 1rem !important;
        flex-direction: column !important; /* 强制垂直布局 */
        max-width: 100% !important;
        display: flex !important;
    }
    
    .minecraft-search-input {
        border-radius: 8px !important;
        margin-bottom: 0.5rem !important;
        min-height: 48px !important; /* 固定输入框高度 */
        padding: 1rem 1.5rem !important;
        font-size: 1rem !important; /* 防止iOS缩放 */
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .minecraft-search-btn {
        border-radius: 8px !important;
        justify-content: center !important;
        min-height: 48px !important; /* 固定按钮高度 */
        padding: 1rem 2rem !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .search-suggestions {
        min-height: 60px !important; /* 增加建议区域高度 */
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
    }
    
    .suggestion-label {
        text-align: center !important;
        margin-bottom: 0.5rem !important;
        display: block !important;
    }
    
    .suggestion-tag {
        text-align: center !important;
        min-height: 36px !important; /* 固定标签高度 */
        padding: 0.5rem 1rem !important;
        margin: 0.2rem 0 !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 移动端隐藏工具卡片描述文字 */
    .tool-card p {
        display: none !important; /* 完全隐藏描述文字 */
    }
    
    /* 为隐藏描述文字后的工具卡片调整高度和布局 */
    .tool-card {
        min-height: 100px !important; /* 减小最小高度 */
        padding: 1rem !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important; /* 改为垂直居中 */
        align-items: center !important;
        text-align: center !important;
    }
    
    /* 确保工具部分的标题有内边距 */
    .tools-section h2, .section-title {
        padding: 0 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .tool-icon {
        font-size: 2rem !important;
        margin-bottom: 0.5rem !important;
        min-height: 2rem !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        height: 40px !important; /* 统一移动端图标高度 */
        position: relative !important;
        text-shadow: none !important;
    }
    
    /* 移动端处理emoji图标 */
    .tool-icon:not(:has(img)) {
        line-height: 1 !important;
        padding-top: 3px !important; /* 轻微上移emoji图标 */
    }
    
    .tool-icon-img {
        max-width: 28px !important;
        max-height: 28px !important;
        filter: brightness(1.5) !important;
        position: absolute !important; /* 使用绝对定位 */
        top: 50% !important; /* 垂直居中 */
        left: 50% !important; /* 水平居中 */
        transform: translate(-50%, -50%) !important; /* 精确居中 */
    }
    
    /* 已经在其他地方定义，这里删除重复的样式 */
    
    .tool-card h3 {
        font-size: 1rem !important;
        line-height: 1.2 !important;
        min-height: 1.2rem !important;
        margin: 0 !important;
    }
    
    /* 7日热门工具移动端优化 */
    .hot-tools-section {
        min-height: 200px !important;
        margin: 2rem 0 !important;
        width: 100% !important; /* 改为100%，不使用100vw */
        margin-left: 0 !important; /* 移除负margin */
        text-align: center !important;
        padding: 0 !important; /* 移除内边距 */
    }
    
    .hot-tools-container {
        min-height: 120px !important;
        padding: 1rem 0 !important;
        overflow-x: auto !important; /* 添加横向滚动 */
        -webkit-overflow-scrolling: touch !important; /* 平滑滚动 */
        scrollbar-width: none !important; /* Firefox 隐藏滚动条 */
        -ms-overflow-style: none !important; /* IE/Edge 隐藏滚动条 */
    }
   
    .hot-tools-container::-webkit-scrollbar {
        display: none !important; /* WebKit 隐藏滚动条 */
    }
    
    /* 恢复热门工具横向滚动功能 */
    .hot-tools-track {
        display: flex !important;
        gap: 1rem !important;
        padding: 0 1rem !important;
        animation: none !important; /* 移除自动滚动动画，改为手动滚动 */
        width: max-content !important;
    }
    
    .hot-tool-item {
        min-width: 140px !important;
        max-width: 140px !important;
        min-height: 100px !important;
        padding: 1rem 0.6rem !important;
    }
    
    .hot-tool-icon {
        font-size: 1.5rem !important;
        margin-bottom: 0.4rem !important;
        min-height: 1.5rem !important;
    }
    
    .hot-tool-name {
         font-size: 0.9rem !important;
         line-height: 1.1 !important;
         min-height: 1rem !important;
     }
     
     /* What Players Say部分移动端优化 */
     .reviews-section {
         min-height: 180px !important;
         margin: 2rem 0 1rem 0 !important;
         padding: 1.5rem 0 !important; /* 移除左右内边距 */
         width: 100% !important; /* 改为100%，不使用100vw */
         margin-left: 0 !important; /* 移除负margin */
         text-align: center !important;
     }
     
     .reviews-container {
         min-height: 120px !important;
         padding: 1rem 0 !important;
         overflow-x: auto !important; /* 添加横向滚动 */
         -webkit-overflow-scrolling: touch !important; /* 平滑滚动 */
         scrollbar-width: none !important; /* Firefox 隐藏滚动条 */
         -ms-overflow-style: none !important; /* IE/Edge 隐藏滚动条 */
     }
     
     .reviews-container::-webkit-scrollbar {
         display: none !important; /* WebKit 隐藏滚动条 */
     }
     
     /* 恢复评论横向滚动功能 */
     .review-track {
         display: flex !important;
         gap: 1rem !important;
         padding: 0 1rem !important;
         animation: none !important; /* 移除自动滚动动画，改为手动滚动 */
         width: max-content !important;
     }
     
     .review-card {
         min-width: 280px !important;
         max-width: 280px !important;
         min-height: 100px !important;
         padding: 1rem !important;
     }
     
     .reviewer-avatar {
         width: 40px !important;
         height: 40px !important;
         min-width: 40px !important;
         min-height: 40px !important;
         font-size: 1.5rem !important;
     }
     
     .reviewer-name {
         font-size: 0.9rem !important;
         line-height: 1.2 !important;
         min-height: 1.08rem !important;
     }
     
     .reviewer-title {
         font-size: 0.8rem !important;
         line-height: 1.2 !important;
         min-height: 0.96rem !important;
     }
     
     .review-card p {
         font-size: 0.9rem !important;
         line-height: 1.5 !important;
         min-height: 1.35rem !important;
     }

    /* 添加以下样式，确保mega-card在手机端没有外框 */
    .mega-card {
        border: none !important;
        margin: 0 !important;
        padding: 1rem 0 !important; /* 只保留上下内边距 */
        box-shadow: none !important;
        width: 100% !important;
        border-radius: 0 !important;
        background-image: none !important;
    }

    /* 移除mega-card的装饰性边框 */
    .mega-card::before {
        display: none !important; /* 完全移除边框装饰 */
    }
    
    /* 移除mega-card的其他装饰元素 */
    .mega-card::after,
    .mega-card .corner-block-tr,
    .mega-card .corner-block-bl,
    .mega-card .corner-block-br {
        display: none !important; /* 移除角落方块装饰 */
    }
    
    /* 确保mega-card的背景色保留 */
    body main .mega-card {
        border: none !important;
        margin: 0 !important;
        padding: 1rem 0 !important;
        box-shadow: none !important;
        width: 100% !important;
        border-radius: 0 !important;
        background-image: none !important;
    }
    
    /* 调整section-title的内边距 */
    .mega-card .section-title {
        padding: 0 1rem !important;
    }
    
    /* 调整内部内容的宽度 */
    .mega-card > *:not(.corner-block-tr):not(.corner-block-bl):not(.corner-block-br) {
        max-width: 100% !important;
    }
}

/* 6. 小屏手机端特殊优化 */
@media (max-width: 480px) {
    .tools-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* 保持每行两列 */
        min-height: 200px !important;
        gap: 0.5rem !important; /* 减小间距以适应更小屏幕 */
    }
    
    /* 增加特异性，确保在小屏幕上也能保持两列布局 */
    body main .mega-card .tools-grid,
    body main .tools-section .tools-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        min-height: 200px !important;
        gap: 0.5rem !important;
    }
    
    /* 这里已有工具卡片样式，无需重复定义 */
    
    .tool-card p {
        display: none !important; /* 在超小屏幕上隐藏描述文本 */
    }
    
    /* 优化小屏幕工具卡片图标和标题 */
    .tool-card .tool-icon {
        font-size: 1.8rem !important;
        margin-bottom: 0.3rem !important;
        height: 35px !important; /* 统一小屏幕图标高度 */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        position: relative !important;
    }
    
    /* 小屏幕emoji图标对齐 */
    .tool-card .tool-icon:not(:has(img)) {
        padding-top: 2px !important; /* 轻微上移emoji图标 */
    }
    
    /* 小屏幕图片图标对齐 */
    .tool-card .tool-icon-img {
        max-width: 24px !important;
        max-height: 24px !important;
    }
    
    /* 小屏幕工具卡片样式优化 */
    .tool-card {
        min-height: 90px !important; /* 进一步减小小屏幕卡片高度 */
        padding: 0.75rem !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important; /* 确保小屏幕也是垂直居中 */
        align-items: center !important;
    }
    
    .tool-card h3 {
        font-size: 0.9rem !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        width: 100% !important;
        margin: 0 !important; /* 移除边距 */
    }
    
    .search-title {
        font-size: 1.5rem !important;
        min-height: 1.8rem !important;
    }
    
    .ad-container {
        min-height: 0 !important; /* 移除最小高度限制 */
        background-color: transparent !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .ad-position-after_subtitle {
        min-height: 0 !important; /* 移除最小高度限制 */
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* 7. 防止动画和过渡导致的布局偏移 */
@media (max-width: 768px) {
    /* 移除可能导致布局偏移的动画 */
    *, *::before, *::after {
        animation-duration: 0s !important;
        animation-delay: 0s !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
    }
    
    /* 保留必要的导航动画，但优化性能 */
    .nav-links {
        transition: transform 0.3s ease, opacity 0.3s ease !important;
        will-change: transform, opacity !important;
    }
    
    .nav-toggle {
        transition: background-color 0.2s ease !important;
        will-change: background-color !important;
    }
}

/* 8. 图片和媒体元素稳定性 */
@media (max-width: 768px) {
    img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    
    /* 为图片容器预设尺寸 */
    .tool-icon-img {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }
    
    .logo-link::before {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
    }
}

/* 9. 表单元素稳定性 */
@media (max-width: 768px) {
    input, textarea, select, button {
        min-height: 44px !important;
        padding: 0.75rem !important;
        font-size: 16px !important; /* 防止iOS缩放 */
        line-height: 1.2 !important;
    }
    
    .minecraft-search-input {
        min-height: 50px !important;
        padding: 0.8rem 1rem !important;
    }
    
    .minecraft-search-btn {
        min-height: 50px !important;
        padding: 0.8rem 1rem !important;
        min-width: 80px !important;
    }
}

/* 10. 性能优化 - 启用硬件加速 */
@media (max-width: 768px) {
    .minecraft-nav,
    .nav-links,
    .tool-card {
        transform: translateZ(0) !important;
        backface-visibility: hidden !important;
        perspective: 1000px !important;
    }

    .ad-container {
        background-color: transparent !important;
        border: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* 确保所有页面的内容区域延伸至边缘 */
    .content-wrapper {
        padding: 0 !important;
        width: 100% !important;
    }
    
    /* 内部容器添加内边距保持内容不贴边 */
    .content-container {
        padding: 0 1rem !important;
    }
    
    /* 页面内的卡片元素移除边框和外边距 */
    .minecraft-card {
        border: none !important;
        margin: 0.5rem 0 !important;
        padding: 1rem 0 !important;
        box-shadow: none !important;
        width: 100% !important;
    }
    
    /* 页面标题内边距调整 */
    .page-title, .page-subtitle {
        padding: 0 1rem !important;
    }
    
    /* 隐藏顶部导航菜单 */
    .minecraft-nav .nav-links {
        display: none !important;
    }
    
    /* Logo居中显示 */
    .nav-header {
        justify-content: center !important;
        padding: 0.5rem 0 !important;
    }
    
    .nav-toggle {
        display: none !important; /* 隐藏汉堡菜单按钮 */
    }
    
    .nav-logo {
        width: 100% !important;
        text-align: center !important;
    }
    
    /* 底部固定可滑动导航菜单 */
    .mobile-bottom-nav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background-color: var(--minecraft-dark) !important;
        border-top: 3px solid var(--minecraft-green) !important;
        z-index: 1000 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.3) !important;
        height: 75px !important; /* 增加导航栏高度，适应两行文字 */
    }
    
    .mobile-bottom-nav::-webkit-scrollbar {
        display: none !important;
    }
    
    .mobile-bottom-nav-container {
        display: flex !important;
        width: max-content !important;
        padding: 0 0.5rem !important; /* 减小左右内边距 */
        justify-content: space-around !important; /* 均匀分布项目 */
        gap: 0.2rem !important; /* 减小项目之间的间距 */
    }
    
    .mobile-nav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0.5rem 1rem !important;
        color: #E0E0E0 !important;
        text-decoration: none !important;
        min-width: 80px !important; /* 减小最小宽度，以适应更多项目 */
        width: auto !important; /* 使宽度自适应内容 */
        white-space: nowrap !important;
    }
    
    .mobile-nav-icon {
        font-size: 1.5rem !important;
        margin-bottom: 0.2rem !important;
        color: var(--minecraft-green) !important;
        height: 28px !important; /* 固定图标高度 */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .mobile-nav-text {
        font-size: 0.7rem !important;
        font-family: 'VT323', monospace !important;
        text-align: center !important;
        width: 100% !important; /* 确保文本占满整个宽度 */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.1 !important;
        white-space: normal !important; /* 允许文本换行显示 */
        height: 1.6rem !important; /* 提供足够的高度容纳两行文本 */
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important; /* 限制最多显示两行 */
        -webkit-box-orient: vertical !important;
    }
    
    /* 为底部导航腾出空间 */
    body {
        padding-bottom: 80px !important; /* 增加底部内边距，与导航栏高度保持一致 */
    }
}

/* 11. 关键渲染路径优化 */
@media (max-width: 768px) {
    /* 优先加载关键内容 */
    .minecraft-nav {
        contain: layout style paint !important;
    }
    
    .tool-card {
        contain: layout style !important;
    }
    
    .ad-container {
        contain: layout !important;
    }
}

/* 移动端全局工具卡片垂直居中 */
body main .mega-card .tools-grid .tool-card,
body main .tools-section .tools-grid .tool-card,
body.mobile .tool-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;  /* 垂直居中 */
    align-items: center !important;
    height: 100% !important;
}

/* 12. 字体加载完成后的样式调整 */
.font-loaded h1,
.font-loaded h2,
.font-loaded h3,
.font-loaded .search-title {
    font-family: 'VT323', monospace !important;
}

.font-loaded body {
    font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* 13. 调试辅助 - 开发时可启用 */
/*
.debug-cls * {
    outline: 1px solid rgba(255, 0, 0, 0.3) !important;
}

.debug-cls .ad-container {
    background-color: rgba(255, 0, 0, 0.1) !important;
}

.debug-cls .minecraft-nav::before {
    background-color: rgba(0, 255, 0, 0.3) !important;
}
*/