/* ===================================================================
   将棋ジム 共通盤UI CSS（トップページ index.html 準拠・2026-07-19）
   全ページの盤は見た目も挙動もトップページと完全同一（CLAUDE.md 盤・駒UI ルール0）
   使い方: <link rel="stylesheet" href="/shogi-ui.css?v=日付">（ページの<style>より前に読み込む）
   前提: ページ側で --cell（持ち駒サイズ基準）を定義できる。未定義時は下記の既定値
   =================================================================== */
:root{
  --wood1:#f0c070; --wood2:#dfa24e; --line:#7a4a12;
  --piece1:#fde8bc; --piece2:#e9bf78; --ink:#2a1600; --red:#c0392b;
  --gold:#ffcf40; --accent:#ff8c1a;
  --cell:calc((min(100vw,430px) - 34px) / 9);
}

/* ----- 持ち駒行（詰将棋・解説ページの問題盤用） ----- */
.handrow{display:flex;align-items:center;gap:6px;min-height:calc(var(--cell) + 8px);padding:3px 6px;margin:4px 0;
 background:#00000055;border-radius:8px;border:1px solid #ffffff1c}
.handrow .hname{font-size:11px;color:#bcd;white-space:nowrap;width:52px;text-align:center;line-height:1.3}
.handrow .pieces{display:flex;align-items:center;gap:5px;flex-wrap:wrap;flex:1}
.handrow .none{font-size:11px;color:#89a}

/* ----- 盤（grid方式・木目グラデ＋茶枠＋影） ----- */
.gboard{display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);
 aspect-ratio:1/1;
 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}
.cell{position:relative;border:0.5px solid #7a4a1236;cursor:pointer}
.cell .dot{position:absolute;left:0;top:0;width:4px;height:4px;background:#7a4a1266;border-radius:50%;transform:translate(-50%,-50%);z-index:1}

/* ----- 駒（五角形クリーム駒・明朝体・後手180度回転・成駒赤）＝index.htmlと同一（2026-07-19） ----- */
.pc{
  position:absolute;left:50%;top:50%;z-index:2;display:flex;align-items:center;justify-content:center;
  width:calc(95% * var(--ps,1));height:calc(99% * var(--ps,1));
  transform:translate(-50%,-50%);
  filter:drop-shadow(1.5px 2.5px 1px #000a);
  font-family:"Hiragino Mincho ProN","Yu Mincho","MS Mincho",serif;
  font-weight:800;color:var(--ink);cursor:pointer;
  font-size:calc(min(7.2vw,31px) * var(--ps,1));line-height:1;padding-top:calc(11% * var(--ps,1));
}
/* 五角形はfilterと同一要素に置くと影がclip-pathで切られるため::beforeに分離（2026-07-19検出） */
.pc::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;
}
/* 駒種別サイズ（将棋ウォーズ準拠＝実物駒の号差。形は同一でサイズだけ微差） */
.pt-K{--ps:1}
.pt-R,.pt-B{--ps:.98}
.pt-G,.pt-S{--ps:.96}
.pt-N{--ps:.92}
.pt-L{--ps:.89}
.pt-P{--ps:.86}
.pc.two{font-size:calc(min(4.3vw,18.5px) * var(--ps,1));letter-spacing:-1px;writing-mode:vertical-rl;padding-top:calc(6% * var(--ps,1))}  /* 4.6vw,20pxだと360/390pxで二文字目下端がclip-pathに切られる（2026-07-19検出） */
.pc.gote{transform:translate(-50%,-50%) rotate(180deg);filter:drop-shadow(-1.5px -2.5px 1px #000a)}  /* 180度回転で影も回るため逆向き指定＝見た目は右下 */
.pc.promo{color:var(--red)}

/* ----- 持ち駒（盤上駒とピクセル一致・2枚以上は右下赤丸バッジ） ----- */
.hw{position:relative;width:calc(var(--cell)*0.86);height:calc(var(--cell)*0.86);flex:none;cursor:pointer;border:0.5px solid transparent}
.hw .pc{font-size:calc(min(6.2vw,26px) * var(--ps,1))}
.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}

/* ----- 判定表示 ----- */
.cell.ok{background:#7fe27f55}
.cell.ng{background:#c0392b66}

/* ----- 駒の挙動表示（トップページ index.html と完全同一） ----- */
.pc.sel{filter:drop-shadow(1.5px 2.5px 1px #000a) drop-shadow(0 0 6px var(--gold)) brightness(1.15)}
.pc.gote.sel{filter:drop-shadow(-1.5px -2.5px 1px #000a) drop-shadow(0 0 6px var(--gold)) brightness(1.15)}
.cell.dim::before{content:"";position:absolute;inset:0;background:#1a2438;opacity:.1;z-index:4;pointer-events:none}  /* 選択中は候補以外を暗く */
.cand{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;cursor:pointer}  /* 駒の下に敷く（取れる駒が霞まないように） */
.cand::after{content:"";position:absolute;inset:1px;border-radius:5px;background:#fff3d1;opacity:.16}  /* 動けるマスをマス全体で明るく表示 */
.sh .hw{cursor:pointer}

/* ----- スプラッシュ演出（トップページ#splashと同一・盤ごとに.splashを.stage内に置く） ----- */
.splash{
  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;
}
.splash.show{animation:spop 1.1s ease-out}
.splash.ok{color:var(--gold)} .splash.ng{color:#ff5b5b} .splash.checkmate{color:#ff8c1a}
@keyframes spop{0%{opacity:0;transform:scale(.3)}18%{opacity:1;transform:scale(1.15)}30%{transform:scale(1)}80%{opacity:1}100%{opacity:0}}

/* ----- 問題ごとの操作ボタン（もう一度＝トップページ#btnResetと同色・同形） ----- */
.pctl{display:flex;gap:8px;margin:8px 0 2px;justify-content:center}
.pctl button{border:none;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;color:#fff;font-family:inherit;padding:12px 4px}
.pctl button:active{transform:scale(.96)}
.pctl .retry{background:#3b5273;flex:1;max-width:170px}

/* ----- 成り確認ダイアログ（トップページと同一・window.confirm禁止） ----- */
#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;
}
#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;cursor:pointer;color:#fff;font-family:inherit}
#promoDlg button:first-child{margin-top:0}
#promoDlg button.no{background:#3b5273}
#promoDlg button:active{transform:scale(.96)}