/* ページの骨格。設計案 v5（水色）の構造をそのまま実装する。
   値は tokens.css のトークンで書き、この層では 16 進数を直書きしない。

   担当範囲：
   ・サイト共通の枠（ヘッダー / タイトル行 / フッター）
   ・プレイ区の 3 カラム（シンプル皮膚のときだけ使う）
   ・本文の 2 カラムカード
   レトロ機の筐体は game.css が持つ。あちらは「机の上の物体」の絵なので
   このレイアウト体系の外にある。 */

/* ---------- 共通の器 ---------- */
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: 24px; width: 100%; }

/* ---------- ヘッダー ---------- */
/* 2026-08-30：設計稿 2a。全幅の白帯をやめ、看板そのものを「机の上に置いた
   一枚の札」にする。地は敷かない —— 下の舞台（壁と木の机）を透かすため */
.site-header { background: transparent; border-bottom: 0; position: relative; z-index: 2; }
/* 上は 14px。26px あると看板が画面の中ほどまで下がって、
   その下の見出し行との間が詰まって見える（看板と見出しが 1 かたまりに読める）*/
.header-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 24px 0; min-height: 0; }
/* ロゴ・名前・ナビを収める丸ピル */
.header-pill {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  background: var(--surface);
  border: var(--stroke-w) solid var(--stroke); border-radius: var(--radius-pill);
  padding: 6px 20px 6px 8px;
  box-shadow: var(--shadow-solid);
}
.brand { display: flex; align-items: center; gap: 12px; margin: 0; white-space: nowrap; }
/* マスコット枠。中身は SVG になったので、丸い地色は要らない ——
   輪郭線で描いた絵は、それ自体が既に「切り抜かれた物」として読める */
.brand-mark { display: block; flex: none; line-height: 0; }
.brand-mark svg { display: block; }
.brand-word b {
  display: block; font-family: 'M PLUS Rounded 1c', 'Zen Maru Gothic', sans-serif;
  font-weight: 900; font-size: 21px; letter-spacing: .5px; line-height: 1; color: var(--ink);
}
.brand-word .rule { display: none; }

/* 横スクロールにはしない。overflow を付けると引き出し（.nav-group-menu）が
   その中に閉じ込められて切れるうえ、横棒を消してあるぶん
   「隠れていること」自体が見えなかった。溢れたら折り返す */
/* 項目の左右の余白は窓の幅で詰める：960px 以上は 14px、狭くなるほど減って 8px で止まる。
   ⚠ 2026-09-16「対戦」を足したら 1024px でナビが 2 行に折れた（ヘッダー 77px → 115px）。
     1 行に要る幅は 376 ＋ 14 × 余白（項目 7 つ・札の文字 312px）。
     2026-09-17 ロゴ横の「あそぼ ＋ ピコピコ」を外してナビの場所が広がり、余白 14px のままでも 窓 940px まで 1 行に入る
     （それまでは 1120px から詰めていて、1024px では 8px まで縮んでいた）。
     Windows の縦スクロール棒（約 15px）が窓の幅を食う分を見て、960px から詰める。
     項目を足したら、どの幅で折れるかを測り直してから式を直すこと */
.site-nav {
  --nav-pad-x: clamp(8px, calc(14px - (960px - 100vw) * .075), 14px);
  display: flex; flex-wrap: wrap; gap: 6px; margin-left: 10px; min-width: 0;
}
/* 現在地だけが輪郭を持つ。他の項目にも透明の輪郭を敷いておくのは、
   選択が移ったときに 4px ぶん背が伸びて行が跳ねるのを止めるため
   （設計稿は現在地にしか border を書いていないが、あれは静止画なので跳ねない）*/
.site-nav a {
  flex: none; border: var(--stroke-w) solid transparent; border-radius: var(--radius-pill);
  padding: 5px var(--nav-pad-x, 14px);
  font-weight: 700; font-size: 13px; color: var(--muted); white-space: nowrap;
}
.site-nav a:hover { background: var(--soft); color: var(--ink); }
.site-nav a[aria-current="page"] {
  background: var(--brand-red); border-color: var(--stroke); color: var(--brand-body); font-weight: 800;
}

/* ---------- 技を畳む 1 項目 ---------- */
/* 技の解説は今後増える。平らに並べると本数ぶん幅が要るが、
   畳んでおけば何本足してもナビの幅は変わらない */
.nav-group { position: relative; flex: none; }
.nav-group-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  border: var(--stroke-w) solid transparent; border-radius: var(--radius-pill); padding: 5px var(--nav-pad-x, 14px);
  background: transparent; color: var(--muted);
  font-family: inherit; font-weight: 700; font-size: 13px; white-space: nowrap;
  cursor: pointer;
}
.nav-group-toggle:hover { background: var(--soft); color: var(--ink); }
.nav-group-toggle svg { transition: transform .18s; }
.nav-group-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
/* 開いている技を見ているあいだは、畳んだ親のほうに印を出す ——
   選択中の項目が引き出しの中に隠れていると、いまどこに居るのか分からない */
.nav-group:has([aria-current="page"]) .nav-group-toggle { background: var(--brand-red); border-color: var(--stroke); color: var(--brand-body); font-weight: 800; }

.nav-group-menu {
  display: none;
  position: absolute; z-index: 5; top: calc(100% + 6px); left: 0;
  margin: 0; padding: 6px; list-style: none; min-width: 158px;
  background: var(--surface); border: var(--stroke-w) solid var(--stroke); border-radius: var(--radius-inner);
  box-shadow: var(--shadow-solid);
}
/* 釦と引き出しのあいだの 6px を、透明な帯で渡してつなぐ。
   これが無いと、隙間を通るあいだマウスは釦にも引き出しにも乗っておらず、
   .nav-group:hover が切れて引き出しが消える —— 下へ動かした瞬間に
   目標が無くなるので、そもそも辿り着けない */
.nav-group-menu::before {
  content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 8px;
}
.nav-group-toggle[aria-expanded="true"] + .nav-group-menu { display: block; }
/* 指の端末では hover が「触れたまま」になって閉じられなくなるので、
   マウスのある環境にだけ開かせる。指と鍵盤は釦を押す */
@media (hover: hover) and (pointer: fine) {
  .nav-group:hover .nav-group-menu,
  .nav-group:focus-within .nav-group-menu { display: block; }
}
/* ---------- PC は遊技を平らに 2 本並べる ----------
   ⚠ 畳むのはスマホだけ（站長判断 2026-08-31）。狭い画面では 4 本を並べる幅が
     無いので「ゲーム▾」へ畳むが、PC は幅に余裕があり、畳むと
     「開いてみないと何があるか分からない物」が 1 つ増えるだけになる。
     ⚠ コツは PC でも畳んだまま —— あちらは講座が増えるたびに本数が伸びる。
   仕掛けは display: contents。群の箱と ul を溶かして、中の <a> を
   ナビの直接の子と同じ並びに置く（HTML は 1 つのまま）*/
@media (min-width: 561px) {
  .nav-group:has(#nav-play) { display: contents; }
  .nav-group:has(#nav-play) > .nav-group-toggle { display: none; }
  #nav-play {
    display: contents;
    position: static; margin: 0; padding: 0; min-width: 0;
    background: none; border: 0; box-shadow: none;
  }
  #nav-play::before { display: none; }   /* 引き出しへ渡す透明の橋。平らなら要らない */
  #nav-play li { display: contents; }
  /* 見た目は .site-nav a とそろえる（あちらは直接の子だけを想定していない） */
  #nav-play a {
    display: inline-flex; align-items: center;
    flex: none; border: var(--stroke-w) solid transparent; border-radius: var(--radius-pill);
    padding: 5px var(--nav-pad-x, 14px);
    font-weight: 700; font-size: 13px; color: var(--muted); white-space: nowrap;
  }
  #nav-play a:hover { background: var(--soft); color: var(--ink); }
  #nav-play a[aria-current="page"] {
    background: var(--brand-red); border-color: var(--stroke); color: var(--brand-body); font-weight: 800;
  }
  /* NEW 札は項目の右上の角へ貼る。文字の後ろに並べると 2 本ぶん（約 64px）ナビが伸び、
     1024px 幅でナビが 2 行に折れてヘッダーが 77px → 115px に跳ねた（2026-09-13 実測）。
     角に浮かせれば項目の幅は変わらない。スマホの縦の一覧（引き出し・面）は幅に余裕があるので後ろに並べたまま */
  #nav-play a { position: relative; }
  #nav-play .new-badge { position: absolute; top: -8px; right: -7px; margin: 0; z-index: 1; }
}

.nav-group-menu a {
  display: block; border-radius: 8px; padding: 8px 12px;
  font-size: 13px; font-weight: 700; color: var(--sub); white-space: nowrap;
}
.nav-group-menu a:hover { background: var(--soft); color: var(--accent); }
/* いま開いている項目は、触れても塗りを保つ。この 1 行が無いと
   .site-nav a[aria-current] と詳細度が並ぶぶん、後から書いた上の
   :hover が勝ってしまい、撫でた瞬間だけ選択が外れたように見える */
.nav-group-menu a[aria-current="page"] { background: var(--brand-red); color: var(--brand-body); }
.nav-group-menu a[aria-current="page"]:hover { background: var(--brand-red); color: var(--brand-body); }

.header-actions { margin-left: 0; display: flex; gap: 8px; flex: none; }

/* ---------- PC は看板を帯の中央に置く ----------
   本文の柱が中央ぞろえなのに看板だけ左端にあると、頁に軸が 2 本あるように
   見える（站長指摘：左に大きな空きが残る）。
   ⚠ 3 列にすること。space-between のままだと、右の入口が無い頁では
     看板が左へ寄って揃わない。中央の列に看板、右の列に入口、左は空き。
   ⚠ PC だけ。スマホの帯は別の組み方（@media max-width:560px）で、
     あちらは触らない —— 站長から明示 */
@media (min-width: 561px) {
  .header-inner { display: grid; grid-template-columns: 1fr auto 1fr; }
  .header-pill { grid-column: 2; }
  .header-actions { grid-column: 3; justify-self: end; }

  /* 題名の行は机の左端にそろえる（站長要望）。
     机の左端 ＝ (視口 − 版面の幅 × 倍率) ÷ 2。
     版面の幅と倍率は head の見積もり（--box-w-boot / --scale-boot）で
     最初の描画から分かるので、CSS だけで置ける。

     ⚠ JS で寄せないこと。読み込まれてから padding を足す作り方では、
       一度左端に描いてから右へ跳ぶのが見える（站長報告：頁を移るたび跳ぶ）。
     ⚠ 机を敷かない頁（講座・法務）は --box-w-boot が無いので当て値も置かない
       —— max() の第 1 引数（既定の 24px）がそのまま効く
     右も同じ値を取る：行の右端に置く「今日の全国 1 位」の札（ui/rank-ticker.js）を机の右端にそろえるため */
  .title-row {
    padding-inline: max(24px, calc(
      (100vw - var(--box-w-boot, 0) * 1px * var(--scale, var(--scale-boot, .78))) / 2
      - (100vw - min(1200px, 100vw)) / 2
    ));
  }
}
/* 設計稿の「🏆 ランキング」札と同じ作り。文字の札を図記号 1 つに詰めたもので、
   淡黄の地・2px の輪郭・実体影の 3 点は札と共通にする */
.icon-button {
  display: grid; place-items: center; width: 36px; height: 36px;
  border: var(--stroke-w) solid var(--stroke); border-radius: var(--radius-pill);
  background: var(--soft); color: var(--ink); line-height: 1;
  box-shadow: 0 3px 0 var(--stroke);
}
.icon-button:hover { background: var(--gold); }
.icon-button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--stroke); }
/* 狭い画面だけの部品。既定は隠す。
   ⚠ 必ず .icon-button より後に置くこと —— ハンバーガーは
   class="icon-button mobile-menu-toggle" で、どちらも単一クラス（同じ詳細度）。
   先に書くと後から来る .icon-button の display: grid に負けて、
   PC でもハンバーガーが出る（実際そうなっていた）*/
.mobile-menu-toggle, .mobile-rank-link { display: none; }
/* ブランドの七色帯。og 図の下辺の色帯をそのまま持つ。
   ⚠ 中身は tokens の --strip-1〜7 で、盤のミノ淡色とは別系統 ——
   8px の細帯では淡色は色として立たず、灰色の帯に見える */
.color-strip { height: 8px; display: flex; }
.color-strip i { flex: 1; }
.color-strip i:nth-child(1) { background: var(--strip-1); }
.color-strip i:nth-child(2) { background: var(--strip-2); }
.color-strip i:nth-child(3) { background: var(--strip-3); }
.color-strip i:nth-child(4) { background: var(--strip-4); }
.color-strip i:nth-child(5) { background: var(--strip-5); }
.color-strip i:nth-child(6) { background: var(--strip-6); }
.color-strip i:nth-child(7) { background: var(--strip-7); }

/* ---------- タイトル行 ---------- */
/* 縦は盤の取り分。ここを 1px 削るぶんだけ盤が 0.5px 広くなる（1:2 なので）*/
/* この行は class="wrap title-row" で、.wrap の width:100% を継いでいる ——
   ここへ丸ピルを当てると 1200px の帯になってしまうので、札にするのは
   H1 そのもの（下の .title-row h1）。行のほうは器のまま、高さだけ 6px 詰める */
/* ⚠ position/z-index が要る。舞台（.game-section::before）は上へ 140px はみ出して
   この行の背後まで景色を通しているが、あちらは z-index:0 の配置済み要素なので、
   何も指定しないこの行（z-index:auto の非配置要素）より前に描かれてしまう ——
   実際それで H1 が舞台の下に沈んで見えなくなった */
/* 看板から 16px 離す。4px だと看板の丸ピルに貼り付いて、
   「ナビの 2 段目」に見えてしまう —— ここは別の階層の見出し */
.title-row { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; flex-wrap: wrap; padding-top: 16px; margin-bottom: 4px; }
/* 視口の高さで見出しを縮める規則は撤去した。ここが 900px を境に高さを変えると、
   head で初回描画の倍率を見積もるときの定数（舞台の上端 100px）が狂う。
   稼げるのは盤の高さ 3px ほどで、跳ねて見えるのと引き換えにする価値がない */
/* 設計稿 2a に H1 は無い（あちらは看板と遊技区だけ）。だが主要キーワードなので
   消せないので、舞台に浮いた文字列ではなく「壁に掛けた標札」にする ——
   ヘッダーの札と同じ作り（白地・2px の輪郭・実体影）にすることで、
   多い 1 行が異物ではなく場所の一部として読める */
.title-row h1 {
  margin: 0; font-size: 18px; font-weight: 900; color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 15px 4px 11px;
  background: var(--surface); border: var(--stroke-w) solid var(--stroke);
  border-radius: var(--radius-pill); box-shadow: 0 2px 0 var(--stroke);
  font-family: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', sans-serif;
}
.title-row h1::before { content: ''; display: inline-block; width: 4px; height: 18px; border-radius: var(--radius-pill); background: var(--brand-red); }
.title-badges { display: flex; gap: 8px; align-items: center; }
.play-count { margin-left: auto; font-size: 12px; color: var(--muted); }
.play-count b { color: var(--ink); }

/* ---------- プレイ区（シンプル皮膚）---------- */
/* 3 カラムの格子そのものは game.css の [data-skin="plain"] .lcd が持つ
   （同じ DOM を皮膚で組み替えるため）。ここは柱の中身の積み方だけ */
.play-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ---------- 本文カード ---------- */
/* 節は 1 行 1 つ。横に 2 つ並べると、左右で話題が飛んで読み順が壊れる。
   分けられる中身は節の「内側」でカードに割る（下の .sub-grid）*/
/* カードの幅は版面いっぱいのまま。上の遊技区と横幅をそろえないと、
   カードの左右の端が段違いになって、そこだけ落ち込んで見える。
   本文の行長は --measure が中で決めるので、ここでは絞らない */
/* 本文の柱は --measure（読み行の幅）＋カードの余白ぶんに絞って中央へ。
   1200px のまま流すとカードの右半分が空く。遊技区より狭くなるが、
   遊技区は中央寄せなので中心軸は揃う */
/* ⚠ scroll-margin-top が要る。首屏の「あそび方を見る」から #content へ飛ぶと、
   この要素の上辺が視口の上辺にそろう —— ところが節の見出しは押し出し札で、
   器から 14px 外へ出ているので、そのぶん画面の外へ切れて頭が欠ける。
   56 = 札のはみ出し 14 ＋ 上に残す余白 42。固定値なのでどの画面幅でも同じに効く。

   ⚠ margin-top も同じ 56 にすること。この 2 つが揃うと、飛んだあとの
   視口の上辺が首屏の下端とちょうど重なる ——
     飛び先 = 内容区の上辺 − scroll-margin-top
            = (首屏の下端 + margin-top) − scroll-margin-top
            = 首屏の下端
   揃っていないと差のぶんだけ首屏が残り、机の帯と「あそび方を見る」の札が
   画面の上に写り込む（実際 28 / 56 でずれていて、机が 28px 覗いていた）*/
/* ⚠ 隙間は「札の出っ張り 14px」を足して決めること。節の見出しは器の縁より
   14px 外へ出る札なので、gap: 16px だと見た目の空きが 2px しか残らず、
   札が上の節に貼り付いて見える（站長指摘）。30 − 14 ＝ 16px を残す */
/* ⚠ 下にも余白を持たせること。上（56px）だけ書いてあったので、
   最後の節がフッターの罫線にぴたり接していた（全頁で起きていた・站長報告・2026-09-04）*/
.content-grid { display: grid; grid-template-columns: 1fr; gap: 30px; margin-top: 56px; margin-bottom: 56px; max-width: calc(var(--measure) + 100px); margin-inline: auto; scroll-margin-top: 56px; }
/* 見出しの標の色は節ごとに変える。全部同じ青だと 8 節が一続きに見えて、
   どこまでが 1 つの話題なのか目で切れない */
.content-section {
  position: relative;
  background: var(--surface); border: var(--stroke-w) solid var(--stroke);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  /* 上を 28px 取るのは、見出しが器の縁へ噛ませた札になって外へ出るから
     （設計稿 5a の実値）。ここを詰めると札が本文の 1 行目に重なる */
  padding: 28px 26px 20px;
  width: auto; margin: 0;
  /* グリッド項目の既定は min-width: auto ＝「中身の min-content より
     狭くならない」。表を入れた節はこれのせいで縮めなくなり、375px の
     画面でカードが 473px に広がってページごと横あふれした。
     .table-wrap の overflow-x はカードが縮んで初めて効く */
  min-width: 0;
}
/* 見出しは器の上辺に噛ませた札。縦棒の見出しから置き換えたもので、
   これが「区画＝面」を「区画＝箱」に変える一手（設計稿 5a）。
   absolute にしても DOM 上は h2 のままなので、見出しの階層は崩れない */
.content-section h2 {
  position: absolute; top: -14px; left: 18px; z-index: 1;
  margin: 0; padding: 3px 16px; border: var(--stroke-w) solid var(--stroke);
  border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 900; color: var(--ink);
  font-family: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', sans-serif;
  background: var(--mino-i);
}
/* 札の地色は節ごとに回す。同じ色で通すと節の切れ目が目で拾えない ——
   4 色で回すのは設計稿 5a（青→紫→緑→赤）の並びに合わせたため */
.content-section:nth-of-type(4n+2) h2 { background: var(--mino-t); }
.content-section:nth-of-type(4n+3) h2 { background: var(--mino-s); }
.content-section:nth-of-type(4n) h2 { background: var(--mino-z); }
.content-section h3 { margin: 14px 0 4px; font-size: 14px; color: var(--ink); }
/* 本文 15px / 1.95 は設計稿 5a の実値。行長を止めているのは --measure なので、
   字を 1px 上げても 1 行の字数は変わらない（幅で止めているぶんが縮む）*/
.content-section p { margin: 0 0 10px; color: var(--sub); font-size: 15px; line-height: 1.95; text-wrap: pretty; text-align: justify; }
.content-section p:last-child { margin-bottom: 0; }
.content-section ul { margin: 0; padding-left: 1.2em; }
.content-section li { color: var(--sub); font-size: 15px; line-height: 1.95; margin-bottom: 4px; }
/* 1 行の長さを止める。1200 幅いっぱいに流すと 13px の日本語で 1 行 85 字になり、
   行末から行頭へ目が戻れず「字が小さくて詰まっている」と読まれる —— 実際、
   講座ページ（60 字で止めてある）を出したあと、既存ページだけ小さく見えた。
   止めるのは文の塊だけ。図やカードは横に広いままのほうが収まりが良い */
/* 読み行の幅は 1 か所（--measure）で持つ。表も注記も同じ幅で止める ——
   中身はどれも文字なので、片方だけ外れると同じ節に 2 つの版面幅が同居する */
.content-section > p,
.content-section > ul,
.content-section > ol,
.content-section > .table-wrap,
.content-section > .table-note,
.content-section > details { max-width: var(--measure); }


.faq-section details { padding: 10px 4px; border-bottom: var(--stroke-w) dashed var(--line); }
.faq-section details:last-of-type { border-bottom: 0; }
.faq-section summary { cursor: pointer; font-weight: 700; font-size: 14.5px; color: var(--ink); font-family: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', sans-serif; }
.faq-section details p { margin-top: 8px; font-size: 14px; line-height: 1.9; }

/* ---------- 関連ゲーム ---------- */
/* .related は content-grid の 1 枚として置くので、余白は grid の gap に任せる */
/* この区画は class="content-section related" なので、器も見出しの札も
   上の .content-section がすでに与えている。ここで枠や札を書き足すと
   同じ宣言が 2 か所に増えるだけ —— 札の地色も 4 色の巡りに任せる
   （設計稿 5a の関連ゲームは枠無しの 2 枚組だが、こちらは h2 を持つので
   他の節と同じ「札のある箱」にそろえたほうが列として乱れない）*/
.related { margin-top: 0; }
/* カードの外に置く導入文も読み行の幅で止める。1200px いっぱいに流すと 1 行 80 字を超える */
.related > p { max-width: var(--measure); font-size: 15px; line-height: 1.95; text-align: justify; margin: 0 0 12px; color: var(--sub); }
/* 設計案は 4 列。ゲームが 4 本に満たないうちは auto-fill で列幅を保つ ——
   auto-fit だと 1 本のとき 1 枚が 1200px に伸びて、カードではなく帯になる */
.game-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; margin: 0; }
/* 設計案は「アイコン枠 + 名前と説明の縦組み」。名前と説明を横に並べると
   名前側が潰れて 3 行に折れる */
/* 器の中に入る箱なので、輪郭は淡いほう（--line）で引く。
   濃い輪郭を入れ子にすると線が二重に見えて、どちらが箱の縁か分からなくなる */
.game-links a {
  display: flex; gap: 14px; align-items: center;
  background: transparent; border: var(--stroke-w) solid var(--line);
  border-radius: var(--radius-inner); padding: 16px 18px;
}
/* アイコン枠。ゲームごとに地色を変えて、一覧の中で見分けがつくようにする。
   ここだけは輪郭を濃くする —— 絵記号は「箱の中の物」なので、
   箱の縁ではなく物の輪郭として読ませたい（設計稿 5a も同じ作り）*/
.game-link-icon {
  flex: none; display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: var(--radius-inner); font-size: 24px; line-height: 1;
  background: var(--mino-s); border: var(--stroke-w) solid var(--stroke);
}
.game-links a[data-game="sand"] .game-link-icon { background: var(--mino-o); border-color: var(--stroke); }
.game-links .game-link-text { flex: 1; min-width: 0; }
.game-links a:hover { border-color: var(--stroke); background: var(--soft); }
.game-links b { display: block; font-size: 15px; font-weight: 900; color: var(--ink); white-space: nowrap; font-family: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', sans-serif; }
.game-links small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); line-height: 1.6; }

/* ---------- フッター ---------- */
.site-footer {
  margin-top: auto; background: var(--footer-bg); border-top: var(--stroke-w) solid var(--stroke);
  padding: 0; display: block;
}
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 10px 28px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.footer-inner > div { display: flex; gap: 18px; font-size: 11px; font-weight: 700; color: var(--muted); flex-wrap: wrap; }
.site-footer span { font-size: 11px; font-weight: 700; color: var(--muted); }
.site-footer a { font-size: 11px; font-weight: 700; color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }
/* リンクと同じ見た目の釦（お知らせを開く）*/
.site-footer .footer-link { padding: 0; background: none; border: 0; font: inherit; font-size: 11px; font-weight: 700; color: var(--muted); cursor: pointer; }
.site-footer .footer-link:hover { color: var(--accent); text-decoration: underline; }
/* 読み物の頁のヘッダーのランキング（窓の無い頁で sync-partials.py が /ranking/ へのリンクにした物）。
   400px 以下ではナビ（ゲーム・練習・コツ）と重なる（360px で 28px）ので出さない —— 入口はフッターの「ランキング」*/
@media (max-width: 400px) { .header-actions a[href="/ranking/"] { display: none; } }
/* 名乗りは著作権表示とリンクの下へ回す。flex-basis:100% で必ず改行させる ——
   footer-inner は space-between なので、そのまま置くと 3 つ目の要素として
   横に並び、リンク群を押しのけてしまう */
.footer-note { flex-basis: 100%; font-size: 11px; line-height: 1.5; color: var(--muted); opacity: .8; }

/* ---------- 狭い画面 ---------- */
/* プレイ区を幅で組み直す @media は撤去した。版面は実寸で組んで transform で
   丸ごと縮める方式なので、幅に応じて並びを変える必要が無い。
   しかもここは既に存在しない .play-grid を指しており、生きていた
   .play-col.is-right の横並び指定だけが右柱を潰していた */
@media (max-width: 900px) {
  .content-grid { grid-template-columns: 1fr; }
}
/* モバイルは筐体レイアウト固定。ここは大きく変えない方針 */
@media (max-width: 560px) {
  .wrap, .header-inner, .footer-inner { padding-inline: 14px; }
  .title-row { padding-top: 10px; margin-bottom: 10px; gap: 8px; }
  .title-row h1 { font-size: 20px; }
  .title-row h1::before { height: 22px; width: 5px; }
  .play-count { margin-left: 0; width: 100%; }
  .play-grid { display: block; }
  /* ⚠ 隙間は「札の出っ張り 14px」を足して決めること。節の見出しは器の縁より
     14px 外へ出る札なので、12px だと札が上の節へ 2px 食い込む（站長指摘）。
     26 − 14 ＝ 12px を見た目の空きとして残す。
     ⚠ スマホだけ。PC は 16px のまま —— あちらは触っていない */
  .content-grid { margin-top: 30px; margin-bottom: 32px; gap: 26px; }
  .content-section { padding: 16px 16px; }
  .brand-mark { width: 34px; height: 34px; }
  .brand-word b { font-size: 18px; }
  .site-nav a { padding: 6px 14px; font-size: 13px; }
  .icon-button { width: 34px; height: 34px; }
  /* お知らせの鈴は PC だけ（ナビに重なる。入口はフッターと機体のメニュー —— header の共通ブロックの注釈）。⚠ .icon-button より後に置く */
  .news-button { display: none; }

  /* ナビだけ 2 段目へ落とす。1 段に収めようとすると 375px 幅では
     ロゴとボタンに場所を取られ、ナビに残るのは 113px ——
     4 本のうち 1.5 本しか出ず、しかも横棒を消してあるので
     残りが隠れていることすら分からなかった。
     2 段目に落とせば全幅 347px が使え、4 本とも並ぶ（実測 326px）。
     ヘッダーは 49px → 93px になるが、入口が見えないほうが高くつく。
     技は .nav-group に畳んであるので、増えてもこの幅は変わらない */
  /* スマホでは看板と入口を「1 枚の札」に収める。
     ⚠ 以前は札（.header-pill）の中が屋号だけで 200px 空き、
     メニューの釦だけが札の外に浮いていた —— 帯の中に何も無いのに
     入口が右へ離れて置かれている、という読みづらい形になっていた（站長指摘）。
     器を .header-inner へ移し、その中に 看板 … 入口 と並べる */
  .header-inner {
    flex-wrap: nowrap; row-gap: 0; gap: 10px;
    margin: 10px 14px 8px; padding: 5px 8px 5px 6px;
    background: var(--surface);
    border: var(--stroke-w) solid var(--stroke); border-radius: var(--radius-pill);
    box-shadow: 0 3px 0 var(--stroke);
  }
  /* 札の装いは器へ移した。中身はただの並び */
  .header-pill {
    flex: 1; min-width: 0; gap: 8px;
    background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0;
  }
  .brand { order: 1; gap: 8px; }
  .brand-mark svg { width: 34px; height: 32px; }
  .header-actions { order: 2; margin-left: auto; flex: none; }
  /* ⚠ 三本線はやめた（站長判断）。ナビは 3 本しか無く、
     「ゲーム▾ 練習 コツ▾」は 390px でも札の中に収まる ——
     畳んでおく理由が無いし、畳めば 1 タップ増える。
     ⚠ 遊技ページ（首屏でヘッダーごと出さない）だけは、
     機体の左肩の釦から下から出る面を開く。あちらはヘッダーが無いので別 */
  .mobile-menu-toggle { display: none; }
  .header-actions > [data-open-modal="ranking"] { display: none; }
  /* 順位表は畳んだメニューの中に置いていた物。メニューが無くなったので出さない
     （記録を見る入口は、遊技ページのゲームオーバー画面と機体のメニュー）*/
  /* ⚠ 並び順を明示する。.brand が order:1 なので、指定しないとナビが
     看板より前へ回り込む（絶対配置だった頃は順番が効かなかった）*/
  .site-nav {
    order: 2; align-items: center;
    margin-left: 4px; gap: 2px; flex-wrap: nowrap;
    position: static; width: auto; padding: 0;
    background: none; border: 0; box-shadow: none;
  }
  .site-nav > a, .site-nav .nav-group-toggle { padding: 5px 8px; font-size: 12.5px; white-space: nowrap; }
  .header-actions { order: 3; }
  /* 順位表の行は畳んだメニュー用だった。メニューが無くなったので出さない */
  .site-nav > .mobile-rank-link { display: none; }
  /* 引き出しは釦の真下へ。札の中に押し込むと、開いた瞬間に看板の高さが変わる */
  /* ⚠ 右そろえにする。左そろえだと「コツ」の釦が画面の右寄り（x≈271）に
     居るので、140px の引き出しが画面を 21px はみ出して切れる（站長報告）。
     ⚠ 上限も要る。項目名が伸びた技を足したとき、右そろえでも左へはみ出す */
  .site-nav .nav-group-menu {
    left: auto; right: 0; min-width: 140px; max-width: calc(100vw - 28px);
  }
  /* ⚠ 順位表の行は撤去した。畳んだメニューの中に置くための物で、
     ナビをそのまま並べるようになった以上、看板の中で縦に伸びて
     ヘッダーを 233px まで押し広げるだけだった（站長指摘）。
     記録を見る入口は、遊技ページの機体のメニューとゲームオーバー画面 */
}

/* ---------- 練習ページ: 使い方の 3 枚（環 2 上手）---------- */
/* 図は実機のスクリーンショット。3 枚とも同じ 4:5 で撮ってあるので、
   高さは揃う（SD7: 図卡類は齊套か全無、混在させない）*/
.step-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin: 0; padding: 0; list-style: none;
}
/* ol ではあるが中身は 3 枚の図。本文の幅止め（60em）を効かせると
   図が 1 枚 250px まで縮むので、ここだけ外す。
   .content-section > ol より詳細度を上げないと勝てない */
.content-section > .step-cards { max-width: none; }
.step-cards li { display: flex; flex-direction: column; gap: 7px; }
.step-cards img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line-soft); border-radius: 10px; background: var(--soft);
}
.step-cards b { font-size: 14px; font-weight: 800; color: var(--ink); }
.step-cards span { font-size: 13px; line-height: 1.8; color: var(--sub); }

/* ---------- 練習ページ: 練習の順番（環 4 決策）---------- */
/* 順序そのものが答えなので、番号は装飾ではなく内容。ol のまま使う */
.order-list { margin: 12px 0 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 9px; }
.order-list li { font-size: 14px; line-height: 1.85; color: var(--sub); }
.order-list b { display: block; font-size: 14px; color: var(--ink); }
/* 手順の但し書き。本文と地続きに読ませたくないので改行して落とす ——
   「このページだけの仕様」のような、知らなくても手は動く情報を置く */
.order-list small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.8; color: var(--muted); }

@media (max-width: 700px) {
  .step-cards { grid-template-columns: 1fr; gap: 18px; }
  /* 1 列になると図が本文幅いっぱいまで伸びて主張が強すぎるので上限を切る */
  .step-cards img { max-width: 320px; }
}