/* ==========================================================
   軍儀 ルールブック
   墨色の地に、金の見出し。装飾は最小限。外部読み込みなし。
   ========================================================== */

:root {
  --bg:      #0c0b0e;
  --bg-2:    #131217;
  --bg-3:    #191820;
  --line:    #262530;
  --line-2:  #383644;
  --fg:      #f2ede3;
  --fg-2:    #b9b2a6;
  --fg-3:    #837d74;
  --kin:     #d9b344;
  --shu:     #c9553c;

  --c1: #3d86bf;   /* 1段で行ける */
  --c2: #6fb0dd;   /* 2段で増える */
  --c3: #a8d4f2;   /* 3段で増える */

  --serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;

  --maxw: 1100px;
  --pad: 22px;
  --bc: 32px;      /* ためす盤の1マス */
  --r: 6px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--sans); font-size: 16.5px; line-height: 1.95;
  letter-spacing: 0.015em; -webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
a { color: var(--kin); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
b { font-weight: 600; color: #fff; }
:focus-visible { outline: 2px solid var(--kin); outline-offset: 2px; }

#progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 60;
  background: var(--kin); transform-origin: 0 50%; transform: scaleX(0);
}

/* ───── ヘッダー ───── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(12,11,14,0.92); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.bar { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); display: flex; align-items: center; gap: 14px; height: 52px; }
.brand { font-family: var(--serif); font-size: 19px; letter-spacing: 0.28em; color: var(--fg); flex: none; }
.brand:hover { text-decoration: none; }
.tocnav {
  margin-left: auto; display: flex; gap: 1px; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.tocnav::-webkit-scrollbar { display: none; }
.tocnav a { color: var(--fg-2); font-size: 13px; padding: 5px 10px; white-space: nowrap; border-radius: 3px; }
.tocnav a:hover { color: var(--fg); background: rgba(255,255,255,0.05); text-decoration: none; }
.tocnav a.current { color: var(--kin); box-shadow: inset 0 -1.5px 0 var(--kin); }

/* ───── ヒーロー ───── */
.hero { padding: 88px 0 76px; text-align: center; border-bottom: 1px solid var(--line); }
.eyebrow { font-size: 12px; letter-spacing: 0.22em; color: var(--fg-3); margin: 0 0 22px; }
.hero h1 { margin: 0; font-weight: 400; color: var(--fg); }
.h1k {
  display: block; font-family: var(--serif);
  font-size: clamp(60px, 16vw, 108px); letter-spacing: 0.16em; text-indent: 0.16em;
  line-height: 1.05;
}
.h1s {
  display: block; font-family: var(--serif); color: var(--fg-2);
  font-size: clamp(17px, 4.4vw, 21px); letter-spacing: 0.3em; text-indent: 0.3em;
  margin-top: 14px;
}
.lede {
  font-family: var(--serif); font-size: clamp(16px, 4.3vw, 20px); line-height: 2.1;
  color: var(--fg-2); margin: 30px auto 0; max-width: 27em;
}
.cta {
  display: inline-block; margin-top: 38px; padding: 12px 30px;
  border: 1px solid var(--line-2); border-radius: 100px; color: var(--fg);
  font-size: 14.5px; letter-spacing: 0.1em;
}
.cta:hover { text-decoration: none; border-color: var(--kin); color: var(--kin); }

/* ───── セクション ───── */
section { padding: 76px 0; border-top: 1px solid var(--line); }
section:first-child { border-top: 0; }
.snum { font-family: var(--serif); font-size: 13px; letter-spacing: 0.3em; color: var(--kin); margin: 0 0 10px; }
h2 { font-family: var(--serif); font-weight: 400; margin: 0; font-size: clamp(27px, 6.4vw, 38px); letter-spacing: 0.06em; line-height: 1.5; }
.sdesc { color: var(--fg-2); margin: 14px 0 0; font-size: 15.5px; max-width: 40em; }
h3.sub { font-family: var(--serif); font-weight: 400; font-size: 19px; letter-spacing: 0.06em; margin: 48px 0 18px; }

.note { color: var(--fg-3); font-size: 13.5px; line-height: 1.85; margin: 14px 0 0; }
.tip {
  margin: 32px 0 0; padding: 14px 18px; font-size: 14.5px; line-height: 1.9;
  border-left: 2px solid var(--kin); background: rgba(217,179,68,0.06); color: var(--fg-2);
  border-radius: 0 var(--r) var(--r) 0;
}

/* ───── 要点リスト ───── */
.core { list-style: none; counter-reset: c; padding: 0; margin: 40px 0 0; }
.core > li { counter-increment: c; position: relative; padding: 0 0 34px 46px; }
.core > li:last-child { padding-bottom: 0; }
.core > li::before {
  content: counter(c); position: absolute; left: 0; top: 4px;
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2);
  display: grid; place-items: center; font-family: var(--serif); font-size: 13px; color: var(--kin);
}
.core h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(18px, 4.6vw, 21px); margin: 0 0 8px; letter-spacing: 0.04em; line-height: 1.6; }
.core p { margin: 0; color: var(--fg-2); font-size: 15.5px; }

.four { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.four li { background: var(--bg-2); padding: 11px 16px; font-size: 15px; color: var(--fg-2); }
.four b { display: inline-block; min-width: 4.5em; color: var(--kin); font-weight: 500; }

/* ───── 定義リスト ───── */
.deflist { margin: 36px 0 0; padding: 0; border-top: 1px solid var(--line); }
.deflist + .deflist { margin-top: 0; border-top: 0; }
.deflist > div { border-bottom: 1px solid var(--line); padding: 20px 0; }
.deflist dt { font-size: 16.5px; font-weight: 600; color: var(--fg); margin: 0 0 6px; }
.deflist dd { margin: 0; color: var(--fg-2); font-size: 15.5px; line-height: 1.95; }
.deflist.faq > div { display: block; }
.deflist.faq dt { font-weight: 500; color: var(--kin); margin-bottom: 6px; }
.deflist.faq dd a { margin-left: 6px; white-space: nowrap; }
.deflist.tobu dt { font-family: var(--serif); font-weight: 400; }
.deflist.tobu .kan { font-size: 24px; margin-right: 8px; vertical-align: -2px; }

/* ═════ ためす盤（盤・駒えらび・高さを1画面に） ═════ */
.try { margin: 34px auto 0; max-width: 480px; }

.try-label { margin: 0 0 14px; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.try-label .tk { font-family: var(--serif); font-size: 32px; line-height: 1; }
.try-label .ty { font-size: 12.5px; color: var(--fg-3); }
.try-label .tm { flex-basis: 100%; font-size: 15px; color: var(--fg-2); margin-top: 3px; }

.try-tier { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.try-tier > span { font-size: 12.5px; letter-spacing: 0.06em; color: var(--fg-3); }
.try-tier .seg { flex: 1; }
.try-tier .seg button { flex: 1; }

.seg { display: flex; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; flex: none; }
.seg button {
  appearance: none; background: transparent; border: 0; border-right: 1px solid var(--line);
  color: var(--fg-2); font: inherit; font-size: 14px; padding: 8px 16px; min-height: 42px; cursor: pointer;
}
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--kin); color: #16130a; font-weight: 700; }

.fwd, .bwd { display: block; font-size: 11px; letter-spacing: 0.16em; color: var(--fg-3); text-align: center; }
.fwd { margin-bottom: 7px; }
.bwd { margin-top: 8px; }
.bwd b { color: var(--kin); font-size: 14px; }

.tryboard {
  display: grid; grid-template-columns: repeat(9, var(--bc)); grid-auto-rows: var(--bc);
  gap: 1px; background: var(--line); padding: 1px;
  border: 1px solid var(--line-2); border-radius: 3px; width: max-content; margin: 0 auto;
}
.bcell {
  appearance: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  background: #17161d; position: relative; transition: background 0.12s;
}
.bcell:hover { background: #23222c; }
.bcell.t1 { background: var(--c1); }
.bcell.t2 { background: var(--c2); }
.bcell.t3 { background: var(--c3); }
.bcell.inf { background: var(--shu); }
.bcell.jump::after {
  content: ""; position: absolute; inset: 24%; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.8);
}
.bcell.here { background: radial-gradient(circle at 34% 28%, #f8eec9, #d9b344 62%, #8f6f16); }
.bcell .bpiece {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--serif); font-size: calc(var(--bc) * 0.56); color: #17140b; line-height: 1;
}

/* 駒をえらぶボタン */
.chips { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 16px; }
.chips button {
  appearance: none; aspect-ratio: 1; min-height: 44px; padding: 0; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r);
  font-family: var(--serif); font-size: 21px; color: var(--fg); line-height: 1;
  display: grid; place-items: center; transition: background 0.12s, border-color 0.12s;
}
.chips button:hover { background: var(--bg-3); border-color: var(--line-2); }
.chips button.sp { color: var(--shu); }
.chips button[aria-pressed="true"] {
  background: radial-gradient(circle at 34% 28%, #f8eec9, #d9b344 62%, #b78f1d);
  border-color: #d9b344; color: #17140b;
}

.legend { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 5px 13px; font-size: 11.5px; color: var(--fg-3); justify-content: center; }
.legend i { width: 13px; height: 13px; border-radius: 2px; display: inline-block; vertical-align: -2px; margin-right: 6px; }
.legend .c1 { background: var(--c1); } .legend .c2 { background: var(--c2); }
.legend .c3 { background: var(--c3); } .legend .ci { background: var(--shu); }
.legend .cj { background: #23222c; border: 1px solid var(--line-2); position: relative; }
.legend .cj::after { content: ""; position: absolute; inset: 2px; border: 1px solid rgba(255,255,255,0.75); border-radius: 50%; }

/* 14種まとめて */
.all { margin-top: 36px; border-top: 1px solid var(--line); }
.all summary { cursor: pointer; padding: 18px 0; font-size: 15px; color: var(--kin); list-style: none; }
.all summary::-webkit-details-marker { display: none; }
.all summary::before { content: "＋ "; }
.all[open] summary::before { content: "－ "; }
.allgrid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); padding-bottom: 12px; }
.allitem { margin: 0; }
.mini {
  display: grid; grid-template-columns: repeat(9, 15px); grid-auto-rows: 15px; gap: 1px;
  background: var(--line); padding: 1px; border: 1px solid var(--line-2); border-radius: 2px;
  width: max-content; margin: 0 auto;
}
.mini .mcell { background: #17161d; position: relative; }
.mini .mcell.t1 { background: var(--c1); } .mini .mcell.t2 { background: var(--c2); }
.mini .mcell.t3 { background: var(--c3); } .mini .mcell.inf { background: var(--shu); }
.mini .mcell.origin { background: radial-gradient(circle at 34% 28%, #f8eec9, #d9b344 62%, #8f6f16); display: grid; place-items: center; font-family: var(--serif); font-size: 10px; color: #17140b; }
.mini .mcell.jump::after { content: ""; position: absolute; inset: 22%; border: 1px solid rgba(255,255,255,0.8); border-radius: 50%; }
.allitem figcaption { margin-top: 9px; font-size: 12px; line-height: 1.7; color: var(--fg-3); }
.allitem figcaption b { font-family: var(--serif); font-size: 17px; font-weight: 400; color: var(--fg); margin-right: 6px; }
.allitem figcaption small { font-size: 11px; }
.allitem figcaption span { display: block; color: var(--fg-2); margin-top: 2px; }
.allitem.sp figcaption b { color: var(--shu); }

/* ───── 3コマ図 ───── */
.steps3 { margin: 36px 0 0; padding: 24px 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); }
.steps3 figcaption { font-family: var(--serif); font-size: 17px; margin-bottom: 22px; letter-spacing: 0.04em; }
.steps3 .row { display: flex; align-items: flex-end; justify-content: center; gap: 6px; }
.steps3 .col { flex: 1 1 0; min-width: 0; text-align: center; }
.stack { display: flex; flex-direction: column-reverse; align-items: center; gap: 3px; min-height: 124px; justify-content: flex-start; }
.disc { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: 17px; box-shadow: 0 3px 7px rgba(0,0,0,0.5); }
.disc.b { background: radial-gradient(circle at 34% 28%, #605b6c, #24222c 72%); color: #f2ede3; border: 1px solid #4a4655; }
.disc.w { background: radial-gradient(circle at 34% 28%, #fdfaf2, #d6cfbe 72%); color: #1a1720; border: 1px solid #bab2a2; }
.steps3 .col p { margin: 12px 0 0; font-size: 12px; line-height: 1.65; color: var(--fg-3); }
.steps3 .col p b { display: block; color: var(--kin); font-weight: 400; font-size: 12px; letter-spacing: 0.08em; margin-bottom: 2px; }
.arw { color: var(--line-2); font-size: 16px; padding-bottom: 46px; }
.fnote { margin: 22px 0 0; font-size: 14px; color: var(--fg-2); line-height: 1.9; }

/* ───── 初期配置 ───── */
.core.first { margin-bottom: 8px; }
.setups { display: grid; gap: 26px; grid-template-columns: 1fr; margin-top: 26px; }
.setup h4 { font-family: var(--serif); font-weight: 400; font-size: 15px; margin: 0 0 14px; color: var(--fg-2); letter-spacing: 0.06em; }
.swrap { overflow-x: auto; }
.sboard {
  display: grid; grid-template-columns: repeat(9, 32px); grid-auto-rows: 32px; gap: 1px;
  background: #2b2620; padding: 1px; border: 1px solid #4b4030; border-radius: 3px; width: max-content;
}
.scell { background: #1a1821; display: grid; place-items: center; }
.scell.zone-b { background: #221e2a; }
.scell.zone-w { background: #1d1b24; }
.stone { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: 12px; line-height: 1; }
.stone.black { background: radial-gradient(circle at 34% 28%, #605b6c, #24222c 72%); color: #f2ede3; border: 1px solid #4a4655; }
.stone.white { background: radial-gradient(circle at 34% 28%, #fdfaf2, #d6cfbe 72%); color: #1a1720; border: 1px solid #bab2a2; }
.scap { font-size: 12.5px; color: var(--fg-3); margin: 14px 0 0; line-height: 1.9; }

/* ───── 難易度 ───── */
.levels { display: grid; gap: 12px; grid-template-columns: 1fr; }
.levels article { border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; background: var(--bg-2); }
.levels h4 { font-family: var(--serif); font-weight: 400; font-size: 19px; margin: 0 0 10px; letter-spacing: 0.06em; }
.levels ul { list-style: none; padding: 0; margin: 0; font-size: 14px; color: var(--fg-2); line-height: 1.95; }
.levels li::before { content: "・"; color: var(--fg-3); }
.levels .rec { margin: 12px 0 0; font-size: 12px; color: var(--kin); letter-spacing: 0.08em; }

/* ───── フッター ───── */
footer { border-top: 1px solid var(--line); padding: 48px 0 64px; color: var(--fg-3); font-size: 13.5px; }
footer h2 { font-family: var(--serif); font-size: 15px; color: var(--fg-2); margin: 0 0 12px; letter-spacing: 0.1em; }
footer ul { margin: 0 0 18px; padding-left: 1.2em; line-height: 2; }
footer p { line-height: 1.9; max-width: 46em; margin: 0 0 10px; }

/* ═════ 画面が広いとき ═════ */
@media (min-width: 780px) {
  :root { --pad: 32px; --bc: 46px; }
  .hero { padding: 116px 0 100px; }
  section { padding: 96px 0; }
  .sdesc { font-size: 16px; }
  .core { margin-top: 48px; }
  .core > li { padding-left: 56px; padding-bottom: 40px; }
  .four { grid-template-columns: repeat(2, 1fr); }
  .deflist { display: grid; grid-template-columns: 1fr; }
  .deflist > div { display: grid; grid-template-columns: 15em 1fr; gap: 0 32px; padding: 22px 0; }
  .deflist dt { margin: 0; }
  .try { margin: 34px 0 0; max-width: 520px; }
  .chips button { font-size: 24px; }
  .setups { grid-template-columns: 1fr 1fr; }
  .sboard { grid-template-columns: repeat(9, 34px); grid-auto-rows: 34px; }
  .stone { width: 28px; height: 28px; font-size: 13px; }
  .levels { grid-template-columns: repeat(4, 1fr); }
  .steps3 { padding: 28px; }
  .steps3 .row { gap: 10px; }
  .disc { width: 44px; height: 44px; font-size: 18px; }
  .steps3 .col p { font-size: 12.5px; }
}

@media (max-width: 779px) {
  .tocnav a { font-size: 12.5px; padding: 5px 8px; }
  .try-top { margin-bottom: 14px; }
  .disc { width: 36px; height: 36px; font-size: 15px; }
  .stack { min-height: 112px; }
  .arw { padding-bottom: 40px; font-size: 14px; }
  .steps3 .col p { font-size: 11px; }
}

@media print {
  body { background: #fff; color: #111; }
  .topbar, #progress, .cta, .seg { display: none; }
  .all[open] .allgrid { display: grid; }
}