/* ============================================================
 * console.css
 * 「游戏机」专页样式 - 暗黑霓虹 + 玻璃拟态
 * 复用 all-games.css 的 .ag-* 基础组件
 * 本页专属组件以 .cs- 前缀命名隔离
 * ============================================================ */

/* ============================================================
 * 0. 面包屑（通栏）
 * ============================================================ */
.cs-crumbs {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  background: rgba(10, 8, 14, 0.88);
  border: 1px solid var(--ag-border-strong);
  border-radius: 10px;
  box-shadow:
    inset 0 0 20px rgba(255, 204, 0, 0.03),
    0 4px 14px rgba(0, 0, 0, 0.4);
  font-size: 13px;
  line-height: 1;
}
.cs-crumbs .home {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ag-text-dim);
  text-decoration: none;
  transition: 0.2s;
}
.cs-crumbs .home svg {
  width: 14px;
  height: 14px;
  display: block;
}
.cs-crumbs .home:hover { color: var(--ag-yellow); }
.cs-crumbs .sep { color: var(--ag-text-mute); }
.cs-crumbs .cur {
  color: var(--ag-yellow);
  font-weight: 700;
}

/* 侧栏标题图标 */
.cs-ico-platform {
  width: 20px !important;
  height: 20px !important;
  color: var(--ag-yellow);
  filter: drop-shadow(0 0 5px rgba(255, 204, 0, 0.45));
}

/* ============================================================
 * 1. 侧栏：经典永不过时
 * ============================================================ */
.cs-evergreen {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 112px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--ag-border-strong);
  background:
    radial-gradient(circle at 90% 65%, rgba(255, 204, 0, 0.13), transparent 62%),
    linear-gradient(160deg, rgba(20, 13, 30, 0.9), rgba(9, 7, 13, 0.92));
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.cs-ev-text {
  position: relative;
  z-index: 1;
  padding-right: 72px;
}
.cs-ev-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--ag-yellow);
  letter-spacing: 1px;
  white-space: nowrap;
  text-shadow: 0 0 12px rgba(255, 204, 0, 0.45);
}
.cs-ev-sub {
  font-size: 12px;
  color: var(--ag-text-dim);
  margin-top: 9px;
  line-height: 1.6;
}
.cs-ev-mario {
  position: absolute;
  right: 4px;
  bottom: 0;
  width: 74px;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 10px rgba(255, 204, 0, 0.18));
}

/* ============================================================
 * 2. Hero：经典游戏平台
 * ============================================================ */
.cs-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 188px;
  padding: 20px 20px 20px 24px;
  margin-bottom: 16px;
  border-radius: 14px;
  border: 1px solid var(--ag-border-strong);
  background:
    radial-gradient(circle at 78% 26%, rgba(130, 70, 255, 0.28), transparent 55%),
    radial-gradient(circle at 6% 88%, rgba(255, 60, 120, 0.14), transparent 55%),
    linear-gradient(115deg, #170c24 0%, #0b0713 55%, #140b20 100%);
  box-shadow: 0 0 30px rgba(255, 204, 0, 0.08);
  overflow: hidden;
}
/* 扫描线纹理 */
.cs-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px);
}
.cs-hero-text {
  position: relative;
  z-index: 1;
  flex: 0 0 296px;
}
.cs-hero-title {
  margin: 0;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: 5px;
  color: var(--ag-yellow);
  text-shadow:
    0 0 14px rgba(255, 204, 0, 0.6),
    0 0 30px rgba(255, 204, 0, 0.3),
    2px 2px 0 rgba(255, 77, 141, 0.35);
}
.cs-hero-en {
  margin-top: 10px;
  font-size: 13px;
  letter-spacing: 6px;
  color: #c9b6ff;
  font-family: 'Press Start 2P', monospace, sans-serif;
}
.cs-hero-desc {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.95;
  color: var(--ag-text-dim);
}
.cs-hero-img {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  max-height: 196px;
  object-fit: contain;
  object-position: right center;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.6));
}

/* ============================================================
 * 3. 主机卡片网格（5 列）
 * ============================================================ */
.cs-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.cs-card {
  --pc: #ff4d4d;                         /* 平台主题主色 */
  --pc-soft: rgba(255, 77, 77, 0.5);     /* 描边 */
  --pc-dim: rgba(255, 77, 77, 0.14);     /* 淡底 */
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  border: 1px solid var(--pc-soft);
  background: linear-gradient(180deg, rgba(17, 11, 24, 0.95), rgba(9, 7, 13, 0.95));
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.cs-card:hover {
  transform: translateY(-4px);
  border-color: var(--pc);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55), 0 0 22px var(--pc-dim);
}

/* 每台主机的主题色 */
.cs-card.type-fc     { --pc: #ff4d4d; --pc-soft: rgba(255, 77, 77, 0.5);  --pc-dim: rgba(255, 77, 77, 0.14); }
.cs-card.type-arcade { --pc: #b45cff; --pc-soft: rgba(180, 92, 255, 0.5); --pc-dim: rgba(180, 92, 255, 0.14); }
.cs-card.type-gba    { --pc: #5b6bff; --pc-soft: rgba(91, 107, 255, 0.5); --pc-dim: rgba(91, 107, 255, 0.14); }
.cs-card.type-sfc    { --pc: #2ee0b0; --pc-soft: rgba(46, 224, 176, 0.5); --pc-dim: rgba(46, 224, 176, 0.14); }
.cs-card.type-nds    { --pc: #ffcc00; --pc-soft: rgba(255, 204, 0, 0.5);  --pc-dim: rgba(255, 204, 0, 0.14); }

/* 顶部主机图 */
.cs-thumb {
  width: 100%;
  aspect-ratio: 232 / 122;
  overflow: hidden;
  background: #0a0710;
  border-bottom: 1px solid var(--pc-dim);
}
.cs-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* 卡片正文 */
.cs-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 12px 12px 14px;
}

.cs-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cs-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 3.5px solid var(--pc);
  box-shadow: 0 0 9px var(--pc-dim);
  flex-shrink: 0;
}
.cs-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--pc);
  letter-spacing: 0.5px;
}
.cs-en {
  margin: 5px 0 0 22px;
  font-size: 10px;
  letter-spacing: 1.4px;
  color: var(--ag-text-mute);
  font-family: 'Press Start 2P', monospace, sans-serif;
}

.cs-meta {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.cs-meta li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--ag-text-dim);
}
.cs-meta li svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--pc);
  opacity: 0.95;
}

.cs-count {
  margin-top: 11px;
  font-size: 12px;
  color: var(--ag-text-dim);
}
.cs-count .num {
  font-size: 17px;
  font-weight: 800;
  color: var(--pc);
  margin: 0 3px;
}

.cs-desc {
  margin: 9px 0 0;
  font-size: 12px;
  line-height: 1.75;
  color: var(--ag-text-dim);
}

.cs-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 12px;
}
.cs-tags span {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  color: var(--pc);
  background: var(--pc-dim);
  border: 1px solid var(--pc-soft);
  white-space: nowrap;
}

.cs-btn {
  margin-top: auto;
  padding: 8px 10px;
  border-radius: 7px;
  border: 1px solid var(--pc-soft);
  background: var(--pc-dim);
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--pc);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: 0.2s;
}
.cs-tags + .cs-btn { margin-top: 14px; }
.cs-card:hover .cs-btn {
  background: var(--pc);
  color: #0a0710;
  box-shadow: 0 0 18px var(--pc-dim);
}

/* 空态 */
.cs-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 50px 0;
  color: var(--ag-text-mute);
  font-size: 14px;
}

/* ============================================================
 * 4. 平台经典游戏推荐
 * ============================================================ */
.cs-reco {
  border-radius: 14px;
  border: 1px solid var(--ag-border-strong);
  background: linear-gradient(180deg, rgba(16, 11, 22, 0.92), rgba(9, 7, 13, 0.92));
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  padding: 14px 16px 18px;
}
.cs-reco-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 13px;
  border-bottom: 1px dashed var(--ag-border-strong);
  margin-bottom: 16px;
}
.cs-reco-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--ag-yellow);
  letter-spacing: 0.5px;
}
.cs-reco-title svg {
  width: 18px;
  height: 18px;
  color: #ff5a3c;
  filter: drop-shadow(0 0 7px rgba(255, 90, 60, 0.55));
}
.cs-reco-title .en {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1.6px;
  color: var(--ag-text-mute);
  font-family: 'Press Start 2P', monospace, sans-serif;
}
.cs-reco-more {
  font-size: 12px;
  color: var(--ag-text-dim);
  text-decoration: none;
  white-space: nowrap;
  transition: 0.2s;
}
.cs-reco-more:hover { color: var(--ag-yellow); }

.cs-reco-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.cs-reco-col {
  --pc: #ff4d4d;
  min-width: 0;
}
.cs-reco-col.type-fc     { --pc: #ff4d4d; }
.cs-reco-col.type-arcade { --pc: #b45cff; }
.cs-reco-col.type-gba    { --pc: #5b6bff; }
.cs-reco-col.type-sfc    { --pc: #2ee0b0; }
.cs-reco-col.type-nds    { --pc: #ffcc00; }

.cs-reco-col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--pc);
}
.cs-reco-col-head .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pc);
  box-shadow: 0 0 9px var(--pc);
  flex-shrink: 0;
}
.cs-reco-col-sub {
  font-size: 10px;
  color: var(--ag-text-mute);
  margin: 6px 0 10px 17px;
}
.cs-reco-games {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 10px;
}
.cs-reco-item {
  display: block;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.cs-reco-item .img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--ag-border);
  background: #0a0710;
  transition: 0.2s;
}
.cs-reco-item .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  image-rendering: pixelated;
}
.cs-reco-item .name {
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--ag-text-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}
.cs-reco-item:hover .img { border-color: var(--pc); }
.cs-reco-item:hover .name { color: var(--pc); }

/* ============================================================
 * 5. 响应式
 * ============================================================ */
@media (max-width: 1280px) {
  .cs-grid,
  .cs-reco-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1000px) {
  .cs-hero { flex-direction: column; align-items: flex-start; padding: 20px; }
  .cs-hero-text { flex: 0 0 auto; }
  .cs-hero-img { max-height: 170px; align-self: center; }
}
@media (max-width: 760px) {
  .cs-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-reco-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-hero-title { font-size: 28px; letter-spacing: 3px; }
  .cs-reco-title .en { display: none; }
}
@media (max-width: 520px) {
  .cs-reco-grid { grid-template-columns: 1fr; }
}