/* 首页：杂志式封面区、宫格分类入口与马赛克游戏榜单。 */
.twzip-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 26px; align-items: stretch; margin: 26px 0 32px; padding-bottom: 32px; border-bottom: 2px solid var(--border); }
.twzip-hero-copy { display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.twzip-hero-copy h1 { margin: 0; }
.twzip-hero-copy p { color: var(--text-secondary); margin: 0; max-width: 48ch; }
.twzip-hero-facts { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 4px 0 0; }
.twzip-hero-facts li { display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; color: var(--primary-dark); background: var(--bg-card); border: 1px solid var(--border); border-radius: 30px; padding: 8px 14px; }
.twzip-hero-facts .twzip-icon { width: 18px; height: 18px; color: var(--primary); }
/* 搜索框使用静态定位，结果面板出现在文档流内，不会压住广告。 */
.search-container { margin: 0 0 24px; position: static; }
.search-box { display: flex; align-items: center; gap: 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 8px 16px; }
.search-box:focus-within { border-color: var(--primary); }
.search-icon { color: var(--primary); display: flex; }
.search-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 10px 0; font-size: 1rem; color: var(--text-primary); }
.search-input::placeholder { color: var(--text-muted); }
.search-clear-btn { padding: 8px 10px; color: var(--text-secondary); }
.search-results { margin: 14px 0 0; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); max-height: 440px; overflow-y: auto; position: static; }
.search-result-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; border-bottom: 1px solid var(--border); }
.search-result-item:last-child { border-bottom: 0; }
.search-result-item:hover { background: var(--bg-surface); }
.search-result-img { width: 54px; height: 54px; border-radius: 9px; object-fit: cover; flex-shrink: 0; }
.search-result-info { min-width: 0; }
.search-result-title { font-size: .95rem; margin: 0 0 4px; font-weight: 700; }
.search-result-desc { font-size: .8rem; color: var(--text-secondary); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.search-no-results { padding: 26px; text-align: center; color: var(--text-secondary); }
.search-no-results .twzip-icon { width: 34px; height: 34px; color: var(--primary); }
/* 轮播：静态文档高度，翻页为底部按钮栏，无浮动箭头层。 */
.carousel-container { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); overflow: hidden; }
.carousel-viewport { overflow: hidden; }
.carousel-wrapper { display: flex; transition: transform .4s ease; }
.carousel-slide { flex: 0 0 100%; min-width: 0; }
.carousel-slide[aria-hidden='true'] { visibility: hidden; }
.carousel-slide a { display: block; width: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; text-align: left; }
.carousel-slide img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.carousel-slide-overlay { padding: 20px 22px 4px; }
.carousel-slide-title { font-size: 1.3rem; font-weight: 800; margin: 0 0 8px; color: var(--text-primary); }
.carousel-slide-desc { font-size: .87rem; color: var(--text-secondary); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.carousel-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px 20px; }
.carousel-controls { display: flex; gap: 8px; position: static; padding: 0; transform: none; }
.carousel-btn { width: auto; height: auto; padding: 9px 12px; border-radius: 8px; background: var(--bg-base); color: var(--primary-dark); border: 1px solid var(--border); display: inline-flex; }
.carousel-btn:hover { background: var(--bg-surface); }
.carousel-indicators { display: flex; gap: 7px; position: static; transform: none; }
.carousel-indicator { width: 24px; height: 24px; border-radius: 50%; padding: 0; font-size: .65rem; background: var(--bg-surface); border: 1px solid var(--border-hover); }
.carousel-indicator.active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
/* 分类宫格：首页主入口，与导航宫格共用视觉语言。 */
.category-grid-container { margin: 32px 0; }
.category-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.category-item { flex-direction: row; align-items: center; justify-content: flex-start; gap: 13px; padding: 16px; height: auto; text-align: left; }
.category-icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 11px; color: var(--primary); background: var(--bg-surface); border: 1px solid var(--border); }
.category-icon .twzip-icon { width: 23px; height: 23px; }
.category-name { font-size: .95rem; font-weight: 700; color: var(--text-primary); }
.category-item small { display: block; font-size: .7rem; font-weight: 400; color: var(--text-muted); margin-top: 3px; }
/* 游戏榜单：首张为宽幅主推，其余为紧凑方卡，形成杂志式马赛克。 */
.nidfer-recommend-content-scrollable, .nidfer-recommend-content, .nidfer-recommend-content-hot {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0;
}
.recommend-item { position: relative; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-card); }
.recommend-item:hover { border-color: var(--border-hover); background: var(--bg-card-hover); }
.recommend-item > a { display: flex; flex-direction: column; gap: 11px; width: 100%; height: 100%; padding: 11px; border: 0; border-radius: var(--radius-md); background: transparent; align-items: stretch; justify-content: flex-start; }
.recommend-item .nidfer-game-cover { min-width: 0; }
.recommend-item img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.recommend-item .nidfer-game-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 0 2px 2px; }
.recommend-item .nidfer-game-info p { margin: 0; font-size: .93rem; font-weight: 700; color: var(--text-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.recommend-item .nidfer-game-info p + p { display: none; }
.recommend-item:first-child { grid-column: span 2; grid-row: span 2; background: var(--bg-surface); }
.recommend-item:first-child > a { gap: 16px; padding: 16px; }
.recommend-item:first-child img { aspect-ratio: 16 / 11; }
.recommend-item:first-child .nidfer-game-info p { font-size: 1.3rem; font-weight: 800; -webkit-line-clamp: 2; }
.recommend-item:first-child .nidfer-game-info p + p { display: -webkit-box; font-size: .85rem; font-weight: 400; color: var(--text-secondary); -webkit-line-clamp: 4; }
.recommend-item:first-child::after { content: 'Spotlight'; position: absolute; top: 24px; left: 24px; background: var(--accent); color: var(--on-primary); font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 6px 10px; border-radius: 5px; }
.recommend-item-btn { display: flex; width: 100%; align-items: center; justify-content: center; background: var(--primary); border-radius: 7px; padding: 9px; }
.recommend-item-btn img { width: 22px; filter: brightness(0) invert(1); }
/* 首页说明板块与内页信息卡保持同一排版规则。 */
.seo-content-section, .game-types-section { margin: 36px 0; padding: 32px 0 0; border-top: 2px solid var(--border); }
.seo-content-section h2, .game-types-section h2 { font-size: 1.6rem; margin: 0 0 22px; }
.seo-benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.benefit-item { padding: 22px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); }
.benefit-item h3 { font-size: 1.05rem; margin: 0 0 10px; color: var(--primary-dark); }
.benefit-item p { font-size: .87rem; color: var(--text-secondary); margin: 0; }
.game-type-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; }
.game-type-info h3 { font-size: 1.05rem; margin: 10px 0 6px; color: var(--primary-dark); }
.game-type-info p { font-size: .9rem; color: var(--text-secondary); }
.category-subtitle { color: var(--text-secondary); margin: 10px 0 24px; max-width: 70ch; }
@media (max-width: 850px) {
    .twzip-hero { grid-template-columns: 1fr; gap: 22px; }
    .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nidfer-recommend-content-scrollable, .nidfer-recommend-content, .nidfer-recommend-content-hot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .seo-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .game-type-info { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .twzip-hero { margin: 18px 0 24px; padding-bottom: 24px; }
    .twzip-hero-facts li { font-size: .75rem; padding: 7px 11px; }
    .carousel-slide-overlay { padding: 16px 16px 2px; }
    .carousel-slide-title { font-size: 1.1rem; }
    .carousel-footer { padding: 14px 16px 18px; }
    .category-grid { gap: 10px; }
    .category-item { padding: 12px; gap: 10px; }
    .category-icon { width: 36px; height: 36px; }
    .category-name { font-size: .87rem; }
    .nidfer-recommend-content-scrollable, .nidfer-recommend-content, .nidfer-recommend-content-hot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .recommend-item:first-child { grid-column: span 2; grid-row: auto; }
    .recommend-item:first-child > a { padding: 12px; gap: 12px; }
    .recommend-item:first-child .nidfer-game-info p { font-size: 1.1rem; }
    .recommend-item:first-child::after { top: 20px; left: 20px; }
    .seo-benefits { grid-template-columns: 1fr; }
    .seo-content-section, .game-types-section { margin: 28px 0; padding-top: 24px; }
    .seo-content-section h2, .game-types-section h2 { font-size: 1.35rem; }
}
