/* ============================================================================
 *  list.html CSS 扩展（PM 出图 / Coding 落地）
 *  ----------------------------------------------------------------------------
 *  风格基线：RetroPlay Gazette（米黄 #f5efe0 / 黑 #1a1a1a / 报纸红 #b8312f）
 *  约束：不重写 bundle.css；只追加 .list-* / .view-* / .active-* / .games-list
 *  关键覆盖：.games-grid.view-grid3 显式覆盖 bundle.css 默认 2 列
 *  Play 字符：.list-row-play 用 ::before { content: "\25B6"; } 渲染 ▶，
 *            避免在 HTML 源里写非 ASCII 字符（PowerShell 编码坑）。
 * ============================================================================ */


/* ── 8.1 工具条（排序 + 视图 + 计数） ─────────────────────────────────────── */

.list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  gap: 12px;
  border-top: 1px solid #1a1a1a;
  border-bottom: 1px solid #1a1a1a;
  background: #f5efe0;
  font-family: 'Courier New', monospace;
}

.list-toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.list-toolbar-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a1a1a;
  white-space: nowrap;
}

.list-toolbar-select {
  background: #f5efe0;
  border: 1px solid #1a1a1a;
  padding: 4px 8px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: #1a1a1a;
  cursor: pointer;
  outline: none;
}

.list-toolbar-select:focus { border-color: #b8312f; }

.list-toolbar-view {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.view-btn {
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid #1a1a1a;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  letter-spacing: -1px;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.view-btn:hover { background: rgba(0, 0, 0, 0.05); }

.view-btn.active {
  border-bottom: 2px solid #b8312f;
  background: rgba(184, 49, 47, 0.08);
  color: #b8312f;
}

.list-toolbar-count {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: #1a1a1a;
  white-space: nowrap;
  flex-shrink: 0;
}


/* ── 8.2 激活筛选条（chips + Clear all） ─────────────────────────────────── */

.active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  min-height: 36px;
  background: #f5efe0;
}

.active-filter-chip {
  background: #f5efe0;
  border: 1px dashed #1a1a1a;
  padding: 2px 8px;
  font-size: 12px;
  font-family: 'Courier New', monospace;
  color: #1a1a1a;
  white-space: nowrap;
}

.active-filter-clear {
  margin-left: auto;
  background: transparent;
  border: none;
  color: #b8312f;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  text-decoration: underline;
  padding: 2px 4px;
}

.active-filter-clear:hover { color: #8a2522; }


/* ── 8.3 网格视图变体（覆盖 bundle.css 默认列数） ─────────────────────────── */

.games-grid.view-grid3 {
  grid-template-columns: repeat(3, 1fr);
}

.games-grid.view-grid2 {
  grid-template-columns: repeat(2, 1fr);
}


/* ── 8.4 列表视图（单条横向行） ─────────────────────────────────────────── */

.games-list {
  display: flex;
  flex-direction: column;
  border: 1px solid #1a1a1a;
  background: #f5efe0;
  margin: 0;
}

.list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid #1a1a1a;
  text-decoration: none;
  color: #1a1a1a;
  font-family: inherit;
  transition: background 0.12s ease;
}

.list-row:last-child { border-bottom: none; }

.list-row:hover { background: rgba(184, 49, 47, 0.04); }

.list-row-img {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border: 1px solid #1a1a1a;
  overflow: hidden;
  background: #fff;
}

.list-row-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: sepia(0.15);
}

.list-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.list-row-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.list-row-desc {
  font-size: 13px;
  line-height: 1.4;
  color: #444;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.list-row-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  flex-wrap: wrap;
}

.list-row-tag {
  background: #f5efe0;
  border: 1px solid #1a1a1a;
  padding: 1px 6px;
  font-size: 11px;
  font-family: 'Courier New', monospace;
  color: #1a1a1a;
  white-space: nowrap;
}

.list-row-play {
  flex-shrink: 0;
  background: #b8312f;
  color: #f5efe0;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  border: 1px solid #1a1a1a;
  white-space: nowrap;
  cursor: pointer;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  transition: background 0.12s ease;
}

/* ▶ 字符：CSS ::before 渲染，避开 HTML 源文件非 ASCII 编码陷阱 */
.list-row-play::before {
  content: "\25B6";
  margin-right: 6px;
  font-size: 11px;
}

.list-row:hover .list-row-play { background: #8a2522; }


/* ── 8.5 网格区外壳 ─────────────────────────────────────────────────────── */

.list-grid-sec {
  padding: 12px 16px;
  max-width: 1200px;
  margin: 0 auto;
}


/* ── 8.6 响应式断点 ─────────────────────────────────────────────────────── */

/* 默认（PC / 平板横屏，>768px） */
@media (min-width: 769px) {
  .list-toolbar { flex-direction: row; }
  .games-grid.view-grid3 { grid-template-columns: repeat(3, 1fr); }
}

/* 平板竖屏 / 手机横屏（≤768px） */
@media (max-width: 768px) {
  .list-toolbar { gap: 8px; padding: 8px 12px; }
  .list-toolbar-left, .list-toolbar-view, .list-toolbar-count { font-size: 12px; }
  .list-toolbar-select { font-size: 12px; padding: 3px 6px; }
}

/* 手机（≤480px）—— 触摸目标升到 a11y 友好的 ≥44px，工具条换行 */
@media (max-width: 480px) {
  .list-toolbar { flex-wrap: wrap; row-gap: 6px; }
  .list-toolbar-count { width: 100%; text-align: right; }
  .games-grid.view-grid3 { grid-template-columns: repeat(2, 1fr); }
  .list-row { padding: 8px; gap: 8px; }
  .list-row-img { width: 64px; height: 64px; }
  .list-row-title { font-size: 14px; }
  .list-row-desc { font-size: 12px; -webkit-line-clamp: 2; }
  .list-row-play { padding: 6px 10px; font-size: 11px; }
  .list-grid-sec { padding: 10px 12px; }
  .view-btn { width: 44px; height: 44px; font-size: 16px; }   /* a11y ≥44px */
  .list-toolbar-select { max-width: 130px; text-overflow: ellipsis; }
  .active-filter-clear { min-height: 44px; padding: 12px 8px; }
}

/* 极窄屏（≤360px，iPhone SE 一代 / Android 低端）—— 再压一档 */
@media (max-width: 360px) {
  .list-toolbar { padding: 6px 8px; gap: 6px; }
  .list-toolbar-left { gap: 4px; }
  .list-toolbar-label { display: none; }                    /* 让出空间给 select */
  .list-toolbar-select { max-width: 110px; font-size: 11px; }
  .view-btn { width: 40px; height: 40px; font-size: 15px; }
  .list-row { padding: 6px; gap: 6px; }
  .list-row-img { width: 56px; height: 56px; }
  .list-row-title { font-size: 13px; }
  .list-row-desc { -webkit-line-clamp: 1; }
  .list-row-play { padding: 5px 8px; font-size: 10px; letter-spacing: 0.04em; }
  .list-row-play::before { margin-right: 4px; }
  .gcard-nm { font-size: 11px; }
}

/* 手机横屏（height < 500px）—— 工具条单行紧凑，避免被挤到第二屏 */
@media (max-height: 500px) and (orientation: landscape) {
  .list-toolbar { flex-wrap: nowrap; padding: 6px 12px; }
  .list-toolbar-count { width: auto; text-align: right; }
  .list-row { padding: 6px 10px; }
  .list-row-img { width: 56px; height: 56px; }
}

/* iOS safe-area（刘海 / 底部 home indicator） */
@supports (padding: max(0px)) {
  .site-footer { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .totop-btn { bottom: max(16px, env(safe-area-inset-bottom)); }
  .list-toolbar { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  @media (max-width: 768px) {
    .list-toolbar { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  }
}

/* 尊重用户系统「减少动效」设置（无障碍） */
@media (prefers-reduced-motion: reduce) {
  .view-btn, .list-row, .list-row-play, .list-toolbar-select { transition: none !important; }
  .view-btn:hover, .list-row:hover { background: transparent; }
  .list-row-play::before { animation: none !important; }
}

/* 触摸态（手机长按反馈） */
@media (hover: none) {
  .view-btn:active { background: rgba(184, 49, 47, 0.15); transform: scale(0.95); }
  .list-row:active { background: rgba(184, 49, 47, 0.08); }
  .cat-tab:active, .search-cancel:active, .active-filter-clear:active { opacity: 0.7; }
}


/* ============================================================================
 *  End of list-ext.css
 * ============================================================================ */