/* 再利用する部品だけを置く。ここに書くものの条件は 2 つ：
   ・2 か所以上で使う（1 か所しか使わないものは、その画面の CSS に書く）
   ・値は tokens.css のトークンで書く（16 進数を直書きしない）
   ページ固有の並べ方は base.css、盤やスキンは game.css の担当。 */

/* ---------- カード ---------- */
/* 白い面 + 細い枠 + 大きめの角丸。この 3 点がこのサイトの「箱」の定義 */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 10px;
}
/* 見出しの左に立てる縦棒。h2 の border-left と同じ役割を、
   見出し以外（カードの小見出し）でも使えるようにしたもの */
.card-title {
  display: flex; align-items: center; gap: 7px;
  font-family: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', sans-serif;
  font-size: 13px; font-weight: 700; color: var(--ink);
}
.card-title::before {
  content: ''; width: 3px; height: 14px; border-radius: 2px; background: var(--accent);
}

/* ---------- バッジ ---------- */
.badge {
  display: inline-block;
  background: var(--soft); color: var(--accent);
  border: 1px solid var(--accent-weak); border-radius: var(--radius);
  padding: 2px 9px; font-size: 11.5px; font-weight: 700; white-space: nowrap;
}

/* ---------- 行動喚起ボタン ---------- */
/* 影を 0 4px 0 の実体にして「押せる物」に見せる。押すと沈む。
   寒色の面に対する補色なので、画面の中でここだけ視線を強く引く */
.cta {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; border-radius: 12px;
  background: var(--cta); color: #fff;
  padding: 14px 44px; font-size: 18px; font-weight: 900; letter-spacing: 2px;
  box-shadow: 0 4px 0 var(--cta-edge);
}
.cta:hover { background: var(--cta-hover); }
.cta:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--cta-edge); }

/* ---------- キーキャップ ---------- */
/* 操作説明の「←→」「Space」を物理キーに見せる。
   等幅にしないと 1 文字キーと Space で高さが揃わない */
.keycap {
  display: inline-grid; place-items: center; min-width: 30px;
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px;
  background: var(--surface); padding: 1px 8px; min-width: 34px;
  font-family: 'Share Tech Mono', ui-monospace, Menlo, monospace;
  font-size: 11.5px; color: var(--ink); line-height: 1.3;
}

/* ---------- 順位バッジ ---------- */
/* 上位 3 つだけ色を変える。4 位以下も同じ丸にしておかないと、
   「自分は圏外」という印象が強く出すぎて次を打つ気が失せる */
.rank-badge {
  display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: 50%; background: var(--line); color: var(--surface);
  font-size: 11px; font-weight: 700; line-height: 1;
}
.rank-badge[data-rank="1"] { background: var(--gold); }
.rank-badge[data-rank="2"] { background: var(--silver); }
.rank-badge[data-rank="3"] { background: var(--bronze); }

/* ---------- 節の内側で中身を割るカード ---------- */
/* 節そのものは 1 行 1 つ。そのぶん中身が長くなるので、
   並列に読める要素（コツ、特徴、操作一覧）はここでカードに割る */
.sub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
/* 2 枚しか入らないものは 2 列で固定。auto-fill だと 3 枚目の空き枠ができて、
   カードが痩せたまま右に間が空く */
.sub-grid.is-two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) { .sub-grid.is-two { grid-template-columns: 1fr; } }
.sub-card {
  background: var(--page); border: 1px solid var(--line-soft);
  border-radius: 10px; padding: 14px 16px;
}
.sub-card h3 { margin: 0 0 6px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.sub-card p { margin: 0; font-size: 12.5px; line-height: 1.9; color: var(--sub); }
/* コツは「見出し語＋説明」。見出し語をバッジにすると一覧性が上がる */
.sub-card .tag {
  display: inline-block; margin-bottom: 6px;
  background: var(--soft); color: var(--accent); border-radius: var(--radius);
  padding: 2px 9px; font-size: 11.5px; font-weight: 800;
}
.sub-card ul { margin: 0; padding-left: 1.15em; }
.sub-card li { font-size: 12.5px; line-height: 1.95; color: var(--sub); margin-bottom: 2px; }
.sub-card li b { color: var(--ink); font-weight: 700; }