/* ============================================================
 * home.css
 * 首页专属样式，复用 all-games.css 的玻璃拟态基础组件（.ag-* 前缀）
 * 新增组件统一以 .home-* 前缀命名
 * 风格：暗黑霓虹 + 像素复古街机
 * ============================================================ */

/* ============================================================
/* ============================================================
 * 1. Hero：整幅像素艺术场景作底图（复古游戏厅 CRT + 城市夜景 + 街机柜）
 *   注意：文字「复古游戏厅/RETRO GAME HALL/INSERT COIN/重温经典」已在底图内绘制，
 *         这里不再重复渲染文字，只在 INSERT COIN 位置叠一个透明可点击层。
 * ============================================================ */
.home-hero {
  position: relative;
  aspect-ratio: 1893 / 693;          /* 与底图等比，保证不裁切不变形 */
  border-radius: 14px;
  border: 1px solid rgba(255, 204, 0, 0.3);
  overflow: hidden;
  margin-bottom: 18px;
  background:
    url('../images/common/home-hero.jpg') center / 100% 100% no-repeat,
    linear-gradient(180deg, #0b0714 0%, #150c22 50%, #080510 100%);
  box-shadow: 0 0 40px rgba(255, 204, 0, 0.08), 0 18px 44px rgba(0, 0, 0, 0.6);
}

/* 语义化标题：仅对 SEO/无障碍可见，视觉上由底图承担 */
.home-hero h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* INSERT COIN 可点击层：覆盖在底图按钮位置（约水平 50%、垂直 55% 处） */
.home-hero-coin {
  position: absolute;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
  width: 24%;
  height: 9%;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: box-shadow 0.25s, transform 0.25s, filter 0.25s;
}
.home-hero-coin:hover,
.home-hero-coin:focus-visible {
  outline: none;
  transform: translate(-50%, -50%) scale(1.04);
  box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.75), 0 0 34px rgba(255, 204, 0, 0.55);
}

/* ============================================================
 * 2. 平台 Tab 大格子（6 列：左图标 + 右两行文字，彩色描边）
 * ============================================================ */
.home-platforms {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 26px;
}

.home-platform {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 14px;
  background: linear-gradient(180deg, #14131a, #0c0b11);
  border: 2px solid var(--pc, #2a2833);
  border-radius: 12px;
  cursor: pointer;
  transition: 0.25s;
  text-decoration: none;
  overflow: hidden;
}
.home-platform::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 60%);
  pointer-events: none;
}
.home-platform:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55), 0 0 20px var(--pc, #ffcc00);
}
.home-platform .ico {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ico-box-w);
  height: var(--ico-box-h);
}
.home-platform .ico svg {
  width: 100%;
  height: 100%;
}
/* 与侧栏同一套归一化规则：高度定尺寸、宽度自适应，6 个平台图标内容高度恒等 28px */
.home-platform .ico img {
  height: var(--ico-lg);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.home-platform .text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.home-platform .cn {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
}
.home-platform .en {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--pc, #8a8494);
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0.92;
}

/* 每个平台的描边色（对齐目标图） */
.home-platform.all    { --pc: #ffcc00; }
.home-platform.fc     { --pc: #ff4d4d; }
.home-platform.arcade { --pc: #ff7a3d; }
.home-platform.gba    { --pc: #a86bff; }
.home-platform.sfc    { --pc: #35d97b; }
.home-platform.nds    { --pc: #4dc3ff; }

.home-platform.active .cn { letter-spacing: 1px; }


/* ============================================================
 * 3. Section 通用头
 * ============================================================ */
.home-section {
  margin-bottom: 28px;
}

.home-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0 12px;
  border-bottom: 1px solid rgba(255, 204, 0, 0.18);
  margin-bottom: 14px;
}
.home-section-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;       /* 标题语义升级为 h2 后清零默认 margin */
  font-weight: normal;
  font-size: inherit;
}
/* 栏目标题图标：固定 18×18 方盒 + currentColor 上色。
   原先用 emoji + font-size 控制，同字号下 emoji 实际宽度浮动约 18%（🔥19.7 vs 🎯30.2），
   且跨端字形不同 —— 现统一由像素 SVG 渲染，尺寸恒定 */
.home-section-title .ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ico-sm);
  height: var(--ico-sm);
  flex-shrink: 0;
  color: #ffcc00;
}
.home-section-title .ico svg {
  display: block;
  width: 100%;
  height: 100%;
}
.home-section-title .cn {
  font-size: 18px;
  color: #ffcc00;
  font-weight: 700;
  letter-spacing: 1px;
}
.home-section-title .en {
  font-size: 11px;
  color: #6f6478;
  letter-spacing: 2px;
}
.home-section-more {
  font-size: 13px;
  color: #a99fb6;
  cursor: pointer;
  text-decoration: none;
  transition: 0.2s;
}
.home-section-more:hover { color: #ffcc00; }

/* ============================================================
 * 4. 最新上架 6 列大卡（含「开始游戏」按钮）
 * ============================================================ */
.home-arrivals {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

.home-arrival {
  background: rgba(15, 11, 22, 0.7);
  border: 1px solid rgba(255, 204, 0, 0.18);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: 0.25s;
  position: relative;
}
.home-arrival:hover {
  transform: translateY(-3px);
  border-color: #ffcc00;
  box-shadow: 0 6px 18px rgba(255, 204, 0, 0.2);
}

.home-arrival-img {
  position: relative;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #1f1730, #100820);
  overflow: hidden;
}
.home-arrival-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  image-rendering: pixelated;
}

.home-arrival-fav {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255, 204, 0, 0.4);
  background: rgba(11, 7, 16, 0.7);
  color: #ffcc00;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
.home-arrival-fav:hover,
.home-arrival-fav.active {
  background: #ffcc00;
  color: #000;
}

.home-arrival-name {
  padding: 8px 12px 2px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-arrival-tag {
  padding: 0 12px 8px;
  font-size: 11px;
  color: #a99fb6;
}
.home-arrival-tag .type { color: #ffcc00; font-weight: 600; }

.home-arrival-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid rgba(255, 204, 0, 0.15);
  background: rgba(255, 204, 0, 0.04);
  color: #ffcc00;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-decoration: none;
}
.home-arrival-action::before {
  content: "▶";
  font-size: 11px;
}
.home-arrival:hover .home-arrival-action {
  background: rgba(255, 204, 0, 0.12);
}

/* ============================================================
 * 5. 热门标签（7 列色块）
 * ============================================================ */
.home-tags {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
}

.home-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(15, 11, 22, 0.7);
  border: 1px solid;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.25s;
  text-decoration: none;
  color: #fff;
}
.home-tag:hover { transform: translateY(-2px); }
/* 标签图标：固定 22×22 方盒，颜色跟随各标签的主题色 */
.home-tag .ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ico-md);
  height: var(--ico-md);
  flex-shrink: 0;
}
.home-tag .ico svg {
  display: block;
  width: 100%;
  height: 100%;
}
.home-tag .text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.home-tag .cn {
  font-size: 14px;
  font-weight: 700;
}
.home-tag .en {
  font-size: 10px;
  letter-spacing: 1.5px;
  opacity: 0.7;
}

.home-tag.act { border-color: #ff8a3d; }
.home-tag.act:hover { box-shadow: 0 0 16px rgba(255, 138, 61, 0.35); }
.home-tag.act .cn { color: #ffb98a; }

.home-tag.stg { border-color: #ff4d6a; }
.home-tag.stg:hover { box-shadow: 0 0 16px rgba(255, 77, 106, 0.35); }
.home-tag.stg .cn { color: #ff8095; }

.home-tag.adv { border-color: #e8c050; }
.home-tag.adv:hover { box-shadow: 0 0 16px rgba(232, 192, 80, 0.35); }
.home-tag.adv .cn { color: #ffe082; }

.home-tag.rpg { border-color: #c253ff; }
.home-tag.rpg:hover { box-shadow: 0 0 16px rgba(194, 83, 255, 0.35); }
.home-tag.rpg .cn { color: #d685ff; }

.home-tag.rac { border-color: #4dd2ff; }
.home-tag.rac:hover { box-shadow: 0 0 16px rgba(77, 210, 255, 0.35); }
.home-tag.rac .cn { color: #80dcff; }

.home-tag.ftg { border-color: #ff5252; }
.home-tag.ftg:hover { box-shadow: 0 0 16px rgba(255, 82, 82, 0.35); }
.home-tag.ftg .cn { color: #ff8080; }

.home-tag.two { border-color: #4dff9b; }
.home-tag.two:hover { box-shadow: 0 0 16px rgba(77, 255, 155, 0.35); }
.home-tag.two .cn { color: #80ffb0; }

/* 标签图标配色：与各标签主题色一致（图标为 currentColor 像素 SVG） */
.home-tag.act .ico { color: #ff8a3d; }
.home-tag.stg .ico { color: #ff4d6a; }
.home-tag.adv .ico { color: #e8c050; }
.home-tag.rpg .ico { color: #c253ff; }
.home-tag.rac .ico { color: #4dd2ff; }
.home-tag.ftg .ico { color: #ff5252; }
.home-tag.two .ico { color: #4dff9b; }

/* ============================================================
 * 6. 热门游戏（7 列小卡，仅图，无「开始游戏」按钮）
 * ============================================================ */
.home-hot-games {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
}

.home-hot-card {
  background: rgba(15, 11, 22, 0.7);
  border: 1px solid rgba(255, 204, 0, 0.18);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: 0.25s;
  text-decoration: none;
  color: inherit;
}
.home-hot-card:hover {
  transform: translateY(-3px);
  border-color: #ffcc00;
  box-shadow: 0 6px 16px rgba(255, 204, 0, 0.18);
}
.home-hot-card-img {
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #1f1730, #100820);
  overflow: hidden;
}
.home-hot-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  image-rendering: pixelated;
}
.home-hot-card-name {
  padding: 6px 8px 0;
  font-size: 12px;
  font-weight: 600;
  color: #f5f5f5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-hot-card-tag {
  padding: 0 8px 6px;
  font-size: 10px;
  color: #6f6478;
}
.home-hot-card-tag .type { color: #ffcc00; }

/* ============================================================
 * 7. 侧栏热门排行榜
 * ============================================================ */
.ag-ranking-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ag-ranking-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
  font-size: 13px;
  text-decoration: none;
  color: inherit;
  transition: 0.2s;
}
.ag-ranking-item:hover {
  background: rgba(255, 204, 0, 0.08);
  transform: translateX(2px);
}
.ag-ranking-item .num {
  flex-shrink: 0;
  font-weight: 700;
  font-family: 'Press Start 2P', monospace, 'Courier New', monospace;
  font-size: 14px;
  width: 22px;
  text-align: center;
  color: #ffcc00;
  letter-spacing: 0;
}
.ag-ranking-item.top1 .num { color: #ff4d6a; text-shadow: 0 0 6px rgba(255, 77, 106, 0.6); }
.ag-ranking-item.top2 .num { color: #ff8a3d; }
.ag-ranking-item.top3 .num { color: #ffcc00; }

.ag-ranking-item .name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.ag-ranking-item .plays {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #a99fb6;
  font-size: 11px;
  flex-shrink: 0;
}
.ag-ranking-item .plays::before {
  content: "❤";
  color: #ff4d6a;
  font-size: 11px;
}

/* ============================================================
 * 8. 响应式
 * ============================================================ */
@media (max-width: 1200px) {
  .home-platforms,
  .home-arrivals {
    grid-template-columns: repeat(3, 1fr);
  }
  .home-tags,
  .home-hot-games {
    grid-template-columns: repeat(4, 1fr);
  }
  .home-hero-crt { right: 210px; }
  .home-hero-cab { width: 190px; }
}

@media (max-width: 960px) {
  .home-main-shrink .ag-main {
    grid-template-columns: 1fr;
  }
  .ag-sidebar { position: static; }
  .home-hero { height: 320px; }
  .home-hero-brand { font-size: 38px; letter-spacing: 6px; }
  .home-hero-joy,
  .home-hero-cab { display: none; }
  .home-hero-crt { left: 16px; right: 16px; top: 20px; bottom: 16px; }
  .home-hero-screen { inset: 14px 18px 42px; }
}

@media (max-width: 720px) {
  .home-platforms,
  .home-arrivals {
    grid-template-columns: repeat(2, 1fr);
  }
  .home-tags,
  .home-hot-games {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 460px) {
  .home-platforms,
  .home-arrivals,
  .home-tags,
  .home-hot-games {
    grid-template-columns: repeat(2, 1fr);
  }
}