/* Archipela ゲーム — サービス個別スタイル
 * ブランド共通のデザインシステム（kit.css）を読み込み、ゲーム紹介ページ固有の
 * コンポーネント（ゲーム埋め込みフレーム・操作説明・ライセンス表記）を追加する。 */
@import url("../../shared/kit.css");

:root {
  --primary: var(--ks-indigo);
  --text: var(--ks-ink);
  --text-sub: var(--ks-ink-sub);
  --border: var(--ks-border);
  --radius: var(--ks-radius);
  --shadow: var(--ks-shadow);
}

/* ---------- ページ共通 ---------- */
.tool-main { padding: 40px 0 56px; }
.tool-head { text-align: center; margin-bottom: 24px; }
.tool-head h1 { font-size: clamp(1.5rem, 4vw, 1.9rem); font-weight: 800; margin-bottom: 8px; }
.tool-head p { color: var(--ks-ink-sub); max-width: 660px; margin: 0 auto; }

/* パンくず */
.breadcrumb { font-size: 0.82rem; color: var(--ks-ink-sub); margin-bottom: 6px; }
.breadcrumb a { color: var(--ks-ink-sub); }
.breadcrumb a:hover { color: var(--ks-indigo); }

/* ---------- ゲーム埋め込み ---------- */
.game-embed {
  background: var(--ks-card); border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius); box-shadow: var(--ks-shadow);
  overflow: hidden; margin: 0 auto 20px; max-width: 520px;
}
.game-embed iframe {
  display: block; width: 100%; border: 0; background: #0b1020;
}
.game-frame-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; background: var(--ks-card-2); border-bottom: 1px solid var(--ks-border);
  font-size: 0.82rem; color: var(--ks-ink-sub);
}
.game-frame-bar .fullscreen-btn {
  background: none; border: 1px solid var(--ks-border); border-radius: 8px;
  padding: 4px 12px; font-size: 0.8rem; font-weight: 700; color: var(--ks-ink);
  cursor: pointer; font-family: inherit;
}
.game-frame-bar .fullscreen-btn:hover { background: var(--ks-indigo-soft); }

/* ---------- 操作説明 ---------- */
.controls-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-top: 6px;
}
.control-card {
  background: var(--ks-card-2); border: 1px solid var(--ks-border);
  border-radius: 12px; padding: 14px 16px;
}
.control-card h3 { font-size: 0.95rem; margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
.control-card ul { margin: 0; padding-left: 1.1em; font-size: 0.88rem; color: var(--ks-ink-sub); line-height: 1.9; }
.kbd {
  display: inline-block; font-weight: 700; font-size: 0.82rem;
  border: 1px solid var(--ks-border); border-bottom-width: 2px;
  border-radius: 6px; padding: 1px 8px; background: var(--ks-card);
  color: var(--ks-ink); margin: 0 1px;
}

/* ---------- ライセンス表記 ---------- */
.license-box {
  background: var(--ks-indigo-soft); border: 1px solid var(--ks-border);
  border-radius: 12px; padding: 14px 16px; font-size: 0.86rem;
  color: var(--ks-ink-sub); margin: 18px 0;
}
.license-box strong { color: var(--ks-ink); }
.license-box a { color: var(--ks-indigo); word-break: break-all; }

/* ---------- カードのバッジ（index） ---------- */
.tool-card .license-badge {
  display: inline-block; font-size: 0.68rem; font-weight: 700; margin-top: 8px;
  color: var(--ks-indigo); background: var(--ks-indigo-soft);
  border-radius: 999px; padding: 3px 10px;
}

@media (max-width: 600px) {
  .tool-head h1 { font-size: 1.4rem; }
}