/* ==========================================================================
   首页文章内容模块 · 第三版（Steam 版）样式
   1:1 还原 Steam 首页「热门新品」区域（store.steampowered.com 实测值）：
   - 游戏行 = 独立胶囊卡片（rgba(179,218,255,.08) 底，间距 10px，悬停 rgba(115,150,184,.25)）
   - 右侧预览面板 = 独立悬浮卡片（rgba(115,150,184,.25)），流内固定、不跟随行，
     默认 opacity:0，悬停行才淡入；高度=列表高度，媒体填到底
   ========================================================================== */

.pcgh-steamall {
    display: block;
}

/* ---------- 顶部分类 Tab 栏（后台「显示文章分类」生成） ---------- */
.pcgh-steamall__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 24px;
    margin: 0 0 12px;
    padding: 0 6px;
}

.pcgh-steamall__tab {
    appearance: none;
    background: none;
    border: 0;
    padding: 2px 0 6px;
    margin: 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    color: #acb6bd;
    line-height: 1.3;
    border-bottom: 2px solid transparent;
    transition: color .15s ease;
}

.pcgh-steamall__tab:hover {
    color: #ffffff;
}

.pcgh-steamall__tab.is-active {
    color: #ffffff;
    font-weight: 700;
    border-bottom-color: #66c0f4;
}

/* ---------- 主体：左列表 + 右预览面板（流内并排，stretch 等高） ---------- */
.pcgh-steamall__body {
    display: flex;
    align-items: stretch;
    gap: 24px;
    position: relative;
}

.pcgh-steamall__list {
    flex: 1 1 auto;
    min-width: 0;
}

.pcgh-steamall__group {
    display: none;
}

.pcgh-steamall__group.is-active {
    display: block;
}

/* ---------- 游戏行（Steam 独立胶囊卡片） ---------- */
.pcgh-steamall__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 10px 0 6px;
    margin: 0 0 10px;
    text-decoration: none;
    background: rgba(179, 218, 255, .08);
    transition: background .12s ease;
}

.pcgh-steamall__row:hover {
    background: rgba(115, 150, 184, .25);
}

.pcgh-steamall__thumb {
    flex: none;
    width: 231px;
    height: 87px;
    overflow: hidden;
    background: #0e1821;
}

.pcgh-steamall__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pcgh-steamall__info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px 0;
}

.pcgh-steamall__name {
    font-size: 14px;
    font-weight: 400;
    color: #c7d5e0;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pcgh-steamall__row:hover .pcgh-steamall__name {
    color: #ffffff;
}

.pcgh-steamall__tagline,
.pcgh-steamall__date {
    font-size: 12px;
    color: #8f98a0;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Steam 价格区：统一现价色（浅蓝白） */
.pcgh-steamall__price {
    flex: none;
    align-self: center;
    margin-left: auto;
    font-size: 13px;
    font-weight: 400;
    color: #acdbf5;
    white-space: nowrap;
}

.pcgh-steamall__price.is-free,
.pcgh-steamall__price.is-points,
.pcgh-steamall__price.is-vip {
    color: #acdbf5;
}

/* ---------- 每组尾部「查看更多」条（Steam 样式） ---------- */
.pcgh-steamall__more {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
    padding: 0 6px;
    font-size: 12px;
    color: #8f98a0;
}

.pcgh-steamall__more-btn {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(27, 40, 56, .9);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #c7d5e0;
    font-size: 12px;
    line-height: 1.4;
    text-decoration: none;
    transition: color .12s ease, border-color .12s ease;
}

.pcgh-steamall__more-btn:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, .3);
}

.pcgh-steamall__more-or {
    color: #5f6c76;
}

/* ---------- 右侧预览面板（Steam 独立悬浮卡片，实测 rgba(115,150,184,.25)） ----------
   在文档流内固定于列表右侧，高度随 stretch = 列表高度；默认隐藏，悬停行淡入 */
.pcgh-steamall__preview {
    flex: none;
    width: 400px;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 10px 12px;
    background: rgba(115, 150, 184, .25);
}

.pcgh-steamall__pv-title {
    flex: none;
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.35;
}

.pcgh-steamall__pv-reviews {
    flex: none;
    margin: 0 0 10px;
    font-size: 11px;
    color: #8f98a0;
    line-height: 1.6;
}

.pcgh-steamall__pv-reviews b {
    display: block;
    font-size: 14px;
    font-weight: 400;
}

/* Steam 好评=蓝色，褒贬不一=土黄，差评=红 */
.pcgh-steamall__pv-reviews b.is-positive {
    color: #66c0f4;
}

.pcgh-steamall__pv-reviews b.is-mixed {
    color: #b9a648;
}

.pcgh-steamall__pv-reviews b.is-negative {
    color: #c03535;
}

/* Steam 实测：chips = rgba(179,218,255,.12) 底 + 白字 11px */
.pcgh-steamall__pv-tags {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 10px;
}

.pcgh-steamall__pv-tags span {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(179, 218, 255, .12);
    color: #ffffff;
    font-size: 11px;
    line-height: 1.5;
}

/* 微预告片视频（16:9，Steam 实测 object-fit: contain） */
.pcgh-steamall__pv-media {
    flex: none;
    margin: 0 0 5px;
}

.pcgh-steamall__pv-media:empty {
    display: none;
}

.pcgh-steamall__pv-video video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: #000;
}

/* 竖排截图墙：均分面板剩余高度，底边与面板底边对齐（刚好到底） */
.pcgh-steamall__pv-shots {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pcgh-steamall__pv-shots img {
    display: block;
    width: 100%;
    flex: 1 1 0;
    min-height: 0;
    object-fit: cover;
    background: #0e1821;
}

/* ---------- 空态 ---------- */
.pcgh-steamall__empty {
    padding: 34px 0;
    text-align: center;
    color: #8f98a0;
    font-size: 14px;
}

/* ==========================================================================
   白色主题浅色化适配（面板蓝灰半透明两种主题通用，仅行/文字微调）
   ========================================================================== */
html[data-pcgh-theme-resolved="light"] .pcgh-steamall__tab {
    color: #4b5563;
}

html[data-pcgh-theme-resolved="light"] .pcgh-steamall__tab:hover,
html[data-pcgh-theme-resolved="light"] .pcgh-steamall__tab.is-active {
    color: #111827;
}

html[data-pcgh-theme-resolved="light"] .pcgh-steamall__tab.is-active {
    border-bottom-color: #417a9b;
}

html[data-pcgh-theme-resolved="light"] .pcgh-steamall__row:hover {
    background: rgba(84, 116, 148, .18);
}

html[data-pcgh-theme-resolved="light"] .pcgh-steamall__thumb {
    background: #e5e7eb;
}

html[data-pcgh-theme-resolved="light"] .pcgh-steamall__name {
    color: #1f2937;
}

html[data-pcgh-theme-resolved="light"] .pcgh-steamall__row:hover .pcgh-steamall__name {
    color: #111827;
}

html[data-pcgh-theme-resolved="light"] .pcgh-steamall__tagline,
html[data-pcgh-theme-resolved="light"] .pcgh-steamall__date {
    color: #4b5563;
}

html[data-pcgh-theme-resolved="light"] .pcgh-steamall__price,
html[data-pcgh-theme-resolved="light"] .pcgh-steamall__price.is-free,
html[data-pcgh-theme-resolved="light"] .pcgh-steamall__price.is-points,
html[data-pcgh-theme-resolved="light"] .pcgh-steamall__price.is-vip {
    color: #417a9b;
}

html[data-pcgh-theme-resolved="light"] .pcgh-steamall__more {
    color: #4b5563;
}

html[data-pcgh-theme-resolved="light"] .pcgh-steamall__more-btn {
    background: #eef1f4;
    border-color: rgba(15, 23, 42, .12);
    color: #374151;
}

html[data-pcgh-theme-resolved="light"] .pcgh-steamall__more-btn:hover {
    color: #111827;
    border-color: rgba(15, 23, 42, .3);
}

html[data-pcgh-theme-resolved="light"] .pcgh-steamall__more-or {
    color: #9ca3af;
}

html[data-pcgh-theme-resolved="light"] .pcgh-steamall__pv-title {
    color: #1a2129;
}

html[data-pcgh-theme-resolved="light"] .pcgh-steamall__pv-reviews {
    color: #39434d;
}

html[data-pcgh-theme-resolved="light"] .pcgh-steamall__pv-reviews b.is-positive {
    color: #3d6c8c;
}

html[data-pcgh-theme-resolved="light"] .pcgh-steamall__pv-tags span {
    background: rgba(23, 29, 37, .10);
    color: #374151;
}

html[data-pcgh-theme-resolved="light"] .pcgh-steamall__pv-video video,
html[data-pcgh-theme-resolved="light"] .pcgh-steamall__pv-shots img {
    background: #dfe3e7;
}

html[data-pcgh-theme-resolved="light"] .pcgh-steamall__empty {
    color: #4b5563;
}

/* ==========================================================================
   移动端：隐藏预览面板，行布局收窄
   ========================================================================== */
@media (max-width: 992px) {
    .pcgh-steamall__preview {
        display: none;
    }

    .pcgh-steamall__body {
        gap: 0;
    }

    .pcgh-steamall__pv-more {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .pcgh-steamall__tabs {
        gap: 2px 16px;
        margin-bottom: 10px;
    }

    .pcgh-steamall__row {
        gap: 10px;
        padding: 0 8px 0 4px;
    }

    .pcgh-steamall__thumb {
        width: 138px;
        height: 52px;
    }

    .pcgh-steamall__name {
        font-size: 13px;
    }

    .pcgh-steamall__tagline,
    .pcgh-steamall__date {
        font-size: 11px;
    }

    .pcgh-steamall__price {
        font-size: 12px;
    }
}

/* ---------- 面板底部「查看更多」条（随 Tab 联动，仅显示激活组） ---------- */
.pcgh-steamall__pv-more {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%; /* 内容右缘与预览面板右缘对齐 */
    margin-top: 0;
}

.pcgh-steamall__more[data-steamall-more] {
    display: none;
    margin: 0;
    padding: 0;
}

.pcgh-steamall__more[data-steamall-more].is-active {
    display: flex;
}

/* ---------- pcgh_round6（20261014）：Tab 字号对齐排序 tab(13px)、查看更多条回归左列右对齐、预览面板「今日更新」条 ---------- */
.pcgh-steamall__tab {
    font-size: 13px;
}

.pcgh-steamall__pv-more {
    margin-top: 10px;
}

.pcgh-steamall__pv-today {
    flex: none;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 0 auto;
    padding: 3px 12px;
    background: rgba(var(--pcgh-primary-rgb), .12);
    border: 1px solid rgba(var(--pcgh-primary-rgb), .3);
    color: var(--pcgh-text-2);
    font-size: 12px;
    line-height: 1.5;
}

.pcgh-steamall__pv-today i[data-lucide],
.pcgh-steamall__pv-today svg {
    width: 13px;
    height: 13px;
    color: var(--pcgh-primary);
    flex: none;
}

.pcgh-steamall__pv-today b {
    color: var(--pcgh-primary);
    font-weight: 700;
}