* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #14111f;
  color: #e8e4f0;
  line-height: 1.7;
  min-height: 100vh;
}

.wrap { max-width: 960px; margin: 0 auto; padding: 40px 24px 60px; }

.masthead { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 32px; border-bottom: 1px solid rgba(212,175,55,.25); }
.logo { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 500; color: #f0e6c8; }
.logo svg { width: 24px; height: 24px; }
.logo em { font-style: normal; color: #d4af37; }
.tagline { font-size: 13px; color: #8a85a0; }

.hero { padding: 48px 0 36px; }
.hero h1 { font-size: 34px; font-weight: 500; color: #f5f1e6; letter-spacing: .5px; }
.hero .sub { margin-top: 12px; font-size: 14.5px; color: #9c97ad; max-width: 640px; }

.games { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }

.game-card {
  display: flex; gap: 16px; align-items: flex-start;
  background: #1c1830; border: 1px solid #2e2850; border-radius: 14px;
  padding: 22px; text-decoration: none; color: inherit;
  transition: transform .18s, border-color .18s;
}
.game-card:hover { transform: translateY(-3px); border-color: #d4af37; }
.game-card.soon { opacity: .6; }

.g-icon {
  width: 52px; height: 52px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
  background: linear-gradient(135deg, #2a2445, #1f1a36);
  border: 1px solid #3a3460;
}
.g-info { flex: 1; min-width: 0; }
.g-info h2 { font-size: 18px; font-weight: 500; color: #f0e6c8; }
.g-info p { font-size: 12.5px; color: #d4af37; margin: 4px 0 8px; letter-spacing: .3px; }
.g-desc { display: block; font-size: 13px; color: #9c97ad; }
.g-go { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 500; color: #d4af37; }

footer { text-align: center; color: #6a6580; font-size: 12.5px; padding: 44px 0 0; }

@media (max-width: 640px) {
  .hero h1 { font-size: 26px; }
  .masthead { flex-direction: column; align-items: flex-start; gap: 8px; }
}