* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh;
  font-family: system-ui, 'Segoe UI', sans-serif;
  color: #4a2f12;
  background: linear-gradient(160deg, #93d667, #559f3d);
  display: grid; place-items: start center;
  padding: 48px 16px;
}
main { width: 100%; max-width: 560px; }
h1 { margin: 0; font-size: 36px; color: #fff; text-shadow: 0 2px 0 rgba(40, 80, 20, .35); }
.sub { margin: 6px 0 24px; color: #f3ffe6; font-size: 16px; }
.game {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center;
  padding: 16px; margin-bottom: 12px;
  background: #fff8e6; border: 3px solid #fff; border-radius: 20px;
  color: inherit; text-decoration: none;
  box-shadow: 0 8px 24px rgba(30, 60, 10, .25);
  transition: transform .1s;
}
.game:hover { transform: translateY(-2px); }
.ic { font-size: 40px; width: 64px; height: 64px; display: grid; place-items: center; background: #fff; border-radius: 16px; }
.info { display: block; }
.nm { display: block; font-size: 20px; font-weight: 700; }
.ds { display: block; font-size: 14px; color: #8a6a45; margin-top: 2px; line-height: 1.3; }
.go { font-weight: 700; color: #fff; background: #ffb300; padding: 8px 14px; border-radius: 999px; white-space: nowrap; }