* { box-sizing: border-box; }
html { touch-action: manipulation; } /* ダブルタップで拡大しない（ピンチは viewport の user-scalable=no） */
body {
  margin: 0; min-height: 100vh; background: #05060d; color: #e8eef5;
  font-family: "Hiragino Sans", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
}
header { padding: 20px 16px 8px; max-width: 720px; margin: 0 auto; }
header h1 { margin: 0; font-size: 22px; font-weight: 900; }
header p { margin: 4px 0 0; color: #9fb4c8; font-size: 14px; }
a { color: #7df9ff; }
.games { display: grid; gap: 12px; padding: 8px 16px 32px; max-width: 720px; margin: 0 auto; }
.game { display: block; text-decoration: none; color: inherit; background: rgba(255,255,255,0.05); border-radius: 12px; overflow: hidden; }
.game img { display: block; width: 100%; height: auto; }
.game .name { display: block; padding: 10px 12px 0; font-size: 20px; font-weight: 900; }
.game .tag { display: block; padding: 2px 12px 12px; color: #9fb4c8; font-size: 14px; }
.game .name em { margin-left: 10px; padding: 2px 8px; border-radius: 6px; background: #7df9ff; color: #05060d; font-size: 12px; font-style: normal; font-weight: 700; vertical-align: 3px; }
.nazo-link { display: flex; align-items: center; gap: 10px; max-width: 688px; margin: 8px auto 4px; padding: 12px 14px;
  border-radius: 12px; background: #f3eee3; color: #1f1b16; text-decoration: none; }
.nazo-link b { display: block; font-size: 17px; font-weight: 900; }
.nazo-link small { display: block; margin-top: 2px; font-size: 13px; color: #5b5246; }
.nazo-link::after { content: "→"; margin-left: auto; font-size: 20px; font-weight: 900; }
@media (max-width: 720px) { .nazo-link { margin-left: 16px; margin-right: 16px; } }