/* ===================================================================
将棋ジム 記事の中に置くCPU対局盤 CSS（2026-07-27新設）
使い方: ← 先に読む
← .sb の木目・枠を使う
← この後に読む
すべて .kcpu 配下にスコープしてあるので、既存ページ・既存の図には波及しない。
=================================================================== */
.kcpu .caption{font-size:12.5px;color:#ffffffaa;text-align:center;margin:6px 0 0}
/* 盤・駒・挙動は koma.html の .kcpu をそのまま .kcpu に付け替えたもの（値は1つも変えていない） */
.kcpu{--gc:calc((min(100vw,430px) - 22px)/9);background:var(--card);border:1px solid var(--border);border-radius:12px;padding:8px 14px 10px;margin:8px 0}
.kcpu{background:none;border:none;border-radius:0;padding:12px 0}
.kcpu .gwrap{--gc:calc((min(100vw,430px) - 22px)/9);position:relative;display:flex;flex-direction:column;align-items:center}
.kcpu .gsplash{position:absolute;left:0;right:0;top:38%;text-align:center;z-index:50;pointer-events:none;font-size:44px;font-weight:900;letter-spacing:4px;opacity:0;text-shadow:0 0 18px #000,0 2px 4px #000}
.kcpu .gsplash.show{animation:gpop .9s ease-out forwards}
.kcpu .gsplash.check{color:var(--gold)}
.kcpu .gsplash.check.show{animation:gpop2 1.1s ease-out}
.kcpu .gsplash.win{color:#ff8c1a}
.kcpu .gsplash.lose{color:#ff5b5b}
/* 囲いが出来上がった時の緑の字（2026-08-14・作業6）。
既存のスプラッシュの仕組みをそのまま使う＝盤の上下に枠を1つも足さない（盤・駒UI 7）。
文字数が多いので大きさだけ小さくする（320px でも1行に入る値） */
.kcpu .gsplash.kdone{color:#3ddc84;font-size:min(6.4vw,26px);letter-spacing:1px}
.kcpu .gsplash.kdone.show{animation:gpop2 1.4s ease-out}
.kcpu .lvlbtn.sel{background:var(--accent);border-color:var(--gold)}
.kcpu .promoDlg{
display:none;position:absolute;z-index:60;left:50%;top:40%;transform:translate(-50%,-50%);
background:#1d3252;border:2px solid var(--gold);border-radius:12px;padding:14px 18px;text-align:center;
box-shadow:0 8px 30px #000c;
}
.kcpu .promoDlg button{display:block;width:150px;box-sizing:border-box;padding:10px 0;margin:8px auto 0;background:var(--accent);border:none;border-radius:10px;font-size:14px;font-weight:700;color:#fff;cursor:pointer;font-family:inherit}
.kcpu .promoDlg button:first-child{margin-top:0}
.kcpu .promoDlg button.no{background:#3b5273}
.kcpu .promoDlg button:active{transform:scale(.96)}
.kcpu .gctl{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:10px;flex-wrap:wrap}
/* CPUの戦型・組み方のボタン（2026-08-14・作業6）。盤より下に置くので盤は1pxも動かない */
.kcpu .kcpu-jo,.kcpu .kcpu-jm{gap:6px;margin-top:8px}
.kcpu .kcpu-jo button,.kcpu .kcpu-jm button{padding:0 12px;min-height:44px;font-size:13px}
.kcpu .jobtn.sel,.kcpu .jmbtn.sel{background:var(--accent);border-color:var(--gold)}
/* キーボードで選んでいる所の枠＝トップページと同じ（盤・駒UI 0） */
.kcpu .sb td:focus-visible,.kcpu .hand .hw:focus-visible,.kcpu .gctl button:focus-visible,
.kcpu .promoDlg button:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.kcpu .gctl button{padding:8px 16px;border-radius:8px;border:1px solid var(--border);background:#ffffff0d;color:#fff;cursor:pointer;font-family:inherit;font-size:13px}
.kcpu .hand{display:flex;gap:6px;align-items:center;margin:0}
.kcpu .hand .hw{position:relative;width:calc((var(--gc) - 2px)*.863);height:calc((var(--gc) - 2px)*.869);flex:none;cursor:pointer;background:none;border:none;padding:0}
.kcpu .hand .hw:disabled{cursor:default}
.kcpu .hand .hw .pc{font-size:calc(var(--gc)*.5 * var(--ps,1))}
.kcpu .hand .hw .cnt{position:absolute;right:-5px;bottom:-5px;background:var(--accent);color:#fff;font-family:sans-serif;font-size:11px;font-weight:700;border-radius:50%;width:17px;height:17px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px #0008;z-index:5}
.kcpu .hlabel{font-size:12.5px;color:#ffffffaa;white-space:nowrap}
.kcpu .handrow{display:flex;align-items:center;justify-content:center;gap:10px;min-height:42px;padding:0;margin:0;background:none;border:none;border-radius:0}
.kcpu .sb{--c:var(--gc)}
.kcpu .sb td.selp .pk{filter:drop-shadow(1.5px 2.5px 1px #000a) drop-shadow(0 0 6px var(--gold)) brightness(1.15)}
.kcpu .sb td.ok{cursor:pointer}
.kcpu .sb td.ok::after{content:"";position:absolute;inset:1px;border-radius:5px;background:#fff3d1;opacity:.16;pointer-events:none} /* 動けるマス=明るく（shogi-rule.htmlからの移植漏れを補完 2026-07-21） */
.kcpu .sb td.dim::before{content:"";position:absolute;inset:0;background:#1a2438;opacity:.1;z-index:4;pointer-events:none} /* 動けるマス以外＝周りの駒ごとうっすら暗く */
.kcpu .sb td.ng::after{content:"";position:absolute;inset:0;background:#1a2438;opacity:.28;z-index:4;pointer-events:none} /* 動けない駒の本来の行き先＝さらに暗く（桂・角の初期位置対策） */
.kcpu .sb .p2{font-size:calc(var(--c)*.32);line-height:1.05;display:inline-block;writing-mode:vertical-rl;letter-spacing:-1px}
.kcpu .pp{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.kcpu .pp.g{transform:rotate(180deg)}
.kcpu .pp svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;filter:drop-shadow(0 0 1.2px #fff) drop-shadow(0 0 1.2px #fff)}
.kcpu .pp svg line{stroke:#c0392b;stroke-width:6;stroke-linecap:round}
.kcpu .pp svg polygon{fill:#c0392b}
.kcpu .pp svg circle{fill:#c0392b;opacity:.8}
.kcpu .pp .pk{position:relative;z-index:1;width:calc(95% * var(--ps,1));height:calc(99% * var(--ps,1));filter:drop-shadow(1.5px 2.5px 1px #000a);display:flex;align-items:center;justify-content:center;font-family:"Hiragino Mincho ProN","Yu Mincho","MS Mincho",serif;font-size:calc(min(7.2vw,31px) * var(--ps,1));font-weight:800;line-height:1;padding-top:calc(11% * var(--ps,1))}
.kcpu .pp .pk:has(.p2){padding-top:calc(6% * var(--ps,1))}
.kcpu .sb .pp .pk .p2{font-size:calc(min(4.3vw,18.5px) * var(--ps,1))}
.kcpu .pp .pk::before{content:"";position:absolute;inset:0;z-index:-1;clip-path:polygon(50% 0%,88% 22%,99% 100%,1% 100%,12% 22%);background:linear-gradient(160deg,var(--piece1) 20%,var(--piece2));box-shadow:inset -1px -2px 3px #7c531b66}
.kcpu .pp.promo .pk{color:var(--red)}
.kcpu .pp.g .pk{filter:drop-shadow(-1.5px -2.5px 1px #000a)}
.kcpu .hand .hw{width:calc(var(--gc) - 2px);height:calc(var(--gc) - 2px)}
.kcpu .hand{flex-wrap:wrap;gap:4px;padding:0 6px;flex:1}
.kcpu .hand .hw .pc{font-size:calc(min(7.2vw,31px) * var(--ps,1))}
.kcpu .handrow .hlabel{width:52px;line-height:1.3;font-size:11px;text-align:center;flex:none}
.kcpu .handrow{min-height:calc(var(--gc) + 2px)}
@keyframes gpop{0%{opacity:0;transform:scale(.3)}40%{opacity:1;transform:scale(1.15)}60%{transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes gpop2{0%{opacity:0;transform:scale(.3)}18%{opacity:1;transform:scale(1.15)}30%{transform:scale(1)}80%{opacity:1}100%{opacity:0}}
/* --- 記事に置くときの調整（2026-07-27・美濃囲いページで検出して追加） --- */
/* 盤はトップページと同じ大きさ（min(100vw,430px)-22px）なので、
本文の左右padding 16px の中には入らない。狭い画面では左右いっぱいに出す
（CLAUDE.md 盤・駒UI 17 のフルブリードと同じ考え方。盤の大きさは1pxも変えない） */
@media(max-width:479px){.kcpu{margin-left:-16px;margin-right:-16px}}
/* 駒の動きマーク（赤●・矢印）は「駒の動かし方」ページ専用の教育機能。
ふつうの記事の盤はトップページと同じ見た目にする（CLAUDE.md 盤・駒UI 0） */
.kcpu .pp svg{display:none}
/* ボタンのタップ範囲44px。paddingで高さを足すと盤が下がるので当たり判定だけ広げる
（CLAUDE.md タップ範囲1・ヘッダーフッターの作り方2〜3と同じ手） */
.kcpu .gctl button{position:relative}
.kcpu .gctl button::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.kcpu .promoDlg button{position:relative}
.kcpu .promoDlg button::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
/* 2文字の成駒（成香・成桂・成銀）。縦書き（writing-mode）だと五角形の外へ文字がはみ出すので、
1文字ずつ縦に積む形にした（2026-07-27に実測して検出。移植元の koma.html も同じ不具合） */
.kcpu .pp .pk .p2{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
writing-mode:horizontal-tb;letter-spacing:normal;line-height:1;padding-top:calc(6% * var(--ps,1));
font-size:calc(min(4.3vw,18.5px) * var(--ps,1))}
.kcpu .pp .pk .p2 i{font-style:normal;display:block;line-height:1}
/* スプラッシュ（王手！・勝ち！！・負け…）が駒の字の下に隠れないようにする。
.pk の filter が合成レイヤを作るため、スプラッシュ側もレイヤに上げて重ね順を確定させる */
.kcpu .gsplash{will-change:transform,opacity}
/* 持ち駒の枚数バッジが隣の持ち駒のタップを奪わないようにする */
.kcpu .hand .hw .cnt{pointer-events:none}
/* 強さボタンの44px当たり判定が下の持ち駒行に届かないよう間を空ける */
.kcpu .gctl.kcpu-lv{margin-bottom:8px}
/* まった（盤・駒UI 14b の色） */
.kcpu .gctl button.matta{background:#6b5a1e;border-color:#6b5a1e}
.kcpu .gctl button:disabled{opacity:.35;cursor:default}
@media(prefers-reduced-motion:reduce){
.kcpu .gsplash.show,.kcpu .gsplash.check.show,.kcpu .gsplash.kdone.show{animation:none;opacity:1}
.kcpu .promoDlg button:active,.kcpu .gctl button:active{transform:none}
}