/* ==========================================================================
   ここから下はすべて .saikyo-chess の中だけに効きます。
   WordPress のテーマ側 CSS と相互に干渉させないためです。
   （リバーシと同じ考えかた・同じ書きかたで揃えてあります）
   ========================================================================== */
.saikyo-chess{all:initial;display:block;width:100%;container-type:inline-size;text-align:left}
.saikyo-chess.saikyo-chess *,
.saikyo-chess.saikyo-chess *::before,
.saikyo-chess.saikyo-chess *::after{
  /* 見た目 */
  margin:0;padding:0;border:0;outline:0;background:none;box-shadow:none;
  font:inherit;color:inherit;line-height:inherit;text-align:inherit;
  text-decoration:none;list-style:none;box-sizing:border-box;opacity:1;
  /* 配置と大きさ — テーマが .board や .pc に height を当ててくると
     盤の縦横比が壊れるため、ここまで戻しておく */
  width:auto;height:auto;min-width:0;min-height:0;max-width:none;max-height:none;
  position:static;top:auto;right:auto;bottom:auto;left:auto;
  float:none;clear:none;vertical-align:baseline;
}

/* ==========================================================================
   最強AIボードゲームズ — チェス
   外部フォント・ライブラリは使わない。盤と駒だけ大理石の画像（WebP）を使う。

   盤 board-v2.webp   … PolyHaven の chess_set（CC0）の板を Blender で焼いたもの。
                        マスは Onyx015（白／深紅に置き換え）、枠は Onyx001。
   駒 pieces-v1.webp  … 同じ板の駒。6種 × 2色を1枚に並べたスプライト。
                        仰角52度の平行投影なので、どのマスに置いても
                        見えかたが変わらない（＝1枚で足りる）。
   ========================================================================== */
.saikyo-chess.saikyo-chess{
  --dur:230ms;
  --ease:cubic-bezier(.33,.9,.35,1);
  --font:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Meiryo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Hiragino Mincho ProN","Yu Mincho",Georgia,"Times New Roman",serif;

  --bg:#f0f0f0; --panel:#ffffff; --panel-b:#dcdcdc; --panel-2:#f5f5f5;
  --text:#1c1c1c; --sub:#5f5f5f; --sub2:#8a8a8a;
  --accent:#1c1c1c; --accent-t:#ffffff; --accent-w:rgba(0,0,0,.10);

  /* 盤の寸法。板の実測から出した比なので、勝手に変えると駒とマスがずれる。
     枠 = (0.27662 - 0.231552) / 0.55324 = 8.1464%  */
  --frame:8.1464%;
  --sq:12.5%;              /* 盤面（枠の内側）に対する1マス */
  --pc-w:21.875%;          /* 駒スプライトの幅 = 1.75マス */
  --pc-h:19.375%;          /* 駒スプライトの高さ = 1.55マス */
  --pc-x:-4.6875%;         /* (1.75 - 1) / 2 マス ぶん左へ */
  --pc-y:-8.75%;           /* 台座の中心をマスの中心に合わせる = 0.70マス上へ */
  --step-x:57.142857%;     /* 1マス = 駒スプライト幅の 1/1.75 */
  --step-y:64.516129%;     /* 1マス = 駒スプライト高さの 1/1.55 */

  --gold:#514c44;          /* 枠（灰褐色のオニキス）に載せる文字 */
  --mark:rgba(28,24,18,.42);
  --sel:#c8a24e;
  --check:#b3121c;
}
.saikyo-chess.saikyo-chess *{box-sizing:border-box}
/* クラス側の display 指定に負けないようにする */
.saikyo-chess.saikyo-chess [hidden]{display:none!important}
.saikyo-chess.saikyo-chess{
  background:var(--bg); color:var(--text); font-family:var(--font);
  font-size:15px; line-height:1.6; -webkit-text-size-adjust:100%;
  overscroll-behavior:none;
  /* min-height:100dvh は index.html 側（単体ページ）に置いてある。
     記事に埋め込むときは、盤の下に画面いっぱいの余白ができてしまうため。 */
}
.saikyo-chess.saikyo-chess button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer}
.saikyo-chess.saikyo-chess button[disabled]{cursor:default;opacity:.45}
.saikyo-chess.saikyo-chess h1,.saikyo-chess.saikyo-chess h2{margin:0;font-weight:600;letter-spacing:.02em}
.saikyo-chess.saikyo-chess .screen{display:none;max-width:1080px;margin:0 auto;padding:16px 14px 36px}
.saikyo-chess.saikyo-chess .screen.on{display:block}
.saikyo-chess.saikyo-chess .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ============================================================ メニュー */
.saikyo-chess.saikyo-chess .brand{text-align:center;padding:20px 0 24px}
.saikyo-chess.saikyo-chess .brand .ch-title{margin:0;font-weight:600;font-size:26px;letter-spacing:.06em}
.saikyo-chess.saikyo-chess .brand .sub{color:var(--sub);font-size:13px;margin-top:6px;letter-spacing:.1em}
.saikyo-chess.saikyo-chess .card{
  background:var(--panel);border:1px solid var(--panel-b);border-radius:14px;
  padding:18px;margin-bottom:14px;
}
.saikyo-chess.saikyo-chess .card > h2{font-size:13px;color:var(--sub);letter-spacing:.1em;margin-bottom:14px}
.saikyo-chess.saikyo-chess .seg{display:flex;gap:6px;flex-wrap:wrap}
.saikyo-chess.saikyo-chess .seg button{
  flex:1;min-width:92px;padding:11px 8px;border-radius:9px;font-size:13.5px;
  border:1px solid var(--panel-b);background:var(--panel-2);color:var(--sub);
  transition:background .15s,color .15s,border-color .15s;
}
.saikyo-chess.saikyo-chess .seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-t);border-color:var(--accent)}
/* 強さの選択。リバーシと同じ形にそろえてある */
.saikyo-chess.saikyo-chess .levels{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}
.saikyo-chess.saikyo-chess .lv{
  height:54px;border:1px solid var(--panel-b);background:var(--panel-2);
  border-radius:9px;font-size:16px;font-weight:600;color:var(--sub);
  display:flex;align-items:center;justify-content:center;
  transition:transform .12s,background .15s,color .15s,border-color .15s;
}
.saikyo-chess.saikyo-chess .lv:hover{border-color:var(--accent);color:var(--text)}
.saikyo-chess.saikyo-chess .lv:active{transform:scale(.94)}
.saikyo-chess.saikyo-chess .lv[aria-pressed="true"]{
  background:var(--accent);color:var(--accent-t);border-color:var(--accent);
  box-shadow:0 3px 12px var(--accent-w);
}
.saikyo-chess.saikyo-chess .lv.ex{grid-column:span 2;font-size:14px;letter-spacing:.14em}
.saikyo-chess.saikyo-chess .lv-desc{margin-top:13px;font-size:13px;color:var(--sub);min-height:3.2em}
.saikyo-chess.saikyo-chess .lv-desc b{color:var(--text);font-weight:600}
.saikyo-chess.saikyo-chess .row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0}
.saikyo-chess.saikyo-chess .row + .row{border-top:1px solid var(--panel-b)}
.saikyo-chess.saikyo-chess .row .lbl{font-size:14px}
.saikyo-chess.saikyo-chess .row .note{display:block;font-size:12px;color:var(--sub2);margin-top:1px;line-height:1.45}
.saikyo-chess.saikyo-chess .sw{
  position:relative;width:46px;height:27px;border-radius:14px;flex:none;border:1px solid var(--panel-b);
  background:var(--panel-2);transition:background .18s,border-color .18s;
}
.saikyo-chess.saikyo-chess .sw::after{
  content:"";position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;
  background:var(--sub);transition:transform .18s,background .18s;
}
.saikyo-chess.saikyo-chess .sw[aria-pressed="true"]{background:var(--accent);border-color:var(--accent)}
.saikyo-chess.saikyo-chess .sw[aria-pressed="true"]::after{transform:translateX(19px);background:var(--accent-t)}
.saikyo-chess.saikyo-chess .btn-primary{
  width:100%;padding:15px;border-radius:12px;margin-top:4px;
  background:var(--accent);color:var(--accent-t);font-size:16px;font-weight:600;
  letter-spacing:.06em;transition:transform .12s,filter .15s;
}
.saikyo-chess.saikyo-chess .btn-primary:hover{filter:brightness(1.12)}
.saikyo-chess.saikyo-chess .btn-primary:active{transform:scale(.985)}
.saikyo-chess.saikyo-chess .btn-ghost{
  padding:10px 14px;border-radius:10px;border:1px solid var(--panel-b);
  background:var(--panel);color:var(--sub);font-size:13px;
  transition:border-color .15s,color .15s;
}
.saikyo-chess.saikyo-chess .btn-ghost:hover{border-color:var(--accent);color:var(--text)}

/* ============================================================ 対局の上帯 */
.saikyo-chess.saikyo-chess .bar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:2px 2px 12px;
}
.saikyo-chess.saikyo-chess .btn-back,
.saikyo-chess.saikyo-chess .btn-icon{
  padding:7px 11px;border-radius:9px;border:1px solid var(--panel-b);
  background:var(--panel);color:var(--sub);font-size:12.5px;white-space:nowrap;
  transition:border-color .15s,color .15s;
}
.saikyo-chess.saikyo-chess .btn-back:hover,
.saikyo-chess.saikyo-chess .btn-icon:hover{border-color:var(--accent);color:var(--text)}
.saikyo-chess.saikyo-chess .status{
  display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;letter-spacing:.04em;
}
.saikyo-chess.saikyo-chess .dot{
  width:14px;height:14px;border-radius:50%;display:inline-block;flex:none;
  box-shadow:0 1px 3px rgba(0,0,0,.35);
}
.saikyo-chess.saikyo-chess .dot-w{background:linear-gradient(150deg,#fff,#d8d5cf);box-shadow:0 1px 3px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.18)}
.saikyo-chess.saikyo-chess .dot-r{background:linear-gradient(150deg,#a3142a,#5d0511)}
.saikyo-chess.saikyo-chess .status.check{color:var(--check)}
/* AI が考えているあいだ、手番の丸をゆっくり脈打たせる */
.saikyo-chess.saikyo-chess .status.busy .dot{animation:sc-think 1.1s ease-in-out infinite}
@keyframes sc-think{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.76);opacity:.55}}

/* ============================================================ 盤 */
.saikyo-chess.saikyo-chess .stage{display:flex;gap:18px;align-items:flex-start}
/* width:100% は必須。縦並びになったとき margin:0 auto が stretch を打ち消し、
   幅が auto になって盤がつぶれる */
.saikyo-chess.saikyo-chess .board-wrap{flex:1 1 auto;min-width:0;width:100%;max-width:720px;margin:0 auto}

.saikyo-chess.saikyo-chess .board{
  position:relative;width:100%;aspect-ratio:1/1;padding:var(--frame);
  background:url("../img/board-v2.webp") center/100% 100% no-repeat;
  border-radius:6px;
  box-shadow:0 10px 30px rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.18);
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
}
.saikyo-chess.saikyo-chess .grid{
  position:relative;width:100%;height:100%;
  /* 駒は枠の上まではみ出す（背の高い駒が奥の段で枠に重なるのは実物と同じ） */
  overflow:visible;
}

/* --- マス。当たり判定と印だけを持ち、色は盤の画像が受け持つ --- */
.saikyo-chess.saikyo-chess .cell{
  position:absolute;width:var(--sq);height:var(--sq);
  left:calc(var(--sq) * var(--f));top:calc(var(--sq) * var(--r));
  cursor:pointer;z-index:1;
}
.saikyo-chess.saikyo-chess .cell::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  transition:opacity .16s;opacity:0;
}
/* 動けるマス（空き）— 中央の丸 */
.saikyo-chess.saikyo-chess .cell.mv::after{
  opacity:1;
  background:radial-gradient(circle at 50% 50%,var(--mark) 0 15%,transparent 16%);
}
/* 取れるマス — 四隅の切り込み。駒を隠さずに「取れる」が伝わる */
.saikyo-chess.saikyo-chess .cell.cap::after{
  opacity:1;
  background:
    linear-gradient(135deg,var(--mark) 0 22%,transparent 22%) left top/38% 38% no-repeat,
    linear-gradient(225deg,var(--mark) 0 22%,transparent 22%) right top/38% 38% no-repeat,
    linear-gradient(45deg, var(--mark) 0 22%,transparent 22%) left bottom/38% 38% no-repeat,
    linear-gradient(315deg,var(--mark) 0 22%,transparent 22%) right bottom/38% 38% no-repeat;
}
/* 選択中 */
.saikyo-chess.saikyo-chess .cell.sel::after{
  opacity:1;
  background:rgba(200,162,78,.30);
  box-shadow:inset 0 0 0 2px var(--sel);
}
/* 直前の手。面を染めると大理石が汚れて見えるので、金の細い枠だけにする */
.saikyo-chess.saikyo-chess .cell.last::after{
  opacity:1;background:rgba(200,162,78,.10);
  box-shadow:inset 0 0 0 2px rgba(200,162,78,.85);
}
.saikyo-chess.saikyo-chess .cell.sel.last::after{
  background:rgba(200,162,78,.30);box-shadow:inset 0 0 0 2px var(--sel);
}
/* 王手されている玉 */
.saikyo-chess.saikyo-chess .cell.chk::after{
  opacity:1;
  background:radial-gradient(circle at 50% 55%,rgba(179,18,28,.55) 0 30%,rgba(179,18,28,0) 72%);
}
@media (hover:hover){
  .saikyo-chess.saikyo-chess .cell.mv:hover::after,
  .saikyo-chess.saikyo-chess .cell.cap:hover::after{filter:brightness(.55)}
}

/* --- 駒 --- */
.saikyo-chess.saikyo-chess .pc{
  position:absolute;left:var(--pc-x);top:var(--pc-y);
  width:var(--pc-w);height:var(--pc-h);
  background-image:url("../img/pieces-v1.webp");
  background-size:600% 200%;
  background-position:var(--sx) var(--sy);
  background-repeat:no-repeat;
  transform:translate(calc(var(--step-x) * var(--f)),calc(var(--step-y) * var(--r)));
  transition:transform var(--dur) var(--ease);
  pointer-events:none;
  will-change:transform;
}
.saikyo-chess.saikyo-chess .pc[data-t="K"]{--sx:0%}
.saikyo-chess.saikyo-chess .pc[data-t="Q"]{--sx:20%}
.saikyo-chess.saikyo-chess .pc[data-t="R"]{--sx:40%}
.saikyo-chess.saikyo-chess .pc[data-t="B"]{--sx:60%}
.saikyo-chess.saikyo-chess .pc[data-t="N"]{--sx:80%}
.saikyo-chess.saikyo-chess .pc[data-t="P"]{--sx:100%}
.saikyo-chess.saikyo-chess .pc[data-c="w"]{--sy:0%}
.saikyo-chess.saikyo-chess .pc[data-c="b"]{--sy:100%}
/* 取られた駒は、その場で薄くなって消える */
.saikyo-chess.saikyo-chess .pc.gone{
  animation:sc-gone 260ms var(--ease) forwards;
}
@keyframes sc-gone{to{opacity:0;filter:blur(2px)}}
.saikyo-chess.saikyo-chess .pc.drop{animation:sc-drop 260ms var(--ease)}
@keyframes sc-drop{from{opacity:0}to{opacity:1}}

/* --- 座標。枠の上に直接置く --- */
.saikyo-chess.saikyo-chess .coords{
  position:absolute;pointer-events:none;display:flex;
  font-family:var(--serif);font-size:clamp(8px,1.55cqw,13px);
  letter-spacing:.06em;color:var(--gold);
}
.saikyo-chess.saikyo-chess .coords span{flex:1;text-align:center}
.saikyo-chess.saikyo-chess .coords.files{
  left:var(--frame);right:var(--frame);bottom:0;height:var(--frame);
  align-items:center;
}
.saikyo-chess.saikyo-chess .coords.ranks{
  top:var(--frame);bottom:var(--frame);left:0;width:var(--frame);
  flex-direction:column;
}
.saikyo-chess.saikyo-chess .coords.ranks span{display:flex;align-items:center;justify-content:center}
.saikyo-chess.saikyo-chess .board.nocoord .coords{display:none}

/* ============================================================ 取った駒 */
.saikyo-chess.saikyo-chess .captured{
  display:flex;align-items:flex-end;gap:0;min-height:38px;padding:2px 6px;flex-wrap:wrap;
}
.saikyo-chess.saikyo-chess .captured .cp{
  /* 盤の上の駒とは別のスプライト。影を落とさず、駒を枠いっぱいに詰めてある
     （盤用は影のぶんの余白が広く、小さく置くと駒が豆粒になる） */
  width:23px;height:34px;flex:none;margin-right:-5px;
  background-image:url("../img/pieces-ui-v1.webp");
  background-size:600% 200%;background-repeat:no-repeat;
  background-position:var(--sx) var(--sy);
}
.saikyo-chess.saikyo-chess .captured .cp:last-of-type{margin-right:0}
.saikyo-chess.saikyo-chess .captured .score{
  margin-left:6px;font-size:12px;color:var(--sub2);letter-spacing:.04em;
}

/* ============================================================ 横の棋譜 */
.saikyo-chess.saikyo-chess .panel{
  flex:0 0 232px;background:var(--panel);border:1px solid var(--panel-b);
  border-radius:12px;overflow:hidden;
}
.saikyo-chess.saikyo-chess .panel-head{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:11px 13px;border-bottom:1px solid var(--panel-b);
  font-size:12px;color:var(--sub);letter-spacing:.1em;
}
.saikyo-chess.saikyo-chess .panel-head .ply{color:var(--sub2);letter-spacing:.02em}
.saikyo-chess.saikyo-chess .moves{
  height:min(46vh,420px);overflow-y:auto;padding:6px 0;
  font-family:var(--serif);font-size:13.5px;
}
.saikyo-chess.saikyo-chess .moves li{
  display:grid;grid-template-columns:2.4em 1fr 1fr;gap:4px;
  padding:3px 13px;color:var(--text);
}
.saikyo-chess.saikyo-chess .moves li .no{color:var(--sub2);font-size:12px}
.saikyo-chess.saikyo-chess .moves li b{font-weight:400}
.saikyo-chess.saikyo-chess .moves li b.now{
  font-weight:600;background:rgba(200,162,78,.22);border-radius:4px;padding:0 4px;margin:0 -4px;
}
.saikyo-chess.saikyo-chess .panel-foot{
  display:flex;gap:6px;padding:10px;border-top:1px solid var(--panel-b);
}
.saikyo-chess.saikyo-chess .panel-foot .btn-ghost{flex:1;text-align:center;padding:9px 4px}

/* ============================================================ ダイアログ */
.saikyo-chess.saikyo-chess .modal{
  position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  background:rgba(20,20,20,.55);padding:20px;
  animation:sc-fade 160ms ease;
}
@keyframes sc-fade{from{opacity:0}to{opacity:1}}
.saikyo-chess.saikyo-chess .modal-box{
  background:var(--panel);border-radius:16px;padding:22px;width:min(340px,100%);
  text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.4);
}
.saikyo-chess.saikyo-chess .modal-t{font-size:18px;font-weight:600;letter-spacing:.04em}
.saikyo-chess.saikyo-chess .modal-s{font-size:13.5px;color:var(--sub);margin:8px 0 18px}
.saikyo-chess.saikyo-chess .modal .btn-ghost{width:100%;margin-top:8px;text-align:center}
.saikyo-chess.saikyo-chess .promo-row{display:flex;gap:8px;margin-top:16px}
.saikyo-chess.saikyo-chess .promo-row button{
  flex:1;aspect-ratio:.95/1.42;border:1px solid var(--panel-b);border-radius:10px;
  background-color:var(--panel-2);
  background-image:url("../img/pieces-ui-v1.webp");
  background-size:600% 200%;background-repeat:no-repeat;
  background-position:var(--sx) var(--sy);
  transition:border-color .15s,transform .12s;
}
.saikyo-chess.saikyo-chess .promo-row button:hover{border-color:var(--sel)}
.saikyo-chess.saikyo-chess .promo-row button:active{transform:scale(.95)}

/* ============================================================ 画面幅 */
@media (max-width:860px){
  .saikyo-chess.saikyo-chess .stage{flex-direction:column;gap:12px}
  .saikyo-chess.saikyo-chess .panel{flex:none;width:100%;max-width:720px;margin:0 auto}
  .saikyo-chess.saikyo-chess .moves{height:132px}
}
@media (max-width:420px){
  .saikyo-chess.saikyo-chess .screen{padding:10px 8px 28px}
  .saikyo-chess.saikyo-chess .captured .cp{width:19px;height:28px;margin-right:-4px}
}
/* 画面の縦が短いときは盤を縮めて、1画面に収める */
@media (min-width:861px) and (max-height:760px){
  .saikyo-chess.saikyo-chess .board-wrap{max-width:min(720px,74vh)}
}
@media (prefers-reduced-motion:reduce){
  .saikyo-chess.saikyo-chess .pc{transition:none}
  .saikyo-chess.saikyo-chess .pc.gone,
  .saikyo-chess.saikyo-chess .pc.drop{animation:none}
}