/* SoSmarty menu: one flat band per game, in that game's colour */
body { padding: max(6vh, env(safe-area-inset-top)) max(6vw, 16px) max(32px, env(safe-area-inset-bottom)); max-width: 880px; margin: 0 auto; }
.top { display: flex; align-items: center; gap: 20px; margin-bottom: 32px; }
.top img { width: 96px; height: 96px; flex: none; }
h1 { font-size: 64px; line-height: 1; }
.top p { margin: 8px 0 0; font-size: 20px; }
.games { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.games a { display: block; padding: 20px 24px; color: var(--ink); text-decoration: none; border: 3px solid var(--ink); border-radius: 4px; }
.games a:hover { transform: translateY(-2px); }
.games a:active { transform: translateY(1px); }
.games p { margin: 6px 0 0; }
.g-trust a { background: #f2c14e; }
.g-daily a { background: #e2574c; }
.g-button a { background: #f39a6b; }
.g-upside a { background: #7d9ccc; }
.g-push a { background: #8fd1b5; }
.g-field a { background: #8cbf5a; }
.g-target a { background: #f0a3bd; }
.g-loser a { background: #8cc8e8; }
.g-shell a { background: #f28c38; }
.g-forget a { background: #5fb3b3; }
.g-behind a { background: #c9925c; }
.games .g-trust h2 { font-size: 32px; }
.foot { margin-top: 32px; font-size: 16px; }
.foot p { margin: 0; }
@media (max-width: 480px) {
  h1 { font-size: 44px; }
  .top img { width: 64px; height: 64px; }
  .games h2 { font-size: 24px; }
  .games .g-trust h2 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { .games a:hover, .games a:active { transform: none; } }