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

body {
  font-family: "Comic Sans MS", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: linear-gradient(135deg, #e0f7ff, #f0e6ff);
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
}

.lobby { text-align: center; padding: 24px; }

h1 { color: #6c5ce7; font-size: 36px; }
.subtitle { color: #888; margin: 10px 0 32px; font-size: 18px; }

.game-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; max-width: 720px;
}

.game-card {
  background: #fff; border-radius: 24px; padding: 32px 20px;
  box-shadow: 0 8px 24px rgba(108, 92, 231, .15);
  transition: transform .15s;
}
.game-card:hover { transform: translateY(-6px); }
.game-icon { font-size: 56px; }
.game-name { font-size: 20px; font-weight: bold; color: #333; margin-top: 10px; }
.game-status { color: #aaa; font-size: 14px; margin-top: 6px; }

.footer { margin-top: 40px; color: #aaa; }
.footer a { color: #6c5ce7; }

@media (max-width: 768px) {
  .game-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .game-card { padding: 20px 12px; }
  .game-icon { font-size: 44px; }
  h1 { font-size: 28px; }
}