/* ============================================================
   复古街机厅 · 游戏站首页（复用 common.css 变量与机柜基调）
   响应式重构：桌面 5 列 / 平板 3 列 / 手机 2 列（末张占满）
   修掉 body 垂直居中导致移动端顶部被裁切、无法滚到顶的问题
   ============================================================ */

/* 首页不强制垂直居中：内容高于视口时顶部会被裁切且滚不回去 */
body {
  align-items: flex-start;
  padding-top: 40px;
  padding-bottom: 48px;
}

.arcade {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 clamp(14px, 4vw, 32px) 8px;
}

/* ---------- 标题区 ---------- */
.marquee { text-align: center; padding: 8px 0 4px; }
.blocks { display: flex; gap: 6px; justify-content: center; margin-bottom: 16px; }
.blocks i {
  width: clamp(16px, 4vw, 22px);
  height: clamp(16px, 4vw, 22px);
  display: block;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.4);
}
.hub-sub { color: var(--yellow); margin-top: 12px; }

/* ---------- 游戏网格 ---------- */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);            /* 手机默认 2 列 */
  gap: clamp(12px, 2.4vw, 22px);
  margin-top: clamp(20px, 4vw, 32px);
}
@media (min-width: 560px) {                          /* 平板 3 列 (3+2) */
  .hub-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {                          /* 桌面 5 列 单行 */
  .hub-grid { grid-template-columns: repeat(5, 1fr); }
}
/* 手机端最后一张占满整行，避免右侧空缺孤卡 */
@media (max-width: 559px) {
  .game-card:last-child { grid-column: 1 / -1; }
}

/* ---------- 游戏卡片 ---------- */
.game-card {
  display: flex;
  flex-direction: column;
  text-align: center;
  text-decoration: none;
  background: var(--card);
  border: 3px solid var(--border);
  border-top: 4px solid var(--accent, var(--border));
  padding: clamp(12px, 2vw, 16px);
  color: var(--white);
  box-shadow: 6px 6px 0 rgba(0,0,0,0.5);
  transition: transform .08s steps(2), box-shadow .08s steps(2), border-color .08s;
  position: relative;
}
.game-card:hover,
.game-card:focus-visible {
  transform: translate(-3px, -3px);
  box-shadow: 10px 10px 0 rgba(0,0,0,0.5);
  border-color: var(--accent, var(--blue));
  outline: none;
}
.game-card:active {
  transform: translate(0, 0);
  box-shadow: 4px 4px 0 rgba(0,0,0,0.5);
}

/* 每台机器的招牌色：贪吃蛇绿 / 俄方块红 / 侵略者白 / 吃豆人黄 / 打砖块蓝 */
.game-card:nth-child(1) { --accent: #22C55E; }
.game-card:nth-child(2) { --accent: #DC2626; }
.game-card:nth-child(3) { --accent: #E2E8F0; }
.game-card:nth-child(4) { --accent: #FACC15; }
.game-card:nth-child(5) { --accent: #2563EB; }

.card-screen {
  background: var(--navy);
  border: 2px solid var(--border);
  height: clamp(96px, 13vw, 128px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.card-screen svg {
  width: clamp(60px, 16vw, 92px);
  height: clamp(60px, 16vw, 92px);
  image-rendering: pixelated;
}

.card-title {
  font-family: var(--px);
  font-size: 12px;
  line-height: 1.35;
  color: var(--white);
  letter-spacing: 1px;
  word-break: break-word;
}
body.lang-zh .card-title {
  font-family: var(--zh);
  font-size: 16px;
  letter-spacing: 0;
}
.card-en {
  font-family: var(--vt);
  font-size: 15px;
  color: var(--grey);
  letter-spacing: 2px;
  margin-top: 6px;
}
.play-badge {
  margin-top: auto;                 /* 推到卡片底部，整行底部对齐 */
  padding-top: 10px;
  font-family: var(--vt);
  font-size: 16px;
  color: var(--green);
  letter-spacing: 1px;
}

/* ---------- 页脚 ---------- */
.hub-foot {
  margin-top: clamp(28px, 5vw, 40px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: var(--vt);
  font-size: 17px;
  color: var(--grey);
  letter-spacing: 1px;
}
.lang-toggle {
  min-height: 40px;                 /* 移动端点按区域 */
  padding: 6px 16px;
  font-size: 18px;
}

/* 全局 CRT 扫描线氛围 */
.crt-overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.16) 3px, rgba(0,0,0,0.16) 4px),
    radial-gradient(120% 120% at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.5) 100%);
  mix-blend-mode: multiply;
}

/* 中文态字体切换 */
body.lang-zh .title,
body.lang-zh .subtitle { font-family: var(--zh); }
body.lang-zh .card-title { font-family: var(--zh); }
body.lang-zh .play-badge,
body.lang-zh .hub-foot { font-family: var(--zh); }