/* ================= 1. 核心变量 (活力橙白风) ================= */
:root {
    --bg-body: #f8f9fa;       /* 亮灰白背景 */
    --bg-card: #ffffff;       /* 纯白卡片 */
    --text-main: #2d3436;     /* 深色文字 */
    --text-sub: #636e72;      /* 灰色文字 */
    --primary: #ff6b6b;       /* 活力橙红 (新主色) */
    --secondary: #54a0ff;     /* 天空蓝 */
    --shadow-card: 0 4px 20px rgba(0,0,0,0.05);
    --shadow-hover: 0 10px 25px rgba(255, 107, 107, 0.2);
    --radius: 12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    min-height: 100vh;
}

a { text-decoration: none; color: inherit; transition: 0.2s; }
ul { list-style: none; }

/* 滚动条隐藏但可滚动 */
::-webkit-scrollbar { width: 0px; background: transparent; }

/* ================= 2. 顶部导航栏 (Top Navbar) ================= */
.navbar {
    background: white;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5%;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

.brand { font-size: 24px; font-weight: 800; color: var(--text-main); letter-spacing: -1px; }
.brand span { color: var(--primary); }

/* PC端菜单 */
.nav-menu { display: flex; gap: 30px; align-items: center; }
.nav-link { font-weight: 600; font-size: 15px; color: var(--text-sub); cursor: pointer; }
.nav-link:hover { color: var(--primary); }
.nav-link.active { color: var(--primary); position: relative; }
.nav-link.active::after { content:''; position:absolute; bottom:-24px; left:0; width:100%; height:3px; background:var(--primary); }

.search-wrapper { position: relative; }
.search-input {
    background: #f1f2f6; border: none; padding: 10px 20px; border-radius: 30px;
    width: 200px; transition: 0.3s; outline: none; font-family: inherit;
}
.search-input:focus { width: 280px; background: white; box-shadow: 0 0 0 2px var(--primary); }

/* ================= 3. 分类胶囊栏 (Category Pills) ================= */
/* 这是替代侧边栏的关键设计 */
.category-bar {
    background: white;
    padding: 15px 5%;
    display: flex;
    gap: 15px;
    overflow-x: auto; /* 允许横向滚动 */
    border-bottom: 1px solid #eee;
    white-space: nowrap;
    position: sticky;
    top: 70px; /* 紧贴导航栏下方 */
    z-index: 900;
}

.cat-pill {
    padding: 8px 20px;
    background: #f1f2f6;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-sub);
    cursor: pointer;
    transition: 0.2s;
    border: 1px solid transparent;
}
.cat-pill:hover { background: #dfe4ea; }
.cat-pill.active { background: var(--primary); color: white; box-shadow: 0 4px 10px rgba(255, 107, 107, 0.3); }

/* ================= 4. 主内容容器 ================= */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 5%;
}

/* Hero (大横幅) */
.hero-box {
    background: linear-gradient(120deg, #ff9f43, #ff6b6b);
    border-radius: 20px;
    padding: 60px;
    color: white;
    text-align: center;
    margin-bottom: 50px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(255, 107, 107, 0.2);
}
.hero-content { position: relative; z-index: 2; }
.hero-box h1 { font-size: 42px; margin-bottom: 10px; font-weight: 900; }
.hero-btn { 
    background: white; color: var(--primary); border: none; 
    padding: 12px 35px; border-radius: 30px; font-weight: 800; font-size: 16px;
    cursor: pointer; margin-top: 20px; transition: 0.2s;
}
.hero-btn:hover { transform: scale(1.05); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }

/* 标题样式 */
.section-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 25px; margin-top: 40px; }
.sec-title { font-size: 24px; font-weight: 800; color: var(--text-main); display: flex; align-items: center; gap: 10px; }
.view-all { font-size: 14px; color: var(--primary); font-weight: 600; cursor: pointer; }

/* ================= 5. 游戏网格 (卡片) ================= */
.game-grid {
    display: grid;
    /* 响应式：最小180px，自动填满 */
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 25px;
}

.game-card {
    background: white;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: 0.3s;
    cursor: pointer;
    position: relative;
    border: 1px solid transparent;
    display: block; /* 也是链接 */
}
.game-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); border-color: var(--primary); }

.img-box { width: 100%; aspect-ratio: 1/1; position: relative; overflow: hidden; background: #eee; }
.game-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.game-card:hover .game-img { transform: scale(1.1); }
.no-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 40px; }

.info-box { padding: 15px; }
.g-title { font-weight: 700; font-size: 15px; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-main); }
.g-type { font-size: 12px; color: var(--text-sub); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }

/* 标签 */
.badge { position: absolute; top: 10px; right: 10px; padding: 4px 10px; border-radius: 20px; font-size: 10px; font-weight: 800; color: white; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.badge-hot { background: #ff6b6b; }
.badge-new { background: #00b894; }

/* ================= 6. 页脚 ================= */
.site-footer { margin-top: 80px; background: white; padding: 50px 0; text-align: center; border-top: 1px solid #eee; }
.footer-nav { display: flex; justify-content: center; gap: 30px; margin-bottom: 20px; font-size: 14px; font-weight: 600; color: var(--text-sub); }
.footer-nav span:hover { color: var(--primary); cursor: pointer; }

/* ================= 7. 手机适配 ================= */
@media (max-width: 768px) {
    .navbar { padding: 15px; }
    .nav-menu { display: none; } /* 隐藏顶部菜单 */
    .search-input { width: 120px; }
    .search-input:focus { width: 150px; }
    
    .category-bar { padding: 10px 15px; top: 60px; gap: 10px; }
    .cat-pill { padding: 6px 16px; font-size: 13px; flex-shrink: 0; }
    
    .container { padding: 20px 15px; }
    .hero-box { padding: 30px 20px; margin-bottom: 30px; border-radius: 15px; }
    .hero-box h1 { font-size: 28px; }
    
    .game-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; } /* 手机端两列 */
    
    /* 手机底部导航 */
    .mobile-nav {
        display: flex; justify-content: space-around; align-items: center;
        position: fixed; bottom: 0; left: 0; width: 100%; height: 60px;
        background: white; border-top: 1px solid #eee; z-index: 2000;
        box-shadow: 0 -5px 15px rgba(0,0,0,0.03);
    }
    .m-nav-item { display: flex; flex-direction: column; align-items: center; font-size: 10px; color: #999; }
    .m-nav-item.active { color: var(--primary); }
    .m-icon { font-size: 20px; margin-bottom: 2px; }
}
@media (min-width: 769px) { .mobile-nav { display: none; } }

/* 弹窗通用 */
.overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 3000; align-items: center; justify-content: center; backdrop-filter: blur(5px); }
.modal-box { width: 800px; height: 80vh; max-width: 90%; background: white; border-radius: 20px; position: relative; overflow: hidden; box-shadow: 0 25px 50px rgba(0,0,0,0.2); }
.close-modal { position: absolute; top: 15px; right: 15px; width: 36px; height: 36px; background: #f1f2f6; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #333; font-weight: bold; }
iframe { width: 100%; height: 100%; border: none; }