/* ==========================================================================
   ここから下はすべて .saikyo-reversi の中だけに効きます。
   WordPress のテーマ側 CSS と相互に干渉させないためです。
   ========================================================================== */
.saikyo-reversi{all:initial;display:block;width:100%;container-type:inline-size;text-align:left}
.saikyo-reversi.saikyo-reversi *,
.saikyo-reversi.saikyo-reversi *::before,
.saikyo-reversi.saikyo-reversi *::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 や .disc に 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）を使う
   ========================================================================== */.saikyo-reversi.saikyo-reversi{
  --dur:380ms;
  --ease-place:cubic-bezier(.34,1.56,.64,1);
  --ease-flip:cubic-bezier(.45,.05,.35,1);
  --font:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Meiryo",system-ui,-apple-system,"Segoe UI",sans-serif;
}
/* --- ライト = 大理石の実物感（UIはモノトーン、石と盤だけ石材） ---
   石の画像は真上から見た固定視点で陰影を焼き込んである。カメラが動かない
   ので、実時間3Dで計算しても見えかたは変わらない。石のめくりは既存の
   rotateY（CSS の 3D 変形）がそのまま効く。 */
.saikyo-reversi.saikyo-reversi{
  --bg:#f0f0f0; --panel:#ffffff; --panel-b:#dcdcdc; --panel-2:#f5f5f5;
  --text:#1c1c1c; --sub:#5f5f5f; --sub2:#8a8a8a;
  --board:#a2937f; --line:rgba(255,255,255,.88);
  --black-bg:url("../img/stone-black.webp") center/100% 100% no-repeat;
  --white-bg:url("../img/stone-white.webp") center/100% 100% no-repeat;
  --black-sh:0 3px 6px rgba(0,0,0,.5);
  --white-sh:0 3px 6px rgba(0,0,0,.38);
  --hint:rgba(0,0,0,.36);
  --accent:#1c1c1c; --accent-t:#ffffff; --accent-w:rgba(0,0,0,.10);
  --last:#1c1c1c; --danger:#4a4a4a;
  --board-sh:inset 0 0 26px rgba(0,0,0,.34);
}
/* ダークテーマは 2026-09-04 に廃止。テーマはこの大理石の1つだけ。
   AI評価ヒートマップは設定の「AI評価ヒートマップ」スイッチで、テーマとは無関係に出る。 */
.saikyo-reversi.saikyo-reversi *{box-sizing:border-box}
/* クラス側の display 指定に負けないようにする (凡例・バッジが出っぱなしになる) */
.saikyo-reversi.saikyo-reversi [hidden]{display:none!important}
.saikyo-reversi.saikyo-reversi,.saikyo-reversi.saikyo-reversi{margin:0;padding:0}
.saikyo-reversi.saikyo-reversi{
  background:var(--bg); color:var(--text); font-family:var(--font);
  font-size:15px; line-height:1.6; -webkit-text-size-adjust:100%;
  min-height:100dvh; overscroll-behavior:none;
}
.saikyo-reversi.saikyo-reversi button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer}
.saikyo-reversi.saikyo-reversi h1,.saikyo-reversi.saikyo-reversi h2,.saikyo-reversi.saikyo-reversi h3{margin:0;font-weight:600;letter-spacing:.02em}
.saikyo-reversi.saikyo-reversi .screen{display:none;max-width:1020px;margin:0 auto;padding:20px 16px 40px}
.saikyo-reversi.saikyo-reversi .screen.on{display:block}
.saikyo-reversi.saikyo-reversi .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
/* ============================================================ メニュー */
.saikyo-reversi.saikyo-reversi .brand{text-align:center;padding:22px 0 26px}
.saikyo-reversi.saikyo-reversi .brand .rv-title{margin:0;font-weight:600;font-size:26px;letter-spacing:.04em}
.saikyo-reversi.saikyo-reversi .brand .sub{color:var(--sub);font-size:13px;margin-top:6px;letter-spacing:.08em}
.saikyo-reversi.saikyo-reversi .brand .mark{
  width:54px;height:54px;margin:0 auto 14px;border-radius:50%;
  background:conic-gradient(var(--text) 0 50%,transparent 50% 100%);
  box-shadow:0 0 0 2px var(--text) inset,0 4px 14px rgba(0,0,0,.25);
}
.saikyo-reversi.saikyo-reversi .card{
  background:var(--panel);border:1px solid var(--panel-b);border-radius:14px;
  padding:18px;margin-bottom:14px;
}
.saikyo-reversi.saikyo-reversi .card > h2{font-size:13px;color:var(--sub);letter-spacing:.1em;margin-bottom:14px}
.saikyo-reversi.saikyo-reversi .levels{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}
.saikyo-reversi.saikyo-reversi .lv{
  height:56px;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-reversi.saikyo-reversi .lv:hover{border-color:var(--accent);color:var(--text)}
.saikyo-reversi.saikyo-reversi .lv:active{transform:scale(.94)}
.saikyo-reversi.saikyo-reversi .lv[aria-pressed="true"]{
  background:var(--accent);color:var(--accent-t);border-color:var(--accent);
  box-shadow:0 3px 12px var(--accent-w);
}
.saikyo-reversi.saikyo-reversi .lv.ex{grid-column:span 2;font-size:14px;letter-spacing:.14em}
.saikyo-reversi.saikyo-reversi .lv-desc{margin-top:13px;font-size:13px;color:var(--sub);min-height:3.2em}
.saikyo-reversi.saikyo-reversi .lv-desc b{color:var(--text);font-weight:600}
.saikyo-reversi.saikyo-reversi .seg{display:flex;gap:6px;flex-wrap:wrap}
.saikyo-reversi.saikyo-reversi .seg button{
  flex:1;min-width:82px;padding:9px 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-reversi.saikyo-reversi .seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-t);border-color:var(--accent)}
.saikyo-reversi.saikyo-reversi .row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0}
.saikyo-reversi.saikyo-reversi .row + .row{border-top:1px solid var(--panel-b)}
.saikyo-reversi.saikyo-reversi .row .lbl{font-size:14px}
.saikyo-reversi.saikyo-reversi .row .note{display:block;font-size:12px;color:var(--sub2);margin-top:1px;line-height:1.45}
.saikyo-reversi.saikyo-reversi .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-reversi.saikyo-reversi .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-reversi.saikyo-reversi .sw[aria-pressed="true"]{background:var(--accent);border-color:var(--accent)}
.saikyo-reversi.saikyo-reversi .sw[aria-pressed="true"]::after{transform:translateX(19px);background:var(--accent-t)}
.saikyo-reversi.saikyo-reversi .btn-primary{
  width:100%;padding:15px;border:none;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-reversi.saikyo-reversi .btn-primary:hover{filter:brightness(1.08)}
.saikyo-reversi.saikyo-reversi .btn-primary:active{transform:scale(.985)}
.saikyo-reversi.saikyo-reversi .btn-ghost{
  width:100%;padding:12px;border-radius:12px;background:transparent;
  border:1px solid var(--panel-b);color:var(--sub);font-size:14px;
}
/* ============================================================== 対局 */
.saikyo-reversi.saikyo-reversi .topbar{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.saikyo-reversi.saikyo-reversi .icon-btn{
  border:1px solid var(--panel-b);background:var(--panel);border-radius:9px;
  padding:8px 13px;font-size:13.5px;color:var(--sub);
  transition:border-color .15s,color .15s;
}
.saikyo-reversi.saikyo-reversi .icon-btn:hover{border-color:var(--accent);color:var(--text)}
.saikyo-reversi.saikyo-reversi .icon-btn[disabled]{opacity:.35;cursor:default}
.saikyo-reversi.saikyo-reversi .topbar .lvtag{
  margin-left:auto;font-size:12px;letter-spacing:.1em;color:var(--sub);
  border:1px solid var(--panel-b);border-radius:20px;padding:5px 13px;
}
.saikyo-reversi.saikyo-reversi .layout{display:grid;grid-template-columns:1fr;gap:16px;justify-items:center}
.saikyo-reversi.saikyo-reversi .layout > *{min-width:0}
/* 画面幅ではなく「置かれている枠の幅」で 2 カラムに切り替える。
   WordPress の記事カラムに埋め込んだときに崩れないようにするため。
   コンテナクエリ非対応の古いブラウザでは 1 カラムのままになる（それで問題ない）。 */
@container (min-width:860px){
  .saikyo-reversi.saikyo-reversi .layout{grid-template-columns:auto 292px;align-items:start;justify-items:stretch}
}
.saikyo-reversi.saikyo-reversi .col{width:100%;max-width:520px;display:flex;flex-direction:column;align-items:center}
.saikyo-reversi.saikyo-reversi .col-board{max-width:min(520px,68vh)}
.saikyo-reversi.saikyo-reversi .score{display:flex;align-items:center;gap:12px;width:100%;margin-bottom:12px}
.saikyo-reversi.saikyo-reversi .side{
  flex:1;display:flex;align-items:center;gap:10px;padding:10px 13px;
  border:1px solid var(--panel-b);border-radius:12px;background:var(--panel);
  transition:border-color .2s,box-shadow .2s;
}
.saikyo-reversi.saikyo-reversi .side.turn{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-w)}
.saikyo-reversi.saikyo-reversi .pip{width:24px;height:24px;border-radius:50%;flex:none}
.saikyo-reversi.saikyo-reversi .pip.b{background:var(--black-bg);box-shadow:var(--black-sh)}
.saikyo-reversi.saikyo-reversi .pip.w{background:var(--white-bg);box-shadow:var(--white-sh)}
.saikyo-reversi.saikyo-reversi .side .n{font-size:21px;font-weight:600;font-variant-numeric:tabular-nums;margin-left:auto}
.saikyo-reversi.saikyo-reversi .side .who{font-size:12px;color:var(--sub)}
/* 枠は Onyx009 の一枚板。実物の大理石盤に倣って幅を広めに取る（高級感）。
   padding は % なので盤の大きさに追従する。clamp でスマホと大画面の端を止める。
   艶は上辺のハイライトと下辺の影、それに斜めの光で出している。 */
.saikyo-reversi.saikyo-reversi .board-frame{
  width:100%;padding:clamp(18px,7.4%,58px);border-radius:8px;
  background:
    linear-gradient(158deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.04) 34%,rgba(0,0,0,.10) 70%,rgba(0,0,0,.24) 100%),
    url("../img/frame-marble-v2.webp") center/cover no-repeat,
    #6f6a5e;
  box-shadow:
    0 18px 40px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.42);
}
/* 盤は Onyx012（クリーム）の一枚板。色は素材のまま、艶だけ重ねている。
   罫線を白くはっきり出すため、ごく薄い陰り（rgba(0,0,0,.07)）だけ入れてある。
   大理石をもっと素のまま見せたいなら、その .07 を 0 にする。 */
.saikyo-reversi.saikyo-reversi .board{
  display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;
  width:100%;border-radius:3px;box-shadow:var(--board-sh);
  background:
    linear-gradient(152deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.02) 34%,rgba(0,0,0,.06) 70%,rgba(0,0,0,.14) 100%),
    linear-gradient(rgba(0,0,0,.07),rgba(0,0,0,.07)),
    url("../img/board-marble-v2.webp") center/cover no-repeat,
    var(--board);
}
.saikyo-reversi.saikyo-reversi .cell{
  position:relative;border:0;padding:0;background:transparent;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  display:flex;align-items:center;justify-content:center;
}
.saikyo-reversi.saikyo-reversi .cell:nth-child(8n){border-right:0}
.saikyo-reversi.saikyo-reversi .cell:nth-child(n+57){border-bottom:0}
/* 石 — Y 軸 180 度回転で裏返す */
.saikyo-reversi.saikyo-reversi .disc{
  width:80%;height:80%;border-radius:50%;position:relative;
  transform-style:preserve-3d;
  transition:transform var(--dur) var(--ease-flip);
}
.saikyo-reversi.saikyo-reversi .disc .f{position:absolute;inset:0;border-radius:50%;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.saikyo-reversi.saikyo-reversi .disc .fb{background:var(--black-bg);box-shadow:var(--black-sh)}
.saikyo-reversi.saikyo-reversi .disc .fw{background:var(--white-bg);box-shadow:var(--white-sh);transform:rotateY(180deg)}
.saikyo-reversi.saikyo-reversi .cell[data-v="0"] .disc{transform:scale(0);transition:transform 150ms ease-in}
.saikyo-reversi.saikyo-reversi .cell[data-v="1"] .disc{transform:rotateY(0deg)}
.saikyo-reversi.saikyo-reversi .cell[data-v="2"] .disc{transform:rotateY(180deg)}
.saikyo-reversi.saikyo-reversi .cell.placing .disc{transition:transform var(--dur) var(--ease-place)}
.saikyo-reversi.saikyo-reversi .cell.last::before{
  content:"";position:absolute;width:84%;height:84%;border-radius:50%;
  box-shadow:0 0 0 2.5px var(--last);opacity:.9;pointer-events:none;z-index:2;
  animation:pop .4s var(--ease-place);
}
@keyframes pop{from{transform:scale(.5);opacity:0}
to{transform:scale(1);opacity:.9}
}
.saikyo-reversi.saikyo-reversi .cell .hint{
  position:absolute;width:26%;height:26%;border-radius:50%;
  background:var(--hint);opacity:0;transform:scale(.4);
  transition:opacity .22s,transform .22s;pointer-events:none;
}
.saikyo-reversi.saikyo-reversi .cell.can .hint{opacity:1;transform:scale(1)}
.saikyo-reversi.saikyo-reversi .cell.can:hover .hint{transform:scale(1.55);opacity:.7}
.saikyo-reversi.saikyo-reversi .cell .heat{
  position:absolute;inset:9%;border-radius:5px;pointer-events:none;opacity:0;
  transition:opacity .3s;display:flex;align-items:flex-start;justify-content:flex-end;
  font-size:10px;font-weight:600;font-variant-numeric:tabular-nums;
  padding:2px 3px;color:var(--text);
}
.saikyo-reversi.saikyo-reversi .cell.heat-on .heat{opacity:1}
/* ------------------------------------------------------ 情報パネル */
.saikyo-reversi.saikyo-reversi .status{
  display:flex;align-items:center;gap:9px;padding:11px 14px;border-radius:11px;
  background:var(--panel);border:1px solid var(--panel-b);
  font-size:14px;width:100%;min-height:46px;margin-top:12px;
}
.saikyo-reversi.saikyo-reversi .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.saikyo-reversi.saikyo-reversi .status.thinking .dot{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}
50%{opacity:.3;transform:scale(.6)}
}
.saikyo-reversi.saikyo-reversi .actions{display:flex;gap:7px;flex-wrap:wrap;width:100%;margin-top:10px}
.saikyo-reversi.saikyo-reversi .actions .icon-btn{flex:1;text-align:center;min-width:72px}
.saikyo-reversi.saikyo-reversi .meta{
  margin-top:10px;padding:12px 14px;border-radius:11px;background:var(--panel);
  border:1px solid var(--panel-b);font-size:12.5px;color:var(--sub);width:100%;
}
.saikyo-reversi.saikyo-reversi .meta div{display:flex;justify-content:space-between;padding:2.5px 0}
.saikyo-reversi.saikyo-reversi .meta b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.saikyo-reversi.saikyo-reversi .meta .ex{color:var(--accent)}
.saikyo-reversi.saikyo-reversi .legend{
  display:flex;align-items:center;gap:7px;margin-top:9px;padding-top:9px;
  border-top:1px solid var(--panel-b);font-size:11.5px;
}
.saikyo-reversi.saikyo-reversi .legend .bar{
  flex:1;height:7px;border-radius:4px;
  background:linear-gradient(90deg,#c0392b,#c9a227,#2e9e5b);
}
/* ---------------------------------------------------------- 終局 */
.saikyo-reversi.saikyo-reversi .overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:20px;z-index:20;
}
.saikyo-reversi.saikyo-reversi .overlay.on{display:flex;animation:fade .3s}
@keyframes fade{from{opacity:0}
}
.saikyo-reversi.saikyo-reversi .result{
  background:var(--panel);border:1px solid var(--panel-b);border-radius:16px;
  padding:26px 24px;text-align:center;max-width:340px;width:100%;
  animation:rise .38s var(--ease-place);
}
@keyframes rise{from{transform:translateY(18px) scale(.96);opacity:0}
}
.saikyo-reversi.saikyo-reversi .result h2{font-size:24px;margin-bottom:6px}
.saikyo-reversi.saikyo-reversi .result .final{font-size:15px;color:var(--sub);margin-bottom:8px;font-variant-numeric:tabular-nums}
.saikyo-reversi.saikyo-reversi .result .badge{
  display:inline-block;margin-bottom:18px;padding:5px 14px;border-radius:20px;
  background:var(--accent-w);color:var(--accent);font-size:12px;letter-spacing:.06em;
}
.saikyo-reversi.saikyo-reversi .result .btn-primary{margin-bottom:8px}
.saikyo-reversi.saikyo-reversi .toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);
  background:var(--panel);border:1px solid var(--panel-b);color:var(--text);
  padding:10px 20px;border-radius:22px;font-size:13.5px;opacity:0;
  transition:opacity .25s,transform .25s;pointer-events:none;z-index:30;
  box-shadow:0 6px 22px rgba(0,0,0,.3);
}
.saikyo-reversi.saikyo-reversi .toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion:reduce){.saikyo-reversi.saikyo-reversi .disc,.saikyo-reversi.saikyo-reversi .cell .hint,.saikyo-reversi.saikyo-reversi .cell .heat{transition-duration:1ms!important}
.saikyo-reversi.saikyo-reversi .cell.last::before,.saikyo-reversi.saikyo-reversi .result,.saikyo-reversi.saikyo-reversi .overlay{animation:none}
.saikyo-reversi.saikyo-reversi .status.thinking .dot{animation:none}
}