/* ============================================================
   GamePublish 游戏发布站 - 主样式表
   ============================================================ */

/* 重置与基础 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    background: #f5f7fa;
    color: #333;
    line-height: 1.6;
    font-size: 14px;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 20px; }

/* ========== 顶部导航 ========== */
.site-header {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    position: sticky;
    top: 0;
    z-index: 100;
}
.header-inner {
    display: flex;
    align-items: center;
    height: 64px;
    gap: 30px;
}
.logo a { display: flex; align-items: center; gap: 8px; }
.logo-icon {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, #4a7dff, #6c5ce7);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 18px; font-weight: bold;
}
.logo-text { font-size: 20px; font-weight: 700; color: #1a1a2e; }
.main-nav { display: flex; gap: 28px; flex: 1; }
.main-nav a {
    font-size: 15px;
    color: #555;
    font-weight: 500;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}
.main-nav a:hover, .main-nav a.active {
    color: #4a7dff;
    border-bottom-color: #4a7dff;
}
.header-right { display: flex; align-items: center; gap: 16px; }
.search-box { position: relative; }
.search-box input {
    width: 240px;
    padding: 8px 14px;
    border: 1px solid #e0e4ea;
    border-radius: 20px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
    background: #f8f9fb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 12px center;
    padding-left: 34px;
}
.search-box input:focus { border-color: #4a7dff; background-color: #fff; }
.user-info { font-size: 13px; color: #888; }
.btn-admin {
    padding: 7px 18px;
    background: linear-gradient(135deg, #4a7dff, #6c5ce7);
    color: #fff;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    transition: opacity 0.2s;
}
.btn-admin:hover { opacity: 0.9; }

/* ========== 轮播图 ========== */
.banner-section { padding: 20px 0; }
.banner-slider {
    position: relative;
    width: 100%;
    height: 360px;
    border-radius: 16px;
    overflow: hidden;
    background: #1a1a2e;
}
.banner-slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease;
}
.banner-slide.active { opacity: 1; }
.banner-slide a { display: block; width: 100%; height: 100%; }
.banner-slide img { width: 100%; height: 100%; object-fit: fill; }
.banner-placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.banner-title { font-size: 42px; font-weight: 700; margin-bottom: 12px; }
.banner-subtitle { font-size: 18px; opacity: 0.8; }
.banner-prev, .banner-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(4px);
    border-radius: 50%;
    color: #fff;
    font-size: 24px;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
}
.banner-prev { left: 20px; }
.banner-next { right: 20px; }
.banner-prev:hover, .banner-next:hover { background: rgba(255,255,255,0.35); }
.banner-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}
.banner-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: all 0.2s;
}
.banner-dot.active { background: #fff; width: 24px; border-radius: 5px; }

/* ========== 主体布局 ========== */
.content-section { padding: 10px 0 40px; }
.content-layout {
    display: grid;
    grid-template-columns: 220px 1fr 220px;
    gap: 24px;
    align-items: start;
}

/* 侧边栏通用 */
.sidebar-left, .sidebar-right {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    position: sticky;
    top: 84px;
}
/* 侧栏隐藏占位：保留 grid 列宽，隐藏白色背景与内容，不影响热门游戏列表位置 */
.sidebar-left.sidebar-hidden, .sidebar-right.sidebar-hidden {
    background: transparent;
    border-radius: 0;
    padding: 0;
    position: static;
    visibility: hidden;
    pointer-events: none;
}
.sidebar-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f0f2f5;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sidebar-title .dot, .sidebar-title .rank-icon { color: #4a7dff; }

/* 精选推荐列表 */
.recommend-list { display: flex; flex-direction: column; gap: 12px; }
.recommend-item {
    display: flex;
    gap: 10px;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s;
}
.recommend-item:hover { background: #f5f7fa; }
.recommend-cover {
    width: 50px; height: 50px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}
.recommend-cover img { width: 100%; height: 100%; object-fit: fill; }
.cover-placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #4a7dff, #6c5ce7);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 14px;
}
.cover-placeholder.large { font-size: 20px; }
.cover-placeholder.xlarge { font-size: 32px; }
.recommend-info { flex: 1; min-width: 0; }
.recommend-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.recommend-meta { font-size: 12px; color: #999; margin-top: 2px; }

/* 排行榜 */
.ranking-list { display: flex; flex-direction: column; gap: 2px; }
.ranking-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
    border-radius: 6px;
    transition: background 0.2s;
}
.ranking-item:hover { background: #f5f7fa; }
.rank-num {
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #999;
    background: #f0f2f5;
    border-radius: 4px;
    flex-shrink: 0;
}
.rank-num.top { background: linear-gradient(135deg, #ff6b6b, #ee5a24); color: #fff; }
.rank-name {
    flex: 1;
    font-size: 13px;
    color: #444;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rank-count { font-size: 12px; color: #999; flex-shrink: 0; }

/* ========== 主内容区 ========== */
.main-content { min-width: 0; }
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}
.section-title { font-size: 24px; font-weight: 700; color: #1a1a2e; }
.section-subtitle { font-size: 13px; color: #888; margin-top: 4px; }
.category-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tab-btn {
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 13px;
    color: #666;
    background: #fff;
    border: 1px solid #e0e4ea;
    transition: all 0.2s;
}
.tab-btn:hover { border-color: #4a7dff; color: #4a7dff; }
.tab-btn.active {
    background: #4a7dff;
    color: #fff;
    border-color: #4a7dff;
}

/* 游戏卡片网格 */
.game-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.poster-in-games { border-radius: 12px; overflow: hidden; margin: 4px 0; }
.game-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.25s, box-shadow 0.25s;
}
.game-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.1);
}
.game-card-link { display: block; }
.game-cover {
    position: relative;
    width: 100%;
    padding-top: 56%;
    overflow: hidden;
    background: #f0f2f5;
}
.game-cover img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: fill;
    transition: transform 0.3s;
}
.game-card:hover .game-cover img { transform: scale(1.05); }
.game-cover .cover-placeholder {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}
.game-tag {
    position: absolute;
    top: 10px; left: 10px;
    padding: 3px 10px;
    background: #4a7dff;
    color: #fff;
    font-size: 12px;
    border-radius: 4px;
    font-weight: 500;
}
.game-tag.large { padding: 5px 14px; font-size: 14px; }
.game-info { padding: 14px 16px; }
.game-title {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.game-developer { font-size: 13px; color: #888; margin-bottom: 8px; }
.game-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}
.game-rating { color: #ffa502; font-weight: 600; }
.game-downloads { color: #999; }
.game-desc {
    font-size: 12.5px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.game-beta {
    font-size: 12px;
    color: #ff8c42;
    font-weight: 500;
    margin-bottom: 4px;
}
.game-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 16px 10px;
}
.contact-chip {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 6px;
    text-decoration: none;
    transition: opacity 0.2s;
}
.contact-chip.qq { background: #e8f4ff; color: #12b7f5; }
.contact-chip.qq:hover { background: #d4ecff; }
.contact-chip.group { background: #e6f9ee; color: #07c160; }
.contact-chip.group:hover { background: #d2f4e2; }
.game-actions {
    display: flex;
    padding: 0 16px 14px;
    gap: 8px;
}
.btn-download, .btn-detail {
    flex: 1;
    text-align: center;
    padding: 7px 0;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}
.btn-download {
    background: #00b894;
    color: #fff;
}
.btn-download:hover { background: #019875; }
.btn-detail {
    background: #f0f2f5;
    color: #4a7dff;
}
.btn-detail:hover { background: #e4e8ee; }

.empty-tip {
    text-align: center;
    padding: 30px 0;
    color: #bbb;
    font-size: 13px;
}

/* ========== 页面头部 ========== */
.page-header {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    color: #fff;
    padding: 50px 0;
    text-align: center;
}
.page-header h1 { font-size: 32px; margin-bottom: 8px; }
.page-header p { opacity: 0.8; font-size: 15px; }

/* 筛选栏 */
.filter-bar {
    background: #fff;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.filter-label { font-weight: 600; color: #555; }
.filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-tab {
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 13px;
    color: #666;
    background: #f5f7fa;
    transition: all 0.2s;
}
.filter-tab:hover { color: #4a7dff; }
.filter-tab.active { background: #4a7dff; color: #fff; }
.search-result-tip { margin-left: auto; font-size: 13px; color: #888; }

/* 分页 */
.pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 30px;
}
.page-link {
    padding: 8px 14px;
    background: #fff;
    border: 1px solid #e0e4ea;
    border-radius: 6px;
    font-size: 13px;
    color: #666;
    transition: all 0.2s;
}
.page-link:hover { border-color: #4a7dff; color: #4a7dff; }
.page-link.active { background: #4a7dff; color: #fff; border-color: #4a7dff; }
.page-link:disabled { opacity: .45; cursor: not-allowed; }
.page-link:disabled:hover { border-color: #e0e4ea; color: #666; }
.page-info { font-size: 13px; color: #888; line-height: 1; padding: 8px 4px; }
.page-link, .page-jump-btn, .page-jump-input { touch-action: manipulation; }
.page-jump { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #888; }
.page-jump-input { width: 56px; padding: 6px 8px; border: 1px solid #e0e4ea; border-radius: 6px; font-size: 13px; text-align: center; color: #333; background: #fff; }
.page-jump-input:focus { outline: none; border-color: #4a7dff; }
.page-jump-btn { padding: 6px 12px; background: #4a7dff; color: #fff; border: none; border-radius: 6px; font-size: 13px; cursor: pointer; }
.page-jump-btn:hover { background: #3a67d8; }

/* 空状态 */
.empty-state {
    text-align: center;
    padding: 80px 0;
}
.empty-icon { font-size: 64px; margin-bottom: 16px; }
.empty-state p { color: #888; margin-bottom: 20px; }
.btn-primary {
    display: inline-block;
    padding: 10px 28px;
    background: linear-gradient(135deg, #4a7dff, #6c5ce7);
    color: #fff;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    transition: opacity 0.2s;
}
.btn-primary:hover { opacity: 0.9; }

/* ========== 详情页 ========== */
.detail-section { padding: 30px 0 50px; }
.breadcrumb {
    font-size: 13px;
    color: #888;
    margin-bottom: 20px;
}
.breadcrumb a { color: #4a7dff; }
.breadcrumb span { color: #333; }
.detail-main {
    display: flex;
    gap: 30px;
    background: #fff;
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 24px;
}
.detail-cover {
    position: relative;
    width: 320px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
}
.detail-cover img { width: 100%; height: auto; object-fit: contain; background: #111; display: block; }
.detail-cover .cover-placeholder { aspect-ratio: 16/10; }
.detail-info { flex: 1; min-width: 0; }
.detail-title { font-size: 28px; font-weight: 700; color: #1a1a2e; margin-bottom: 12px; }
.detail-meta-row {
    display: flex;
    gap: 20px;
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.detail-rating { color: #ffa502; font-weight: 600; }
.detail-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
    background: #f8f9fb;
    border-radius: 10px;
    padding: 16px;
}
.stat-item { text-align: center; }
.stat-label { display: block; font-size: 12px; color: #999; margin-bottom: 4px; }
.stat-value { font-size: 15px; font-weight: 600; color: #333; }
.detail-desc { font-size: 14px; color: #555; line-height: 1.8; margin-bottom: 24px; }
.detail-actions { display: flex; gap: 12px; }
.btn-download.large {
    padding: 12px 40px;
    font-size: 16px;
    border-radius: 8px;
    flex: none;
}
.btn-favorite {
    padding: 12px 24px;
    border: 1px solid #e0e4ea;
    border-radius: 8px;
    font-size: 15px;
    color: #666;
    transition: all 0.2s;
}
.btn-favorite:hover { border-color: #ff6b6b; color: #ff6b6b; }
.btn-favorite.favorited { background: #fff0f0; border-color: #ff6b6b; color: #ff6b6b; }

.detail-content {
    background: #fff;
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 24px;
}
.detail-content-title { font-size: 20px; font-weight: 700; margin-bottom: 16px; color: #1a1a2e; }
.detail-content-body { font-size: 14px; color: #555; line-height: 1.9; }

/* ========== 详情页多媒体图集（多图 + 多视频） ========== */
.detail-gallery {
    background: #fff;
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 24px;
}
.detail-gallery .detail-content-title { margin-top: 4px; }
.detail-gallery .detail-content-title:not(:first-child) { margin-top: 8px; }
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.gallery-item {
    display: block;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 16/10;
    background: #f0f0f0;
    transition: transform .25s ease, box-shadow .25s ease;
}
.gallery-item:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-videos { display: flex; flex-direction: column; gap: 14px; }
.gallery-video-item video {
    width: 100%;
    border-radius: 10px;
    background: #000;
    display: block;
}

.related-section { background: #fff; border-radius: 16px; padding: 30px; }
.related-title { font-size: 20px; font-weight: 700; margin-bottom: 20px; color: #1a1a2e; }

/* ========== 技术支持 & 客服支持 ========== */
.support-section {
    background: #fff;
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 24px;
}
.support-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 16px;
}
.support-card {
    background: #f8f9fb;
    border-radius: 12px;
    padding: 20px;
    border-left: 4px solid #4a7dff;
    transition: transform 0.2s, box-shadow 0.2s;
}
.support-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.service-card {
    border-left-color: #00b894;
}
.support-card-title {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 12px;
}
.support-card-content {
    font-size: 13px;
    color: #555;
    line-height: 1.8;
    white-space: pre-wrap;
}
.support-card-desc {
    font-size: 13px;
    color: #888;
    line-height: 1.7;
    margin-top: 10px;
}
.service-contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
.contact-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.2s;
}
.contact-btn.qq {
    background: #e8f4ff;
    color: #12b7f5;
}
.contact-btn.qq:hover { opacity: 0.8; }
.contact-btn.wechat {
    background: #e6f9ee;
    color: #07c160;
}
.contact-btn.group {
    background: #e6f9ee;
    color: #07c160;
}
.contact-btn.group:hover { opacity: 0.8; }
.detail-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    background: #f8f9fb;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 24px;
}
.contact-line {
    font-size: 14px;
    color: #555;
}
.contact-line strong { color: #ff8c42; }

/* ========== 关于我们 ========== */
.about-content { padding: 10px 0; }
.about-hero {
    background: #fff;
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    margin-bottom: 24px;
}
.about-hero h2 { font-size: 28px; margin-bottom: 16px; color: #1a1a2e; }
.about-hero p { font-size: 15px; color: #666; max-width: 800px; margin: 0 auto; line-height: 1.9; }
.about-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}
.feature-card {
    background: #fff;
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    transition: transform 0.2s;
}
.feature-card:hover { transform: translateY(-4px); }
.feature-icon { font-size: 40px; margin-bottom: 12px; }
.feature-card h3 { font-size: 18px; margin-bottom: 8px; color: #1a1a2e; }
.feature-card p { font-size: 13px; color: #888; line-height: 1.7; }
.about-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    background: linear-gradient(135deg, #4a7dff, #6c5ce7);
    border-radius: 16px;
    padding: 40px;
}
.stat-box { text-align: center; color: #fff; }
.stat-number { font-size: 36px; font-weight: 700; margin-bottom: 4px; }
.stat-label { font-size: 14px; opacity: 0.9; }

/* ========== 联系我们 ========== */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.contact-info, .contact-form-wrap {
    background: #fff;
    border-radius: 16px;
    padding: 30px;
}
.contact-info h2, .contact-form-wrap h2 { font-size: 22px; margin-bottom: 24px; color: #1a1a2e; }
.contact-item {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid #f0f2f5;
}
.contact-item:last-child { border-bottom: none; }
.contact-icon {
    width: 48px; height: 48px;
    background: #f0f4ff;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.contact-item h4 { font-size: 15px; margin-bottom: 4px; color: #333; }
.contact-item p { font-size: 14px; color: #888; }
.form-group { margin-bottom: 18px; }
.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    margin-bottom: 6px;
}
.form-group input, .form-group textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e0e4ea;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    font-family: inherit;
    transition: border-color 0.2s;
}
.form-group input:focus, .form-group textarea:focus { border-color: #4a7dff; }
.form-group textarea { resize: vertical; }
.form-success {
    background: #d4edda;
    color: #155724;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
}

/* ========== 页脚 ========== */
.site-footer {
    background: #1a1a2e;
    color: #aaa;
    margin-top: 40px;
}
.footer-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    padding: 40px 20px;
}
.footer-col h4 {
    color: #fff;
    font-size: 16px;
    margin-bottom: 16px;
}
.footer-col p { font-size: 13px; line-height: 1.8; }
.footer-col ul li { margin-bottom: 8px; }
.footer-col ul li a { font-size: 13px; transition: color 0.2s; }
.footer-col ul li a:hover { color: #4a7dff; }
.footer-bottom {
    border-top: 1px solid #2a2a4e;
    padding: 16px 0;
    text-align: center;
    font-size: 13px;
}
.footer-bottom a { color: #4a7dff; }

/* ========== 响应式 - 三端同步优化 ========== */

/* ---- 大屏PC（>1200px）默认样式已在上方定义 ---- */

/* ---- 平板端（769px - 1200px）---- */
@media (max-width: 1200px) {
    .container { max-width: 960px; padding: 0 16px; }
    .content-layout { grid-template-columns: 220px 1fr; gap: 16px; }
    .sidebar-right { display: none; }
    .game-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .game-card { border-radius: 10px; }
    .game-card-cover { height: 140px; }
    .main-nav { gap: 16px; }
    .main-nav a { font-size: 14px; padding: 6px 10px; }
    .search-box input { width: 140px; font-size: 13px; }
    .about-features { grid-template-columns: repeat(2, 1fr); }
    .about-stats { grid-template-columns: repeat(4, 1fr); gap: 12px; }
    .stat-number { font-size: 24px; }
    .forum-list .forum-item { padding: 14px; }
    .post-detail-content { padding: 20px; }
    .banner-slider { height: 380px; }
    .poster-section { height: 180px; }
}

/* ---- 手机端（≤768px）---- */
@media (max-width: 768px) {
    .container { max-width: 100%; padding: 0 12px; }
    body { font-size: 14px; }

    /* 头部导航 - 汉堡菜单 */
    .header-inner { flex-wrap: wrap; height: auto; padding: 10px 0; gap: 8px; position: relative; }
    .logo { flex: 1; }
    .logo-text { font-size: 16px; }
    .logo-icon { font-size: 22px; }
    .mobile-menu-toggle { display: flex; }
    .main-nav {
        position: fixed; top: 0; right: -280px; width: 260px; height: 100vh;
        background: #fff; flex-direction: column; justify-content: flex-start;
        padding: 70px 20px 20px; gap: 4px; z-index: 1000;
        box-shadow: -4px 0 20px rgba(0,0,0,0.1); transition: right 0.3s ease;
        overflow-y: auto;
    }
    .main-nav.mobile-open { right: 0; }
    .main-nav a {
        width: 100%; padding: 14px 16px; font-size: 15px; border-radius: 8px;
        border-bottom: 1px solid #f5f5f5;
    }
    .main-nav a:last-child { border-bottom: none; }
    .main-nav a.active { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; }

    /* 搜索和用户区 */
    .header-right { order: 3; width: 100%; justify-content: space-between; }
    .search-box { flex: 1; }
    .search-box input { width: 100%; font-size: 13px; padding: 8px 12px; }
    .user-nav { margin-left: 8px; gap: 6px; }
    .user-nav-link { padding: 6px 10px; font-size: 12px; }
    .user-nav-name { display: none; }
    .user-nav-avatar { width: 26px; height: 26px; font-size: 11px; }

    /* 主内容布局 */
    .content-layout { grid-template-columns: 1fr; gap: 12px; }
    .sidebar-left { position: static; width: 100%; }
    .sidebar-right { display: none; }
    .sidebar-left.sidebar-hidden, .sidebar-right.sidebar-hidden { display: none; }
    .main-content { padding: 12px 0; }

    /* 游戏列表 */
    .game-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .game-card { border-radius: 8px; }
    .game-card-cover { height: 110px; }
    .game-card-info { padding: 8px; }
    .game-card-title { font-size: 13px; margin-bottom: 4px; }
    .game-card-meta { font-size: 11px; }
    .game-card-category { font-size: 10px; padding: 2px 6px; }

    /* 轮播图 */
    .banner-slider { height: 200px; }
    .banner-slide-content h2 { font-size: 20px; }
    .banner-slide-content p { font-size: 13px; }
    .banner-dots { bottom: 8px; }
    .banner-dot { width: 8px; height: 8px; }

    /* 海报 */
    .poster-section { height: 120px; }

    /* 精选推荐/热门排行 */
    .section-header h2 { font-size: 18px; }
    .recommend-grid, .ranking-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

    /* 关于我们 */
    .page-header { padding: 30px 0; }
    .page-header h1 { font-size: 24px; }
    .page-header p { font-size: 14px; }
    .about-hero h2 { font-size: 20px; }
    .about-hero p { font-size: 14px; line-height: 1.7; }
    .about-features { grid-template-columns: 1fr; gap: 12px; }
    .feature-card { padding: 16px; }
    .feature-icon { font-size: 32px; margin-bottom: 8px; }
    .feature-card h3 { font-size: 16px; }
    .feature-card p { font-size: 13px; }
    .about-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .stat-box { padding: 16px 10px; }
    .stat-number { font-size: 22px; }
    .stat-label { font-size: 12px; }

    /* 经验交流 */
    .forum-header { flex-direction: column; gap: 12px; align-items: stretch; }
    .forum-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .forum-stat-card { padding: 12px; }
    .forum-stat-number { font-size: 20px; }
    .forum-stat-label { font-size: 11px; }
    .forum-categories { flex-wrap: wrap; gap: 6px; }
    .forum-cat-btn { padding: 6px 12px; font-size: 12px; }
    .forum-list .forum-item { padding: 12px; flex-direction: column; gap: 8px; }
    .forum-item-main { flex: 1; }
    .forum-item-title { font-size: 15px; }
    .forum-item-meta { font-size: 11px; flex-wrap: wrap; }
    .forum-item-stats { flex-direction: row; gap: 12px; }
    .post-detail-header h1 { font-size: 20px; }
    .post-detail-content { padding: 16px; font-size: 14px; line-height: 1.8; }
    .comment-item { padding: 12px; }
    .comment-form textarea { font-size: 14px; }
    .create-post-form { padding: 16px; }
    .create-post-form input, .create-post-form textarea { font-size: 14px; }

    /* 表格横向滚动 */
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table { min-width: 600px; }
    th, td { padding: 8px 10px; font-size: 12px; white-space: nowrap; }

    /* 按钮 */
    .btn { padding: 8px 16px; font-size: 13px; }
    .btn-primary { padding: 10px 24px; font-size: 14px; }

    /* 表单 */
    input, textarea, select { font-size: 14px; padding: 10px 12px; }
    .form-group { margin-bottom: 14px; }
    .form-row { grid-template-columns: 1fr; gap: 12px; }

    /* 分页 */
    .pagination { gap: 4px; }
    .pagination a, .pagination span { padding: 6px 10px; font-size: 12px; }

    /* 页脚 */
    .footer-content { grid-template-columns: 1fr; gap: 20px; text-align: center; }
    .footer-bottom { font-size: 12px; padding: 12px 0; }

    /* 后台适配 */
    .admin-layout { grid-template-columns: 1fr; }
    .admin-sidebar { position: static; width: 100%; height: auto; }
    .admin-content { padding: 12px; }
    .admin-page-header { flex-direction: column; gap: 10px; align-items: stretch; }
    .admin-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .admin-stat-card { padding: 14px; }
    .admin-stat-number { font-size: 20px; }
    .admin-stat-label { font-size: 11px; }
    .admin-card { padding: 16px; }
    .admin-card h3 { font-size: 15px; }

    /* 音乐播放器 */
    .music-player { bottom: 10px; right: 10px; transform: scale(0.9); }

    /* 悬浮窗 */
    .float-window { max-width: 280px; }
}

/* ---- 超小屏（≤480px）---- */
@media (max-width: 480px) {
    .container { padding: 0 8px; }
    .game-grid { grid-template-columns: 1fr; }
    .recommend-grid, .ranking-grid { grid-template-columns: 1fr; }
    .game-card-cover { height: 160px; }
    .banner-slider { height: 160px; }
    .banner-slide-content h2 { font-size: 16px; }
    .banner-slide-content p { font-size: 12px; }
    .about-stats { grid-template-columns: repeat(2, 1fr); }
    .stat-number { font-size: 18px; }
    .forum-stats { grid-template-columns: 1fr; }
    .admin-stats { grid-template-columns: 1fr; }
    .logo-text { font-size: 14px; }
    .user-nav-link { padding: 5px 8px; font-size: 11px; }
    .page-header h1 { font-size: 20px; }
    .section-header h2 { font-size: 16px; }
    .btn { padding: 7px 12px; font-size: 12px; }
    .btn-primary { padding: 9px 20px; font-size: 13px; }
    .music-player { transform: scale(0.8); bottom: 8px; right: 8px; }
}

/* ---- 横屏手机优化 ---- */
@media (max-width: 768px) and (orientation: landscape) {
    .banner-slider { height: 180px; }
    .game-grid { grid-template-columns: repeat(3, 1fr); }
    .game-card-cover { height: 100px; }
    .about-features { grid-template-columns: repeat(2, 1fr); }
    .about-stats { grid-template-columns: repeat(4, 1fr); }
}

/* ---- 高DPI屏优化 ---- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .game-card-cover, .banner-slide img, .poster-img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* ---- 触摸设备优化 ---- */
@media (hover: none) and (pointer: coarse) {
    .game-card:hover { transform: none; }
    .btn:active { transform: scale(0.97); }
    a, button { -webkit-tap-highlight-color: transparent; }
    .main-nav a { padding: 16px; }
}

/* ---- 减少动画（用户偏好）---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* ---- 修复：详情页等移动端布局（原 @media 头丢失导致全局生效，恢复为 768px 断点）---- */
@media (max-width: 768px) {
    .detail-main { flex-direction: column; }
    .detail-cover { width: 100%; }
    .about-features, .about-stats { grid-template-columns: repeat(2, 1fr); }
    .contact-layout { grid-template-columns: 1fr; }
    .footer-inner { grid-template-columns: repeat(2, 1fr); }
    .banner-slider { height: 220px; }
    .banner-title { font-size: 28px; }
}

/* 内容展示模态框 */
.content-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;}
.content-modal.active{display:block;}
.content-modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);}
.content-modal-box{position:relative;max-width:640px;width:90%;max-height:85vh;margin:5vh auto;background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,0.3);overflow-y:auto;animation:modalIn .3s ease;}
@keyframes modalIn{from{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.content-modal-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;background:#f0f0f0;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:#666;transition:.2s;z-index:2;}
.content-modal-close:hover{background:#ff4757;color:#fff;}
.content-modal-title{padding:24px 24px 12px;font-size:22px;font-weight:700;color:#1a1a2e;border-bottom:2px solid #f0f0f0;}
.content-modal-body{padding:20px 24px 24px;}
.content-modal-video{margin-bottom:16px;}
.content-modal-image{margin-bottom:16px;text-align:center;}
.content-modal-image img{max-width:100%;border-radius:10px;}
.content-modal-text{font-size:15px;line-height:1.8;color:#444;white-space:pre-wrap;}

/* ========== 移动端图片内容专项优化 - 更整洁紧凑 ========== */
@media (max-width: 768px) {
    /* --- 全局图片 --- */
    img { max-width: 100%; height: auto; }

    /* --- 游戏卡片图片缩小 --- */
    .game-grid { gap: 8px; }
    .game-card { border-radius: 6px; overflow: hidden; }
    .game-card-cover { height: 95px !important; }
    .game-card-cover img { width: 100%; height: 100%; object-fit: cover; }
    .game-card-info { padding: 6px 8px; }
    .game-card-title { font-size: 12px; margin-bottom: 3px; line-height: 1.3; }
    .game-card-meta { font-size: 10px; gap: 6px; }
    .game-card-category { font-size: 9px; padding: 1px 5px; }

    /* --- 轮播图图片缩小 --- */
    .banner-slider { height: 160px !important; }
    .banner-slide img { height: 160px !important; object-fit: cover; }
    .banner-slide-content { padding: 12px; }
    .banner-slide-content h2 { font-size: 16px !important; margin-bottom: 4px; }
    .banner-slide-content p { font-size: 11px !important; margin-bottom: 6px; }
    .banner-dots { bottom: 6px; gap: 4px; }
    .banner-dot { width: 6px; height: 6px; }
    .banner-arrow { width: 32px; height: 32px; font-size: 14px; }

    /* --- 海报图片缩小 --- */
    .poster-section { height: 90px !important; }
    .poster-img { height: 90px !important; object-fit: cover; }

    /* --- 精选推荐/热门排行图片缩小 --- */
    .recommend-grid, .ranking-grid { gap: 8px; }
    .recommend-card, .ranking-card { border-radius: 6px; }
    .recommend-cover, .ranking-cover { height: 90px !important; }
    .recommend-cover img, .ranking-cover img { height: 100%; object-fit: cover; }
    .recommend-info, .ranking-info { padding: 6px 8px; }
    .recommend-title, .ranking-title { font-size: 12px; margin-bottom: 2px; }
    .recommend-meta, .ranking-meta { font-size: 10px; }

    /* --- 游戏详情页图片缩小 --- */
    .detail-cover { height: 180px !important; }
    .detail-cover img { height: 180px !important; object-fit: cover; }
    .detail-screenshots { gap: 6px; }
    .detail-screenshot { height: 100px; border-radius: 4px; }
    .detail-screenshot img { height: 100%; object-fit: cover; }
    .detail-icon { width: 56px; height: 56px; border-radius: 10px; }
    .detail-icon img { width: 100%; height: 100%; object-fit: cover; }

    /* --- 关于我们图片/图标缩小 --- */
    .about-hero { padding: 16px; margin-bottom: 16px; }
    .about-hero h2 { font-size: 18px; margin-bottom: 8px; }
    .about-hero p { font-size: 13px; line-height: 1.6; }
    .about-features { gap: 8px; margin-bottom: 16px; }
    .feature-card { padding: 12px; border-radius: 8px; }
    .feature-icon { font-size: 24px !important; margin-bottom: 6px !important; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: #f0f4ff; border-radius: 10px; }
    .feature-card h3 { font-size: 14px; margin-bottom: 4px; }
    .feature-card p { font-size: 12px; line-height: 1.5; }
    .about-stats { gap: 8px; }
    .stat-box { padding: 12px 8px; border-radius: 8px; }
    .stat-number { font-size: 18px !important; margin-bottom: 4px; }
    .stat-label { font-size: 11px !important; }

    /* --- 经验交流图片/头像缩小 --- */
    .forum-item-avatar { width: 36px; height: 36px; font-size: 14px; }
    .forum-item-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .forum-category-icon { font-size: 18px; }
    .post-detail-avatar { width: 40px; height: 40px; font-size: 15px; }
    .post-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .comment-avatar { width: 32px; height: 32px; font-size: 13px; }
    .comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .post-detail-content img { max-width: 100%; height: auto; border-radius: 6px; margin: 8px 0; }
    .forum-stats { gap: 6px; margin-bottom: 12px; }
    .forum-stat-card { padding: 10px; border-radius: 8px; }
    .forum-stat-icon { font-size: 20px; margin-bottom: 4px; }
    .forum-stat-number { font-size: 16px !important; }
    .forum-stat-label { font-size: 10px !important; }

    /* --- 联系支持页面图片缩小 --- */
    .contact-info-icon { font-size: 24px; width: 44px; height: 44px; }
    .contact-card { padding: 16px; border-radius: 8px; }

    /* --- 页面标题区缩小 --- */
    .page-header { padding: 24px 0 !important; margin-bottom: 16px; }
    .page-header h1 { font-size: 20px !important; margin-bottom: 6px; }
    .page-header p { font-size: 13px !important; }

    /* --- 区块标题缩小 --- */
    .section-header { margin-bottom: 12px; padding-bottom: 8px; }
    .section-header h2 { font-size: 16px !important; }
    .section-header .more-link { font-size: 12px; }

    /* --- 内容区间距缩小 --- */
    .content-section { padding: 16px 0; }
    .content-layout { gap: 10px; margin-bottom: 16px; }
    .main-content { padding: 10px 0; }

    /* --- 侧边栏图片缩小 --- */
    .sidebar-widget { padding: 12px; border-radius: 8px; margin-bottom: 10px; }
    .sidebar-widget h3 { font-size: 14px; margin-bottom: 8px; }
    .sidebar-game-item { gap: 8px; padding: 6px 0; }
    .sidebar-game-cover { width: 44px; height: 44px; border-radius: 4px; }
    .sidebar-game-cover img { width: 100%; height: 100%; object-fit: cover; }
    .sidebar-game-title { font-size: 12px; }
    .sidebar-game-meta { font-size: 10px; }

    /* --- 按钮缩小 --- */
    .btn { padding: 6px 12px; font-size: 12px; border-radius: 6px; }
    .btn-primary { padding: 8px 18px; font-size: 13px; }
    .btn-lg { padding: 10px 24px; font-size: 14px; }

    /* --- 表单缩小 --- */
    input[type="text"], input[type="email"], input[type="password"], input[type="number"],
    textarea, select { padding: 8px 10px; font-size: 13px; border-radius: 6px; }
    .form-group { margin-bottom: 12px; }
    .form-label { font-size: 12px; margin-bottom: 4px; }

    /* --- 分页缩小 --- */
    .pagination { gap: 4px; margin-top: 16px; }
    .pagination a, .pagination span { padding: 5px 9px; font-size: 11px; border-radius: 4px; }

    /* --- 页脚缩小 --- */
    .footer { padding: 20px 0 12px; }
    .footer-content { gap: 16px; }
    .footer-section h4 { font-size: 14px; margin-bottom: 8px; }
    .footer-section p, .footer-section a { font-size: 12px; line-height: 1.6; }
    .footer-bottom { padding: 10px 0; font-size: 11px; }

    /* --- 入场动画移动端适配 --- */
    #introOverlay h1 { font-size: 28px !important; }
    #introOverlay p { font-size: 14px !important; }
    #introOverlay img { max-width: 80px; max-height: 80px; }

    /* --- 音乐播放器移动端缩小 --- */
    .music-player { width: 200px; height: 44px; bottom: 12px; right: 12px; }
    .music-cover { width: 32px; height: 32px; }
    .music-info { font-size: 10px; }
    .music-controls button { width: 28px; height: 28px; font-size: 12px; }

    /* --- 悬浮窗移动端缩小 --- */
    .float-window { width: 240px; max-width: 80vw; }
    .float-content img { max-height: 160px; }
    .float-close { width: 24px; height: 24px; font-size: 12px; }
}

/* ---- 超小屏图片进一步压缩 ---- */
@media (max-width: 480px) {
    .game-card-cover { height: 130px !important; }
    .game-grid { grid-template-columns: 1fr; gap: 10px; }
    .banner-slider { height: 140px !important; }
    .banner-slide img { height: 140px !important; }
    .poster-section { height: 70px !important; }
    .poster-img { height: 70px !important; }
    .recommend-grid, .ranking-grid { grid-template-columns: 1fr; }
    .recommend-cover, .ranking-cover { height: 130px !important; }
    .detail-cover { height: 160px !important; }
    .detail-cover img { height: 160px !important; }
    .about-stats { grid-template-columns: repeat(2, 1fr); }
    .stat-number { font-size: 16px !important; }
    .forum-stats { grid-template-columns: repeat(2, 1fr); }
    .music-player { width: 180px; height: 40px; bottom: 8px; right: 8px; }
    .float-window { width: 200px; }
}

/* ========== 移动端四组件尺寸减半 ========== */
@media (max-width: 768px) {
    /* --- 倒计时高度减半 --- */
    .cd-item {
        height: auto !important;
        min-height: 60px !important;
        padding: 8px 12px !important;
    }
    .cd-item .cd-title {
        font-size: 13px !important;
        margin-bottom: 4px !important;
    }
    .cd-item .cd-desc {
        font-size: 11px !important;
        margin-bottom: 6px !important;
    }
    .cd-item .cd-numbers {
        gap: 8px !important;
        margin: 4px 0 !important;
    }
    .cd-item .cd-numbers > div {
        min-width: 36px !important;
    }
    .cd-item .cd-days,
    .cd-item .cd-hours,
    .cd-item .cd-mins,
    .cd-item .cd-secs {
        font-size: 18px !important;
    }
    .cd-item .cd-numbers > div > div:last-child {
        font-size: 9px !important;
    }
    /* 浮动式倒计时 */
    .cd-float {
        width: 140px !important;
        padding: 8px !important;
    }
    .cd-float .cd-title {
        font-size: 12px !important;
    }
    .cd-float .cd-numbers {
        gap: 4px !important;
    }
    .cd-float .cd-days,
    .cd-float .cd-hours,
    .cd-float .cd-mins,
    .cd-float .cd-secs {
        font-size: 14px !important;
    }

    /* --- 海报高度减半 --- */
    .poster-section {
        height: 60px !important;
        min-height: 60px !important;
    }
    .poster-section img,
    .poster-img {
        height: 60px !important;
        min-height: 60px !important;
        object-fit: cover;
    }
    .poster-content {
        padding: 6px 12px !important;
    }
    .poster-title {
        font-size: 13px !important;
        margin-bottom: 2px !important;
    }
    .poster-desc {
        font-size: 11px !important;
    }

    /* --- 轮播图高度减半 --- */
    .banner-slider {
        height: 100px !important;
        min-height: 100px !important;
    }
    .banner-slide,
    .banner-slide img {
        height: 100px !important;
        min-height: 100px !important;
    }
    .banner-slide-content {
        padding: 8px 12px !important;
    }
    .banner-slide-content h2,
    .banner-title {
        font-size: 14px !important;
        margin-bottom: 3px !important;
    }
    .banner-slide-content p,
    .banner-desc {
        font-size: 11px !important;
        margin-bottom: 4px !important;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .banner-dots {
        bottom: 4px !important;
        gap: 3px !important;
    }
    .banner-dot {
        width: 5px !important;
        height: 5px !important;
    }
    .banner-arrow {
        width: 26px !important;
        height: 26px !important;
        font-size: 12px !important;
    }
    /* 轮播图右侧缩略图栏 */
    .banner-thumbs {
        width: 80px !important;
        gap: 4px !important;
        padding: 4px !important;
    }
    .banner-thumb {
        height: 30px !important;
        border-radius: 3px !important;
    }

    /* --- 悬浮窗宽高减半 --- */
    .float-window {
        width: 140px !important;
        max-width: 40vw !important;
        padding: 6px !important;
        border-radius: 8px !important;
    }
    .float-window .float-content {
        max-height: 120px !important;
        overflow: hidden;
    }
    .float-window .float-content img {
        max-height: 100px !important;
        width: 100%;
        object-fit: cover;
        border-radius: 4px !important;
    }
    .float-window .float-content video {
        max-height: 100px !important;
    }
    .float-window .float-title {
        font-size: 11px !important;
        margin: 4px 0 2px !important;
    }
    .float-window .float-text {
        font-size: 10px !important;
        line-height: 1.4 !important;
        max-height: 40px !important;
        overflow: hidden;
    }
    .float-close {
        width: 20px !important;
        height: 20px !important;
        font-size: 11px !important;
        top: 4px !important;
        right: 4px !important;
    }
}

/* 超小屏进一步压缩 */
@media (max-width: 480px) {
    .cd-item { min-height: 50px !important; padding: 6px 8px !important; }
    .cd-item .cd-days, .cd-item .cd-hours, .cd-item .cd-mins, .cd-item .cd-secs { font-size: 15px !important; }
    .poster-section, .poster-section img, .poster-img { height: 45px !important; min-height: 45px !important; }
    .banner-slider, .banner-slide, .banner-slide img { height: 80px !important; min-height: 80px !important; }
    .banner-slide-content h2 { font-size: 12px !important; }
    .banner-slide-content p { font-size: 10px !important; }
    .float-window { width: 120px !important; }
    .float-window .float-content img { max-height: 80px !important; }
}

/* ============================================================
   移动端 - 主页全功能同步修复
   修正响应式旧类名(.game-card-cover/.recommend-grid/.ranking-grid 等)
   与主页实际类名不同步的问题，并补齐主页新元素
   (客服QQ/公测时间/分类Tab/海报/多图多视频/详情全图)的移动端适配。
   ============================================================ */
@media (max-width: 768px) {
    /* ---- 游戏卡片（主页/列表页/详情相关推荐共用结构）---- */
    .game-cover { padding-top: 56%; }
    .game-cover img { object-fit: cover; }
    .game-info { padding: 8px 10px; }
    .game-title { font-size: 14px; margin-bottom: 3px; }
    .game-developer { font-size: 12px; margin-bottom: 5px; }
    .game-meta { font-size: 11px; }
    .game-desc { font-size: 12px; margin-bottom: 4px; }
    .game-beta { font-size: 11px; margin-bottom: 4px; }
    .game-tag { top: 6px; left: 6px; padding: 2px 7px; font-size: 10px; }
    /* 客服QQ / QQ群 / 查看详情 */
    .game-contact { padding: 0 10px 8px; gap: 5px; }
    .contact-chip { font-size: 11px; padding: 3px 8px; }
    .game-actions { padding: 0 10px 10px; gap: 6px; }
    .btn-download, .btn-detail { padding: 6px 0; font-size: 12px; }

    /* ---- 主页分类 Tab 横向滚动 ---- */
    .category-tabs { overflow-x: auto; flex-wrap: nowrap; gap: 6px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .category-tabs::-webkit-scrollbar { display: none; }
    .tab-btn { white-space: nowrap; padding: 6px 12px; font-size: 13px; }

    /* ---- 列表页筛选 Tab 横向滚动 ---- */
    .filter-bar { flex-direction: column; align-items: stretch; gap: 8px; }
    .filter-tabs { overflow-x: auto; flex-wrap: nowrap; gap: 6px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .filter-tabs::-webkit-scrollbar { display: none; }
    .filter-tab { white-space: nowrap; padding: 6px 12px; font-size: 13px; }

    /* ---- 精选推荐（左侧栏）---- */
    .recommend-list { gap: 8px; }
    .recommend-item { padding: 8px; }
    .recommend-cover { width: 56px; height: 56px; border-radius: 6px; flex-shrink: 0; }
    .recommend-cover img { object-fit: cover; }
    .recommend-name { font-size: 13px; }
    .recommend-meta { font-size: 11px; }

    /* ---- 热门排行（右侧栏）---- */
    .ranking-list { gap: 4px; }
    .ranking-item { padding: 8px 4px; }
    .rank-num { font-size: 13px; min-width: 22px; }
    .rank-name { font-size: 13px; }
    .rank-count { font-size: 11px; }

    /* ---- 满屏海报：移动端自适应高度，不被固定像素高度压扁 ---- */
    .poster-area .full-poster { height: auto !important; }
    .poster-area .full-poster img { height: auto !important; min-height: 0; }
    .poster-in-games { margin: 4px 0; }

    /* ---- 详情页：封面完整显示全图（不被裁剪成固定高度）---- */
    .detail-cover { height: auto !important; width: 100%; }
    .detail-cover img { height: auto !important; object-fit: contain !important; background: #111; }
    .detail-title { font-size: 22px; margin-bottom: 8px; }
    .detail-meta-row { flex-wrap: wrap; gap: 6px 10px; font-size: 12px; }
    .detail-stats { gap: 8px; }
    .detail-desc { font-size: 13px; line-height: 1.7; margin-bottom: 16px; }
    .detail-contact { flex-wrap: wrap; gap: 8px; }
    .contact-btn { padding: 8px 12px; font-size: 13px; }
    .contact-line { font-size: 13px; }
    .detail-actions { flex-wrap: wrap; gap: 8px; }
    .btn-favorite { padding: 8px 16px; font-size: 13px; }
    .detail-content-title { font-size: 17px; margin-bottom: 12px; }
    .detail-content-body { font-size: 13px; line-height: 1.8; }
    /* 多图截图网格 */
    .gallery-grid { gap: 6px; }
    .gallery-item { border-radius: 6px; }
    .gallery-videos { gap: 10px; }
    .gallery-video-item video { border-radius: 6px; }
    /* 技术支持/客服支持卡片 */
    .support-card { padding: 14px; }
    .support-card-title { font-size: 15px; }
    .service-contacts { flex-wrap: wrap; gap: 8px; }
    .service-contacts .contact-btn { font-size: 12px; padding: 7px 10px; }

    /* ---- 内容展示模态框（多图多视频）移动端 ---- */
    .content-modal-box { width: 94%; max-height: 88vh; margin: 4vh auto; border-radius: 12px; }
    .content-modal-title { padding: 16px 16px 10px; font-size: 18px; }
    .content-modal-body { padding: 14px 16px 18px; }
    .content-modal-text { font-size: 14px; }

    /* ---- QQ 复制/跳转弹窗移动端 ---- */
    .qq-modal-box { width: 92%; margin: 10vh auto; }
    .qq-modal-head { padding: 20px 14px 2px; }
    .qq-modal-title { font-size: 18px; }
    .qq-modal-num { margin: 12px 14px 2px; padding: 12px; font-size: 22px; }
    .qq-modal-tip { margin: 8px 16px 12px; font-size: 12px; }
    .qq-modal-btns { padding: 0 14px 18px; gap: 8px; }

    /* ---- 面包屑 ---- */
    .breadcrumb { font-size: 12px; }
}

/* ---- 超小屏（≤480px）进一步压缩 ---- */
@media (max-width: 480px) {
    .game-cover { padding-top: 62%; }
    .game-title { font-size: 13px; }
    .contact-chip { font-size: 10px; padding: 2px 6px; }
    .btn-detail { font-size: 11px; }
    .detail-title { font-size: 20px; }
    .recommend-cover { width: 48px; height: 48px; }
    .poster-area .full-poster img { min-height: 80px; }
}

/* ---- 移动端显示热门排行，与主页全部功能同步（原 768px 断点把 .sidebar-right 隐藏了）---- */
@media (max-width: 768px) {
    .sidebar-right:not(.sidebar-hidden) { display: block !important; margin-top: 4px; }
    .sidebar-left:not(.sidebar-hidden) { margin-bottom: 4px; }
    .sidebar-title { margin-top: 8px; }
}