/* 覆盖Bootstrap dark 模式的背景色 */
[data-bs-theme="dark"] {
    --bs-body-bg: #0c111c;
    --bs-body-color: #fff;
}

/* 覆盖Bootstrap 箭头 */
[data-bs-theme=dark] .accordion-button::after {
    --bs-accordion-btn-icon: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!--%20License%3A%20PD.%20Made%20by%20CFPB%3A%20https%3A%2F%2Fgithub.com%2Fcfpb%2Fdesign-system%20--%3E%3Csvg%20fill%3D%22%23a7acb1%22%20width%3D%2220px%22%20height%3D%2220px%22%20viewBox%3D%22-1%200%2019%2019%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20class%3D%22cf-icon-svg%22%3E%3Cpath%20d%3D%22M8.5%2015.313a1.026%201.026%200%200%201-.728-.302l-6.8-6.8a1.03%201.03%200%200%201%201.455-1.456L8.5%2012.828l6.073-6.073a1.03%201.03%200%200%201%201.455%201.456l-6.8%206.8a1.026%201.026%200%200%201-.728.302z%22%2F%3E%3C%2Fsvg%3E);
    --bs-accordion-btn-active-icon: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!--%20License%3A%20PD.%20Made%20by%20CFPB%3A%20https%3A%2F%2Fgithub.com%2Fcfpb%2Fdesign-system%20--%3E%3Csvg%20fill%3D%22%23a7acb1%22%20width%3D%2220px%22%20height%3D%2220px%22%20viewBox%3D%22-1%200%2019%2019%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20class%3D%22cf-icon-svg%22%3E%3Cpath%20d%3D%22M8.5%2015.313a1.026%201.026%200%200%201-.728-.302l-6.8-6.8a1.03%201.03%200%200%201%201.455-1.456L8.5%2012.828l6.073-6.073a1.03%201.03%200%200%201%201.455%201.456l-6.8%206.8a1.026%201.026%200%200%201-.728.302z%22%2F%3E%3C%2Fsvg%3E);
}

:root{
    --swiper-theme-color: #fff;
    --bs-info-rgb: 255, 255, 255;
    --swiper-navigation-size: 26px;
}

/* Swiper */
.swiper-pagination-bullet{
    width: 12px;
    height: 12px;
    background-color: white;
    opacity: .3;
}
.swiper-pagination-bullet-active{
    opacity: 1;
}

/* Background */
.bg-color-gradient{
    background: #03001e;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #243c9c, #1f0f3e, #4e0053, #bb2628);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #243c9c, #1f0f3e, #4e0053, #bb2628); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.bg-dark-linear-gradient{
    background: linear-gradient(to bottom, #1f2937, #161e2b);
}
.bg-dark-linear-gradient:hover{
    background: linear-gradient(to bottom, #4bffff, #4b49fc);
}
.bg-dark-custom{
    background-color: #00000080;
}
.bg-dark-custom-2{
    background-color: #202937;
}
/* Dark Glass */
.bg-dark-glass{
    /* From https://css.glass */
    background: rgba(0, 0, 0, 0.37);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(14.1px);
    -webkit-backdrop-filter: blur(14.1px);
    border: 1px solid rgba(0, 0, 0, 0.08);
}
/* Light Glass */
.bg-light-glass{
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(6.8px);
    -webkit-backdrop-filter: blur(6.8px);
    border: 1px solid rgba(255, 255, 255, 0.09);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Button */
/* 自定义 属性按钮 */
.custom-button {
    background: linear-gradient(
        270deg,
        #f3deab,
        #b19e73 24.79%,
        #d9ccae 43.26%,
        #f3deab 61.73%,
        #d9ccae 80.2%,
        #b19e73 97.21%
    );
    color: #000;
    border: none;
    padding: .2rem .5rem;
    font-size: .75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
}
.custom-button:hover {
    filter: brightness(1.05);
}
.custom-button:focus {
    outline: none;
}
.custom-button:active {
    transform: scale(0.98);
}
/* 可选：禁用状态 */
.custom-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
/* Dark */
.btn-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: #1f2937;
    --bs-btn-border-color: #1f2937;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #232e3d;
    --bs-btn-hover-border-color: #232e3d;
    --bs-btn-focus-shadow-rgb: 66, 70, 73;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #232e3d;
    --bs-btn-active-border-color: #232e3d;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #1f2937;
    --bs-btn-disabled-border-color: #1f2937;
}
/* Info */
.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: #2a7cf7;
    --bs-btn-border-color: #2a7cf7;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #376bf4;
    --bs-btn-hover-border-color: #376bf4;
    --bs-btn-focus-shadow-rgb: 0, 232, 175;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #376bf4;
    --bs-btn-active-border-color: #376bf4;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #2a7cf7;
    --bs-btn-disabled-border-color: #2a7cf7;
}
/* Out line info */
.btn-outline-info {
    --bs-btn-color: #2a7cf7;
    --bs-btn-border-color: #2a7cf7;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #2a7cf7;
    --bs-btn-hover-border-color: #2a7cf7;
    --bs-btn-focus-shadow-rgb: 13, 202, 240;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #2a7cf7;
    --bs-btn-active-border-color: #2a7cf7;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #2a7cf7;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #2a7cf7;
    --bs-gradient: none;
}
/* 按钮动态效果 */
.crimp-btn {
    position: relative;
}
.crimp-btn .a-2{
    display: none;
}
.crimp-btn span {
    padding-left: 12px;
    transition: padding-left 0.2s ease;
}
.crimp-btn:hover span {
    padding-left: 7px;
}
.crimp-btn:hover .a-1{
    display: none;
}
.crimp-btn:hover .a-2{
    display: inline-block;
}
/* 动画按钮 2 */
/* Category Menu Button */
.cat-menu{
    transition: background-color 0.3s ease;
}
.cat-menu:hover, .cat-menu.active{
    background: linear-gradient(to left, #4bffff, #4b49fc) !important;
    border: 0 !important;
    color: white!important;
    position: relative;
}
.cat-menu.active::before{
    content: '';
    width: 18px;
    height: 18px;
    background-color: black;
    background-image: url("../image/check-info.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 10px 10px;
    border-radius: 99rem;
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -9px;
}

body{
    font-family: 'Roboto', sans-serif;
    font-size: .875rem;
}

/* Font */
/* Size */
.fs-sm{
    font-size: .75rem;
}
.fs-md{
    font-size: .875rem;
}

/* Form */
.form-check-input{
    border: var(--bs-border-width) solid var(--bs-secondary-text-emphasis);
    background-color: transparent;
}
.form-check-input:checked{
    background-color: #000;
    border: 2px solid #00ffc0;
}

/* Accordion */
.accordion{
    --bs-accordion-active-color: var(--bs-emphasis-color);
}

/* Offcanvas */
.offcanvas-body .bg-dark-custom, .offcanvas-body .bg-dark-glass{
    background-color: transparent;
}

/* Image Media Link */
.picTextLink{}
.picTextLink img{
    width: 2.75rem;
    height: 2.75rem;
}
.picTextLink p{
    margin-bottom: 0;
}
.picTextLink:hover{
    --bs-bg-opacity: .05;
    background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity));
}
/* More Link */
.viewAllLink{
    position: relative;
}
.viewAllLink span{
    position: absolute;
    top: 50%;
    right: -100%; /* 初始位置在a元素的右侧之外 */
    transform: translateY(-50%);
    display: block; /* 确保span是块级元素以便设置宽度和过渡 */
    width: auto; /* 或者设置具体的宽度 */
    white-space: nowrap; /* 防止文本换行 */
    transition: right 0.3s ease-in-out; /* 过渡效果 */
    opacity: 0; /* 初始时隐藏span */
}
.thisHoverShowMoreLinkText:hover .viewAllLink span{
    right: 1.25rem; /* 悬停时span的位置 */
    opacity: 1; /* 悬停时显示span */
}

/* Header */
.main-header {
    background-color: black;
    transition: background-color 0.1s ease;
    z-index: 1020;
}
.main-header.scrolled {
}
/* Sticky */
.sticky-top-sm {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
}
header.sticky-top-sm{
    z-index: 1040;
}
/* Search */
.search-form{
    min-width: 100%;
}
/* Logo */
.shopLogo{
    width: 6rem;
}

/* Mega */
.mega-item{
    height: 220px;
}
.mega-pic-1, .mega-pic-2, .mega-pic-3, .mega-pic-4, .mega-pic-5, .mega-pic-6{
    background-position: center top;
    background-size: auto 200px;
    background-repeat: no-repeat;
}
.mega-pic-1{
    background-image: url("../image/new1-phone.jpg?v=7");
    background-position:  center top;
}
.mega-pic-2{
    background-image: url("../image/fc26-phone.jpg");
}
.mega-pic-3{
    background-image: url("../image/new3-phone.jpg?v=8");
}
.mega-pic-4{
    background-image: url("../image/new4-phone.jpg?v=6");
}
.mega-pic-5{
    background-image: url("../image/new5-phone.jpg?v=1");
}
.mega-pic-6{
    background-image: url("../image/new6-phone.jpg?v=2");
}
.mega-item::before{
    /*background: linear-gradient(*/
    /*    to bottom,*/
    /*    rgba(0, 0, 0, 0.95),  !* 顶部 80% 不透明度（20% 透明） *!*/
    /*    rgba(0, 0, 0, 0.4)   !* 底部 60% 不透明度（40% 透明） *!*/
    /*);*/
    /*content: '';*/
    /*position: absolute;*/
    /*top: 0;*/
    /*left: 0;*/
    /*width: 100%;*/
    /*height: 100%;*/
}
.mega-item::after{
    /*background: linear-gradient(*/
    /*    to bottom,*/
    /*    rgba(23, 23, 23, 0),*/
    /*    rgba(23, 23, 23, 1)*/
    /*);*/
    /*content: '';*/
    /*position: absolute;*/
    /*bottom: 0;*/
    /*width: 100%;*/
    /*height: 200px;*/
}
.mega-pic-2::before{
    display: none !important;
}
/* 固定内层容器大小 */
.inner-swiper-container {
    width: 100%;
    height: 140px;
    margin: auto;
}
/* 内层 Swiper 尺寸 */
.inner-swiper {
    width: 100%;
    height: 100%;
}

/* 跑马灯 */
.marquee-wrapper {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}
.marquee-content {
    display: inline-block;
    white-space: nowrap;
    will-change: transform;
}
.marquee-content span{
    padding: 0 15px;
}

/* Sale Card */
.sale-card{
    background-color: #00000080;
    background-image: url("../image/cover-grid.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 150% 40%;
    height: 210px;
    transition: transform 0.3s ease; /* 只过渡 transform 属性 */
}
.sale-card:hover {
    transform: translateY(-10px) scaleY(1.057); /* 向上偏移10px，并垂直拉伸约20px */
}
.sale-card:hover .brand-icon, .sale-card:hover h3.oswald-700{
    position: relative;
    z-index: 3 !important;
}
.sale-card .brand-icon{
    width: 48px;
    height: 48px;
    top: 10px;
    left: 10px;
}
.ripple-bg {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(50%) scale(0.05);
    width: 80px;
    height: 80px;
    background: radial-gradient(circle at center, #00ffc0 0%, transparent 60%);
    border-radius: 50%;
    opacity: 0;
    transition:
        transform 0.4s ease,
        opacity 0.4s ease,
        background 0.2s ease 0.4s;
    z-index: 1;
    pointer-events: none;
}
.sale-card:hover .ripple-bg {
    transform: translateX(-50%) translateY(50%) scale(8);
    opacity: 1;
    background: linear-gradient(to top, #0d111c 70%, rgba(0, 0, 0, 0) 100%);
    border-radius: 0;
    z-index: 2;
}
/* 按钮Wrap初始隐藏 */
.sale-card-btn-wrap {
    position: absolute;
    bottom: 20px;
    width: 100%;
    left: 0;
    transform: translateX(0%) translateY(20px);
    opacity: 0;
    z-index: 3;
    transition:
        opacity 0.1s ease 0.1s,
        transform 0.1s ease 0.1s;
}
/* p标签顶上去 */
.sale-card .p-text{
    opacity: 1;
    transition:
        opacity 0.1s ease 0.1s,
        transform 0.1s ease 0.1s;
}
.sale-card:hover .p-text{
    opacity: 0;
    transform: translateX(0%) translateY(-20px);
}
/* 鼠标悬浮时按钮Wrap浮现 */
.sale-card:hover .sale-card-btn-wrap {
    opacity: 1;
    transform: translateX(0%) translateY(0);
}
/* sc swiper */
.sc-swiper {
    margin: 0 auto;
}
.sc-swiper .swiper-slide {
    background-position: center;
    background-size: cover;
    width: 100px;
    height: 110px;
}

/* Hero */
.hero-cover::before{
    content: '';
    width: 80px;
    height: 80px;
    background-image: url("../image/hero-simple2.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
    position: absolute;
    top: 35px;
    right: 35px;
}

/* Page Hero */
.page-hero{
    /*background-image: url("../image/page-hero2.png");*/
    /*background-position: center bottom;*/
    /*background-repeat: no-repeat;*/
    /*background-size: cover;*/
}

/* Page Swiper Menu */
.menuSwiper .link-items .link-icon{
    width: 35px;
    height: 35px;
}

/* Product Description */
.product-details-description h4,
.product-details-description h5,
.product-details-description h6
{
    font-family: oswald;
    font-weight: 500 !important;
    font-size: 1.1rem !important;
}
.product-details-description a, .product-details-description a span{
    color: #ffc107 !important;
    font-weight: 500 !important;
}

/* Game News */
.game-news-card img{
    height: 111px;
}
.game-news-card a.link-light{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: initial;
}

/* 评价懒加载按钮 */
.layui-flow-more{
    display: flex;
    justify-content: center;
    width: 100%;
    padding-top: 10px;
}
.layui-flow-more a{
    background-color: #006ef5;
    color: #fff;
    border: 1px solid #006ef5;
    padding: 7px 12px;
    text-decoration: none;
    border-radius: 99rem;
    font-style: initial;
    font-size: .875rem;
}
.layui-flow-more a:hover{
    background-color: #1880ff;
    color: white;
}
.layui-flow-more a cite{
    font-style: normal!important;
}
.layui-flow-more a i{
    width: 20px;
    height: 20px;
    display: inline-block;
    background-image: url("../image/loading.gif");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
}


/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    /* Offcanvas */
    .offcanvas-body .bg-dark-custom{
        background-color: #00000080;
    }
    .offcanvas-body .bg-dark-glass{
        background: rgba(0, 0, 0, 0.37) !important;
    }

    /* Line Height */
    .custom-lh-lg-1{
        line-height: 1.2 !important;
    }

    /* Header */
    /* Logo */
    .shopLogo{
        width: 10rem;
    }
    /* Search */
    .search-form{
        min-width: 38rem;
    }
    .main-header.scrolled {
        /* From https://css.glass */
        background: rgba(0, 0, 0, 0.9);
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        /*backdrop-filter: blur(15.1px);*/
        /*-webkit-backdrop-filter: blur(15.1px);*/
    }
    /* Sticky */
    .sticky-top-sm {
        position: initial;
        top: auto;
    }
    /* Category Menu Button */
    .category-dropdown-wrap{
        overflow-y: auto;
        max-height: 60vh;
    }

    /* Mega */
    .mega-item{
        height: 470px;
    }
    .mega-pic-1, .mega-pic-2, .mega-pic-3, .mega-pic-4, .mega-pic-5, .mega-pic-6{
        background-size: auto 470px;
    }
    .mega-pic-1{
        background-image: url("../image/new1.jpg?v=7");
        background-position:  center top;
    }
    .mega-pic-2{
        background-image: url("../image/fc26-pc.jpg");
    }
    .mega-pic-3{
        background-image: url("../image/new3.jpg?v=8");
    }
    .mega-pic-4{
        background-image: url("../image/new4.jpg?v=6");
    }
    .mega-pic-5{
        background-image: url("../image/new5.jpg?v=1");
    }
    .mega-pic-6{
        background-image: url("../image/nfl26.jpg");
    }
    /* 固定内层容器大小 */
    .inner-swiper-container {
        width: 45%;
        height: 200px;
        margin: auto;
    }

    /* Page Hero */
    .page-hero{
        /*background-image: url("../image/page-hero2.png");*/
        /*background-position: center bottom;*/
        /*background-repeat: no-repeat;*/
        /*background-size: cover;*/
        /*min-height: 190px;*/
        /*padding-top: 64px;*/
        background-image: radial-gradient(100% 100% at 0 0, rgba(0, 110, 245, .2) 0, rgba(0, 110, 245, 0) 95%), radial-gradient(100% 100% at 100% 10%, rgba(255, 79, 29, .2) 0, rgba(255, 79, 29, 0) 95%);
    }

    /* Page Swiper Menu */
    .menuSwiper .link-items .link-icon{
        width: 40px;
        height: 40px;
    }

    /* Game News */
    .game-news-card img{
        height: 208px;
    }

    .game-news-card a.link-light{
        min-height: 48px !important;
    }
}


/* md applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    /* Category Menu */
    /* 默认展示（手机端） */
    .offcanvas-lg .dropdown-menu {
        display: block;
        position: static; /* 避免浮动，变成正常流布局 */
        transform: none !important; /* 避免 Bootstrap dropdown 的位移 transform */
        box-shadow: none !important; /* 去掉阴影 */
    }

    .game-news-card{
        margin-bottom: 15px;
    }
}