/* promo - 与 header_dl 保持一致 */
.promo-banner {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding: 5px 17px;
    background: linear-gradient(90deg, #FFD953 0%, #FF7A00 100%);
}      

.promo-banner .promo-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    aspect-ratio: 1/1;
    border-radius: 11.78px;
}

.promo-banner .promo-content {
    margin-left: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.promo-banner .promo-title {
    font-size: 13px;
    font-weight: bold;
    color: #FFFFFF;
}

.promo-banner .promo-subtitle {
    font-size: 10px;
    color: #FFF6A7;
}

.promo-banner .promo-download {
    display: flex;
    width: 70.72px;
    height: 29.12px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 15.6px;
    background: #FFF;
    color: #FF7E00;
    text-align: center;
    font-size: 13.5px;
    font-style: normal;
    font-weight: 600;
    line-height: 20.28px;
    cursor: pointer;
}

/* header - 使用 header_menu 组件的样式 */
#headerTitle {
    background: #fff;
}

/* navigation 导航栏*/
#navigation{background:#fff}
.main-nav{display:flex;gap:1.5rem;padding:0.83rem;border-bottom:0.083rem solid var(--border)}                                                                             
.main-nav a{color:#666;text-decoration:none;font-weight:600}
.main-nav a.active{color:#ff6b35}
.tag-nav-wrapper{
    display:flex;
    align-items:center;
    position:relative;
    padding-right:0.4rem;
    background:#fff;
    height:3.83rem;
    /* 添加渐变遮罩指示器 */
    overflow:hidden;
}
.tag-nav-wrapper::after{
    content:'';
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    width:2rem;
    background:linear-gradient(to right,transparent,#fff);
    pointer-events:none;
    z-index:2;
}                                              
/* 游戏标签导航容器支持水平滚动 */
.tag-nav{
    display:flex;
    align-items:center;
    gap:0.66rem;
    overflow-x:auto !important;
    overflow-y:hidden;
    flex:1;
    margin-right:0.66rem;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    /* 确保在父元素overflow-x:hidden的情况下仍能滚动 */
    position:relative;
    z-index:1;
    /* 强制启用滚动，覆盖父元素的overflow-x:hidden */
    min-width:0;
    /* 添加滚动捕捉和优化 */
    scroll-snap-type:x mandatory;
    scroll-padding:0 1rem;
}
.tag-nav::-webkit-scrollbar{display:none}
.tag-nav{scrollbar-width:none}
.tag-link{
    padding:0.33rem 0.66rem;
    border-radius:0.5rem;
    background:#F2F4F7;
    color:#666;
    font-size:1.16rem;
    flex-shrink:0;
    text-decoration:none;
    white-space:nowrap;
    /* 添加滚动捕捉和过渡效果 */
    scroll-snap-align:start;
    scroll-snap-stop:normal;
    transition:all 0.2s ease;
    cursor:pointer;
    user-select:none;
}
.tag-link.active{
    background:#fff0e6;
    color:#ff7a1a;
    transform:scale(1.05);
}
.tag-link:hover{
    background:#f0f4f8;
    transform:scale(1.02);
}
.tag-link:focus{
    outline:2px solid #ff7a1a;
    outline-offset:2px;
}

.filter-container{position:absolute;right:0.83rem;top:50%;transform:translateY(-50%);background:#FFF4E7;padding: 0.40rem;border-radius: 0.563rem;z-index:1000}                                                 
.filter-button{display:flex;align-items:center;gap:0.5rem;color:#222;text-decoration:none;font-weight:600}                                                         
.filter-button img{width:0.86rem;height:0.86rem}
.filter-text{font-size:1.12rem}

/* 筛选模态框样式 */
.filter-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center}                                                       
.filter-modal-mask{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.filter-modal-panel{position:relative;width:29.92rem;max-width:92vw;background:#fff;border-radius:1.33rem;box-shadow:0 1.33rem 3.32rem rgba(0,0,0,.18);overflow:hidden}     
.filter-modal-header{display:flex;align-items:center;gap:0.83rem;padding:1rem 1.16rem;border-bottom:0.083rem solid var(--border)}                                          
.filter-modal-input{flex:1;border:none;outline:none;font-size:1.16rem;color:#333;background:#F2F4F7;border-radius:0.66rem;padding:0.66rem 1rem;width:100%}                 
.filter-modal-input::placeholder{color:#999}
.filter-modal-close{background:#fff;border-radius:50%;width:2.66rem;height:2.66rem;line-height:2.5rem;text-align:center;cursor:pointer;display:flex;align-items:center;justify-content:center}                                                          
.filter-modal-close img{width:1.5rem;height:1.5rem;display:block}
.filter-modal-subtitle{padding:0.83rem 1.16rem;color:#666;font-size:1.08rem}
.filter-modal-results{padding:0 1.16rem 1.16rem 1.16rem;min-height:12.61rem;max-height:34.88rem;overflow-y:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:0.5rem}     
.filter-chip{display:flex;align-items:center;justify-content:center;height:3rem;border-radius:0.83rem;border:0.083rem solid #eee;background:#fff;color:#333;font-size:1rem;cursor:pointer;padding:0 0.83rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}                                                      
.filter-chip.active{background:#fff0e6;color:#ff7a1a;border-color:#ffd1b3}
.filter-modal-footer{display:flex;gap:1.33rem;padding:1rem 1.16rem 1.16rem 1.16rem;border-top:0.083rem solid var(--border);background:#fff}                                      
.filter-btn{flex:1;height:3.66rem;border:none;border-radius:1.83rem;font-weight:700;font-size:1.33rem;cursor:pointer}                                                    
.filter-btn.reset{background:#f3f5f7;color:#333}
.filter-btn.confirm{background:#ff7a1a;color:#fff}
.filter-modal-results::-webkit-scrollbar{width:0.5rem}
.filter-modal-results::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:0.25rem}

/* 打开模态时禁用背景滚动 */
.modal-open{overflow:hidden}

/* 游戏标签导航容器支持水平滚动 */
.tag-nav{
    display:flex;
    gap:0.26rem;
    overflow-x:auto;
    overflow-y:hidden;
    flex:0 0 auto;
    width: calc(100% - 5rem);
    margin-right:0.66rem;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    /* 确保在父元素overflow-x:hidden的情况下仍能滚动 */
    position:relative;
    z-index:1;
}


/* games */
.games-section{padding:0.66rem 0 0.66rem 0.66rem;background-color:var(--white-bg)}
.games-section h2{font-size:1.62rem;font-weight:600;color:#343434;margin-bottom:0.83rem}                                                                            
.game-list{
    display:flex;
    flex-direction:column;
    gap:0.91rem;  
    overflow-y:auto;      /* 纵向滚动 */
    padding-right:0.33rem;
    padding-bottom:4rem;  /* 添加底部内边距，确保最后一项可见 */
    scroll-behavior:smooth;
    /* 初始值，JavaScript 会动态更新为精确值 */
    /* 使用 100vh 作为基础值，JavaScript 会使用 innerHeight 进行精确计算 */
    max-height:calc(100vh - 16.61rem - 5rem);
                                                              
}
/* 支持 dvh 的浏览器使用动态视口高度 */
@supports (height: 100dvh) {
    .game-list {
        max-height:calc(100dvh - 16.61rem - 5rem);
    }
}
/* 自定义滚动条（WebKit） */
.game-list::-webkit-scrollbar{width:0.5rem}
.game-list::-webkit-scrollbar-track{background:#f1f1f1;border-radius:0.25rem}
.game-list::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:0.25rem}
.game-list::-webkit-scrollbar-thumb:hover{background:#a8a8a8}
.game-card{background:#fff;border:0.083rem solid var(--border);border-radius:1rem;overflow:hidden;box-shadow:0 0.17rem 0.66rem rgba(0,0,0,.04);}           
.card-media{position:relative}
.card-banner{display:block;width:100%;height:auto}
/* migrated from temp/index.html */
.card-icon-wrapper{position:absolute;left:0.91rem;bottom:-2.33rem;width:3.37rem;height:3.37rem;border-radius:0.66rem;border:0.083rem solid var(--white-bg);overflow:hidden;display:flex;justify-content:center;align-items:center;background-color:#ccc}         
.card-icon{width:100%;height:100%;object-fit:cover}
.card-content{background-color:var(--bg-main);padding:0.17rem 0.83rem 0.66rem 4.99rem;min-height:3.16rem;display:flex;align-items:center}                                        
.card-title{font-size:1.35rem;font-weight:600;color:#000;line-height:1.5}

.main-container {
    padding: 0;
}

.bottom-nav {
    max-width: 500px;
}
/* 响应式设计 - 确保Logo与搜索栏间距在不同屏幕下等比例缩放 */
@media screen and (max-width: 375px) {
    .main-container {
        padding: 0;
    }
    .header-container {
        gap: 1.99rem;
    }
    /* 小屏幕优化标签导航 */
    .tag-nav {
        gap: 0.5rem;
    }
    .tag-link {
        padding: 0.25rem 0.5rem;
        font-size: 1rem;
    }
}

@media screen and (min-width: 414px) {
    .header-container {
        gap: 2.66rem;
    }
}

@media screen and (min-width: 768px) {
    .header-container {
        gap: 3.32rem;
    }
}
/* 加载状态样式 */
.loading-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3.32rem 1.66rem;
    color: #666;
}

.loading-spinner {
    width: 3.32rem;
    height: 3.32rem;
    border: 0.25rem solid #f3f3f3;
    border-top: 0.25rem solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 0.83rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 空状态样式 */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4.99rem 1.66rem;
    text-align: center;
}

.empty-icon {
    font-size: 3.99rem;
    margin-bottom: 1.33rem;
    opacity: 0.6;
}

.empty-text {
    color: #999;
    font-size: 1.33rem;
    margin: 0;
}

/* 错误状态样式 */
.error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4.99rem 1.66rem;
    text-align: center;
}

.error-icon {
    font-size: 3.99rem;
    margin-bottom: 1.33rem;
    opacity: 0.6;
}

.error-text {
    color: #dc3545;
    font-size: 1.33rem;
    margin: 0 0 1.66rem 0;
}

.retry-btn {
    background: #007bff;
    color: white;
    border: none;
    padding: 0.83rem 1.66rem;
    border-radius: 0.42rem;
    cursor: pointer;
    font-size: 1.16rem;
    transition: background-color 0.3s;
}

.retry-btn:hover {
    background: #0056b3;
}

/* 游戏横幅图宽高比限制 */
.card-banner {
    width: 100%;
    height: auto;
    aspect-ratio: 363 / 105; /* 设置宽高比为 363:105 */
    object-fit: contain;
    object-position: center;
    display: block;
    background-color: #ccc; /* 添加灰色背景，与card-icon保持一致 */
}

/* 标签导航加载状态优化 */
.tag-nav.loading {
    opacity: 0.7;
    pointer-events: none;
}

/* 标签导航焦点状态优化 */
.tag-nav:focus-within {
    outline: none;
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
    .tag-link:hover {
        transform: none;
    }
    .tag-link:active {
        transform: scale(0.98);
        background: #e8f0fe;
    }
}

/* 桌面端拖拽滚动的光标与选择优化 */
@media (pointer: fine) {
    .tag-nav { cursor: grab; }
    .tag-nav.dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    .tag-link {
        border: 1px solid #ccc;
    }
    .tag-link.active {
        border-color: #ff7a1a;
    }
}

/* 减少动画偏好支持 */
@media (prefers-reduced-motion: reduce) {
    .tag-link {
        transition: none;
    }
    .tag-nav {
        scroll-behavior: auto;
    }
}

@media screen and (max-width: 375px) {
    .main-container {
        padding: 0;
    }
}