/* ゲーム一覧ページ専用：サムネ主導のコンパクト縦カード */

/* ——— 上部の縦圧縮 ——— */
body.game-page.games-index-page .hero {
  padding: 14px 0 10px;
}

body.game-page.games-index-page .hero__brand {
  margin-bottom: 6px;
  padding-bottom: 6px;
}

body.game-page.games-index-page .hero h1 {
  font-size: clamp(1.45rem, 3.6vw, 2rem);
}

body.game-page.games-index-page .hero__tagline {
  font-size: clamp(.86rem, 2vw, .95rem);
  line-height: 1.5;
  max-width: 36rem;
}

body.game-page.games-index-page .tool-help {
  padding: 12px 14px;
  margin-bottom: 10px;
}

body.game-page.games-index-page .tool-help h2 {
  margin-bottom: 4px;
  font-size: 1rem;
}

body.game-page.games-index-page .tool-help > p {
  margin: 0 0 4px;
  font-size: .84rem;
  line-height: 1.5;
}

body.game-page.games-index-page .tool-help > p:last-of-type {
  margin-bottom: 0;
}

body.game-page.games-index-page .tool-help > .faq-list {
  margin-top: 8px;
  gap: 6px;
}

body.game-page.games-index-page .faq-item {
  padding-top: 6px;
}

body.game-page.games-index-page .faq-item h3 {
  margin-bottom: 2px;
  font-size: .86rem;
}

body.game-page.games-index-page .faq-item p {
  font-size: .78rem;
  line-height: 1.45;
}

body.game-page.games-index-page .related-tools {
  padding: 16px;
}

body.game-page.games-index-page .related-tools > h2 {
  margin-bottom: 12px;
  font-size: 1.05rem;
}

/* ——— カードグリッド ——— */
/* PC 4列 / タブレット 3列 / スマホ 2列 / 極狭 1列 */
.games-catalog-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.games-catalog-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(120, 148, 184, .18);
  color: var(--ns-text);
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(62, 88, 130, .055);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}

.games-catalog-card:hover {
  border-color: rgba(31, 142, 230, .42);
  box-shadow:
    0 8px 20px rgba(31, 142, 230, .12),
    0 0 0 1px rgba(31, 142, 230, .08);
  transform: translateY(-2px);
}

.games-catalog-card:focus {
  outline: none;
}

.games-catalog-card:focus-visible {
  border-color: rgba(31, 142, 230, .55);
  box-shadow:
    0 0 0 3px rgba(31, 142, 230, .28),
    0 8px 20px rgba(31, 142, 230, .12);
}

.games-catalog-card:active {
  transform: translateY(0);
}

.games-catalog-card__thumb {
  display: block;
  overflow: hidden;
  aspect-ratio: 800 / 534;
  background: #d7e3f0;
}

.games-catalog-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.games-catalog-card__thumb--ability-zero,
.games-catalog-card__thumb--dark { background: #0b1a33; }
.games-catalog-card__thumb--connect-four,
.games-catalog-card__thumb--checkers,
.games-catalog-card__thumb--backgammon,
.games-catalog-card__thumb--mancala,
.games-catalog-card__thumb--nine-mens-morris,
.games-catalog-card__thumb--halma,
.games-catalog-card__thumb--fanorona,
.games-catalog-card__thumb--surakarta,
.games-catalog-card__thumb--hex,
.games-catalog-card__thumb--neon-align,
.games-catalog-card__thumb--naval-battle,
.games-catalog-card__thumb--dots-and-boxes,
.games-catalog-card__thumb--2048,
.games-catalog-card__thumb--minesweeper,
.games-catalog-card__thumb--breakout,
.games-catalog-card__thumb--snake,
.games-catalog-card__thumb--block-fall,
.games-catalog-card__thumb--solitaire,
.games-catalog-card__thumb--old-maid,
.games-catalog-card__thumb--crazy-eights,
.games-catalog-card__thumb--go-fish,
.games-catalog-card__thumb--freecell,
.games-catalog-card__thumb--spider-solitaire,
.games-catalog-card__thumb--ludo,
.games-catalog-card__thumb--nim,
.games-catalog-card__thumb--domino,
.games-catalog-card__thumb--block-dominoes,
.games-catalog-card__thumb--senet,
.games-catalog-card__thumb--hnefatafl,
.games-catalog-card__thumb--hearts,
.games-catalog-card__thumb--konane,
.games-catalog-card__thumb--fox-and-geese,
.games-catalog-card__thumb--astra-raid,
.games-catalog-card__thumb--memory,
.games-catalog-card__thumb--mahjong-tile-puzzle,
.games-catalog-card__thumb--15-puzzle,
.games-catalog-card__thumb--lights-out,
.games-catalog-card__thumb--peg-solitaire,
.games-catalog-card__thumb--ball-sort-puzzle,
.games-catalog-card__thumb--sokoban,
.games-catalog-card__thumb--sliding-block-puzzle,
.games-catalog-card__thumb--maze,
.games-catalog-card__thumb--pipe-puzzle,
.games-catalog-card__thumb--frog-puzzle,
.games-catalog-card__thumb--hit-and-blow,
.games-catalog-card__thumb--shut-the-box,
.games-catalog-card__thumb--sudoku,
.games-catalog-card__thumb--nonogram,
.games-catalog-card__thumb--gomoku,
.games-catalog-card__thumb--reversi { background: #101c38; }

.games-catalog-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 6px;
  min-width: 0;
  padding: 10px 11px 11px;
}

.games-catalog-card__title {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: #1d2c47;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.games-catalog-card__desc {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--ns-muted);
  font-size: .76rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.games-catalog-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: auto;
  padding-top: 2px;
}

.games-catalog-card__tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border: 1px solid rgba(82, 118, 174, .16);
  border-radius: 999px;
  color: #596a85;
  background: #f4f8fd;
  font-size: .64rem;
  line-height: 1.2;
}

.games-catalog-card__version {
  align-self: center;
  margin-left: auto;
  color: #8a98ad;
  font-size: .64rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .02em;
}

/* タブレット：3列 */
@media (max-width: 1100px) {
  .games-catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
}

/* スマホ寄り：2列 */
@media (max-width: 720px) {
  .games-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body.game-page.games-index-page .tool-help,
  body.game-page.games-index-page .related-tools {
    padding: 12px;
  }

  .games-catalog-card__body {
    padding: 9px 9px 10px;
    gap: 5px;
  }

  .games-catalog-card__title {
    font-size: .88rem;
  }

  .games-catalog-card__desc {
    font-size: .72rem;
  }
}

/* 極狭：1列（通常のスマホ幅は2列を維持） */
@media (max-width: 320px) {
  .games-catalog-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

@media (max-width: 560px) {
  body.game-page.games-index-page .hero {
    padding: 12px 0 8px;
  }

  body.game-page.games-index-page .hero__brand {
    margin-bottom: 6px;
    padding-bottom: 6px;
  }

  body.game-page.games-index-page .tool-help > p {
    font-size: .82rem;
    line-height: 1.5;
  }

  body.game-page.games-index-page .faq-item p {
    font-size: .76rem;
    line-height: 1.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .games-catalog-card {
    transition: none;
  }

  .games-catalog-card:hover {
    transform: none;
  }
}