/* 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.33rem 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:grid;                              /* 单列 → 三列网格 */
    grid-template-columns:repeat(3,1fr);
    gap:0.66rem;
    align-content:start;
    overflow-y:auto;      /* 纵向滚动 */
    padding-right:0.33rem;
    padding-bottom:5.5rem;  /* 底部留白：确保最后一行能滚出固定底栏，并留出余量 */
    scroll-behavior:smooth;
    /* 初始值，JavaScript 会动态更新为精确值 */
    /* 使用 100vh 作为基础值，JavaScript 会使用 innerHeight 进行精确计算 */
    max-height:calc(100vh - 16.61rem - 5rem);

}
/* 网格单元：等高，撑满列宽，min-width:0 让长标题正常省略 */
.game-card-link{display:block;min-width:0;text-decoration:none;}
.game-card-link>.game-card{height:100%;display:flex;flex-direction:column;}
/* 支持 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}
/* ===== ethereal 卡片(参考稿样式：大图 + 角标 + 标题 + 简介 + 分类·大小 + 去玩) ===== */
.game-card{background:#fff;border:0;border-radius:0.83rem;overflow:hidden;box-shadow:0 0.25rem 1rem rgba(0,0,0,.06);}
.card-media{position:relative}
.card-banner{display:block;width:100%;height:auto}
/* 角标：促销标签(tag_name[0])，深色玻璃胶囊压在大图左上（三列下缩小） */
.card-badge{position:absolute;left:0.5rem;top:0.5rem;z-index:2;display:inline-flex;align-items:center;max-width:82%;padding:0.18rem 0.5rem;border-radius:0.5rem;font-size:0.83rem;font-weight:600;line-height:1.3;color:#fff;background:rgba(11,28,48,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* 悬浮小图标已弃用(参考稿无) */
.card-icon-wrapper{display:none}
.card-icon{display:none}
/* 正文：纵向排列（三列紧凑版） */
.card-content{background:#fff;padding:0.55rem 0.6rem 0.66rem;display:flex;flex-direction:column;gap:0.3rem;align-items:stretch;flex:1;}
.card-title{font-size:1.16rem;font-weight:700;color:#0b1c30;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* 简介在三列窄卡中过长，隐藏不显示 */
.card-desc{display:none;}
.card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:0.25rem 0.4rem;margin-top:auto;}
.card-cat{font-size:0.83rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#7C3AED;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0;}
.card-size{font-size:0.83rem;color:#9098a4;white-space:nowrap;flex:0 0 auto;}
.card-play{flex:0 0 auto;width:100%;margin-top:0.2rem;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding:0.34rem 0;border-radius:999px;font-size:0.92rem;font-weight:600;color:#7C3AED;background:rgba(124,58,237,.10);border:1px solid rgba(124,58,237,.22);}

.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;
}

/* 游戏横幅图：统一样式4比例 363:201，填充裁剪不变形，卡片高度整齐 */
.card-banner {
    width: 100%;
    height: auto;
    aspect-ratio: 363 / 201; /* 样式4比例 */
    object-fit: cover;       /* 填充并居中裁剪，避免压扁/留白 */
    object-position: center;
    display: block;
    background-color: #ccc;
}

/* 标签导航加载状态优化 */
.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;
    }
}

/* ============================================================
   Ethereal Mint —— 分类页(游戏中心) 浅色/薄荷皮
   与首页 index_ethereal.css 同套令牌；本文件在 app_dark.css 之后加载，
   故 html.app-dark + !important 直接压过深色皮。纯 UI，不动数据/JS 逻辑。
   令牌：bg #f8f9ff / 白卡 #fff / 主色薄荷 #006b5f / 亮薄荷 #2dd4bf / 文字 #0b1c30 / 次文 #3c4a46 / 灰 #9098a4
   ============================================================ */

/* —— 底色：浅色（盖掉 app_dark 的深色底） —— */
html.app-dark body { background: #f8f9ff !important; color: #0b1c30 !important; }
html.app-dark .main-container { background: #f8f9ff !important; }

/* —— 顶部下载条(#headerDl/promo-banner)：薄荷渐变 CTA —— */
html.app-dark .promo-banner { background: linear-gradient(135deg, #2dd4bf 0%, #006b5f 100%) !important; }
html.app-dark .promo-banner .promo-subtitle { color: rgba(255,255,255,.82) !important; }
html.app-dark .promo-banner .promo-download { background: #fff !important; color: #006b5f !important; }
/* 隐藏顶部「姬游社」下载推广条（仅本分类页；!important 压住 JS 的 .show()，删掉本行即恢复） */
#headerDl { display: none !important; }

/* —— header / 导航容器：浅色 + 搜索框白圆角(对齐首页) —— */
html.app-dark #headerTitle { background: #f8f9ff !important; }
html.app-dark #navigation { background: #f8f9ff !important; }
html.app-dark .tag-nav-wrapper { background: #f8f9ff !important; }
/* 渐隐用 rgba(浅色,0) 而非 transparent(=rgba(0,0,0,0))，避免 webview 合成成黑 */
html.app-dark .tag-nav-wrapper::after { background: linear-gradient(to right, rgba(248,249,255,0), #f8f9ff) !important; }
html.app-dark .tag-nav { background: #f8f9ff !important; }
html.app-dark .header_menu { background: #f8f9ff !important; }
html.app-dark .header_search {
    background: #fff !important; border-radius: 14px !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.05) !important; border: 0 !important;
}
html.app-dark .header_search .search-placeholder { color: #3c4a46 !important; }

/* —— 标签 pills：未选中浅色，选中薄荷底深字(去掉原橙色与放大) —— */
html.app-dark .tag-link { background: #eef1f8 !important; color: #3c4a46 !important; }
html.app-dark .tag-link.active { background: #2dd4bf !important; color: #053b35 !important; font-weight: 700 !important; transform: none !important; }
html.app-dark .tag-link:hover { background: #e3e8f2 !important; transform: none !important; }
html.app-dark .tag-link:focus { outline-color: #006b5f !important; }
html.app-dark .tag-link:active { background: #e3e8f2 !important; }

/* —— 筛选按钮(右上胶囊) —— */
html.app-dark .filter-container { background: #eef1f8 !important; }
html.app-dark .filter-button { color: #0b1c30 !important; }

/* —— 筛选弹窗：白面板 + 薄荷确定 —— */
html.app-dark .filter-modal-panel { background: #fff !important; border: 1px solid rgba(11,28,48,.06) !important; box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.18) !important; }
html.app-dark .filter-modal-input { background: #f2f4f7 !important; color: #0b1c30 !important; border: 1px solid rgba(11,28,48,.06) !important; }
html.app-dark .filter-modal-input::placeholder { color: #9098a4 !important; }
html.app-dark .filter-modal-close { background: #f2f4f7 !important; }
html.app-dark .filter-modal-subtitle { color: #3c4a46 !important; }
html.app-dark .filter-chip { background: #f2f4f7 !important; color: #3c4a46 !important; border-color: rgba(11,28,48,.08) !important; }
html.app-dark .filter-chip.active { background: rgba(0,107,95,.12) !important; color: #006b5f !important; border-color: #006b5f !important; }
html.app-dark .filter-btn.reset { background: #f2f4f7 !important; color: #3c4a46 !important; border: 1px solid rgba(11,28,48,.06) !important; }
html.app-dark .filter-btn.confirm { background: linear-gradient(135deg, #2dd4bf 0%, #006b5f 100%) !important; color: #fff !important; }
html.app-dark .filter-modal-footer { background: #fff !important; border-top-color: #eef1f5 !important; }
html.app-dark .filter-modal-header { border-bottom-color: #eef1f5 !important; }
html.app-dark .filter-modal-results::-webkit-scrollbar-thumb { background: #d7dce6 !important; }

/* —— 列表区域：滚动容器必须不透明浅底，否则 webview 滚动闪黑 —— */
html.app-dark .games-section { background: #f8f9ff !important; }
html.app-dark .game-list { background: #f8f9ff !important; }
html.app-dark .games-section h2 { color: #0b1c30 !important; }
html.app-dark .game-list::-webkit-scrollbar-track { background: #eef1f8 !important; }
html.app-dark .game-list::-webkit-scrollbar-thumb { background: #d7dce6 !important; }
html.app-dark .game-list::-webkit-scrollbar-thumb:hover { background: #b9c0cf !important; }

/* —— 游戏卡片：白底圆角软阴影；文字色见基础规则 —— */
html.app-dark .game-card { background: #fff !important; box-shadow: 0 0.33rem 1.66rem rgba(0,0,0,.05) !important; }
html.app-dark .card-banner { background-color: #e5eeff !important; }
html.app-dark .card-title { color: #0b1c30 !important; }
html.app-dark .card-desc { color: #3c4a46 !important; }
html.app-dark .card-cat { color: #7C3AED !important; }
html.app-dark .card-size { color: #9098a4 !important; }
html.app-dark .card-play { background: rgba(124,58,237,.10) !important; color: #7C3AED !important; border: 1px solid rgba(124,58,237,.22) !important; }

/* —— 加载 / 空 / 错误 —— */
html.app-dark .loading-indicator { color: #3c4a46 !important; }
html.app-dark .loading-spinner { border-color: #e5eeff !important; border-top-color: #006b5f !important; }
html.app-dark .empty-text { color: #9098a4 !important; }
html.app-dark .error-text { color: #e1543f !important; }
html.app-dark .retry-btn { background: #006b5f !important; color: #fff !important; }
html.app-dark .retry-btn:hover { background: #006b5f !important; }

/* —— 底部导航：浅色玻璃(对齐首页)，当前页「分类」tab 高亮 —— */
html.app-dark .bottom-nav {
    background: rgba(248,249,255,.92) !important; -webkit-backdrop-filter: blur(16px) !important; backdrop-filter: blur(16px) !important;
    border-top: 1px solid #e5eeff !important; box-shadow: 0 -4px 20px rgba(0,0,0,.05) !important;
}
html.app-dark .bottom-nav .nav-label { color: #6b7a76 !important; }

/* 非当前 tab 图标置灰；当前(分类)tab 图标保留彩色 active 图(与首页同处理) */



/* ============================================================
   过滤条改版：顶部横向标签条 → 左侧竖向分类栏（左栏 tab + 右栏游戏列表）
   纯 UI/布局：不动任何数据绑定与 JS 业务逻辑。本块追加在文件末尾，
   覆盖上方横向布局规则；app-dark(线上常驻) 用 !important 压深色皮。
   令牌沿用本页薄荷皮：底 #f8f9ff / 白卡 #fff / 主色薄荷 #006b5f / 亮薄荷 #2dd4bf
   ============================================================ */

/* —— 内容分栏：左栏分类 + 右栏列表，整体高度由 JS 设在 .gc-split 上 —— */
.gc-split{
    display:flex;
    align-items:stretch;
    width:100%;
    min-height:0;
    overflow:hidden;
    background:#fff;
}

/* —— 左侧竖向分类栏 —— */
#navigation{
    flex:0 0 5.2rem;
    width:5.2rem;
    box-sizing:border-box;
    min-height:0;
    display:flex;
    flex-direction:column;
    background:#fff;
    border-right:0.083rem solid #eef1f5;
}
.gc-split .tag-nav-wrapper{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    width:100%;
    height:auto;
    min-height:0;
    padding:0;
    overflow:hidden;
}
.gc-split .tag-nav-wrapper::after{ display:none; }   /* 取消横向渐隐遮罩 */
.gc-split .tag-nav{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    flex:1 1 auto;
    gap:0;
    width:100%;
    min-height:0;
    margin:0;
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:none;
}
.gc-split .tag-nav::-webkit-scrollbar{ width:0; height:0; display:none; }
.gc-split .tag-link{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    width:100%;
    min-height:3.4rem;
    box-sizing:border-box;
    padding:0.7rem 0.4rem;
    border-radius:0;
    border-left:0.25rem solid transparent;   /* 选中态左竖条占位，避免选中时跳动 */
    background:transparent;
    color:#666;
    font-size:1.05rem;
    line-height:1.3;
    white-space:normal;          /* 允许“角色扮演”等 4 字分类换行 */
    word-break:break-word;
    flex-shrink:0;
    transform:none;
    transition:background .15s ease, color .15s ease;
}
.gc-split .tag-link.active{
    background:#fff0e6;
    color:#ff7a1a;
    border-left-color:#ff7a1a;
    font-weight:700;
    transform:none;
}
.gc-split .tag-link:hover{ background:#f5f6f8; transform:none; }
.gc-split .tag-link:focus{ outline:none; }

/* —— 右栏：标题行(标题 + 筛选) + 卡片网格 —— */
#games.games-section{
    flex:1 1 auto;
    min-width:0;
    min-height:0;
    display:flex;
    flex-direction:column;
    padding:0.66rem 0.5rem 0 0.66rem;
}
.games-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:0.66rem;
    flex:0 0 auto;
    margin-bottom:0.5rem;
}
.games-header #section-title{ margin:0; }

/* 筛选按钮：从右上角绝对定位改为标题行内联小胶囊 */
.games-header .filter-container{
    position:static;
    transform:none;
    flex:0 0 auto;
    background:#FFF4E7;
    padding:0.34rem 0.66rem;
    border-radius:0.5rem;
    z-index:auto;
}

/* 卡片网格：3 列 → 2 列，填满右栏剩余高度并内部滚动（无限加载逻辑不变） */
.gc-split .game-list{
    grid-template-columns:repeat(2,1fr);
    flex:1 1 auto;
    min-height:0;
    max-height:none;       /* 高度交给 flex；覆盖原 max-height/@supports */
    margin-top:0;
}

/* ---- app-dark（线上常驻）：左栏浅底 + 薄荷选中 ---- */
html.app-dark .gc-split{ background:#f8f9ff !important; }
html.app-dark #navigation{ background:#f8f9ff !important; border-right-color:#e5eaf3 !important; }
html.app-dark .gc-split .tag-nav-wrapper{ background:#f8f9ff !important; }
html.app-dark .gc-split .tag-nav{ background:#f8f9ff !important; }
html.app-dark .gc-split .tag-link{ background:transparent !important; color:#3c4a46 !important; border-left-color:transparent !important; transform:none !important; }
html.app-dark .gc-split .tag-link.active{ background:rgba(124,58,237,.10) !important; color:#7C3AED !important; border-left-color:#7C3AED !important; font-weight:700 !important; transform:none !important; }
html.app-dark .gc-split .tag-link:hover{ background:#eef1f8 !important; transform:none !important; }
html.app-dark .gc-split .tag-link:active{ background:#eef1f8 !important; }
html.app-dark .games-header .filter-container{ background:#eef1f8 !important; }
html.app-dark #games.games-section{ background:#f8f9ff !important; }