/* ============================================
   浏览器兼容性增强补丁
   支持国内外所有主流浏览器
   ============================================ */

/* ========== Chrome/Edge (Blink) ========== */
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    /* Blink 核心浏览器特定样式 */
    .game-card:active {
        -webkit-transform: scale(0.97);
        transform: scale(0.97);
    }
}

/* ========== Safari (WebKit) ========== */
@supports (-webkit-appearance: none) and (not (-webkit-transform-style: preserve-3d)) {
    /* Safari 特定样式 */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* ========== Firefox (Gecko) ========== */
@-moz-document url-prefix() {
    /* Firefox 特定样式 */
    .game-card {
        -moz-transition: transform 0.2s ease;
    }
    
    .btn {
        -moz-transition: all 0.2s ease;
    }
}

/* ========== 360浏览器 ========== */
.browser-360 {
    /* 360浏览器特定样式 */
}

.browser-360 .game-card:active {
    transform: scale(0.97);
}

/* ========== 猎豹浏览器 ========== */
.browser-liebao {
    /* 猎豹浏览器特定样式 */
}

/* ========== 搜狗浏览器 ========== */
.browser-sogou {
    /* 搜狗浏览器特定样式 */
}

.browser-sogou input {
    /* 搜狗浏览器输入框兼容 */
}

/* ========== 百度浏览器 ========== */
.browser-baidu {
    /* 百度浏览器特定样式 */
}

/* ========== 傲游浏览器 ========== */
.browser-maxthon {
    /* 傲游浏览器特定样式 */
}

/* ========== 华为浏览器 ========== */
.browser-huawei {
    /* 华为浏览器特定样式 */
}

/* ========== 小米浏览器 ========== */
.browser-xiaomi {
    /* 小米浏览器特定样式 */
}

/* ========== Oppo浏览器 ========== */
.browser-oppo {
    /* Oppo浏览器特定样式 */
}

/* ========== Vivo浏览器 ========== */
.browser-vivo {
    /* Vivo浏览器特定样式 */
}

/* ========== 额外的 Flexbox 兼容性 ========== */
.flex {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -moz-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
}

.flex-wrap {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.flex-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.flex-between {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.flex-around {
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.flex-1 {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

/* ========== 额外的 Grid 兼容性 ========== */
.grid-2 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.grid-2 > * {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 calc(50% - 6px);
    -moz-box-flex: 0;
    -ms-flex: 0 0 calc(50% - 6px);
    flex: 0 0 calc(50% - 6px);
    max-width: calc(50% - 6px);
}

/* ========== 额外的动画兼容性 ========== */
.animation {
    -webkit-animation-duration: 0.3s;
    -moz-animation-duration: 0.3s;
    -ms-animation-duration: 0.3s;
    -o-animation-duration: 0.3s;
    animation-duration: 0.3s;
    
    -webkit-animation-timing-function: ease;
    -moz-animation-timing-function: ease;
    -ms-animation-timing-function: ease;
    -o-animation-timing-function: ease;
    animation-timing-function: ease;
}

.animation-fade {
    -webkit-animation: fadeIn 0.3s ease forwards;
    -moz-animation: fadeIn 0.3s ease forwards;
    -ms-animation: fadeIn 0.3s ease forwards;
    -o-animation: fadeIn 0.3s ease forwards;
    animation: fadeIn 0.3s ease forwards;
}

.animation-slide {
    -webkit-animation: slideUp 0.3s ease forwards;
    -moz-animation: slideUp 0.3s ease forwards;
    -ms-animation: slideUp 0.3s ease forwards;
    -o-animation: slideUp 0.3s ease forwards;
    animation: slideUp 0.3s ease forwards;
}

/* ========== 过渡效果兼容性 ========== */
.transition {
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.transition-transform {
    -webkit-transition: -webkit-transform 0.2s ease;
    -moz-transition: -moz-transform 0.2s ease;
    -ms-transition: -ms-transform 0.2s ease;
    -o-transition: -o-transform 0.2s ease;
    transition: transform 0.2s ease;
}

.transition-opacity {
    -webkit-transition: opacity 0.2s ease;
    -moz-transition: opacity 0.2s ease;
    -ms-transition: opacity 0.2s ease;
    -o-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
}

/* ========== 变换兼容性 ========== */
.transform {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.transform-scale {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.transform-scale:active {
    -webkit-transform: scale(0.97);
    -moz-transform: scale(0.97);
    -ms-transform: scale(0.97);
    -o-transform: scale(0.97);
    transform: scale(0.97);
}

/* ========== 滤镜效果 (所有浏览器) ========== */
.filter-blur {
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
}

.filter-grayscale {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
}

/* ========== 背景尺寸兼容性 ========== */
.bg-cover {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.bg-contain {
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -ms-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

/* ========== 用户选择兼容性 ========== */
.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.select-text {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* ========== 触摸操作兼容性 ========== */
.touch-callout-none {
    -webkit-touch-callout: none;
    -moz-touch-callout: none;
    touch-callout: none;
}

.user-drag-none {
    -webkit-user-drag: none;
    user-drag: none;
}

/* ========== 溢出滚动兼容性 ========== */
.overflow-touch {
    -webkit-overflow-scrolling: touch;
    -moz-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

.overflow-auto {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    -moz-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

/* ========== 文本渲染兼容性 ========== */
.text-rendering {
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always;
}

/* ========== 修复各种浏览器的特定问题 ========== */

/* 修复 Chrome 中文粗体 */
@media all and (-webkit-min-device-pixel-ratio:0) {
    .game-name,
    .card-title,
    .btn {
        -webkit-text-stroke: 0.2px;
    }
}

/* 修复 Safari 弹性盒 */
@media screen and (min-color-index: 0) and(-webkit-min-device-pixel-ratio:0) {
    .game-grid {
        display: -webkit-box;
    }
}

/* 修复 Firefox 特定问题 */
@-moz-document url-prefix() {
    .coin-balance-card {
        backdrop-filter: none;
    }
}

/* 修复 IE/Edge */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .game-grid {
        display: block;
    }
    
    .game-card {
        display: inline-block;
        width: calc(50% - 6px);
        vertical-align: top;
    }
}

/* ========== 高级CSS功能检测与降级 ========== */

/* 如果不支持CSS Grid，使用Flexbox */
@supports not (display: grid) {
    .game-grid {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

/* 如果不支持 backdrop-filter，使用纯色背景 */
@supports not (backdrop-filter: blur(10px)) {
    .coin-balance-card {
        background: rgba(255, 255, 255, 0.15);
    }
}

/* 如果不支持 calc，使用固定值 */
@supports not (width: calc(100% - 20px)) {
    .game-card {
        width: 48%;
    }
}

/* 如果不支持 CSS 变量，使用默认颜色 */
@supports not (--primary: blue) {
    :root {
        --primary: #4A90D9;
        --accent: #FF8C42;
        --bg: #F5F7FA;
    }
}

/* ========== 性能优化提示 ========== */
/* 
 * 1. 使用 transform 和 opacity 进行动画
 * 2. 避免使用 layout 属性动画
 * 3. 使用 will-change 提示浏览器优化
 */

.will-change-transform {
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.will-change-opacity {
    will-change: opacity;
}

/* ========== Print 样式 (虽然移动端不需要，但保持完整性) ========== */
@media print {
    .bottom-nav,
    .top-nav {
        display: none !important;
    }
    
    .page-container {
        padding: 0;
    }
}