/* 热门游戏排行榜 gamerank 深色游戏风样式（所有类 grk- 前缀，禁止 :root 重定义全局变量） */

.grk-wrap { max-width: 1200px; margin: 0 auto; padding: 24px 15px 40px; box-sizing: border-box; color: #e5e7eb; }

/* Hero */
.grk-hero { text-align: center; padding: 30px 16px; background: linear-gradient(135deg, #1b2030, #0f1220); border: 1px solid #262d40; border-radius: 16px; margin-bottom: 22px; }
.grk-hero h1 { margin: 0 0 12px; font-size: 30px; font-weight: 700; background: linear-gradient(90deg, #22d3ee, #a855f7); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.grk-hero p { margin: 0; color: #9ca3af; font-size: 15px; line-height: 1.8; }
.grk-hero-sm { padding: 22px 16px; text-align: left; }
.grk-hero-sm h1 { font-size: 24px; }

/* 分类按钮 */
.grk-cat-nav { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.grk-cat-btn { flex: 1; min-width: 140px; text-align: center; padding: 14px 10px; border-radius: 12px; background: #1b2030; border: 1px solid #2a3142; color: #e5e7eb; text-decoration: none; font-size: 16px; font-weight: 600; transition: all .2s; }
.grk-cat-btn:hover { border-color: #22d3ee; color: #22d3ee; transform: translateY(-2px); }
.grk-cat-btn.active { background: linear-gradient(90deg, #6d28d9, #22d3ee); border-color: transparent; color: #fff; }

/* 区块 */
.grk-block { margin-bottom: 32px; }
.grk-block-title { margin: 0 0 6px; font-size: 20px; font-weight: 700; color: #f3f4f6; padding-left: 12px; border-left: 4px solid #22d3ee; }
.grk-block-sub { margin: 0 0 16px; color: #9ca3af; font-size: 13px; }
.grk-cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grk-col { background: #1b2030; border: 1px solid #262d40; border-radius: 14px; padding: 14px; }
.grk-col-head { font-size: 15px; font-weight: 700; color: #22d3ee; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #2a3142; }
.grk-more { display: inline-block; margin-top: 10px; color: #a855f7; font-size: 13px; text-decoration: none; }
.grk-more:hover { text-decoration: underline; }

/* 列表 + 行 */
.grk-list { list-style: none; margin: 0; padding: 0; }
.grk-list-main .grk-row { padding: 14px 10px; }
.grk-row { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid #232a3d; }
.grk-row:last-child { border-bottom: none; }
.grk-rank { width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-weight: 700; font-size: 14px; background: #2a3142; color: #cbd5e1; }
.grk-rank.gold { background: linear-gradient(135deg, #ffd700, #f59e0b); color: #1b2030; }
.grk-rank.silver { background: linear-gradient(135deg, #e2e8f0, #94a3b8); color: #1b2030; }
.grk-rank.bronze { background: linear-gradient(135deg, #cd7f32, #b45309); color: #fff; }
.grk-logo { width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: #0f1220; display: flex; align-items: center; justify-content: center; }
.grk-logo img { width: 100%; height: 100%; object-fit: cover; }
.grk-logo-ph { color: #22d3ee; font-size: 20px; font-weight: 700; }
.grk-info { flex: 1; min-width: 0; }
.grk-name { display: block; color: #f3f4f6; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grk-name:hover { color: #22d3ee; }
.grk-tags { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 5px; }
.grk-tag { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px; background: #2a3142; color: #9ca3af; }
.grk-tag-core { background: rgba(168,85,247,.18); color: #c4b5fd; border: 1px solid rgba(168,85,247,.4); }
.grk-index { width: 110px; flex-shrink: 0; }
.grk-bar { height: 6px; border-radius: 4px; background: #2a3142; overflow: hidden; }
.grk-bar span { display: block; height: 100%; background: linear-gradient(90deg, #22d3ee, #a855f7); }
.grk-comp { display: block; margin-top: 4px; font-size: 12px; color: #22d3ee; font-weight: 600; }
.grk-idx-mini { width: 120px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: #9ca3af; }
.grk-idx-mini span { white-space: nowrap; }
.grk-trend { width: 40px; flex-shrink: 0; text-align: center; font-size: 14px; font-weight: 700; }
.grk-trend .up { color: #34d399; }
.grk-trend .down { color: #f87171; }
.grk-trend .same { color: #9ca3af; }
.grk-trend .new { color: #fbbf24; font-size: 11px; }
.grk-empty { padding: 20px; text-align: center; color: #6b7280; font-size: 14px; }

/* 更新时间 + 榜单 tab */
.grk-update-time { color: #9ca3af; font-size: 13px; margin-bottom: 14px; }
.grk-update-time strong { color: #22d3ee; }
.grk-board-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.grk-tab { padding: 9px 18px; border-radius: 10px; background: #1b2030; border: 1px solid #2a3142; color: #cbd5e1; text-decoration: none; font-size: 14px; transition: all .2s; }
.grk-tab:hover { border-color: #22d3ee; color: #22d3ee; }
.grk-tab.active { background: linear-gradient(90deg, #6d28d9, #22d3ee); border-color: transparent; color: #fff; }

/* 详情页布局 */
.grk-layout { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; }
.grk-main { min-width: 0; }
.grk-side { display: flex; flex-direction: column; gap: 18px; }

.grk-game-header { display: flex; gap: 18px; align-items: center; background: linear-gradient(135deg, #1b2030, #0f1220); border: 1px solid #262d40; border-radius: 16px; padding: 22px; margin-bottom: 20px; }
.grk-game-logo { width: 92px; height: 92px; flex-shrink: 0; border-radius: 16px; overflow: hidden; background: #0f1220; display: flex; align-items: center; justify-content: center; }
.grk-game-logo img { width: 100%; height: 100%; object-fit: cover; }
.grk-game-logo .grk-logo-ph { font-size: 40px; }
.grk-game-meta { flex: 1; min-width: 0; }
.grk-game-meta h1 { margin: 0 0 8px; font-size: 26px; color: #f3f4f6; }
.grk-game-sub { margin-bottom: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.grk-score { display: flex; gap: 28px; flex-wrap: wrap; }
.grk-score-item { display: flex; flex-direction: column; }
.grk-score-num { font-size: 22px; font-weight: 700; color: #22d3ee; }
.grk-score-num.up { color: #34d399; }
.grk-score-num.down { color: #f87171; }
.grk-score-num.same { color: #9ca3af; }
.grk-score-num.new { color: #fbbf24; }
.grk-score-label { font-size: 12px; color: #9ca3af; margin-top: 2px; }

.grk-box { background: #1b2030; border: 1px solid #262d40; border-radius: 14px; padding: 18px; margin-bottom: 18px; }
.grk-box h3 { margin: 0 0 14px; font-size: 17px; font-weight: 600; color: #f3f4f6; padding-left: 12px; border-left: 4px solid #22d3ee; }
.grk-desc { margin: 0; color: #cbd5e1; font-size: 14px; line-height: 1.8; }
.grk-tags-lg { gap: 8px; }
.grk-tags-lg .grk-tag { font-size: 13px; padding: 4px 12px; }
.grk-muted { color: #6b7280; font-size: 13px; }

.grk-info-list { list-style: none; margin: 0; padding: 0; }
.grk-info-list li { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid #232a3d; font-size: 14px; }
.grk-info-list li:last-child { border-bottom: none; }
.grk-info-k { width: 90px; flex-shrink: 0; color: #9ca3af; }
.grk-info-v { flex: 1; color: #e5e7eb; }
.grk-info-v a { color: #22d3ee; word-break: break-all; }
.grk-qr { width: 120px; height: 120px; border-radius: 8px; background: #fff; display: block; margin-bottom: 6px; }
.grk-price { color: #34d399; font-size: 16px; }

.grk-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.grk-shot { width: 100%; border-radius: 10px; border: 1px solid #2a3142; }

.grk-trend-svg { background: #0f1220; border: 1px solid #2a3142; border-radius: 10px; padding: 10px; }
.grk-svg { width: 100%; height: 220px; display: block; }
.grk-line-comp { fill: none; stroke: #22d3ee; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.grk-line-rank { fill: none; stroke: #a855f7; stroke-width: 2; stroke-dasharray: 5 4; stroke-linejoin: round; }
.grk-svg-legend { margin-top: 8px; display: flex; gap: 18px; font-size: 12px; color: #9ca3af; }
.grk-svg-legend .lc { color: #22d3ee; }
.grk-svg-legend .lr { color: #a855f7; }
.grk-trend-note { margin: 10px 0 0; }

.grk-idx-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.grk-idx-card { background: #0f1220; border: 1px solid #2a3142; border-radius: 10px; padding: 14px; text-align: center; }
.grk-idx-name { display: block; font-size: 13px; color: #9ca3af; margin-bottom: 6px; }
.grk-idx-val { display: block; font-size: 20px; font-weight: 700; color: #e5e7eb; }

.grk-side-box { background: #1b2030; border: 1px solid #262d40; border-radius: 14px; padding: 16px; }
.grk-side-box h3 { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: #f3f4f6; padding-left: 10px; border-left: 3px solid #a855f7; }
.grk-tool-list { list-style: none; margin: 0; padding: 0; }
.grk-tool-list li { padding: 8px 0; border-bottom: 1px solid #232a3d; }
.grk-tool-list li:last-child { border-bottom: none; }
.grk-tool-list a { color: #cbd5e1; text-decoration: none; font-size: 14px; }
.grk-tool-list a:hover { color: #22d3ee; }

/* 响应式 */
@media (max-width: 900px) {
  .grk-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grk-layout { grid-template-columns: 1fr; }
  .grk-side { flex-direction: row; flex-wrap: wrap; }
  .grk-side-box { flex: 1; min-width: 200px; }
}
@media (max-width: 768px) {
  .grk-wrap { padding: 16px 0 30px; }
  .grk-hero h1 { font-size: 24px; }
  .grk-cols-4 { grid-template-columns: 1fr; }
  .grk-game-header { flex-direction: column; text-align: center; }
  .grk-game-sub { justify-content: center; }
  .grk-score { justify-content: center; }
  .grk-idx-mini { display: none; }
  .grk-row { flex-wrap: wrap; }
  .grk-index { width: 100%; order: 5; }
}