/* 发现与游戏库：商店首页（TapTap 式封面墙） */

body.community-hig[data-community-page="games"] .capp-layout,
body.community-hig[data-community-page="games"] .capp-frame {
    grid-template-columns: var(--hig-sidebar-width) minmax(0, 1fr);
}

body.community-hig[data-community-page="games"].is-sidebar-collapsed .capp-layout,
body.community-hig[data-community-page="games"].is-sidebar-collapsed .capp-frame {
    grid-template-columns: var(--hig-sidebar-compact) minmax(0, 1fr);
}

body.community-hig[data-community-page="games"] .capp-right-rail {
    display: none !important;
}

body.community-hig[data-community-page="games"] .hig-page--games {
    gap: 24px;
}

/* 独立商店区块不继承官网 section 的 120px 宣传页留白。 */
.hig-page--games > .hig-store-hero,
.hig-page--games > .hig-store-promos {
    padding: 0;
}

.hig-page--games :is(.hig-store-tile, .hig-store-promo, .game-card, button):focus-visible {
    outline: 3px solid var(--hig-accent);
    outline-offset: 3px;
}

/* ---------- 精选推荐：1 大 2 小非对称 mosaic（TapTap 首屏比例） ---------- */

.hig-store-hero[hidden] {
    display: none !important;
}

.hig-store-hero-mosaic {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
}

.hig-store-hero-mosaic:has(.hig-store-tile:only-child) {
    grid-template-columns: 1fr;
}

.hig-store-hero-mosaic:has(.hig-store-tile:nth-child(2):last-child) {
    grid-template-columns: 1.6fr 1fr;
}

@media (min-width: 901px) {
    .hig-store-hero-mosaic {
        transition: grid-template-columns 280ms var(--hig-sidebar-motion-ease);
    }

    .hig-store-hero-mosaic:has(.hig-store-tile:nth-child(2).hig-store-tile--lead) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 1fr);
    }

    .hig-store-hero-mosaic:has(.hig-store-tile:nth-child(3).hig-store-tile--lead) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2.2fr);
    }

    .hig-store-hero-mosaic:has(.hig-store-tile:nth-child(2).hig-store-tile--lead:last-child) {
        grid-template-columns: 1fr 1.6fr;
    }

    .hig-store-hero-mosaic:has(:focus-visible) {
        transition: none;
    }

    .hig-store-tile:not(.hig-store-tile--lead) .hig-store-tile-pitch {
        display: none;
    }
}

.hig-store-tile {
    position: relative;
    overflow: hidden;
    height: clamp(360px, 30vw, 560px);
    min-height: 0;
    border-radius: 20px;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(145deg, var(--game-c1, #1a3a52), var(--game-c2, #0b1c28));
    isolation: isolate;
    box-shadow: 0 1px 3px rgb(16 24 40 / .1);
    transition: box-shadow .3s ease;
}

.hig-store-tile:hover {
    box-shadow: 0 14px 34px rgb(16 24 40 / .22);
}

.hig-store-tile--lead {
    grid-row: auto;
}

.hig-store-tile-cover,
.hig-store-tile-cover img,
.hig-store-tile-cover .game-cover-initial {
    position: absolute;
    inset: 0;
}

.hig-store-tile-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}

.hig-store-tile-cover .game-cover-initial {
    display: grid;
    place-items: center;
    font-size: 4rem;
    font-weight: 800;
}

.hig-store-tile-copy {
    position: absolute;
    inset: auto 0 0;
    z-index: 1;
    padding: 64px 18px 18px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    background: linear-gradient(180deg, transparent, rgb(12 20 32 / .6) 42%, rgb(12 20 32 / .9));
}

.hig-store-tile--lead .hig-store-tile-copy {
    padding: 80px 24px 22px;
    gap: 14px;
}

.hig-store-tile-badge {
    align-self: flex-start;
    padding: 5px 10px;
    border: 1px solid rgb(255 255 255 / .22);
    border-radius: 999px;
    background: rgb(255 255 255 / .18);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.4;
}

.hig-store-tile-pitch {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: rgb(255 255 255 / .92);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.55;
}

.hig-store-tile--lead .hig-store-tile-pitch {
    -webkit-line-clamp: 2;
    white-space: normal;
    color: #fff;
    font-size: clamp(1.125rem, 1.45vw, 1.625rem);
    font-weight: 750;
    letter-spacing: -.01em;
    line-height: 1.45;
    text-shadow: 0 2px 12px rgb(0 0 0 / .35);
}

.hig-store-tile-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding-top: 12px;
    border-top: 1px solid rgb(255 255 255 / .22);
}

.hig-store-tile-icon,
.hig-store-tile-icon--fallback {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    background: rgb(255 255 255 / .16);
}

.hig-store-tile--lead .hig-store-tile-icon,
.hig-store-tile--lead .hig-store-tile-icon--fallback {
    flex-basis: 56px;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgb(0 0 0 / .3);
}

.hig-store-tile-icon--fallback {
    display: grid;
    place-items: center;
    font-size: 1rem;
    font-weight: 750;
}

.hig-store-tile-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hig-store-tile-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .9375rem;
    font-weight: 750;
    letter-spacing: -.02em;
    line-height: 1.2;
}

.hig-store-tile--lead .hig-store-tile-copy strong {
    font-size: 1.1875rem;
}

.hig-store-tile-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgb(255 255 255 / .78);
    font-size: .75rem;
    line-height: 1.3;
}

.hig-store-tile--lead .hig-store-tile-copy .hig-store-tile-text small {
    font-size: .8125rem;
}

.hig-store-tile-copy em {
    margin-left: auto;
    flex: 0 0 auto;
    font-style: normal;
    font-size: 1.375rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* 大卡评分：上标签下数字（TapTap 首屏样式） */
.hig-store-tile-score {
    margin-left: auto;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.hig-store-tile-score small {
    display: none;
    font-size: .625rem;
    font-weight: 650;
    letter-spacing: .08em;
    color: rgb(255 255 255 / .72);
}

.hig-store-tile-score em {
    margin-left: 0;
    font-size: 1.375rem;
}

.hig-store-tile--lead .hig-store-tile-score small {
    display: block;
}

.hig-store-tile--lead .hig-store-tile-score em {
    font-size: 2rem;
}

/* ---------- 轮播指示：TapTap 式短棒 + 两侧圆钮 ---------- */

.hig-store-hero-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 18px 0 0;
}

.hig-store-hero-dots button {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    color: #4b5563;
    background: #f4f5f7;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: color .2s ease, background .2s ease;
}

.hig-store-hero-dots button:hover {
    color: #111;
    background: #f3f4f6;
}

.hig-store-hero-dots button:disabled {
    opacity: .4;
    cursor: default;
}

.hig-store-hero-dots i {
    width: 12px;
    height: 4px;
    border-radius: 999px;
    background: #d3d7de;
    transition: width .25s ease, background .25s ease;
}

.hig-store-hero-dots i.is-active {
    width: 26px;
    background: #191a1d;
}

.hig-page--games > .hig-store-discovery.hig-game-discovery {
    min-height: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.hig-store-chips {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding: 4px;
    margin: -4px;
    scrollbar-width: none;
}

.hig-store-chips::-webkit-scrollbar {
    display: none;
}

/* 浏览模式与品类筛选两组 chips 之间的分隔线 */
.hig-store-chips .games-filter.hig-game-filters::before {
    content: '';
    flex: 0 0 1px;
    width: 1px;
    height: 18px;
    margin: 0 6px;
    background: rgb(16 24 40 / .12);
}

.hig-page--games .hig-store-discovery .hig-segmented,
.hig-page--games .hig-store-chip-row,
.hig-page--games .games-filter.hig-game-filters.hig-store-chip-row {
    width: auto;
    flex: 0 0 auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.hig-page--games .hig-store-chip-row .hig-segment,
.hig-page--games .hig-store-chip-row .filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid #e7e9ee;
    border-radius: 10px;
    color: #4b5563;
    background: #fff;
    box-shadow: none;
    font-size: .8125rem;
    font-weight: 650;
    transition: box-shadow .2s ease, background .2s ease, color .2s ease;
}

.hig-page--games .hig-store-chip-row .hig-segment:hover,
.hig-page--games .hig-store-chip-row .filter-btn:hover {
    color: #111;
    background: #fff;
    box-shadow: 0 0 0 1px rgb(16 24 40 / .16);
}

.hig-page--games .hig-store-chip-row .hig-segment.is-selected,
.hig-page--games .hig-store-chip-row .hig-segment[aria-selected="true"],
.hig-page--games .hig-store-chip-row .filter-btn.active {
    color: #fff;
    background: #272e38;
    border-color: #272e38;
    box-shadow: none;
}

/* 「为你推荐」黑色 chip 前的火花图标（CSS 绘制，避免被 i18n textContent 覆盖） */
.hig-page--games .hig-segment[data-game-filter="recommended"]::before {
    content: '';
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.4 7.6L22 12l-7.6 2.4L12 22l-2.4-7.6L2 12l7.6-2.4z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.4 7.6L22 12l-7.6 2.4L12 22l-2.4-7.6L2 12l7.6-2.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.hig-page--games .hig-store-discovery .capp-games-sort {
    display: none;
}

.hig-page--games .hig-store-discovery .capp-games-sort select {
    min-height: 36px;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    color: #222;
    background: #fff;
    box-shadow: 0 0 0 1px rgb(16 24 40 / .08);
}

.hig-page--games .hig-store-discovery .hig-local-search {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.hig-page--games .hig-store-discovery .hig-local-search input {
    min-height: 36px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 0 0 1px rgb(16 24 40 / .08);
}

.hig-store-promos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.hig-store-promos[hidden] {
    display: none !important;
}

.hig-store-promo {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    color: #fff;
    text-decoration: none;
    background: #111;
}

.hig-store-promo img,
.hig-store-promo .game-cover-initial {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hig-store-promo strong {
    position: absolute;
    inset: auto 0 0;
    z-index: 1;
    padding: 28px 14px 12px;
    background: linear-gradient(180deg, transparent, rgb(0 0 0 / .7));
    font-size: 1.25rem;
    letter-spacing: -.02em;
}

/* ---------- 游戏卡：TapTap 式白卡（封面在上，信息区在下） ---------- */

body.community-hig[data-community-page="games"] .hig-store-grid,
body.community-hig[data-community-page="games"] #gamesGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

body.community-hig[data-community-page="games"] .game-card,
body.community-hig[data-community-page="games"] .game-card.featured {
    position: relative;
    grid-column: auto;
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgb(16 24 40 / .06), 0 0 0 1px rgb(16 24 40 / .04);
    transition: transform .25s ease, box-shadow .25s ease;
}

body.community-hig[data-community-page="games"] .game-card:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: 0 16px 32px rgb(16 24 40 / .14);
}

body.community-hig[data-community-page="games"] .game-cover,
body.community-hig[data-community-page="games"] .game-card.featured .game-cover {
    aspect-ratio: 16 / 9;
    outline: 0;
}

body.community-hig[data-community-page="games"] .game-cover:not(:has(img)),
.hig-store-tile-cover:not(:has(img)) {
    background:
        radial-gradient(ellipse at 15% 15%, rgb(255 255 255 / .35), transparent 55%),
        repeating-linear-gradient(135deg, transparent 0 28px, rgb(255 255 255 / .08) 28px 29px),
        linear-gradient(135deg, var(--game-c1, #546d9c), var(--game-c2, #293754));
}

body.community-hig[data-community-page="games"] .game-cover img {
    transition: transform .4s ease;
}

body.community-hig[data-community-page="games"] .game-card:hover .game-cover img {
    transform: scale(1.05);
}

body.community-hig[data-community-page="games"] .game-cover-initial {
    font-size: 4rem;
    font-weight: 750;
    opacity: .6;
}

body.community-hig[data-community-page="games"] .game-info {
    position: static;
    inset: auto;
    z-index: 2;
    padding: 12px 14px 14px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 3px;
    align-items: center;
    color: #17171a;
    background: transparent;
}

body.community-hig[data-community-page="games"] .game-card-icon {
    grid-row: 1 / span 2;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    object-fit: cover;
    background: linear-gradient(135deg, var(--game-c1, #dfe3ea), var(--game-c2, #b9c0cc));
    box-shadow: 0 0 0 1px rgb(16 24 40 / .06);
}

body.community-hig[data-community-page="games"] .game-card-icon--fallback {
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 750;
}

body.community-hig[data-community-page="games"] .game-head {
    grid-column: 2;
    margin-bottom: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

body.community-hig[data-community-page="games"] .game-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #17171a;
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.3;
}

body.community-hig[data-community-page="games"] .game-genre {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #8e8e93;
    font-size: .75rem;
    font-weight: 500;
}

body.community-hig[data-community-page="games"] .c-game-meta {
    grid-column: 2;
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-size: .75rem;
    line-height: 1.3;
}

body.community-hig[data-community-page="games"] .c-game-rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #ff9500;
    font-weight: 700;
    border: 0;
    background: transparent;
}

body.community-hig[data-community-page="games"] .c-game-plays {
    display: inline;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #8e8e93;
}

body.community-hig[data-community-page="games"] .game-desc,
body.community-hig[data-community-page="games"] .game-ai-badge,
body.community-hig[data-community-page="games"] .game-status {
    display: none;
}

/* ---------- 深色主题 ---------- */

html[data-theme="dark"] .hig-page--games .hig-store-chip-row .hig-segment,
html[data-theme="dark"] .hig-page--games .hig-store-chip-row .filter-btn,
html[data-theme="dark"] .hig-page--games .hig-store-discovery .capp-games-sort select,
html[data-theme="dark"] .hig-page--games .hig-store-discovery .hig-local-search input {
    color: #e8eaed;
    background: #1a1d22;
    border-color: rgb(255 255 255 / .12);
    box-shadow: 0 0 0 1px rgb(255 255 255 / .08);
}

html[data-theme="dark"] .hig-page--games .hig-store-chip-row .hig-segment.is-selected,
html[data-theme="dark"] .hig-page--games .hig-store-chip-row .hig-segment[aria-selected="true"],
html[data-theme="dark"] .hig-page--games .hig-store-chip-row .filter-btn.active {
    color: #111;
    background: #f3f4f6;
    box-shadow: none;
}

html[data-theme="dark"] .hig-store-chips .games-filter.hig-game-filters::before {
    background: rgb(255 255 255 / .14);
}

html[data-theme="dark"] .hig-store-hero-dots button {
    color: #c5c9d1;
    background: #1a1d22;
    box-shadow: 0 0 0 1px rgb(255 255 255 / .08);
}

html[data-theme="dark"] .hig-store-hero-dots button:hover {
    color: #fff;
    background: #23262c;
}

html[data-theme="dark"] .hig-store-hero-dots i {
    background: rgb(255 255 255 / .18);
}

html[data-theme="dark"] .hig-store-hero-dots i.is-active {
    background: #f3f4f6;
}

html[data-theme="dark"] body.community-hig[data-community-page="games"] .game-card,
html[data-theme="dark"] body.community-hig[data-community-page="games"] .game-card.featured {
    background: #16191f;
    box-shadow: 0 0 0 1px rgb(255 255 255 / .07);
}

html[data-theme="dark"] body.community-hig[data-community-page="games"] .game-card:hover {
    box-shadow: 0 16px 32px rgb(0 0 0 / .5), 0 0 0 1px rgb(255 255 255 / .1);
}

html[data-theme="dark"] body.community-hig[data-community-page="games"] .game-info,
html[data-theme="dark"] body.community-hig[data-community-page="games"] .game-title {
    color: #eceef1;
}

html[data-theme="dark"] body.community-hig[data-community-page="games"] .game-genre,
html[data-theme="dark"] body.community-hig[data-community-page="games"] .c-game-plays {
    color: #9aa0a8;
}

html[data-theme="dark"] body.community-hig[data-community-page="games"] .c-game-rating {
    color: #ffb340;
}

html[data-theme="dark"] body.community-hig[data-community-page="games"] .game-card-icon {
    box-shadow: 0 0 0 1px rgb(255 255 255 / .1);
}

/* ---------- 响应式 ---------- */

@media (max-width: 1179px) {
    body.community-hig[data-community-page="games"] .capp-layout,
    body.community-hig[data-community-page="games"] .capp-frame,
    body.community-hig[data-community-page="games"].is-sidebar-collapsed .capp-layout,
    body.community-hig[data-community-page="games"].is-sidebar-collapsed .capp-frame {
        grid-template-columns: var(--hig-sidebar-compact) minmax(0, 1fr);
    }
}

@media (max-width: 768px) {
    body.community-hig[data-community-page="games"] .hig-page--games {
        gap: 18px;
    }

    .hig-page--games > .hig-store-discovery.hig-game-discovery {
        position: sticky;
        z-index: 80;
        top: calc(var(--hig-topbar) + 4px);
        padding: 8px 0;
        border: 0;
        background: color-mix(in srgb, var(--hig-bg) 94%, transparent);
        box-shadow: none;
        -webkit-backdrop-filter: saturate(140%) blur(10px);
        backdrop-filter: saturate(140%) blur(10px);
    }

    .hig-store-chips {
        flex-direction: column;
        align-items: stretch;
        overflow: visible;
    }

    .hig-page--games .hig-store-chip-row,
    .hig-page--games .games-filter.hig-game-filters.hig-store-chip-row {
        overflow-x: auto;
        scrollbar-width: none;
        padding: 3px;
    }

    .hig-page--games .hig-store-chip-row > button {
        flex: 0 0 auto;
        min-height: 40px;
    }

    .hig-store-chips .games-filter.hig-game-filters::before {
        display: none;
    }
}

@media (max-width: 900px) {
    .hig-store-hero-mosaic,
    .hig-store-hero-mosaic:has(.hig-store-tile:nth-child(2):last-child),
    .hig-store-promos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hig-store-tile {
        height: 220px;
    }

    .hig-store-tile--lead {
        grid-column: 1 / -1;
        height: clamp(280px, 46vw, 400px);
    }

    .hig-store-tile--lead .hig-store-tile-pitch {
        font-size: 1.125rem;
    }

    body.community-hig[data-community-page="games"] .hig-store-grid,
    body.community-hig[data-community-page="games"] #gamesGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 540px) {
    .hig-store-hero-mosaic {
        gap: 10px;
    }

    .hig-store-tile {
        height: 200px;
        border-radius: 14px;
    }

    .hig-store-tile--lead {
        height: 300px;
    }

    .hig-store-tile-copy,
    .hig-store-tile--lead .hig-store-tile-copy {
        padding: 40px 12px 12px;
        gap: 8px;
    }

    .hig-store-tile:not(.hig-store-tile--lead) .hig-store-tile-pitch,
    .hig-store-tile:not(.hig-store-tile--lead) .hig-store-tile-icon {
        display: none;
    }

    .hig-store-tile-copy strong {
        font-size: .875rem;
    }

    .hig-store-tile-copy em {
        font-size: 1.125rem;
    }

    .hig-store-tile--lead .hig-store-tile-score em {
        font-size: 1.75rem;
    }

    .hig-store-promos,
    body.community-hig[data-community-page="games"] .hig-store-grid,
    body.community-hig[data-community-page="games"] #gamesGrid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hig-store-hero-mosaic,
    .hig-store-tile,
    .hig-store-tile-cover img {
        transition: none;
    }
}