/* ====== 固定幅カードで4枚並べる（PC） ====== */
:root{
  --mh-card-w: 250px;              /* カード外寸（border/padding含む） */
  --mh-card-gap: 24px;             /* カード間の余白 */
  --mh-level-diameter: 34px;       /* レベル丸の直径（6個/列で収まる） */
  --mh-level-gap: 6px;             /* レベル丸の間隔 */
  --mh-level-font: .9rem;          /* レベル数字サイズ */
}

/* ラッパーはフレックスで折り返し */
.mh-hub{
  max-width: 1100px;
  margin: 0 auto;
  padding: min(6vw, 32px);
  display: flex;
  flex-wrap: wrap;
  gap: var(--mh-card-gap);
  justify-content: center;         /* 端数行を中央寄せ */
}

/* 見出しなどはそのまま（必要なら） */
.mh-hub__title{ font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.3rem); margin: 0 0 .25rem; }
.mh-hub__lead{ margin: 0 0 1.25rem; color: #666; }

/* ===== カード本体（画像＋レベル） ===== */
.mh-category{
  box-sizing: border-box;
  width: var(--mh-card-w);         /* ← 固定幅！ */
  padding: 16px;                   /* 変動しないよう固定に */
  border: 2px solid #333;
  border-radius: 12px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* 画像カード */
.mh-category__card{
  width: 100%;
  border: 2px solid #333;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.mh-category__thumb{
  display: block;
  width: 100%;
  height: auto;                    /* ← 伸び暴走を止める */
  object-fit: cover;
  aspect-ratio: 4 / 5;             /* 比率固定（不要なら削除可） */
}

/* レベル群：6列固定のグリッドで必ず1行に6個並ぶ */
.mh-category__games{
  display: grid;
  grid-template-columns: repeat(6, var(--mh-level-diameter));
  gap: var(--mh-level-gap);
  justify-content: center;
  width: 100%;
}

/* レベル丸ボタン（小さめ） */
a.mh-game-link{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--mh-level-diameter);
  height: var(--mh-level-diameter);
  border-radius: 50%;
  background-color: #e11d48;
  color: #fff;
  font-weight: 700;
  font-size: var(--mh-level-font);
  text-decoration: none;
  line-height: 1;
  transition: transform .18s ease, background-color .18s ease;
}
a.mh-game-link:hover{ background-color:#be123c; transform: translateY(-1px); }
a.mh-game-link:active{ background-color:#9f1239; transform: scale(.96); }

/* 状態用（そのまま流用可） */
a.mh-game-link.is-locked{ background:#e5e7eb; color:#9ca3af; pointer-events:none; cursor:not-allowed; position:relative; }
a.mh-game-link.is-locked::after{ content:"🔒"; position:absolute; font-size: .9em; }
a.mh-game-link.is-cleared{ position:relative; box-shadow: inset 0 0 0 2px rgba(255,255,255,.9), 0 0 0 2px #22c55e; }
a.mh-game-link.is-cleared::after{ content:"✓"; position:absolute; bottom:-6px; right:-6px; width:18px; height:18px; border-radius:50%; background:#22c55e; color:#fff; font-size:12px; display:grid; place-items:center; }
a.mh-game-link.is-next{ transform: scale(1.06); box-shadow:0 0 0 3px rgba(59,130,246,.25); }

/* ===== スマホ調整（カード幅は画面に合わせて縮む） ===== */
@media (max-width: 640px){
  :root{
    --mh-card-w: min(92vw, 340px); /* 画面に収める */
    --mh-level-diameter: 36px;     /* 指で押しやすい最小 */
    --mh-level-gap: 8px;
  }
}