/**
 * Windows 浏览器兼容性修复
 * 针对 IE11, Edge Legacy, Chrome, Firefox 的特殊修复
 */

/* ==================== 视口宽度修复 ==================== */
html {
    max-width: 100vw;
    overflow-x: hidden;
}

body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Bootstrap 容器宽度限制 */
.container,
.container-fluid {
    max-width: 100%;
    overflow-x: hidden;
}

.row {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
}

/* ==================== 图标修复 ==================== */
/* Bootstrap Icons 字体加载修复 - 使用360 CDN */
@font-face {
    font-family: "bootstrap-icons";
    src: url("https://lib.baomitu.com/bootstrap-icons/1.11.3/font/fonts/bootstrap-icons.woff2") format("woff2"),
         url("https://lib.baomitu.com/bootstrap-icons/1.11.3/font/fonts/bootstrap-icons.woff") format("woff");
    font-display: swap;
}

.bi {
    font-family: "bootstrap-icons" !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -0.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    min-width: 1em;
}

/* 图标加载失败时的备用方案 */
.bi::before {
    content: attr(data-icon);
}

/* 确保图标可见 */
.bi-emoji-sunglasses::before { content: "\f36d"; }
.bi-house-fill::before { content: "\f42a"; }
.bi-cloud-arrow-up::before { content: "\f25c"; }
.bi-cloud-upload::before { content: "\f277"; }
.bi-folder2-open::before { content: "\f3cb"; }
.bi-gear::before { content: "\f3e5"; }
.bi-sliders::before { content: "\f669"; }
.bi-eye::before { content: "\f341"; }
.bi-arrow-up-down::before { content: "\f13b"; }
.bi-arrow-left-right::before { content: "\f138"; }
.bi-arrow-clockwise::before { content: "\f130"; }
.bi-film::before { content: "\f3b9"; }
.bi-speedometer::before { content: "\f691"; }
.bi-play-circle::before { content: "\f5ce"; }
.bi-arrow-left::before { content: "\f12f"; }
.bi-grid-3x3::before { content: "\f40c"; }
.bi-info-circle::before { content: "\f431"; }
.bi-check-circle::before { content: "\f26b"; }
.bi-arrow-counterclockwise::before { content: "\f12e"; }
.bi-exclamation-triangle::before { content: "\f33a"; }
.bi-1-circle::before { content: "\f02f"; }
.bi-2-circle::before { content: "\f030"; }
.bi-3-circle::before { content: "\f031"; }

/* ==================== 浏览器前缀修复 ==================== */
/* Transform 前缀 */
.upload-container,
.card,
.btn,
.sticker-card,
.gif-card {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

/* Transition 前缀 */
* {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* Box Shadow 前缀 */
.upload-container,
.card,
.navbar {
    -webkit-box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.2);
}

/* Animation 前缀 */
@-webkit-keyframes float {
    0%, 100% { -webkit-transform: translateY(0); }
    50% { -webkit-transform: translateY(-30px); }
}

@-moz-keyframes float {
    0%, 100% { -moz-transform: translateY(0); }
    50% { -moz-transform: translateY(-30px); }
}

/* ==================== Memphis 装饰元素宽度限制 ==================== */
.memphis-circle,
.memphis-triangle,
.memphis-zigzag {
    max-width: 150px;
    max-height: 200px;
}

/* ==================== IE11 兼容性修复 ==================== */
/* Flexbox 修复 */
.navbar,
.navbar-nav,
.card-body {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

/* Grid 备用方案 (IE11 不支持 Grid) */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .row {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

/* ==================== 滚动条修复 ==================== */
/* Firefox 滚动条 */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--memphis-pink) var(--memphis-white);
}

/* Chrome/Safari/Edge 滚动条 */
::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

::-webkit-scrollbar-track {
    background: var(--memphis-white);
    border: 3px solid var(--memphis-black);
}

::-webkit-scrollbar-thumb {
    background: var(--memphis-pink);
    border: 3px solid var(--memphis-black);
}

/* ==================== 表单元素修复 ==================== */
/* Range Slider 浏览器兼容 */
.form-range {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
}

.form-range::-moz-range-thumb {
    -moz-appearance: none;
    appearance: none;
}

.form-range::-ms-thumb {
    appearance: none;
}

/* Checkbox 修复 */
.form-check-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* ==================== 字体渲染优化 ==================== */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ==================== 响应式图片 ==================== */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

.sticker-preview,
.gif-preview {
    max-width: 100%;
    height: auto;
}

/* ==================== Canvas 元素修复 ==================== */
canvas {
    max-width: 100%;
    height: auto !important;
}

.canvas-wrapper {
    max-width: 100%;
    overflow: hidden;
}

/* ==================== Windows 高DPI 修复 ==================== */
@media
    (-webkit-min-device-pixel-ratio: 1.5),
    (min-resolution: 144dpi) {

    body {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }

    .btn,
    .card,
    .navbar {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* ==================== 性能优化 ==================== */
/* GPU 加速 */
.upload-container,
.card,
.btn,
.sticker-card,
.gif-card,
.memphis-circle,
.memphis-triangle {
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
}

/* ==================== 打印样式 ==================== */
@media print {
    .memphis-circle,
    .memphis-triangle,
    .memphis-zigzag,
    .navbar,
    .footer {
        display: none !important;
    }

    body::before {
        display: none;
    }

    .main-content {
        margin: 0;
        padding: 0;
    }
}