/* ==========================================================================
   ピンズゲーム — ハブ（一覧ページ）の見た目
   ★ このファイルは index.html 専用です。ゲーム側には効きません。
   ★ 色・ボタンの形は base.css で決まっています。先にそちらを見てください。
   ========================================================================== */

body {
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, #1b3a30, transparent 70%),
    linear-gradient(#0b1210, #070c0b);
  background-attachment: fixed;
}

.wrap { max-width: 980px; margin: 0 auto; padding: 0 16px 56px; }

/* ---------- 見出し ---------- */
.hero { padding: 56px 0 36px; text-align: center; }
.hero .suits { font-size: 22px; letter-spacing: 10px; color: var(--pg-gold-lo); margin-bottom: 14px; }
.hero h1 {
  margin: 0; font-size: clamp(30px, 8vw, 46px); letter-spacing: .06em;
  background: linear-gradient(#fff5d6, #e3a92b);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { margin: 12px auto 0; max-width: 34em; color: var(--pg-ink-dim); font-size: 14px; line-height: 1.8; }

/* ---------- 絞り込み ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 24px 0 8px; }
.filters .btn.on { color: #2a1d00; background: linear-gradient(#f8d67a, #e3a92b); border-color: #f8d67a; }

/* ---------- ゲームの一覧 ---------- */
.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-top: 20px; }

.card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--pg-bg-hi);
  border: 1px solid var(--pg-line); border-radius: var(--pg-radius);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.card:hover { transform: translateY(-3px); border-color: var(--accent, var(--pg-gold)); box-shadow: 0 10px 28px rgba(0, 0, 0, .45); }
.card.soon { opacity: .62; }

/* ★ height: auto を忘れないこと。<img height="360"> の指定が勝ってしまい、縦に伸びます */
.card .cover { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
               background: #0a100e; border-bottom: 1px solid var(--pg-line); }

.card .body { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 16px; }
.card h2 { margin: 0; font-size: 20px; letter-spacing: .04em; color: var(--accent, var(--pg-gold)); }
.card h2 a { color: inherit; text-decoration: none; }
.card .tagline { margin: 0; font-size: 13px; color: var(--pg-ink); }
.card .desc { margin: 0; font-size: 12.5px; line-height: 1.75; color: var(--pg-ink-dim); }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tags li {
  font-size: 11px; padding: 3px 9px; border-radius: 999px;
  color: var(--pg-ink-dim); background: rgba(255, 255, 255, .05); border: 1px solid var(--pg-line);
}

.meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11.5px; color: var(--pg-ink-dim); }
.card .go { margin-top: auto; padding-top: 4px; }
.card .go .btn { width: 100%; }

/* ---------- 足もと ---------- */
.note {
  margin-top: 40px; padding: 18px 20px; font-size: 12.5px; line-height: 1.9; color: var(--pg-ink-dim);
  background: rgba(255, 255, 255, .03); border: 1px solid var(--pg-line); border-radius: var(--pg-radius);
}
.note h3 { margin: 0 0 8px; font-size: 13px; color: var(--pg-ink); }
footer { margin-top: 36px; text-align: center; font-size: 12px; color: var(--pg-ink-dim); line-height: 2; }
footer a { color: var(--pg-ink-dim); }
footer a:hover { color: var(--pg-gold); }

@media (max-width: 520px) {
  .hero { padding: 36px 0 24px; }
  .grid { grid-template-columns: 1fr; }
}