* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Trebuchet MS", "Avenir Next", system-ui, -apple-system, sans-serif;
  min-height: 100vh; min-height: 100dvh;
  background: linear-gradient(160deg, #ff9a3c 0%, #ff5e7e 35%, #7b5cff 70%, #2fb7ff 100%);
  color: #fff; text-align: center;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
  -webkit-text-size-adjust: 100%;
}
header { padding: 36px 16px 8px; }
h1 {
  margin: 0; font-size: clamp(42px, 9vw, 84px); letter-spacing: 1px;
  text-shadow: 0 4px 0 #3b1f8f, 0 8px 18px rgba(0,0,0,.25);
}
.tag { font-size: clamp(18px, 3vw, 24px); margin: 10px 0 0; opacity: .95; }
.games {
  display: flex; flex-wrap: wrap; gap: 24px; justify-content: center;
  padding: 28px 16px; max-width: 900px; margin: 0 auto;
}
.card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 240px; height: 260px; border-radius: 28px; text-decoration: none; color: #2a1a5e;
  background: #fff; box-shadow: 0 10px 0 #3b1f8f, 0 16px 30px rgba(0,0,0,.25);
  transition: transform .12s;
}
.card:active { transform: translateY(6px); box-shadow: 0 4px 0 #3b1f8f, 0 8px 16px rgba(0,0,0,.25); }
.card .icon { font-size: 96px; line-height: 1.1; }
.card .name { font-size: 34px; font-weight: bold; margin-top: 8px; }
.card .desc { font-size: 18px; margin-top: 4px; color: #6a4fc9; }
.card.soon { background: rgba(255,255,255,.25); color: #fff; border: 4px dashed rgba(255,255,255,.8); box-shadow: none; }
.card.soon .desc { color: #fff; }
.idea {
  display: inline-block; margin: 8px 0 40px; padding: 14px 26px; border-radius: 999px;
  background: #ffe14d; color: #5a3b00; font-size: 20px; font-weight: bold; text-decoration: none;
  box-shadow: 0 6px 0 #c79a00;
}
.idea:active { transform: translateY(4px); box-shadow: 0 2px 0 #c79a00; }