/* ========================================
   游戏攻略公共样式 - guide.css
   包含：guide.php / guide_article.php / guide_category.php
   ======================================== */

/* 面包屑 */
.breadcrumb { padding: 12px 0; font-size: 13px; color: #6b7594; }
.breadcrumb a { color: #00c8ff; }
.breadcrumb span { margin: 0 5px; }

/* ======== 首页 guide.php ======== */

/* 第一行布局 */
.row1 { display: flex; gap: 20px; margin-bottom: 28px; }

/* 轮播 */
.guide-carousel { flex: 0 0 640px; position: relative; border-radius: 8px; overflow: hidden; background: #222; min-height: 310px; }
.gc-inner { position: relative; width: 100%; height: 310px; }
.gc-item { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; display: none; }
.gc-item.active { opacity: 1; display: block; }
.gc-item img { width: 100%; height: 100%; object-fit: cover; }
.gc-caption { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,.75)); padding: 24px 16px 14px; color: #fff; cursor: pointer; }
.gc-caption h3 { font-size: 16px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-caption p { font-size: 12px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; background: rgba(0,0,0,.4); border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: .3s; z-index: 5; }
.gc-btn:hover { background: rgba(0,0,0,.7); }
.gc-prev { left: 10px; }
.gc-next { right: 10px; }
.gc-dots { position: absolute; bottom: 10px; right: 14px; display: flex; gap: 6px; z-index: 5; }
.gc-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; transition: .3s; }
.gc-dot.active { background: #fff; }
.gc-empty { display: flex; align-items: center; justify-content: center; height: 310px; color: #666; flex-direction: column; gap: 12px; }
.gc-empty i { font-size: 48px; color: #444; }

/* 热门阅读 */
.hot-panel { flex: 1; background: #161b2e; border: 1px solid #232a42; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.4); overflow: hidden; display: flex; flex-direction: column; }
.hot-header { background: linear-gradient(135deg, #0055cc, #00c8ff); color: #fff; padding: 13px 16px; font-size: 15px; font-weight: bold; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.hot-list { flex: 1; display: flex; flex-direction: column; }
.hot-item { flex: 1; display: flex; align-items: center; padding: 0 14px; border-bottom: 1px solid #1c2338; cursor: pointer; transition: .2s; gap: 10px; text-decoration: none; color: #b0bcd8; min-height: 0; }
.hot-item:last-child { border-bottom: none; }
.hot-item:hover { background: rgba(0,200,255,0.07); color: #fff; }
.hot-rank { width: 22px; height: 22px; border-radius: 50%; background: #1c2338; color: #6b7594; font-size: 12px; font-weight: bold; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hot-rank.r1 { background: #ff4d4f; color: #fff; }
.hot-rank.r2 { background: #0077ff; color: #fff; }
.hot-rank.r3 { background: #00c8ff; color: #000; }
.hot-info { flex: 1; min-width: 0; }
.hot-title { font-size: 13px; color: #b0bcd8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hot-meta { font-size: 11px; color: #3a4260; margin-top: 2px; }
.hot-views { font-size: 11px; color: #00c8ff; white-space: nowrap; }

/* 精选内容标题 */
.section-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid #232a42; }
.section-hd-bar { width: 4px; height: 20px; border-radius: 2px; background: linear-gradient(180deg,#00c8ff,#0077ff); }
.section-hd-text { font-size: 18px; font-weight: bold; color: #e8eaf6; }

/* 分类模块网格 */
.cats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; }
.cat-module { background: #161b2e; border: 1px solid #232a42; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.35); overflow: hidden; }
.cat-mod-hd { padding: 11px 14px; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: bold; color: #fff; }
.cat-more { margin-left: auto; font-size: 11px; color: rgba(255,255,255,.7); text-decoration: none; padding: 2px 8px; border: 1px solid rgba(255,255,255,.3); border-radius: 10px; transition: .2s; white-space: nowrap; }
.cat-more:hover { background: rgba(255,255,255,.15); color: #fff; }
.cat-top-card { position: relative; cursor: pointer; display: block; }
.cat-top-img { width: 100%; height: 150px; object-fit: cover; display: block; }
.cat-top-ph { width: 100%; height: 150px; background: #1c2338; display: flex; align-items: center; justify-content: center; color: #3a4260; font-size: 36px; }
.cat-top-ov { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,.85)); padding: 18px 12px 10px; color: #fff; }
.cat-top-ov h4 { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-top-ov span { font-size: 11px; opacity: .75; }
.cat-li { display: flex; align-items: center; padding: 9px 14px; border-top: 1px solid #1c2338; cursor: pointer; transition: .15s; gap: 8px; text-decoration: none; color: #b0bcd8; }
.cat-li:hover { background: rgba(0,200,255,0.06); color: #fff; }
.cat-li-dot { width: 5px; height: 5px; border-radius: 50%; background: #3a4260; flex-shrink: 0; }
.cat-li-title { flex: 1; font-size: 13px; color: #8a95b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-li:hover .cat-li-title { color: #e8eaf6; }
.cat-li-time { font-size: 11px; color: #3a4260; white-space: nowrap; }
.cat-empty { padding: 30px; text-align: center; color: #3a4260; font-size: 13px; }
.cat-li-top { color: #00c8ff; font-size: 10px; background: rgba(0,200,255,0.12); padding: 1px 5px; border-radius: 3px; flex-shrink: 0; }

/* ======== 文章详情页 guide_article.php ======== */
.guide-page-body { flex: 1; padding: 20px 0 50px; background: transparent; }
.guide-page-body .container { display: flex; gap: 24px; align-items: flex-start; }
.art-main { flex: 1; min-width: 0; }
.art-sidebar { width: 280px; flex-shrink: 0; }
.art-card { background: #161b2e; border: 1px solid #232a42; border-radius: 8px; box-shadow: 0 4px 24px rgba(0,0,0,0.4); overflow: hidden; margin-bottom: 20px; }
.art-cover { width: 100%; max-height: 420px; object-fit: cover; display: block; }
.art-body { padding: 24px; }
.art-cat { display: inline-block; padding: 3px 12px; border-radius: 12px; color: #fff; font-size: 12px; margin-bottom: 12px; }
.art-title { font-size: 22px; font-weight: bold; color: #e8eaf6; margin-bottom: 12px; line-height: 1.4; }
.art-meta { display: flex; gap: 16px; font-size: 13px; color: #3a4260; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #1c2338; flex-wrap: wrap; }
.art-meta i { margin-right: 4px; color: #00c8ff; }
.art-content { line-height: 1.9; color: #b0bcd8; font-size: 15px; }
.art-content img { max-width: 100%; border-radius: 4px; margin: 8px 0; display: block; }
.art-content p { margin-bottom: 12px; }
.art-content h1, .art-content h2, .art-content h3 { margin: 18px 0 10px; color: #e8eaf6; }
.art-content ul, .art-content ol { padding-left: 24px; margin-bottom: 12px; }
.art-content li { margin-bottom: 4px; }
.art-content video { max-width: 100%; border-radius: 4px; margin: 8px 0; }
.art-content table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.art-content td, .art-content th { border: 1px solid #232a42; padding: 8px 12px; font-size: 14px; color: #b0bcd8; }
.art-content th { background: #1c2338; color: #e8eaf6; }
.art-content blockquote { border-left: 4px solid #00c8ff; padding: 10px 16px; background: rgba(0,200,255,0.07); margin: 12px 0; color: #8a95b8; }
.art-content pre { background: #1c2338; padding: 14px; border-radius: 4px; overflow-x: auto; font-size: 13px; color: #b0bcd8; }
.art-nav { display: flex; gap: 12px; margin-bottom: 20px; }
.art-nav-item { flex: 1; background: #161b2e; border: 1px solid #232a42; border-radius: 8px; padding: 14px 16px; transition: .2s; display: block; text-decoration: none; color: inherit; }
.art-nav-item:hover { border-color: #00c8ff; box-shadow: 0 0 12px rgba(0,200,255,0.15); }
.art-nav-label { font-size: 11px; color: #3a4260; margin-bottom: 4px; }
.art-nav-title { font-size: 13px; color: #8a95b8; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* 侧边栏 */
.sidebar-card { background: #161b2e; border: 1px solid #232a42; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.35); overflow: hidden; margin-bottom: 16px; }
.sidebar-hd { padding: 11px 14px; font-size: 14px; font-weight: bold; border-bottom: 1px solid #1c2338; display: flex; align-items: center; gap: 6px; color: #e8eaf6; }
.sidebar-hd i { color: #00c8ff; }
.rel-item { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #1c2338; transition: .15s; text-decoration: none; color: #b0bcd8; }
.rel-item:last-child { border-bottom: none; }
.rel-item:hover { background: rgba(0,200,255,0.06); color: #fff; }
.rel-img { width: 60px; height: 44px; object-fit: cover; border-radius: 3px; flex-shrink: 0; }
.rel-ph { width: 60px; height: 44px; background: #1c2338; border-radius: 3px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #3a4260; font-size: 18px; }
.rel-info { flex: 1; min-width: 0; }
.rel-title { font-size: 13px; color: #8a95b8; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.4; }
.rel-date { font-size: 11px; color: #3a4260; margin-top: 4px; }
.cat-link { display: flex; align-items: center; padding: 9px 14px; border-bottom: 1px solid #1c2338; font-size: 13px; transition: .15s; gap: 8px; text-decoration: none; color: #8a95b8; }
.cat-link:last-child { border-bottom: none; }
.cat-link:hover { background: rgba(0,200,255,0.06); color: #00c8ff; }
.cat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ======== 分类列表页 guide_category.php ======== */
.cat-banner { padding: 28px 0; color: #fff; margin-bottom: 24px; border-bottom: 1px solid #232a42; }
.cat-banner-inner { display: flex; align-items: center; gap: 16px; }
.cat-banner-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(0,200,255,0.15); border: 1px solid rgba(0,200,255,0.3); display: flex; align-items: center; justify-content: center; font-size: 24px; }
.cat-banner-title { font-size: 26px; font-weight: bold; color: #e8eaf6; }
.cat-banner-sub { font-size: 14px; color: #6b7594; margin-top: 4px; }
.cat-page-body { flex: 1; padding-bottom: 50px; background: transparent; }
.art-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 30px; }
.art-grid-card { background: #161b2e; border: 1px solid #232a42; border-radius: 8px; overflow: hidden; transition: .25s; display: block; text-decoration: none; }
.art-grid-card:hover { transform: translateY(-4px); border-color: #00c8ff; box-shadow: 0 4px 20px rgba(0,200,255,0.15); }
.art-grid-img { width: 100%; height: 140px; object-fit: cover; display: block; }
.art-grid-ph { width: 100%; height: 140px; background: #1c2338; display: flex; align-items: center; justify-content: center; color: #3a4260; font-size: 36px; }
.art-grid-body { padding: 12px; }
.art-grid-title { font-size: 14px; font-weight: bold; color: #b0bcd8; margin-bottom: 6px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.4; }
.art-grid-meta { font-size: 12px; color: #3a4260; display: flex; justify-content: space-between; }
.art-grid-top { display: inline-block; background: rgba(0,200,255,0.15); color: #00c8ff; font-size: 10px; padding: 1px 6px; border-radius: 3px; margin-bottom: 4px; border: 1px solid rgba(0,200,255,0.3); }
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.page-btn { padding: 7px 14px; background: #161b2e; border: 1px solid #232a42; border-radius: 4px; font-size: 13px; color: #6b7594; transition: .2s; text-decoration: none; }
.page-btn:hover { border-color: #00c8ff; color: #00c8ff; background: rgba(0,200,255,0.07); }
.page-btn.active { background: linear-gradient(135deg,#0055cc,#00c8ff); color: #fff; border-color: transparent; }
.empty-tip { text-align: center; padding: 60px 0; color: #3a4260; }
.empty-tip i { font-size: 48px; display: block; margin-bottom: 12px; }

/* ======== 公共：浮动二维码 ======== */
.guide-qrcode { position: fixed; right: 20px; bottom: 20px; background: #161b2e; border: 1px solid #232a42; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.5); padding: 12px; z-index: 99; text-align: center; width: 140px; }
.guide-qrcode .qrcode-title { font-size: 13px; font-weight: bold; margin-bottom: 8px; color: #00c8ff; }
.guide-qrcode .qrcode-img { width: 116px; height: 116px; object-fit: contain; border-radius: 4px; }
.guide-qrcode .qrcode-text { font-size: 11px; color: #6b7594; margin-top: 8px; }

/* 攻略首页主体容器 */
.guide-main { flex: 1; padding-bottom: 50px; background: transparent; }

/* ======== 响应式 ======== */
@media (max-width: 960px) {
  .row1 { flex-direction: column; }
  .guide-carousel { flex: none; width: 100%; }
  .cats-grid { grid-template-columns: repeat(2, 1fr); }
  .art-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .guide-page-body .container { flex-direction: column; }
  .art-sidebar { width: 100%; }
  .art-nav { flex-direction: column; }
}
@media (max-width: 600px) {
  .cats-grid { grid-template-columns: 1fr; }
  .art-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 攻略首页主体容器 */
.guide-main { flex: 1; padding-bottom: 50px; }