/*
    🎯 詰将棋（/games/tsume/play）の CSS（GAME-03 Step6-2c-2・2026-09-22）。
    📌 出どころ＝asuka-hinode の docs/tasks/GAME-03/proto/index.html の <style>（ユーザーが 09-21 に実機で OK した見た目）。
       本番へ移すときに変えたのは次だけ：
         ・@font-face と器のパレット（--games-*）の写しを捨てた＝layoutgames/Main.css が同じ物を持つ
         ・試作で body / * / button に掛けていた規則を #tsume の中に閉じた。
           🔴 `:where(#tsume)` で包むのは詳細度を試作と同じに保つため＝`#tsume button` と書くと
              id の分だけ強くなり、`.tab { font-size: 24px }` などクラスの規則が全部負ける
         ・木の色の変数を :root から #tsume へ／滑らせる時間を変数 --slide-ms に（ui.js も読む）
*/
/* 🪵 駒の木の色（GAME-06）。ここを差し替えれば SFC② ⇔ SFC④ を切り替えられる。
     SFC②＝木の色そのまま（2026-09-20 ユーザー選択）
     SFC④＝明るい白木  --w-edge:#7a5a2c --w-hi:#ffffff --w-lo:#ddc79c --w-face1:#fffdf5 --w-face2:#efe0bf */
#tsume {
  --w-edge:  #6b4a20;   /* 外の縁（濃い） */
  --w-hi:    #fff6e0;   /* 面取りの明るい側 */
  --w-lo:    #c9a05a;   /* 面取りの暗い側 */
  --w-face1: #f2dfb4;   /* 地の上 */
  --w-face2: #dfbf83;   /* 地の下 */
  --w-ink:   #2a1a08;   /* 漆の字 */
  --w-pro:   #b3261e;   /* 成駒の朱 */
  --helped: #ffe58f;    /* 待った・ヒントを使って正解＝黄（クリア表のマス・凡例・問題番号の帯で共有） */
  --slide-ms: 180ms;    /* 相手の応手を滑らせる時間＝ui.js もここを読む（2箇所に数字を書かない） */
}
:where(#tsume) * { box-sizing: border-box; margin: 0; padding: 0; }
/* 書体＝器と同じドットフォント（12px が原寸）。button は UA の書体を持つので明示して継承させる */
#tsume { box-sizing: border-box; font-family: var(--games-font-body); font-size: 12px; line-height: 1.5;
       background: #f4efe6; color: var(--games-ink);
       max-width: 420px; margin: 0 auto; padding: 8px; }
:where(#tsume) button { font-family: inherit; font-size: inherit; color: inherit; border-radius: 0; }
/* 🔵 判断28＝小さいスマホで盤に縦を回すため、タイトルを消して手数タブと前後ボタンを1行にした（2026-09-17） */
/* 余白は 8px の一系統（GAME-06 Step3・4/6/8 の混在をやめた）。上段は #tsume の余白を打ち消して端まで */
#topbar { margin: -8px -8px 8px; }
/* 🪵 押せる物＝器の流儀（枠2px・ぼかさない影＝「浮いている＝押せる」の合図・角丸ゼロ）。
     押した時は影を消して影の分だけ沈む。選択中のタブは沈んだまま＝墨地に白字（GAME-06 Step3・2026-09-20） */
/* 🔵 影は下向き 4px（ユーザーの HTML 版 `retro-btn`＝押し込みボタン・2026-09-21）。器の `3px 3px 0` から寄せた */
.tab, #puzzle-nav button, #controls button, #controls-review button, #pg-clear, #promote button, .dlg button {
  border: var(--games-line) solid var(--games-ink); background: var(--games-paper);
  box-shadow: 0 4px 0 var(--games-ink); cursor: pointer; }
.tab:active, #puzzle-nav button:active, #controls button:active, #controls-review button:active,
#pg-clear:active, #promote button:active, .dlg button:active {
  box-shadow: none; transform: translateY(4px); }
/* 無効＝灰地・影なし・沈まない（手順の確認で端まで来た「進む」「戻る」）。
   🔴 `button:disabled` だけだと上の id 付きセレクタに詳細度で負けて白いまま＝id を付けて書く */
#controls-review button:disabled, #controls button:disabled {
  background: var(--games-grey); color: var(--games-grey-dark); box-shadow: none; transform: none; cursor: default; }
/* 🪵 上段＝タブを幅いっぱいの4等分・その下に前後と問題番号（ユーザーの絵・2026-09-21・Step3-2d）。
     判断28 の「1段」はやめた＝ボタンを2つに減らして縦を取り戻したので、上段は2段でも1画面に収まる */
/* 🔵 ユーザーの HTML 版（GAME-06/proto/user-mock-2026-09-21.html）に寄せた（2026-09-21）：
     タブ＝下の線に乗った「本物のタブ」（灰地・下辺なし・隣と枠を重ねる・選択は赤で一段高い・影なし）／
     前後＝40px の押し込みボタン＋白い帯／文字＝24px（12ドットの2倍＝くっきり出る大きさ。18px は潰れる） */
#tabs { display: flex; align-items: flex-end; padding: 8px 8px 0; border-bottom: var(--games-line) solid var(--games-ink); }
.tab { flex: 1; height: 40px; padding: 0; font-size: 24px; line-height: 1;
       background: var(--games-grey); border-bottom: none; box-shadow: none;
       margin-right: calc(-1 * var(--games-line)); position: relative; z-index: 1; }
.tab:last-child { margin-right: 0; }
.tab:active { transform: none; }
/* 選択中＝赤（ユーザー決定）。🔴 器では赤＝「取り返しのつかない操作」なので「記録を消す」には赤を使わない（確認ダイアログで守る） */
.tab.on { background: var(--games-red); color: var(--games-paper); height: 44px; z-index: 2; }
#puzzle-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px;
              padding: 14px 12px; background: var(--games-paper); border-bottom: var(--games-line) solid var(--games-ink); }   /* 上下 8→14（ユーザー 09-21「余白あっていい」） */
#puzzle-nav button { width: 40px; height: 40px; padding: 0; flex: none;
                     display: flex; align-items: center; justify-content: center; }
/* 矢印＝CSS の三角（◀▶ はドットフォントに無い字）。
   🔴 `#puzzle-nav button::before` は `#prev::before` より詳細度が高い（id+要素 > id）＝共通の border を親側に書くと三角が透明のまま勝つ。1本ずつ全部書く */
#prev::before { content: ''; display: block; width: 0; height: 0;
                border: 10px solid transparent; border-left: 0; border-right: 16px solid var(--games-ink); }
#next::before { content: ''; display: block; width: 0; height: 0;
                border: 10px solid transparent; border-right: 0; border-left: 16px solid var(--games-ink); }
/* 問題番号＝24px・字間広め（HTML 版 tracking-widest）。手数はその下に 12px で */
/* 「第3問／1手目」＝1行・同じ大きさ・同じ色（ユーザー 2026-09-21・「/ 100」「/ n手」は出さない）。
   区切りの ／（全角・U+FF0F）はサブセットに在ることを確認済み */
#nav-text { display: flex; align-items: center; justify-content: center; white-space: nowrap;
            font-size: 24px; line-height: 1; letter-spacing: 2px; }
#counter::before { content: '／'; }
/* 帯の色＝今の問題の記録（2026-09-22 ユーザー決定）。色はクリア表のマス（.pg.done / .pg.done.helped）と同じ値。
     以前の「★ クリア済み」（攻方の行の右端）はこれに置き換えた */
#puzzle-nav.done { background: var(--games-green-light); }
#puzzle-nav.done.helped { background: var(--helped); }
#def-hand { color: var(--games-grey-dark); margin: 8px 0; }
/* 🔵 判断28＝9×9を全部描いて、6.5マス分の窓（#board-wrap）から覗く。指でなぞると窓が動く。
     1マスの px（--cell）と番号の帯の幅（--lbl）は ui.js が流し込む（2026-09-17） */
#board-wrap { overflow: auto; margin: 0 auto; border: 2px solid #543; background: #eebf6d;
              width: calc(var(--cell, 40px) * 6.5 + var(--lbl, 16px) + 4px);
              height: calc(var(--cell, 40px) * 6.5 + var(--lbl, 16px) + 4px);
              scrollbar-width: none; touch-action: pan-x pan-y; cursor: grab; }
#board-wrap::-webkit-scrollbar { display: none; }
/* 🪵 薄い木目（2026-09-21 ユーザー要望＝本物の将棋盤みたいに・うすーく）。🔵 盤は非ゴールだったがユーザーが覆した。
     榧（かや）の盤は細い柾目がまっすぐ縦に通る＝縦縞を周期の違う3本重ねて、繰り返しが目で拾えないようにする
     （7・11・17px は互いに割り切れない＝模様が揃うのは 1309px ごと＝盤より長い）。画像は使わない＝通信 0B。
     #board（中身）に付ける＝窓を動かすと木目も盤と一緒に動く（#board-wrap に付けると木目だけ止まって見える） */
/* 🔴 width: max-content 必須＝無いと #board の箱は窓の幅（6.5マス）で止まり、9マスの中身は箱からはみ出して並ぶ。
     背景は箱の中にしか塗られない＝右の2筋・1筋・番号の帯だけ木目が消えていた（2026-09-21 ユーザー指摘・実測 箱367px／中身502px） */
#board { display: grid; gap: 0; width: max-content;
         background-color: #eebf6d;
         background-image:
           repeating-linear-gradient(90deg, rgba(120, 70, 20, .06) 0 1px, transparent 1px 7px),
           repeating-linear-gradient(91deg, rgba(120, 70, 20, .05) 0 2px, transparent 2px 11px),
           repeating-linear-gradient(89deg, rgba(255, 240, 200, .10) 0 3px, transparent 3px 17px);
         grid-template-columns: repeat(9, var(--cell, 40px)) var(--lbl, 16px);
         grid-template-rows: var(--lbl, 16px) repeat(9, var(--cell, 40px)); }
/* 番号の帯＝上に筋（9…1）、右に段（一…九）。🔵 盤の縁に印刷された座標と同じ扱い＝
     窓を動かすと盤と一緒に外へ出ていく（端に貼り付けると定規が浮いて見えて変・ユーザー指摘 09-17） */
.lbl { display: flex; align-items: center; justify-content: center; font-size: 11px;
       font-family: system-ui, sans-serif;   /* 盤は非ゴール＝body の書体を変えても番号の帯は前のまま（GAME-06） */
       color: #543; background: #f4efe6; }
.cell { border: 1px solid #a97;
        display: flex; align-items: center; justify-content: center; position: relative; }
/* 盤の一番外側（9×9 の上下左右の縁）だけ線を太く＝本物の盤の外枠（ユーザー指定 09-17） */
.cell.edge-t { border-top: 3px solid #543; }
.cell.edge-b { border-bottom: 3px solid #543; }
.cell.edge-l { border-left: 3px solid #543; }
.cell.edge-r { border-right: 3px solid #543; }
/* 星（盤を3×3に区切る4つの点）＝3・6筋と4・7筋の間 × 三・六段と四・七段の間の交点。
   (3,3)(6,3)(3,6)(6,6) の左下の角に置く。::after は行き先の印で使っているので ::before（09-17） */
.cell.star::before { content: ''; position: absolute; left: -1px; bottom: -1px; z-index: 1;
                     width: calc(var(--cell, 40px) * 0.13); height: calc(var(--cell, 40px) * 0.13);
                     border-radius: 50%; background: #543; transform: translate(-50%, 50%); }
.cell.last { background: #ffe9a8; }
.cell.sel { background: #ffd27f; }
.cell.dest::after { content: ''; position: absolute; width: 30%; height: 30%;
                    border-radius: 50%; background: rgba(200,50,50,.45); }
.cell.hint { background: #b5e3ff; }
.cell.mine, .cell.dest { cursor: pointer; }
/* 🪵 駒＝16bit（スーファミ）風の「明るい白木」。GAME-06 Step3-1（2026-09-20）
     決め方と経緯＝docs/tasks/GAME-06/steps/step02-piece-style.md ／ 実物＝GAME-06/proto/final.html
     🔴 clip-path は stacking context を作る＝::before + z-index:-1 では枠にできない。入れ子で重ねる
     🔑 影は filter: drop-shadow（box-shadow だと clip-path を無視して四角い影が出る）
     🔵 攻め方と玉方は「同じ色・向きだけ」で区別する（本物の将棋・GAME-02 と同じ）。
        以前あった .pc.def { color: #444 } は削除＝字が薄くなるだけで区別の役に立っていなかった */
/* 🔵 駒はマスの 85%（2026-09-20）。92% だと実機（1マス54px）で駒が大きくなりすぎ、
     字が 12の倍数（24px）に縛られているぶん「駒に対して字が小さい」見え方になる。
     85% なら 駒 44.2px・字/駒＝54% で、設計の板（GAME-06/proto/final.html ②）の 55% と揃う。
     🔴 これ以上小さくしない＝タップ領域 44px を割る（G2「押せる」） */
.pc { position: relative; display: block; width: 85%; height: 85%;
      background: var(--w-edge); filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, .35));
      transform: translate(var(--dx, 0px), var(--dy, 0px)); }
/* 🪵 相手の応手を滑らせる（GAME-06 Step3-3g・2026-09-21）。盤は毎回描き直すので、
     描いた直後に「元いたマスとの差」を --dx/--dy に入れて 0 に戻す＝見た目だけ遅れて追いつく。
     🔴 回転を打ち消さないため、`transform` は translate と rotate を1本に並べて書くこと
        （`.pc.def` で transform を上書きすると逆さ表示が消える） */
.pc.slide { transition: transform var(--slide-ms) ease-out; }
@media (prefers-reduced-motion: reduce) { .pc.slide { transition: none; } }
.pc, .pc .bevel, .pc .face {
      clip-path: polygon(50% 0%, 86% 13%, 100% 100%, 0% 100%, 14% 13%); }
.pc .bevel { position: absolute; inset: 5%;
      background: linear-gradient(160deg, var(--w-hi) 0%, var(--w-lo) 100%); }  /* 面取り＝左上が明るい */
.pc .face  { position: absolute; inset: 11%;
      background: linear-gradient(180deg, var(--w-face1), var(--w-face2));
      display: flex; align-items: center; justify-content: center; }
/* 🔵 玉方は駒ごと180度回る＝そのままだと光の向きだけが逆になる（部屋の光源は1つのはず）。
     面取り・地のグラデ・浮き彫り・落ち影を反転して、盤全体で光を左上から揃える（GAME-06 Step3-1） */
.pc.def { transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(180deg);
          filter: drop-shadow(-1px -2px 1px rgba(0, 0, 0, .35)); }
.pc.def .bevel  { background: linear-gradient(340deg, var(--w-hi) 0%, var(--w-lo) 100%); }
.pc.def .face   { background: linear-gradient(0deg, var(--w-face1), var(--w-face2)); }
.pc.def .ch     { text-shadow: 0 -1px 0 rgba(255, 255, 255, .75), 0 1px 0 rgba(0, 0, 0, .28); }
.pc.def .ch.pro { text-shadow: 0 -1px 0 rgba(255, 255, 255, .8), 0 1px 0 rgba(80, 8, 4, .35); }
/* 🔵 駒の字はマスの大きさに追従させる（画面幅基準だと盤だけ大きくなって字が小さいまま） */
/* 字の大きさは --ch＝マスの 0.46 倍（ui.js の sizeBoard() が流し込む）。
   🔵 12の倍数への丸めは 2026-09-20 にやめた（24⇔36 と跳ねる方が害が大きい・GAME-06 Step3-1b） */
.ch { line-height: 1; margin-top: 6%; color: var(--w-ink);
      font-family: "GamesDot12", monospace; font-weight: normal;
      font-size: var(--ch, 24px);
      text-shadow: 0 1px 0 rgba(255, 255, 255, .75), 0 -1px 0 rgba(0, 0, 0, .28); }  /* 浮き彫り */
/* 成駒＝濃い朱（本物の駒は裏が朱）。🔴 器の --games-red(#e4404c) は
   「取り返しのつかない操作」に割り当て済みなので使わない＝意味が二重になる */
.ch.pro { color: var(--w-pro);
      text-shadow: 0 1px 0 rgba(255, 255, 255, .8), 0 -1px 0 rgba(80, 8, 4, .35); }
#atk-hand { margin: 8px 0; min-height: 52px; }
/* 🪵 持駒＝盤の駒と同じ五角形（GAME-06 Step3-2・2026-09-20）。
     .pc の見た目をそのまま使い回す＝盤と駒台で駒の顔が食い違わない。
     🔴 攻方は押して打つので 44px 以上を確保（G2「押せる」）／玉方は見せるだけなので小さく。 */
.hand { position: relative; display: inline-block; vertical-align: top;
        width: 46px; height: 46px; padding: 2px; margin: 0 2px 2px 0;
        border: none; background: none; cursor: pointer; }
.hand .pc { width: 100%; height: 100%; }
.hand.sel { background: #ffd27f; }                 /* 選択中＝盤のマス（.sel）と同じ色 */
/* 🪵 玉方＝押さないので最小まで詰める（2026-09-20 ユーザー要望）。
     🔴 東雲12 は 12×12 の升目に彫ってあるので **12px が原寸＝1ドット1px で一番くっきり出る**。
        34px の駒（字18px＝1.5px/ドット）で潰れたのは半端な倍率だったから。12px なら潰れない。
     🔵 枚数は駒の右に小さく添える（駒が24pxだと右下バッジが駒を半分覆うため）。
        7種×(24+14)＝266px＋見出し28px＝294px で 393px に収まる。縦は 46→24px。 */
.hand.small { width: 24px; height: 24px; padding: 0; margin: 0 14px 0 0; cursor: default; }
.hand.small .ch  { font-size: 12px; }
.hand.small .num { right: -13px; bottom: 0; min-width: 0; padding: 0;
                   border: none; background: none; color: var(--games-grey-dark);
                   font-size: 12px; line-height: 12px; }
/* 枚数＝駒の右下に小さく。角丸ゼロ・黒枠＝器（8bit）の流儀。
   🔵 駒の外に置くので、玉方の駒が逆さでも数字は正立のまま読める */
.hand .num { position: absolute; right: 0; bottom: 0; z-index: 1;
             min-width: 15px; padding: 0 2px; font-size: 12px; line-height: 14px;
             text-align: center; color: #1a1a1a; background: #fff;
             border: 1px solid #1a1a1a; }

/* 「なし」は見出し（.hand-label）と同じ高さに揃える＝素の inline だと上にずれて出ていた（2026-09-22 ユーザー指摘） */
.hand-none { display: inline-block; vertical-align: top; line-height: 46px; color: var(--games-grey-dark); }
#def-hand .hand-none { line-height: 24px; }
/* 持駒の見出し＝短く（長いと駒が折り返して盤の縦を食う）。駒の高さに合わせて中央に */
.hand-label { display: inline-block; vertical-align: top; width: 30px;
              font-size: 12px; font-weight: bold; color: var(--games-ink); line-height: 46px; }   /* HTML 版＝太字・墨 */
#def-hand .hand-label { line-height: 24px; }
/* 🪵 メッセージ＝常設の欄をやめ、出番の時だけドラクエ風の窓を出す（ユーザー決定 2026-09-21・Step3-3）。
     墨地・白枠2px・その外に墨1周。普通の知らせは 1.5秒で消える（ui.js の MESSAGE_MS・2026-09-22 に 2.5秒から短縮）／「全部クリア！」だけ右下に「閉じる」ボタンが出て、押すまで残る。
     🔵 閉じる合図は点滅する ▼ だったが「押す場所が分かりにくい」（2026-09-21 ユーザー指摘）でボタンにした。
        窓のどこを押しても閉じるのは前のまま（ボタンは押せる場所を示す看板）。
     🔵 位置は**盤の上下左右の中央**（2026-09-22 ユーザー決定）。以前は画面の中央（fixed）だったが、
        ページを送ると盤からずれた。#board-area（盤の窓の外側の箱・position: relative）の中に置いて毎回同じ所に出す。
        幅は正解・不正解の窓と揃えて 320px、字も中央寄せ＝同じ家族の窓に見える。
     🔴 普通の知らせは押しても盤へ素通し（pointer-events: none）＝盤の真ん中に被るので、
        塞ぐと「別の駒を掴もうとしたら窓を閉じただけ」になる。▼ 付きの時だけ押せる */
#board-area { position: relative; }
.win { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5;
       width: min(320px, calc(100% - 48px)); padding: 12px 16px; line-height: 1.5; text-align: center;
       background: var(--games-ink); color: var(--games-paper);
       border: 2px solid var(--games-paper); outline: 2px solid var(--games-ink); pointer-events: none; }
.win[hidden] { display: none; }
.win.stay { pointer-events: auto; cursor: pointer; }
/* 閉じるボタン＝他の押せる物と同じ作り（白地・枠2px・下へ 4px の影）。字は 24px＝ページの他のボタンと揃える */
#msg-close { display: none; margin: 12px 0 0 auto; height: 44px; padding: 0 16px; font-size: 24px;
             color: var(--games-ink); background: var(--games-paper);
             border: var(--games-line) solid var(--games-paper); box-shadow: 0 4px 0 var(--games-grey-dark); }
#msg-close:active { box-shadow: none; transform: translateY(4px); }
.win.stay #msg-close { display: block; }
/* ボタンは2つ（待った・最初から）。ヒントは右端に出した（下の `#controls #hint`・2026-09-22 ユーザー決定）。
   降参は持って来なかった（2026-09-21 ユーザー「答えは自分で探す方が楽しい」） */
/* #controls-review＝「手順の確認」中だけ出る「戻る」「進む」（#controls と入れ替わる・2026-09-21） */
#controls, #controls-review { display: flex; gap: 12px; }
#controls[hidden], #controls-review[hidden] { display: none; }
#controls button, #controls-review button { flex: 1; height: 48px; padding: 0; font-size: 24px; }   /* HTML 版 text-lg＝24px に寄せた */
/* 💡 ヒント＝豆電球の下に「ヒント」と書いただけのボタン（2026-09-22 ユーザー決定）。
     色が付くのは電球だけ＝地・枠・影・字は隣の「待った」「最初から」と同じ（白地・墨の字・下へ 4px の影）。
     置き場所＝「待った」「最初から」の右。手順の確認中は #controls ごと隠れるので一緒に消える。
     🔴 幅と中身の並べ方は `#controls #hint` で書く＝上の `#controls button`（id+要素）に勝つため。
        無効の見た目は上の `#controls button:disabled`（id+要素+疑似クラス）がそのまま当たる。
     🔑 電球は 16×16 のドット絵を SVG で書いて埋め込んだ（画像ファイル無し・通信0）。2倍の 32px＝ドットが揃う。 */
#controls #hint { flex: 0 0 64px; padding: 0 0 3px; font-size: 12px; line-height: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='1' height='1' fill='%23ffe98a'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%23ffe98a'/%3E%3Crect x='12' y='1' width='1' height='1' fill='%23ffe98a'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%23ffe98a'/%3E%3Crect x='12' y='2' width='1' height='1' fill='%23ffe98a'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%233a2a10'/%3E%3Crect x='7' y='3' width='1' height='1' fill='%233a2a10'/%3E%3Crect x='8' y='3' width='1' height='1' fill='%233a2a10'/%3E%3Crect x='9' y='3' width='1' height='1' fill='%233a2a10'/%3E%3Crect x='5' y='4' width='1' height='1' fill='%233a2a10'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%23fff6c0'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%23ffd83a'/%3E%3Crect x='8' y='4' width='1' height='1' fill='%23ffd83a'/%3E%3Crect x='9' y='4' width='1' height='1' fill='%23ffd83a'/%3E%3Crect x='10' y='4' width='1' height='1' fill='%233a2a10'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%23ffe98a'/%3E%3Crect x='1' y='5' width='1' height='1' fill='%23ffe98a'/%3E%3Crect x='4' y='5' width='1' height='1' fill='%233a2a10'/%3E%3Crect x='5' y='5' width='1' height='1' fill='%23fff6c0'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%23ffd83a'/%3E%3Crect x='7' y='5' width='1' height='1' fill='%23ffd83a'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%23ffd83a'/%3E%3Crect x='9' y='5' width='1' height='1' fill='%23ffd83a'/%3E%3Crect x='10' y='5' width='1' height='1' fill='%23ffd83a'/%3E%3Crect x='11' y='5' width='1' height='1' fill='%233a2a10'/%3E%3Crect x='14' y='5' width='1' height='1' fill='%23ffe98a'/%3E%3Crect x='15' y='5' width='1' height='1' fill='%23ffe98a'/%3E%3Crect x='4' y='6' width='1' height='1' fill='%233a2a10'/%3E%3Crect x='5' y='6' width='1' height='1' fill='%23fff6c0'/%3E%3Crect x='6' y='6' width='1' height='1' fill='%23ffd83a'/%3E%3Crect x='7' y='6' width='1' height='1' fill='%23ffd83a'/%3E%3Crect x='8' y='6' width='1' height='1' fill='%23ffd83a'/%3E%3Crect x='9' y='6' width='1' height='1' fill='%23ffd83a'/%3E%3Crect x='10' y='6' width='1' height='1' fill='%23ffd83a'/%3E%3Crect x='11' y='6' width='1' height='1' fill='%233a2a10'/%3E%3Crect x='4' y='7' width='1' height='1' fill='%233a2a10'/%3E%3Crect x='5' y='7' width='1' height='1' fill='%23ffd83a'/%3E%3Crect x='6' y='7' width='1' height='1' fill='%23ffd83a'/%3E%3Crect x='7' y='7' width='1' height='1' fill='%23ffd83a'/%3E%3Crect x='8' y='7' width='1' height='1' fill='%23ffd83a'/%3E%3Crect x='9' y='7' width='1' height='1' fill='%23ffd83a'/%3E%3Crect x='10' y='7' width='1' height='1' fill='%23ffd83a'/%3E%3Crect x='11' y='7' width='1' height='1' fill='%233a2a10'/%3E%3Crect x='4' y='8' width='1' height='1' fill='%233a2a10'/%3E%3Crect x='5' y='8' width='1' height='1' fill='%23ffd83a'/%3E%3Crect x='6' y='8' width='1' height='1' fill='%23ffd83a'/%3E%3Crect x='7' y='8' width='1' height='1' fill='%23ffd83a'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%23ffd83a'/%3E%3Crect x='9' y='8' width='1' height='1' fill='%23ffd83a'/%3E%3Crect x='10' y='8' width='1' height='1' fill='%23ffd83a'/%3E%3Crect x='11' y='8' width='1' height='1' fill='%233a2a10'/%3E%3Crect x='5' y='9' width='1' height='1' fill='%233a2a10'/%3E%3Crect x='6' y='9' width='1' height='1' fill='%23ffd83a'/%3E%3Crect x='7' y='9' width='1' height='1' fill='%23ffd83a'/%3E%3Crect x='8' y='9' width='1' height='1' fill='%23ffd83a'/%3E%3Crect x='9' y='9' width='1' height='1' fill='%23ffd83a'/%3E%3Crect x='10' y='9' width='1' height='1' fill='%233a2a10'/%3E%3Crect x='6' y='10' width='1' height='1' fill='%233a2a10'/%3E%3Crect x='7' y='10' width='1' height='1' fill='%23ffd83a'/%3E%3Crect x='8' y='10' width='1' height='1' fill='%23ffd83a'/%3E%3Crect x='9' y='10' width='1' height='1' fill='%233a2a10'/%3E%3Crect x='6' y='11' width='1' height='1' fill='%23b8bcc2'/%3E%3Crect x='7' y='11' width='1' height='1' fill='%23b8bcc2'/%3E%3Crect x='8' y='11' width='1' height='1' fill='%23b8bcc2'/%3E%3Crect x='9' y='11' width='1' height='1' fill='%23b8bcc2'/%3E%3Crect x='6' y='12' width='1' height='1' fill='%236c7076'/%3E%3Crect x='7' y='12' width='1' height='1' fill='%236c7076'/%3E%3Crect x='8' y='12' width='1' height='1' fill='%236c7076'/%3E%3Crect x='9' y='12' width='1' height='1' fill='%236c7076'/%3E%3Crect x='6' y='13' width='1' height='1' fill='%23b8bcc2'/%3E%3Crect x='7' y='13' width='1' height='1' fill='%23b8bcc2'/%3E%3Crect x='8' y='13' width='1' height='1' fill='%23b8bcc2'/%3E%3Crect x='9' y='13' width='1' height='1' fill='%23b8bcc2'/%3E%3Crect x='7' y='14' width='1' height='1' fill='%236c7076'/%3E%3Crect x='8' y='14' width='1' height='1' fill='%236c7076'/%3E%3C/svg%3E"); background-repeat: no-repeat;
  background-position: center 0; background-size: 32px 32px; image-rendering: pixelated; }
#controls #hint[hidden] { display: none; }
/* 無効＝遊び終わった時だけ（詰んだ・行き止まり）＝電球も消灯。🔴 正解の筋を外れても灰色にはしない（色で間違いが分かるため） */
#controls #hint:disabled { background-image: none; }
/* 確認の行は4つ＝等分にすると「もう一度」(24px×4字=96px) が入らない。
   字の長さを幅の元にして余りを均等に配る（flex-basis: auto）＝4つとも言葉のまま1行に収まる（2026-09-21） */
#controls-review { gap: 8px; }
#controls-review button { flex: 1 1 auto; padding: 0 4px; white-space: nowrap; }
/* 🔵 クリア状況の一覧（デバッグ用・PC 前提なのでマスは小さく・2026-09-20 ユーザー依頼） */
/* クリア表＝ユーザーの HTML 版（level-grid）に寄せた（2026-09-21）：
     墨 4px の線で区切った灰色の区画・見出しは太字・マスは幅いっぱいの10等分（枠 #666・白地）・
     今の問題＝赤地に白の太字・済み＝淡い緑 #d4edda。
     🔵 中スクロールはやめて全部出す（2026-09-21 ユーザー指摘）。ページの方が伸びるが、盤の大きさは
        クリア表を予算に入れていない（ui.js の OTHER_BLOCKS）ので影響しない。下の余白 16px は画面の底に貼り付かないため */
#progress { margin: 16px -8px 0; padding: 8px 12px 16px; background: #e5e7eb; border-top: 4px solid var(--games-ink); }
/* 🔵 見出しの行と表の間は 20px＝「記録を消す」の影が下へ 4px 出るので、8px だと詰まって見えた（2026-09-21 ユーザー指摘） */
#pg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; color: var(--games-ink); font-weight: bold; }
#pg-count { flex: 1; }
#pg-clear { padding: 4px 8px; font-weight: normal; }
#pg-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin-top: 0; }
/* 🧱 場所取り（初回表示のガタつき対策・2026-09-22 ユーザー依頼）。中身は JS が最初の問題の表を読んでから入れるので、
     それまで空の箱が高さ0で、届いた瞬間に盤とボタンが下へ押し出されていた（CLS 0.449・本番で実測）。
     空の間だけ、中身が入った後と同じ高さを取っておく（:empty＝中身が入れば自然に外れる）。
     🔴 ui.js は表を待つ前に sizeBoard() で盤の大きさを決める＝その計算がここの高さを数える。値を変えたら両方を見ること。
     数字の出どころ＝本番の実測（390px 幅）：タブ 54px（上の余白8＋選択中のタブ44＋下の線）・玉方の持駒 24px・
     クリア表 296px（26px×10行＋隙間4px×9。7手は58問＝6行なので、描いた後に画面の外で縮むだけ） */
#tabs:empty { height: calc(8px + 44px + var(--games-line)); }
#def-hand:empty { height: 24px; }
#pg-grid:empty { height: calc(26px * 10 + 4px * 9); }
.pg { height: 26px; line-height: 24px; text-align: center; padding: 0;
      border: 1px solid #666; background: var(--games-paper); color: var(--games-ink); cursor: pointer; }
/* 待った無しで解いた＝器の淡緑 --games-green-light。🔵 黄色より目立つ濃さにする＝ご褒美の色が一番目立つ
   （淡い #d4edda のままだと黄色の方に目が行った・2026-09-21 ユーザー） */
.pg.done, .pg-sw.done { background: var(--games-green-light); }
.pg.done.helped, .pg-sw.helped { background: var(--helped); }          /* 待ったを使って解いた＝黄色（#fff3cd は白いマスと見分けにくかった・2026-09-21 ユーザー） */
/* 色の凡例＝表の下（GAME-06・2026-09-21 ユーザー）。四角は上の2行とマスの色を共有＝片方だけ変わらない。
   クラス名を .pg にしないのは、クリックで問題を開く判定（ui.js の classList.contains('pg')）に拾われないため */
#pg-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px; color: var(--games-ink); }
#pg-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pg-sw { display: inline-block; width: 14px; height: 14px; border: 1px solid #666; }
.pg.now { background: var(--games-red); border-color: var(--games-ink); color: var(--games-paper); font-weight: bold; }
/* 🪵 クリアの窓＝詰んだ時に盤の上に出す（ユーザーの絵・2026-09-21）。墨地・白枠3px・外に墨4px。
     「正解！」は金色 36px（3px/ドット）＋濃い金の落ち影。「次の問題へ」＝赤・「手順の確認」＝白（正解手順の再生） */
.dlg { position: fixed; inset: 0; z-index: 10; background: rgba(0, 0, 0, .6);
       display: flex; align-items: center; justify-content: center; }
.dlg[hidden] { display: none; }
.dlg-box { width: min(320px, calc(100% - 48px)); padding: 28px 20px 24px; text-align: center;
           background: var(--games-ink); color: var(--games-paper);
           border: 3px solid var(--games-paper); outline: 4px solid var(--games-ink); }
.dlg-title { font-size: 36px; line-height: 1; font-weight: bold; letter-spacing: 12px; margin-left: 12px;
             color: #f0c419; text-shadow: 3px 3px 0 #7a5400; }
.dlg-sub { margin: 16px 0 8px; white-space: pre-line; }   /* 改行をそのまま出す */
.dlg-title.plain { color: var(--games-paper); text-shadow: none; }   /* 不正解の見出し＝金にしない */
.dlg button { display: block; width: 100%; height: 48px; margin-top: 16px; font-size: 24px;
              color: var(--games-ink); }   /* 🔴 箱の字が白なので button の color:inherit だと白地に白＝消える */
.dlg button.primary { background: var(--games-red); color: var(--games-paper); }
/* z-index 10＝正解・不正解の窓と同じ段＝知らせの窓（5）より上。選ばせる窓が知らせに隠れないように */
#promote { display: none; position: fixed; inset: 0; z-index: 10; background: rgba(0,0,0,.4);
           align-items: center; justify-content: center; gap: 12px; }
/* 🪵 成る／不成＝駒の絵を字の上に載せる（2026-09-21 ユーザー「駒の絵があったほうが分かりやすい」）。
     駒は 48px・字 24px＝12ドットの2倍でくっきり／駒に対して 50%（64px・36px は大きすぎた＝2026-09-21 ユーザー） */
#promote button { font-size: 24px; padding: 12px 20px;
                  display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pr-pc { display: block; width: 48px; height: 48px; --ch: 24px; }
.pr-pc .pc { width: 100%; height: 100%; }

/* ---- 入口（/games/tsume）の手数の札（Step6-3a・2026-09-22）---- */
/* 🎚️ 左から 1・3・5・7手詰の1行（2026-09-22 ユーザー決定＝2×2 は大きすぎた）。393px 幅で1枚 約85px＝押す的 44px は十分超える。見た目は盤のページのボタンと同じ流儀（白地・枠2px・下へ 4px の影・押すと沈む）。
     全問クリアした手数は淡緑（クリア表の「待ったなしで正解」と同じ色）。 */
.tsume_lengths { list-style: none; margin: 0 0 24px; padding: 0 0 4px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 420px; }
.tsume_length_item { display: flex; }
.tsume_length_card { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 64px; padding: 8px 2px;
  font-family: var(--games-font-body); color: var(--games-ink); text-decoration: none;
  background: var(--games-paper); border: var(--games-line) solid var(--games-ink); box-shadow: 0 4px 0 var(--games-ink); }
.tsume_length_card:active { box-shadow: none; transform: translateY(4px); }
.tsume_length_card:focus-visible { outline: 3px solid var(--games-sky); outline-offset: 2px; }
.tsume_length_card.is_complete { background: var(--games-green-light); }
.tsume_length_name { font-size: 24px; font-weight: bold; line-height: 1; }
.tsume_length_count { font-size: 12px; line-height: 1; letter-spacing: 1px; }