/* 游戏大厅：近黑画布（按 ~/.claude/DESIGN.md 的 Linear 风格）。每个游戏是一张图，名字压在图上，整张图就是入口。 */
:root {
  --canvas: #010102; --surface-1: #0f1011; --surface-2: #141516; --surface-3: #18191a;
  --hairline: #23252a; --hairline-strong: #34343a;
  --ink: #f7f8f8; --ink-muted: #d0d6e0; --ink-subtle: #8a8f98; --ink-tertiary: #62666d;
  --primary: #5e6ad2; --primary-hover: #828fff; --success: #27a644;
  --font: -apple-system, "SF Pro Display", "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--canvas); color-scheme: dark; }
body { margin: 0; min-height: 100vh; background: var(--canvas); color: var(--ink); font: 400 16px/1.5 var(--font); letter-spacing: -0.05px; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }

.top { max-width: 1080px; margin: 0 auto; padding: 20px 24px; }
.brand { font-size: 15px; font-weight: 600; letter-spacing: -0.2px; color: var(--ink-muted); }
.brand:hover { color: var(--ink); }

main { max-width: 1080px; margin: 0 auto; padding: 0 24px 48px; }
.title { margin: 28px 0 24px; font-size: 32px; font-weight: 600; line-height: 1.2; letter-spacing: -0.6px; }

.continue { display: grid; gap: 10px; margin-bottom: 24px; }
.resume { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--hairline-strong); border-radius: 12px; background: var(--surface-2); color: var(--ink-muted); font-size: 15px; transition: border-color 150ms ease, background 150ms ease; }
.resume b { color: var(--ink); font-weight: 600; letter-spacing: 1px; }
.resume:hover { border-color: var(--ink-tertiary); background: var(--surface-3); }

.games { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.game-card { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; background: var(--surface-2); }
.game-card.live:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.game-art { position: absolute; inset: 0; display: grid; place-items: center; transition: transform 400ms cubic-bezier(.2,.8,.2,1); }
.game-card.live:hover .game-art { transform: scale(1.03); }
.art-gobang img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-cards { background: radial-gradient(ellipse 70% 80% at 50% 40%, #1d6a50, #0f4a37 55%, #062a1f); }
.art-cards svg { width: 64%; max-width: 280px; height: auto; margin-bottom: 18%; font-family: var(--font); }
/* 名字和一句话压在图的下边，底下垫一层渐暗保证看得清 */
.game-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 20px 18px; background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.5) 55%, transparent); }
.game-body h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.4px; color: #fff; }
.game-body p { margin: 4px 0 0; color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.55; }
.badge { padding: 2px 8px; border: 1px solid rgba(255,255,255,.3); border-radius: 6px; color: rgba(255,255,255,.75); font-size: 12px; font-weight: 400; }
.soon .game-art { filter: saturate(.6) brightness(.8); }

@media (max-width: 560px) {
  .top, main { padding-left: 16px; padding-right: 16px; }
  .title { margin: 12px 0 18px; font-size: 26px; }
  .games { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .game-art, .resume { transition: none; } }