/*
Theme Name: Nine11 Game
Theme URI: http://www.nine11.top/
Description: 游戏资讯WordPress主题 - 大气暗色风格
Version: 1.6.3
Author: 大哥
Author URI: http://www.nine11.top/
*/
:root {
    --bg-primary: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-card: #16161f;
    --bg-card-hover: #1e1e2a;
    --accent-primary: #ff4655;
    --accent-secondary: #ff6b35;
    --accent-glow: rgba(255, 70, 85, 0.4);
    --text-primary: #ffffff;
    --text-secondary: #a0a0b0;
    --text-muted: #606070;
    --border-color: rgba(255, 255, 255, 0.08);
    --gradient-hero: linear-gradient(135deg, rgba(10, 10, 15, 0.7) 0%, rgba(10, 10, 15, 0.3) 50%, rgba(10, 10, 15, 0.8) 100%);
    --gradient-card: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.9) 100%);
}

* { margin:0; padding:0; box-sizing:border-box; }
a { color:inherit; text-decoration:none; }

body {
    font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-primary); color: var(--text-primary);
    line-height: 1.6; min-height: 100vh;
}

/* ===== 导航栏（双行布局）===== */
.navbar {
    position:fixed; top:0; left:0; right:0; z-index:1000;
    background: rgba(10,10,15,0.95); backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-color);
}
.navbar::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background: linear-gradient(90deg,var(--accent-primary),var(--accent-secondary),var(--accent-primary));
}

/* 第一行：Logo + 搜索 */
.nav-row-top {
    height:64px;
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.nav-row-top .nav-container {
    display:flex; align-items:center;
}
/* 第二行：导航 + 平台标签 */
.nav-row-bottom { }
.nav-row-bottom .nav-container {
    display:flex; align-items:center; gap:8px;
    min-height:48px; padding-top:10px; padding-bottom:10px;
}
.nav-container {
    max-width:1440px; margin:0 auto; padding:0 40px;
    display:flex; align-items:center;
}
.logo {
    display:flex; align-items:center; gap:12px;
    text-decoration:none; margin-right:48px;
}
.logo-icon {
    width:52px; height:52px;
    background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));
    border-radius:16px; display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 20px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.15);
    flex-shrink:0;
}
.logo-text { font-size:26px; font-weight:900; color:#fff; letter-spacing:-1px; line-height:1; }
.logo-highlight {
    background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

.nav-links { display:flex; gap:8px; }
.nav-link {
    padding:10px 20px; color:var(--text-secondary); text-decoration:none;
    font-size:15px; font-weight:500; border-radius:8px; transition:all .3s ease;
}
.nav-link:hover { color:var(--text-primary); background:rgba(255,255,255,.05); }
.nav-link.active { color:var(--accent-primary); background:rgba(255,70,85,.1); }

/* 平台分栏导航 */
.nav-platforms { display:flex; gap:6px; margin-left:8px; flex-shrink:0; }
.nav-platform {
    padding:8px 18px; color:var(--text-secondary); text-decoration:none;
    font-size:14px; font-weight:600; border-radius:8px; transition:all .3s ease; letter-spacing:.5px;
}
.nav-platform:hover,.nav-platform.active { color:#fff; background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary)); box-shadow:0 2px 12px var(--accent-glow); }

/* 导航栏搜索框 */
.nav-search {
    display:flex; align-items:center; gap:8px;
    background:rgba(255,255,255,.05); border:1px solid var(--border-color);
    border-radius:10px; padding:0 16px; height:42px; width:280px;
    margin-left:auto;
    transition:all .3s ease;
}
.nav-search:focus-within {
    border-color:var(--accent-primary); background:rgba(255,255,255,.08);
    box-shadow:0 0 0 3px rgba(255,70,85,.1);
}
.nav-search-icon { color:var(--text-muted); flex-shrink:0; }
.nav-search-input {
    flex:1; background:transparent; border:none; outline:none;
    color:var(--text-primary); font-size:14px; width:100%;
}
.nav-search-input::placeholder { color:var(--text-muted); }

.menu-toggle { display:none; width:44px; height:44px; background:transparent; border:none; color:var(--text-primary); cursor:pointer; flex-direction:column; justify-content:center; align-items:center; gap:6px; }
.menu-toggle span { display:block; width:24px; height:2px; background:currentColor; transition:all .3s ease; }

/* ===== Hero 区域（首条文章大图）===== */
.hero {
    position:relative; height:85vh; min-height:600px; max-height:900px; margin-top:124px; overflow:hidden;
}
.hero-bg {
    position:absolute; inset:0; background-size:cover; background-position:center;
    filter:brightness(0.55);
}
.hero-overlay { position:absolute; inset:0; background:var(--gradient-hero); }
.hero-content {
    position:relative; z-index:10; max-width:1440px; margin:0 auto; padding:0 40px;
    height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:80px;
}
.hero-tags { display:flex; gap:12px; margin-bottom:20px; }
.hero-tag {
    padding:6px 16px; background:var(--accent-primary); border-radius:20px;
    font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:1px;
}
.hero-tag.featured { background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary)); box-shadow:0 4px 20px var(--accent-glow); }
.hero-title {
    font-size:clamp(36px,6vw,72px); font-weight:900; line-height:1.1; margin-bottom:20px;
    max-width:900px; text-shadow:0 4px 30px rgba(0,0,0,.5);
}
.hero-desc { font-size:18px; color:rgba(255,255,255,.8); max-width:600px; margin-bottom:32px; line-height:1.8; }
.hero-actions { display:flex; gap:16px; }

.btn {
    padding:14px 32px; border-radius:10px; font-size:15px; font-weight:600;
    text-decoration:none; transition:all .3s ease; cursor:pointer; border:none; display:inline-block;
}
.btn-primary { background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary)); color:#fff; box-shadow:0 4px 20px var(--accent-glow); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 30px var(--accent-glow); }
.btn-secondary { background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(10px); }
.btn-secondary:hover { background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.3); }

/* ===== 主内容区 ===== */
.main-content { max-width:1440px; margin:0 auto; padding:60px 40px; }

/* 区块标题 */
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:32px; }
.section-title { display:flex; align-items:center; gap:16px; }
.section-title h2 { font-size:28px; font-weight:700; }
.section-title::before {
    content:''; width:5px; height:32px;
    background:linear-gradient(180deg,var(--accent-primary),var(--accent-secondary)); border-radius:3px;
}
.section-more {
    color:var(--text-secondary); text-decoration:none; font-size:14px;
    display:flex; align-items:center; gap:6px; transition:color .3s ease;
}
.section-more:hover { color:var(--accent-primary); }

/* ===== 热门游戏卡片网格 ===== */
.game-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }

.game-card {
    background:var(--bg-card); border-radius:16px; overflow:hidden;
    transition:all .4s ease; cursor:pointer; text-decoration:none; color:inherit; display:block;
}
.game-card:hover { transform:translateY(-8px); box-shadow:0 20px 40px rgba(0,0,0,.4); }
.game-card-image { position:relative; aspect-ratio:16/10; overflow:hidden; }
.game-card-image img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.game-card:hover .game-card-image img { transform:scale(1.1); }
.game-card-overlay { position:absolute; inset:0; background:var(--gradient-card); opacity:0; transition:opacity .3s ease; }
.game-card:hover .game-card-overlay { opacity:1; }
.game-card-tag {
    position:absolute; top:12px; left:12px; padding:4px 10px;
    background:rgba(0,0,0,.7); backdrop-filter:blur(10px);
    border-radius:4px; font-size:12px; font-weight:500; color:#fff;
}
.game-card-body { padding:20px; }
.game-card-title {
    font-size:17px; font-weight:600; margin-bottom:10px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.4;
}
.game-card-meta { display:flex; align-items:center; gap:16px; color:var(--text-muted); font-size:13px; }
.game-card-meta span { display:flex; align-items:center; gap:6px; }

/* ===== 资讯+侧边栏 左右布局 ===== */
.articles-section { display:grid; grid-template-columns:2fr 1fr; gap:40px; margin-top:80px; }
.articles-main { min-width:0; }
.sidebar { display:flex; flex-direction:column; gap:32px; }

/* ===== 平台Tab切换（对标静态模板，用span不用button）===== */
.platform-tabs {
    display:flex; gap:0; margin-bottom:28px; border-bottom:1px solid var(--border-color);
}
.platform-tabs a,
.platform-tab {
    padding:14px 32px; color:var(--text-secondary);
    font-size:15px; font-weight:600; position:relative; cursor:pointer;
    transition:all .3s ease; letter-spacing:.5px; text-decoration:none;
}
.platform-tabs a:hover,
.platform-tab:hover { color:var(--text-primary); }
.platform-tabs a.active,
.platform-tab.active { color:#fff; }
.platform-tabs a.active::after,
.platform-tab.active::after {
    content:''; position:absolute; bottom:-1px; left:20px; right:20px; height:3px;
    background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary));
    border-radius:3px 3px 0 0;
}

/* ===== 文章横排卡片（对标静态 platform-article-card）===== */
.platform-articles { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }

.platform-article-card {
    display:flex; gap:16px; padding:18px; background:var(--bg-card); border-radius:14px;
    transition:all .3s ease; cursor:pointer; text-decoration:none; color:inherit;
}
.platform-article-card:hover { background:var(--bg-card-hover); transform:translateX(6px); }
.platform-article-thumb { width:160px; height:100px; border-radius:10px; overflow:hidden; flex-shrink:0; }
.platform-article-thumb img { width:100%; height:100%; object-fit:cover; }
.platform-article-info { flex:1; display:flex; flex-direction:column; justify-content:center; }
.platform-article-info h4 {
    font-size:15px; font-weight:600; margin-bottom:6px; line-height:1.4;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.platform-article-info p {
    font-size:13px; color:var(--text-secondary);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    margin-bottom:8px; line-height:1.5;
}
.platform-article-meta { font-size:12px; color:var(--text-muted); display:flex; gap:16px; }

/* ===== 侧边栏 ===== */
.sidebar-card { background:var(--bg-card); border-radius:16px; padding:24px; }
.sidebar-title {
    font-size:18px; font-weight:700; margin-bottom:20px;
    padding-bottom:16px; border-bottom:1px solid var(--border-color);
}

.hot-list { display:flex; flex-direction:column; gap:16px; }
.hot-item { display:flex; gap:14px; transition:opacity .3s ease; text-decoration:none; color:inherit; }
.hot-item:hover { opacity:.8; }
.hot-item-rank {
    width:28px; height:28px; background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));
    border-radius:6px; display:flex; align-items:center; justify-content:center;
    font-size:14px; font-weight:700; flex-shrink:0; color:#fff;
}
.hot-item-rank.top { background:linear-gradient(135deg,#ffd700,#ffaa00); color:#000; }
.hot-item-info h4 {
    font-size:14px; font-weight:600; margin-bottom:4px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.4;
}
.hot-item-info span { color:var(--text-muted); font-size:12px; }

/* 平台标签 */
.platform-tags { display:flex; flex-wrap:wrap; gap:10px; }
.platform-tag {
    padding:10px 18px; background:rgba(255,255,255,.05); border:1px solid var(--border-color);
    border-radius:8px; color:var(--text-secondary); text-decoration:none; font-size:14px; transition:all .3s ease;
}
.platform-tag:hover { background:rgba(255,70,85,.1); border-color:var(--accent-primary); color:var(--accent-primary); }

/* ===== 页脚 ===== */
.footer { background:var(--bg-secondary); border-top:1px solid var(--border-color); margin-top:100px; }
.footer-main { max-width:1440px; margin:0 auto; padding:60px 40px; display:grid; grid-template-columns:2fr repeat(3,1fr); gap:60px; }
.footer-brand { max-width:300px; }
.footer-brand .logo { margin-bottom:20px; }
.footer-brand p { color:var(--text-secondary); font-size:14px; line-height:1.8; }
.footer-links h4 { font-size:16px; font-weight:600; margin-bottom:20px; color:var(--text-primary); }
.footer-links ul { list-style:none; }
.footer-links li { margin-bottom:12px; }
.footer-links a { color:var(--text-secondary); text-decoration:none; font-size:14px; transition:color .3s ease; }
.footer-links a:hover { color:var(--accent-primary); }
.footer-bottom { border-top:1px solid var(--border-color); padding:24px 40px; text-align:center; color:var(--text-muted); font-size:13px; }

/* ===== 响应式 ===== */
@media (max-width:1200px) {
    .game-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:1024px) {
    .nav-container { padding:0 24px; }
    .nav-row-bottom { display:none; }
    .nav-search { width:200px; }
    .menu-toggle { display:flex; }
    .main-content { padding:40px 24px; }
    .game-grid { grid-template-columns:repeat(2,1fr); }
    .articles-section { grid-template-columns:1fr; }
    .platform-articles { grid-template-columns:1fr; }
    .platform-article-card { flex-direction:column; }
    .platform-article-thumb { width:100%; height:200px; }
    .footer-main { grid-template-columns:repeat(2,1fr); padding:40px 24px; }
}
@media (max-width:768px) {
    .hero { margin-top:64px; height:70vh; }
    .hero-content { padding:0 24px; padding-bottom:60px; }
    .game-grid { grid-template-columns:1fr; }
    .platform-tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
    .platform-tabs::-webkit-scrollbar { display:none; }
    .footer-main { grid-template-columns:1fr; gap:40px; }
    .footer-bottom { padding:24px; }
}