/* ===================================================================
   将棋ジム 共通「静的な盤面図・レーダー」CSS（2026-07-25新設）
   囲い一覧 /kakoi/ と同じ見た目の静的図を、詳細記事でも使い回すための共通部品。
   使い方: <link rel="stylesheet" href="/shogi-ui.css?v=20260719d">
           <link rel="stylesheet" href="/kakoi-fig.css?v=20260725">  ← shogi-ui.cssの後・ページ<style>の前
           <script src="/shogi-ui.js?v=20260719d"></script>          ← KTYPEを使うため必須
           <script src="/kakoi-fig.js?v=20260725"></script>
   前提: shogi-ui.css が :root の --wood1/--wood2/--line/--piece1/--piece2/--ink/--red を定義済み。
   注意: shogi-ui.css/js は一切変更していない（参照ページの同時アップは不要）。
   =================================================================== */

/* ----- 静的な盤面図（table方式・木目グラデ＋茶枠＋影） ----- */
.sb{--c:min(8.6vw,34px);width:auto;border-collapse:separate;border-spacing:0;display:inline-table;margin:0 auto;
 background:radial-gradient(circle at 30% 20%,#ffffff2e,#0000 60%),linear-gradient(135deg,var(--wood1),var(--wood2));
 border:3px solid var(--line);border-radius:4px;box-shadow:0 6px 22px #000a,inset 0 0 14px #a86a1e55}
.sb td{position:relative;width:var(--c);height:var(--c);min-width:var(--c);background:transparent;border:0.5px solid #7a4a1236;
 text-align:center;font-weight:700;color:var(--ink);font-size:calc(var(--c)*.52);padding:0;vertical-align:middle}
.sb .kp{position:relative;width:calc(88% * var(--ps,1));height:calc(92% * var(--ps,1));margin:auto;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-weight:800;color:var(--ink);font-size:calc(var(--c)*.62*var(--ps,1));line-height:1;padding-top:calc(8% * var(--ps,1))}
/* 五角形はfilterと同一要素に置くと影がclip-pathで切られるため::beforeに分離 */
.sb .kp::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}
.sb .kp.g{transform:rotate(180deg);filter:drop-shadow(-1.5px -2.5px 1px #000a)}
.sb .kp.two{font-size:calc(var(--c)*.3*var(--ps,1));letter-spacing:-1px;writing-mode:vertical-rl;padding-top:calc(4% * var(--ps,1))}
.sb .kp.promo{color:var(--red)}
/* 駒種別サイズ（将棋ウォーズ準拠＝実物駒の号差） */
.sb .pt-K{--ps:1} .sb .pt-R,.sb .pt-B{--ps:.98} .sb .pt-G,.sb .pt-S{--ps:.96}
.sb .pt-N{--ps:.92} .sb .pt-L{--ps:.89} .sb .pt-P{--ps:.86}
/* 小型図（早見表用） */
.sb.mini{--c:18px;table-layout:fixed;width:calc(var(--c) * var(--cols,5));border-width:2px;box-shadow:0 2px 8px #0007;margin:0 auto}
.sb.mini td{width:var(--c);height:var(--c);min-width:0;max-width:none;padding:0;line-height:1;border:0.4px solid #7a4a1236;overflow:hidden}
.sb.mini .kp{width:90%;height:94%;padding-top:0;font-size:calc(var(--c)*.6*var(--ps,1))}
.sb.mini .kp.two{font-size:calc(var(--c)*.3*var(--ps,1))}
.sbwrap{margin:10px 0;text-align:center}
/* 黄色ハイライト（動いた先・着地マス）と 赤●（攻めが来る場所） */
.sb td.hl{background:#ffe08a73;box-shadow:inset 0 0 0 2px #ffe08a}
.sb .rdot{position:absolute;left:50%;top:50%;width:28%;height:28%;min-width:4.5px;min-height:4.5px;
 transform:translate(-50%,-50%);background:var(--red);border-radius:50%;z-index:3}
.sb .rdot.on{opacity:.62;box-shadow:0 0 0 1.2px #fff}
.sb .bcirc{position:absolute;left:50%;top:50%;width:34%;height:34%;min-width:6px;min-height:6px;
 transform:translate(-50%,-50%);border:2px solid #2e86de;border-radius:50%;z-index:3;box-shadow:0 0 0 1px #fff8}
/* 組む手順（1手ずつの図・スマホは2列） */
.tejun{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.tejun .tstep{background:#ffffff0d;border:1px solid #ffffff26;border-radius:10px;padding:7px 5px;text-align:center}
.tejun .tno{font-size:12px;font-weight:700;color:#ffcf40;line-height:1.5}
.tejun .tno.sub{color:#9db4d6}
.tejun .tcap{font-size:11.5px;line-height:1.55;margin-top:5px;color:#e8eefc}
.tejun .sb{--c:min(6.4vw,26px)}
@media(min-width:641px){.tejun{grid-template-columns:1fr 1fr 1fr}.tejun .sb{--c:26px}}

/* ----- レーダーチャート（軸数は data-sc の要素数で自動。軸ラベル横に点数を表示） ----- */
.radar{text-align:center;margin:6px 0}
.radar svg{width:100%;max-width:320px;height:auto}
.radar .rax{stroke:#ffffff33;stroke-width:1;fill:none}
.radar .rgrid{stroke:#ffffff1a;fill:none}
.radar .rpoly{fill:#ffcf4055;stroke:#ffcf40;stroke-width:2}
.radar .rlab{fill:#dbe6f5;font-size:10px}
.radar .rval{fill:#ffd884;font-size:10px;font-weight:700}

/* ----- 発展の流れ 再生プレイヤー ----- */
.kplayer{background:#ffffff0d;border:1px solid #ffffff26;border-radius:12px;padding:10px 10px 12px;margin:10px 0}
.kplayer .kp-routes{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.kplayer .kp-rt{flex:1 1 auto;min-height:44px;padding:6px 10px;font-size:12px;font-weight:700;line-height:1.4;
 color:#cfe0f7;background:#16274a;border:1px solid #ffffff33;border-radius:10px;cursor:pointer;font-family:inherit}
.kplayer .kp-rt.on{color:#0c1a2e;background:#ffcf40;border-color:#ffcf40}
.kplayer .kp-rt:active{transform:scale(.97)}
.kplayer .kp-head{display:flex;align-items:center;gap:8px;min-height:24px}
.kplayer .kp-no{font-size:13px;font-weight:700;color:#ffcf40}
.kplayer .kp-done{font-size:12px;font-weight:700;color:#0c1a2e;background:#9be8a0;border-radius:8px;padding:1px 8px;opacity:0}
.kplayer .kp-done.on{opacity:1}
.kplayer .sb{--c:min(9.4vw,40px)}
.kplayer .kp-cap{font-size:13.5px;line-height:1.7;margin:6px 0 8px;min-height:3.4em}
.kplayer .kp-ctl{display:flex;gap:6px}
.kplayer .kp-b{flex:1;min-height:48px;font-size:13px;font-weight:700;color:#fff;background:#3b5273;
 border:none;border-radius:10px;cursor:pointer;font-family:inherit;padding:4px 2px}
.kplayer .kp-next{background:#ff8c1a}
.kplayer .kp-b:active{transform:scale(.96)}
.kplayer .kp-b:disabled{opacity:.35;cursor:default}
.kplayer .kp-bar{height:5px;background:#ffffff1a;border-radius:3px;margin-top:8px;overflow:hidden}
.kplayer .kp-bar i{display:block;height:100%;width:0;background:var(--gold);border-radius:3px;transition:width .18s}

/* ----- 打ち込み練習（.kquiz／2026-07-27新設・kakoi-quiz.js が使う） ----- */
/* 盤のマスは .sb の既定 min(8.6vw,34px) のまま（盤・駒UI 1）。44pxはボタンだけ（タップ範囲1） */
.kquiz{background:#ffffff0d;border:1px solid #ffffff26;border-radius:12px;padding:10px 10px 12px;margin:10px 0}
.kquiz .kq-head{display:flex;align-items:center;gap:8px;height:24px;overflow:hidden;white-space:nowrap}
.kquiz .kq-no{font-size:13px;font-weight:700;color:#ffcf40}
.kquiz .kq-done{font-size:12px;font-weight:700;color:#0c1a2e;background:#9be8a0;border-radius:8px;padding:1px 8px;opacity:0}
.kquiz .kq-done.on{opacity:1}
/* 問いの文は高さ固定（レイアウト4＝盤の上端を動かさない） */
.kquiz .kq-ask{font-size:13.5px;line-height:1.6;height:3.4em;margin:4px 0 0;overflow:hidden;display:flex;align-items:center;color:#e8eefc}
.kquiz .kq-stage{position:relative}
.kquiz .sbwrap{margin:4px 0 8px}
.kquiz .sb td{cursor:pointer}
/* 動けるマス=#fff3d1の16%／動けないマス=#1a2438の10%（盤・駒UI 10＝トップページと同値・同じ重ね方） */
.kquiz .sb td.dim::before{content:"";position:absolute;inset:0;background:#1a2438;opacity:.1;z-index:4;pointer-events:none}
.kquiz .sb td.kqcand::after{content:"";position:absolute;inset:1px;border-radius:5px;background:#fff3d1;opacity:.16;z-index:1;pointer-events:none}
.kquiz .sb td.hl{background:#ffe08a73;box-shadow:inset 0 0 0 2px #ffe08a}
.kquiz .sb td.kqans{background:#ffe08a73;box-shadow:inset 0 0 0 2px #ffe08a}
/* 選んだ駒は金色グロー（.pc.sel と同じ値） */
.kquiz .sb .kp.sel{filter:drop-shadow(1.5px 2.5px 1px #000a) drop-shadow(0 0 6px var(--gold)) brightness(1.15)}
/* いま動かす駒のマス＝青い点線のわく（同じ種類の駒が何枚もある時に問いを一つに決める） */
.kquiz .sb td.kqfrom{outline:2px dashed #8fd0ff;outline-offset:-3px}
/* 不正解のマスに赤い✕（スプラッシュが消えたあとも見えるよう2.4秒。色はスプラッシュの赤と変える） */
.kquiz .sb td.kqng::after{content:"✕";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
 color:#c0392b;font-size:calc(var(--c)*.8);font-weight:900;z-index:60;pointer-events:none;
 text-shadow:0 0 2px #fff,0 0 2px #fff,0 0 2px #fff,0 0 4px #fff,0 0 6px #fff}
/* 正解・不正解は盤の真ん中にスプラッシュだけ（盤・駒UI 7／16）。盤幅からはみ出さない大きさにする */
.kquiz .splash{font-size:min(8.5vw,30px);letter-spacing:2px;top:34%}
.kquiz .kq-stage.kqshake{animation:kquizshake .45s}
@keyframes kquizshake{0%,100%{transform:translateX(0)}15%{transform:translateX(-7px)}30%{transform:translateX(7px)}
 45%{transform:translateX(-5px)}60%{transform:translateX(5px)}75%{transform:translateX(-3px)}90%{transform:translateX(3px)}}
@media(prefers-reduced-motion:reduce){.kquiz .kq-stage.kqshake{animation:none}}
.kquiz .kq-ctl{display:flex;gap:6px}
.kquiz .kq-b{flex:1;min-height:48px;font-size:13px;font-weight:700;color:#fff;background:#3b5273;
 border:none;border-radius:10px;cursor:pointer;font-family:inherit;padding:4px 2px}
.kquiz .kq-hint{background:#8e44ad}  /* 答えを見せるボタン＝盤・駒UI 17 の紫 */
.kquiz .sb.kqend td{cursor:default}
.kquiz .kq-b:active{transform:scale(.96)}
.kquiz .kq-b:disabled{opacity:.35;cursor:default}
.kquiz .kq-bar{height:5px;background:#ffffff1a;border-radius:3px;margin-top:8px;overflow:hidden}
.kquiz .kq-bar i{display:block;height:100%;width:0;background:var(--gold);border-radius:3px;transition:width .18s}