* { box-sizing: border-box; }
body { margin: 0; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; }

.menu-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, #ffb703, #ff9f1c);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.menu-wrap { text-align: center; max-width: 1120px; width: 100%; }
.menu-title { color: #fff; font-size: 30px; margin: 0 0 6px; text-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.menu-sub { color: #fff4e0; margin: 0 0 32px; font-size: 15px; }

.game-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  align-items: stretch;
}

.game-card {
  background: #fff8ec; border-radius: 20px; padding: 28px 20px; text-decoration: none; color: #3a2a00;
  box-shadow: 0 14px 30px rgba(0,0,0,0.18); transition: transform 0.15s;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  height: 100%;
}
.game-card:hover { transform: translateY(-4px); }
.game-card-icon { font-size: 48px; }
.game-card h2 { font-size: 17px; margin: 4px 0; line-height: 1.3; }
.game-card p { font-size: 13px; color: #7a5c00; margin: 0 0 12px; flex: 1; }
.play-btn {
  background: #2ecc71; color: #fff; font-weight: 700; padding: 10px 22px; border-radius: 10px; font-size: 14px;
}

@media (max-width: 980px) {
  .game-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .game-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .menu-title { font-size: 24px; }
  .game-cards { grid-template-columns: 1fr; gap: 16px; }
  .game-card { padding: 22px 16px; }
}