/**
 * 详情页模块化设计（与首页 jidi 风格统一）
 * 格子背景 + 玻璃面板模块：详情卡 / 资源介绍 / 下载侧栏 / 排行榜
 */

/* ---------- 格子背景（与首页/分类页同款） ---------- */

/* 格子背景铺满整个详情页（随文档延伸到底部） */
/* 只在 body 上铺格子背景（单一网格原点，避免 main/.page 双重背景错位） */
html,
body.single {
    background-color: #eef1f6 !important;
    background-image:
        linear-gradient(rgba(15, 23, 42, 0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.09) 1px, transparent 1px) !important;
    background-size: 44px 44px !important;
    background-attachment: fixed !important;
}

html body.single .page {
    background: transparent !important;
    background-image: none !important;
}

[data-theme="dark"] html,
[data-theme="dark"] body.single {
    background-color: #0b1220 !important;
    background-image:
        linear-gradient(rgba(148, 163, 184, 0.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.14) 1px, transparent 1px) !important;
    background-size: 44px 44px !important;
    background-attachment: fixed !important;
}

[data-theme="dark"] html body.single .page {
    background: transparent !important;
    background-image: none !important;
}

body.single .bg-decoration,
body.blog .single .bg-decoration {
    background:
        radial-gradient(900px 420px at 50% -8%, rgba(37, 99, 235, 0.14), transparent 60%),
        radial-gradient(640px 320px at 12% 18%, rgba(99, 102, 241, 0.08), transparent 62%),
        radial-gradient(520px 280px at 88% 12%, rgba(14, 165, 233, 0.08), transparent 65%),
        #f5f7fb;
    background-size:
        auto,
        auto,
        auto,
        auto;
    background-position: center top, left top, right top, center top, center top, center;
    -webkit-mask-image: radial-gradient(140% 90% at 50% 0%, #000 35%, rgba(0, 0, 0, 0.92) 70%, #000 100%);
    mask-image: radial-gradient(140% 90% at 50% 0%, #000 35%, rgba(0, 0, 0, 0.92) 70%, #000 100%);
}



[data-theme="dark"] body.single .bg-decoration {
    background:
        radial-gradient(900px 420px at 50% -10%, rgba(59, 130, 246, 0.22), transparent 58%),
        radial-gradient(640px 320px at 10% 20%, rgba(99, 102, 241, 0.12), transparent 62%),
        radial-gradient(520px 280px at 90% 14%, rgba(56, 189, 248, 0.10), transparent 65%),
        linear-gradient(rgba(148, 163, 184, 0.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.14) 1px, transparent 1px),
        #0b1220;
    background-size:
        auto,
        auto,
        auto,
        44px 44px,
        44px 44px,
        auto;
    background-position: center top, left top, right top, center top, center top, center;
}

/* ---------- 页面容器 ---------- */

body.single .single-post-container {
    /* 顶距让返回按钮到导航栏约 60px（导航栏高 72，留白 32px 会略多，取 -12 收紧） */
    max-width: 1400px;
    margin: 0 auto;
    padding: calc(var(--nav-height, 72px) - 56px) clamp(14px, 3vw, 32px) 24px !important;
    /* 去掉主题的白色大容器：模块直接浮在格子背景上 */
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

[data-theme="dark"] body.single .single-post-container {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ---------- 毛玻璃面板通用配方 ---------- */

body.single .content-area,
body.single .sidebar-area.resource-side-panel,
body.single .hot-rank-card,
body.single .steam-requirements-card,
body.single .game-detail-left,
body.single .game-detail-right {
    background: rgba(255, 255, 255, 0.48) !important;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 34px -6px rgba(2, 6, 23, 0.12) !important;
}

[data-theme="dark"] body.single .content-area,
[data-theme="dark"] body.single .sidebar-area.resource-side-panel,
[data-theme="dark"] body.single .hot-rank-card,
[data-theme="dark"] body.single .steam-requirements-card,
[data-theme="dark"] body.single .game-detail-left,
[data-theme="dark"] body.single .game-detail-right {
    background: rgba(15, 23, 42, 0.5) !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    box-shadow: 0 10px 34px -6px rgba(0, 0, 0, 0.4) !important;
}

/* ---------- 详情卡：封面 | 信息 两个独立模块 ---------- */

body.single .single-post-container .game-detail-card {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px;
    align-items: flex-start;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.single .single-post-container .game-detail-left {
    flex: 1 1 63% !important;
    padding: 8px !important;
}

body.single .single-post-container .game-detail-right {
    flex: 1 1 35% !important;
    padding: 14px 16px !important;
}

body.single .single-post-container .game-detail-left,
body.single .single-post-container .game-detail-right {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

body.single .single-post-container .game-detail-left {
    border-radius: 14px;
    overflow: hidden;
    background: rgba(2, 6, 23, 0.35);
}

body.single .single-post-container .game-detail-right {
    display: block !important;
    padding: 4px 2px;
}

/* 返回上一页按钮容器 */
body.single .back-link-wrapper {
    margin-bottom: 12px !important;
}

body.single .back-link-wrapper .back-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 7px 14px !important;
    border-radius: 999px !important;
    border: 1px solid var(--border, #e2e8f0) !important;
    background: rgba(255, 255, 255, 0.48) !important;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    color: var(--text-muted, #64748b) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all .15s ease !important;
}

body.single .back-link-wrapper .back-link:hover {
    color: var(--primary, #2563eb) !important;
    transform: translateX(-2px);
}

/* 通栏标题长条模块 */
body.single .uc-title-bar {
    position: relative;
    padding-top: 30px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    background: rgba(255, 255, 255, 0.48) !important;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 34px -6px rgba(2, 6, 23, 0.12) !important;
    padding: 14px 20px;
    margin-bottom: 16px;
}

[data-theme="dark"] body.single .uc-title-bar {
    background: rgba(15, 23, 42, 0.5) !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
}

/* 标题模块上边框上的像素小人（右上角站一排，脚贴边框线） */
body.single .uc-title-mascots {
    position: absolute;
    bottom: 100%;
    right: 18px;
    left: auto;
    display: flex;
    align-items: flex-end;
    line-height: 0;
    pointer-events: none;
    z-index: 2;
    max-width: 60%;
    overflow: hidden;
}

body.single .uc-title-mascots img {
    width: 24px;
    height: auto;
    flex: 0 0 auto;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    filter: drop-shadow(0 3px 5px rgba(2, 6, 23, 0.14));
}

@media (max-width: 760px) {
    body.single .uc-title-mascots {
        position: absolute;
        bottom: 100%;
        right: 10px;
        left: auto;
        justify-content: flex-end;
        max-width: 55%;
        margin-bottom: 0;
    }

    body.single .uc-title-mascots img {
        width: 20px;
    }
}

body.single .uc-title-main {
    min-width: 0;
    flex: 1 1 auto;
}

body.single .uc-title-main .single-title {
    font-size: clamp(1.25rem, 2vw, 1.6rem) !important;
    line-height: 1.35 !important;
    /* 长标题溢出隐藏省略，与首页排行榜一致 */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100%;
    margin: 0 0 6px !important;
}

body.single .uc-title-main .single-title .resource-title-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.single .uc-title-main .game-updated-time {
    font-size: 0.76rem !important;
}

/* 标题徽章缩小一号，与标题基线对齐 */
body.single .uc-title-bar .title-status-badge {
    font-size: 0.62rem !important;
    padding: 2px 7px !important;
    margin-left: 4px !important;
    transform: translateY(-1px);
}

body.single .uc-title-bar .game-views {
    flex: none !important;
    background: rgba(148, 163, 184, 0.12) !important;
    border-radius: 999px;
    padding: 6px 12px;
}

@media (max-width: 760px) {
    body.single .uc-title-bar {
        padding: 12px 14px;
    }
}

body.single .single-post-container .single-title {
    font-size: clamp(1.3rem, 2vw, 1.7rem) !important;
    line-height: 1.3 !important;
}

/* ---------- 下方内容：资源介绍 | 侧栏 双栏 ---------- */

body.single .single-content-grid {
    /* 独立模块：占满整行，内部 资源介绍 | 下载侧栏 双列 */
    flex: 1 1 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px !important;
    gap: 22px;
    align-items: start;
    margin: 0 !important;
    padding: 0 !important;
}

body.single .single-content-grid .content-area {
    padding: 22px 24px !important;
    min-width: 0;
    /* 让玻璃更透，避免与深色内容叠加成实心白块 */
    background: rgba(255, 255, 255, 0.38) !important;
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
}

[data-theme="dark"] body.single .single-content-grid .content-area {
    background: rgba(15, 23, 42, 0.42) !important;
}

/* 底部衔接：内容区面板与网格下边缘留出网格透明区，避免断层 */
body.single .single-content-grid .content-area::after {
    content: '';
    display: block;
    height: 1px;
    background: transparent;
}

body.single .content-area-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--text-main, #0f172a) !important;
    margin-bottom: 14px !important;
}

body.single .content-area-title::before {
    content: '';
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--primary, #2563eb), #7c3aed);
}

/* ---------- 侧栏：下载面板 / 排行榜 ---------- */

body.single .side-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

body.single .sidebar-area.resource-side-panel {
    padding: 18px 16px !important;
}

/* 信息面板内部密度收紧 */
body.single .single-post-container .game-short-desc {
    margin: 10px 0 12px !important;
    font-size: 0.86rem !important;
    line-height: 1.65 !important;
}

body.single .single-post-container .game-meta-item {
    padding: 7px 10px !important;
    font-size: 0.8rem !important;
}

body.single .single-post-container .game-meta-item .genre-pill {
    font-size: 0.72rem !important;
}

body.single .single-post-container .game-updated-time {
    font-size: 0.74rem !important;
}

/* 好玩/不好玩小按钮：覆盖主题 .vote-btn 的纵向大卡样式 */
body.single .uc-action-row {
    gap: 8px !important;
}

body.single .uc-vote-btn {
    padding: 6px 12px !important;
    font-size: 0.78rem !important;
}

body.single .uc-fav-btn {
    padding: 6px 12px !important;
    font-size: 0.78rem !important;
}

/* 好玩/不好玩小按钮：覆盖主题 .vote-btn 的纵向大卡样式 */
body.single .uc-vote-btn {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: none !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    gap: 5px;
    padding: 7px 14px !important;
    border-radius: 999px !important;
    border: 1px solid var(--border, #e2e8f0) !important;
    background: var(--bg-surface, #fff) !important;
    box-shadow: none !important;
    color: var(--text-muted, #64748b) !important;
    font-size: 0.82rem !important;
    line-height: 1 !important;
}

body.single .uc-vote-btn .vote-count {
    font-weight: 700 !important;
}

body.single .uc-vote-btn[data-type="up"]:hover,
body.single .uc-vote-btn[data-type="up"].active {
    color: #16a34a !important;
    border-color: rgba(34, 197, 94, 0.5) !important;
    background: rgba(34, 197, 94, 0.08) !important;
    transform: translateY(-1px) !important;
}

body.single .uc-vote-btn[data-type="up"].active svg {
    fill: #16a34a !important;
}

body.single .uc-vote-btn[data-type="down"]:hover,
body.single .uc-vote-btn[data-type="down"].active {
    color: #ea580c !important;
    border-color: rgba(249, 115, 22, 0.5) !important;
    background: rgba(249, 115, 22, 0.08) !important;
    transform: translateY(-1px) !important;
}

body.single .uc-vote-btn[data-type="down"].active svg {
    fill: #ea580c !important;
}

body.single .uc-vote-btn:disabled {
    cursor: default !important;
    transform: none !important;
}

body.single .hot-rank-card {
    padding: 16px !important;
}

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

@media (max-width: 1100px) {
    body.single .single-content-grid {
        grid-template-columns: 1fr !important;
    }

    body.single .single-post-container .game-detail-card {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 760px) {
    body.single .single-post-container {
        padding-top: calc(var(--nav-height, 72px) + 12px) !important;
    }

    body.single .single-post-container .game-detail-card {
        padding: 14px !important;
        gap: 14px;
    }
}

/* 底部免责声明容器：去掉实心白底，改为毛玻璃，让格子背景透出 */
body.single .disclaimer-section .disclaimer-container {
    background: rgba(255, 255, 255, 0.48) !important;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 10px 34px -6px rgba(2, 6, 23, 0.12) !important;
}

[data-theme="dark"] body.single .disclaimer-section .disclaimer-container {
    background: rgba(15, 23, 42, 0.5) !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
}

body.single .disclaimer-section .disclaimer-container::before {
    border-color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] body.single .disclaimer-section .disclaimer-container::before {
    border-color: rgba(148, 163, 184, 0.25);
}

/* 上一篇/下一篇文章导航：加毛玻璃背景，避免在格子上变透明 */
body.single .post-navigation .nav-links a {
    background: rgba(255, 255, 255, 0.48) !important;
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 6px 20px -6px rgba(2, 6, 23, 0.1) !important;
}

body.single .post-navigation .nav-links a:hover {
    border-color: var(--primary) !important;
    background: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] body.single .post-navigation .nav-links a {
    background: rgba(15, 23, 42, 0.5) !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
}

[data-theme="dark"] body.single .post-navigation .nav-links a:hover {
    background: rgba(30, 41, 59, 0.6) !important;
}

body.single .post-navigation .nav-subtitle {
    color: var(--primary) !important;
}

/* 下载次数标签（详情页标题下方） */
body.single .game-detail-right .game-views {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.2);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-main, #0f172a);
}

body.single .game-detail-right .game-views .gv-ico {
    color: var(--primary, #2563eb);
    flex: none;
}

body.single .game-detail-right .game-views .gv-label {
    color: var(--text-muted, #64748b);
    font-weight: 600;
    font-size: 0.82rem;
}

body.single .game-detail-right .game-views .gv-num {
    color: var(--text-main, #0f172a);
    font-weight: 800;
    font-size: 0.92rem;
}

[data-theme="dark"] body.single .game-detail-right .game-views {
    background: rgba(30, 41, 59, 0.5);
}

[data-theme="dark"] body.single .game-detail-right .game-views .gv-label {
    color: #94a3b8;
}

/* 管理员金色徽标（详情页评论区等，因 home-jidi.css 仅首页加载，单页需自带） */
.jidi-admin-badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin-left: 7px;
    padding: 3px 9px;
    border-radius: 999px;
    vertical-align: middle;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.03em;
    color: #8a5b00;
    background: linear-gradient(135deg, rgba(255, 214, 90, 0.35), rgba(245, 179, 1, 0.18));
    border: 1px solid #e0a800;
    box-shadow: 0 1px 5px rgba(229, 176, 0, 0.45);
}

.jidi-admin-badge svg {
    display: block;
    color: #b8860b;
    flex: none;
}

[data-theme="dark"] .jidi-admin-badge {
    color: #ffe6a0;
    background: linear-gradient(135deg, rgba(255, 214, 90, 0.22), rgba(184, 134, 11, 0.28));
    border-color: #caa226;
}