/* 対局面。盤・石・遮罩・工具条。
   本文だけのページは読み込まない —— 盤が要るのは
   トップ・禁じ手講座・詰め五目の 3 枚だけ。 */

/* ═══ 版面の作り ═══
   design の実寸（560×676）で 1 枚の版面として組み、視口に合わせるのは
   transform: scale() の倍率ひとつだけ。react-tetris と同じ作りで、
   asopiko（jp-tetris）の game.css もこれを採っている。

   なぜ「property を 1 つずつ可変にする」のをやめたか ——
   盤の幅だけを可変にしていたとき、狭い画面では対局開始のカードが
   盤の幅に引きずられて細くなり、中の文字が折り返してかえって背が伸びた。
   縮めるほどカードが盤からはみ出す悪循環になる。
   版面ごと 1 つの倍率で縮めれば、影も字間も枠線も同じ比で縮み、
   design との一致がどの画面でも保たれる。

   倍率は高さと幅の両方から出して小さいほうを採る（ui/fit-play.js）。
   片方しか見ないと、低くて広い窓か高くて狭い窓のどちらかで必ずはみ出す。

   ⚠ 版面の実寸（--box-w / --box-h）はレイアウトの事実なので CSS が持ち、
     JS はそれを読んで「視口に何倍で入るか」だけを返す。二重に持つとずれる。 */
.play-stage {
  /* ⚠ 寸法と倍率は**この入れ物**に持たせる。CSS 変数は下へしか継承しないので、
     .play 側に書くと親であるこちらから読めず、高さが縮まないまま残る（実際そうなった）*/
  /* 版面には 2 つの案がある。どちらを使うかは「盤が大きくなるほう」を
     ui/fit-play.js が実測で選び、data-layout に書く。
     幅の閾値で決め打ちにしていたころは、1200×800 のような縦長の窓で
     縦積みが選ばれて盤が 550px に留まっていた（横 3 列なら 650px 取れた）*/
  --stacked-w: 560;
  --stacked-h: 676;  /* 状態帯 46 ＋ 余白 10 ＋ 盤 560 ＋ 余白 12 ＋ 工具条 48 */
  --wide-w: 992;     /* 左柱 200 ＋ 16 ＋ 盤 560 ＋ 16 ＋ 右柱 200 */
  --wide-h: 560;     /* 盤だけ */
  /* 横 3 列のとき、内容の 920px を破って使ってよい幅。
     JS も倍率の見積もりにこの 2 つを読む —— 値は CSS 側の 1 か所だけ */
  --wide-max: 1400;
  --wide-gutter: 48;

  --box-w: var(--stacked-w);
  --box-h: var(--stacked-h);
  /* 当ては 1。.9 で出してから JS が上げると盤が膨らんで見える。
     正しい倍率は index の同期 boot が data-fit 前に書く */
  --scale: 1;

  position: relative;
  width: 100%;
  /* 縮小後の高さ。transform は場所を実寸のまま占めるので、
     これが無いと版面の下に (676 − 676×倍率) px の空白が残る */
  height: calc(var(--box-h) * 1px * var(--scale));
  /* 倍率確定まで非表示（間違った大きさで1フレーム出さない） */
  opacity: 0;
}
.play-stage[data-fit] { opacity: 1; }

.play {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: calc(var(--box-w) * -.5px);
  width: calc(var(--box-w) * 1px);
  height: calc(var(--box-h) * 1px);
  transform: scale(var(--scale));
  transform-origin: top center;
}

/* 版面の中は全部この 560×676 の中での固定寸法。視口のことは一切知らない。
   状態帯と工具条を絶対配置にするのは、対局前後で出入りしても
   盤の位置と大きさが 1px も動かないようにするため */
.play__status-row { position: absolute; top: 0; left: 0; right: 0; }
.board            { position: absolute; top: 56px; left: 0; width: 560px; height: 560px; }
.tools            { position: absolute; left: 0; right: 0; bottom: 0; }


/* ── 状態帯（盤の上）──
   min-height を帯の側に置くのは、「ここに置く」が出入りしても
   盤が上下に跳ねないようにするため */
.play__status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  min-height: 46px;
}

.status {
  flex: 1;
  font-size: var(--fs-status);
  font-weight: 700;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  padding: 11px 14px;
  min-height: var(--tap);
  display: flex;
  align-items: center;
}

.status[data-tone="thinking"]  { color: var(--btn-gray-ink); }
.status[data-tone="pending"]   { color: var(--accent); }
.status[data-tone="forbidden"] { color: var(--forbidden); }
.status[data-tone="replay"]    { color: var(--accent-deep); }

/* 対局メタ（手数など）。design の surface / line に揃える。大げさな装飾はしない */
.side-panel {
  display: none; /* stacked では状態帯だけで足りる */
}
[data-layout="wide"] .side-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
}
.side-panel__badge {
  align-self: flex-start;
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--accent-deep);
  background: var(--btn-green-hover);
  border: 1px solid var(--accent-deep);
  border-radius: 999px;
  padding: 2px 8px;
}
.side-panel__mode {
  font-size: var(--fs-label);
  color: var(--muted);
}
.side-panel__stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}
.side-panel__stat {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
}
.side-panel__stat dt {
  margin: 0;
  font-size: var(--fs-label);
  color: var(--muted);
}
.side-panel__stat dd {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* 二段確定の 2 つのボタン。design 稿ではここだけ縁が 1px（他は 1.5px）*/
.play__confirm {
  font-size: var(--fs-status);
  padding: 10px 18px;
  min-height: var(--tap);
}

.play__cancel {
  font-size: var(--fs-body);
  font-weight: 400;
  padding: 10px 12px;
  min-height: var(--tap);
  border-width: 1px;
}

/* ── 盤 ──
   罫線は SVG を背景に敷く。225 個の枡それぞれに border を引くと
   交点で線が二重になり、盤の目が均一に見えない。
   木目は repeating-linear-gradient、地色は 135° の grd。すべて design 稿の実測値 */
.board {
  /* 位置と寸法は版面側（冒頭の .board 絶対配置）が持つ。
     ここは見た目だけ —— 木地・罫線・角丸・影 */
  border-radius: var(--r-card);
  box-shadow: var(--shadow-board);
  touch-action: manipulation;
  user-select: none;
  background-image:
    var(--board-grid-svg),
    repeating-linear-gradient(93deg, var(--board-grain) 0 3px, rgb(96 64 20 / 0) 3px 9px),
    linear-gradient(135deg, var(--board-wood-a), var(--board-wood-b));
  background-size: 100% 100%;
}

/* 罫線と星の SVG。15 路、外周だけ太い（0.07 対 0.035）。
   星は天元と四隅の計 5 つ、半径 0.13。viewBox は 15 単位＝盤 1 枚 */
:root {
  --board-grid-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cg stroke='%235b4426' fill='%235b4426'%3E%3Cline x1='0.5' y1='0.5' x2='14.5' y2='0.5' stroke-width='0.07'/%3E%3Cline x1='0.5' y1='0.5' x2='0.5' y2='14.5' stroke-width='0.07'/%3E%3Cline x1='0.5' y1='1.5' x2='14.5' y2='1.5' stroke-width='0.035'/%3E%3Cline x1='1.5' y1='0.5' x2='1.5' y2='14.5' stroke-width='0.035'/%3E%3Cline x1='0.5' y1='2.5' x2='14.5' y2='2.5' stroke-width='0.035'/%3E%3Cline x1='2.5' y1='0.5' x2='2.5' y2='14.5' stroke-width='0.035'/%3E%3Cline x1='0.5' y1='3.5' x2='14.5' y2='3.5' stroke-width='0.035'/%3E%3Cline x1='3.5' y1='0.5' x2='3.5' y2='14.5' stroke-width='0.035'/%3E%3Cline x1='0.5' y1='4.5' x2='14.5' y2='4.5' stroke-width='0.035'/%3E%3Cline x1='4.5' y1='0.5' x2='4.5' y2='14.5' stroke-width='0.035'/%3E%3Cline x1='0.5' y1='5.5' x2='14.5' y2='5.5' stroke-width='0.035'/%3E%3Cline x1='5.5' y1='0.5' x2='5.5' y2='14.5' stroke-width='0.035'/%3E%3Cline x1='0.5' y1='6.5' x2='14.5' y2='6.5' stroke-width='0.035'/%3E%3Cline x1='6.5' y1='0.5' x2='6.5' y2='14.5' stroke-width='0.035'/%3E%3Cline x1='0.5' y1='7.5' x2='14.5' y2='7.5' stroke-width='0.035'/%3E%3Cline x1='7.5' y1='0.5' x2='7.5' y2='14.5' stroke-width='0.035'/%3E%3Cline x1='0.5' y1='8.5' x2='14.5' y2='8.5' stroke-width='0.035'/%3E%3Cline x1='8.5' y1='0.5' x2='8.5' y2='14.5' stroke-width='0.035'/%3E%3Cline x1='0.5' y1='9.5' x2='14.5' y2='9.5' stroke-width='0.035'/%3E%3Cline x1='9.5' y1='0.5' x2='9.5' y2='14.5' stroke-width='0.035'/%3E%3Cline x1='0.5' y1='10.5' x2='14.5' y2='10.5' stroke-width='0.035'/%3E%3Cline x1='10.5' y1='0.5' x2='10.5' y2='14.5' stroke-width='0.035'/%3E%3Cline x1='0.5' y1='11.5' x2='14.5' y2='11.5' stroke-width='0.035'/%3E%3Cline x1='11.5' y1='0.5' x2='11.5' y2='14.5' stroke-width='0.035'/%3E%3Cline x1='0.5' y1='12.5' x2='14.5' y2='12.5' stroke-width='0.035'/%3E%3Cline x1='12.5' y1='0.5' x2='12.5' y2='14.5' stroke-width='0.035'/%3E%3Cline x1='0.5' y1='13.5' x2='14.5' y2='13.5' stroke-width='0.035'/%3E%3Cline x1='13.5' y1='0.5' x2='13.5' y2='14.5' stroke-width='0.035'/%3E%3Cline x1='0.5' y1='14.5' x2='14.5' y2='14.5' stroke-width='0.07'/%3E%3Cline x1='14.5' y1='0.5' x2='14.5' y2='14.5' stroke-width='0.07'/%3E%3Ccircle cx='3.5' cy='3.5' r='0.13' stroke='none'/%3E%3Ccircle cx='11.5' cy='3.5' r='0.13' stroke='none'/%3E%3Ccircle cx='7.5' cy='7.5' r='0.13' stroke='none'/%3E%3Ccircle cx='3.5' cy='11.5' r='0.13' stroke='none'/%3E%3Ccircle cx='11.5' cy='11.5' r='0.13' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
}

.board__grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  grid-template-rows: repeat(15, 1fr);
}

/* 枡は button。div ＋ onClick では鍵盤で辿れない。
   見た目は素のままにするので、既定の枠と地は消す */
.cell {
  position: relative;
  cursor: pointer;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
}

.cell:disabled { cursor: default; }

.cell:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 2px;
}

/* ── 石 ──
   入場アニメは新規石（data-enter）だけ。毎 render で全石が pop すると盤がチカつく */
.stone {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
}
.stone[data-enter] {
  animation: pop .16s ease;
}

.stone[data-color="black"] {
  background: var(--stone-black);
  box-shadow: var(--stone-black-shadow);
}

.stone[data-color="white"] {
  background: var(--stone-white);
  box-shadow: var(--stone-white-shadow);
  border: 1px solid var(--stone-white-edge);
}

/* 確定前の仮置き。半透明＋破線で「まだ置いていない」ことを示す */
.stone[data-ghost] {
  opacity: .5;
  outline: 2px dashed var(--accent);
  outline-offset: 2px;
  animation: none;
}

/* 直前の一手と勝ち筋。輪の太さで区別する（金 3px ＞ 緑 2.5px）*/
.stone[data-last] { box-shadow: 0 0 0 2.5px var(--stone-last), 0 2px 4px rgb(0 0 0 / .4); }
.stone[data-win]  { box-shadow: 0 0 0 3px var(--stone-win), 0 2px 5px rgb(0 0 0 / .4); }

/* 禁じ手の枡。石は無いので枡そのものに印を出す。
   ここは design 稿に無い —— 禁じ手の可視化は本サイトの差別化の芯なので
   §7 の承認を得て足した部分（PLAN.md 参照）*/
.cell[data-forbidden]::after {
  content: '';
  position: absolute;
  /* 枡に対する割合で置く。**vw で字の大きさを決めてはいけない** ——
     盤の倍率は視口幅と一致しないので、盤が大きいほど × が相対的に小さくなり、
     図版では星と見分けが付かなくなった（実測）。
     inset ＋ background なら、枡が何 px になっても比が変わらない */
  inset: 24%;
  background: var(--forbidden-mark) center / contain no-repeat;
  opacity: .78;
  pointer-events: none;
}

/* 禁点を踏んだ枡だけ軽く弾く */
.cell[data-reject] { animation: cell-reject .28s ease; }
@keyframes cell-reject {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

/* 禁じ手の短文。盤上に浮く */
.forbid-tip {
  position: absolute;
  top: 58px;
  left: 50%;
  translate: -50% 0;
  z-index: 3;
  max-width: min(300px, 90%);
  padding: 8px 12px;
  background: var(--scrim-card);
  border: 1px solid var(--forbidden);
  border-radius: var(--r-btn);
  box-shadow: var(--shadow-overlay);
  text-align: center;
}
.forbid-tip__text {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--forbidden);
}
.forbid-tip__link {
  font-size: var(--fs-label);
  color: var(--accent-deep);
}

/* 棋譜。wide 右柱用。stacked では短く */
.kifu {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  background: var(--surface);
  overflow: hidden;
}
.kifu__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--line);
}
.kifu__title {
  font-size: var(--fs-body);
  font-weight: 700;
}
.kifu__hint {
  font-size: var(--fs-label);
  color: var(--muted);
}
.kifu__list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  overflow-y: auto;
  max-height: 100px;
  scrollbar-width: thin;
}
.kifu__item {
  display: grid;
  grid-template-columns: 2em 10px 1fr;
  gap: 6px;
  align-items: center;
  padding: 3px 10px;
  font-size: var(--fs-label);
  font-variant-numeric: tabular-nums;
}
.kifu__item[data-current] {
  background: var(--btn-green-hover);
  font-weight: 700;
}
.kifu__n { color: var(--muted); text-align: right; }
.kifu__stone {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.kifu__item[data-color="black"] .kifu__stone { background: var(--stone-black); }
.kifu__item[data-color="white"] .kifu__stone {
  background: var(--stone-white);
  border: 1px solid var(--stone-white-edge);
}
.tools__toggles {
  display: flex;
  gap: 6px;
  align-items: center;
  flex: 1.6;
  min-width: 0;
}
.tools__toggles .safe-tap {
  flex: 1;
  justify-content: flex-start;
}
.safe-tap--wide {
  flex: 1.4;
}

/* ── 遮罩（対局開始・勝敗）── */
.overlay {
  position: absolute;
  inset: 0;
  border-radius: var(--r-card);
  background: var(--scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  z-index: 2;
}

/* 対局開始の遮罩は**盤の上だけ**に敷く。版面いっぱい（inset:0）にすると
   状態帯と工具条の場所まで暗幕が伸び、盤の上下に灰色の帯が出る。
   design では暗幕は盤の中だけなので、盤と同じ箱に合わせる。
   ⚠ .overlay と同じ権重なので、必ず .overlay より**後ろ**に置くこと */
.overlay--menu { top: 56px; bottom: auto; height: 560px; }

.overlay__card {
  background: var(--scrim-card);
  border: 1px solid var(--line);
  border-radius: var(--r-overlay);
  width: 100%;
  box-shadow: var(--shadow-overlay);
  display: flex;
  flex-direction: column;
}

.overlay__card--menu   { max-width: var(--w-menu);   padding: 18px 20px; gap: 11px; }
.overlay__card--result { max-width: var(--w-result); padding: 18px 18px; gap: 10px; }

.overlay__title {
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-lead);
  letter-spacing: .06em;
  padding-bottom: 2px;
  margin: 0;
}

.overlay__result {
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-result);
  letter-spacing: .06em;
  color: var(--accent);
  margin: 0;
}

.overlay__insight {
  margin: 0;
  text-align: center;
  font-size: var(--fs-label);
  line-height: 1.45;
  color: var(--body);
}

.overlay__hint {
  margin: -4px 0 0;
  padding: 0 2px 0 46px;
  font-size: var(--fs-label);
  line-height: 1.4;
  color: var(--muted);
}

.overlay__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.overlay__row-label {
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--muted);
  min-width: 38px;
}

/* 遮罩の中のボタン。大きさは design の実測値どおり個別に持つ */
.overlay__start-ai { font-size: var(--fs-cta);    border-radius: var(--r-cta); padding: 14px 8px; min-height: var(--tap-cta); margin-top: 2px; }
.overlay__start-2p { font-size: var(--fs-status); border-radius: var(--r-cta); padding: 12px 8px; min-height: var(--tap-tool); }
.overlay__resume   { font-size: var(--fs-btn);    border-radius: var(--r-cta); padding: 10px 8px; min-height: 44px; }
.overlay__rematch  { font-size: var(--fs-logo);   border-radius: var(--r-cta); padding: 12px 8px; min-height: 48px; }
.overlay__replay   { font-size: var(--fs-btn);    border-radius: var(--r-cta); padding: 10px 8px; min-height: 44px; }
.overlay__learn    { font-size: var(--fs-btn);    border-radius: var(--r-cta); padding: 10px 8px; min-height: 44px; text-align: center; text-decoration: none; }
.overlay__to-menu  { font-size: var(--fs-btn);    border-radius: var(--r-cta); padding: 10px 8px; min-height: 44px; }

/* 推奨マーク（競技ルール） */
.seg--recommend { position: relative; }
.seg--recommend::after {
  content: '推奨';
  position: absolute;
  top: -7px;
  right: -2px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 3px;
  background: var(--accent);
  color: var(--on-fill);
  pointer-events: none;
}

/* 遮罩の下端、詰め五目とルールへの導線 */
.overlay__links {
  border-top: 1px solid var(--line);
  margin-top: 2px;
  padding-top: 9px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.overlay__link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-size: var(--fs-body);
  font-weight: 500;
  padding: 9px 4px;
  min-height: var(--tap);
  color: var(--ink);
}

.overlay__link:hover { color: var(--ink); }

.overlay__glyph {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--accent);
}
.overlay__glyph--rules { color: var(--accent-deep); }

.overlay__arrow { margin-left: auto; color: var(--accent); }

/* ── 工具条（盤の下）── */
.tools {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  align-items: center;
}

.tools .btn {
  flex: 1;
  font-size: var(--fs-btn);
  padding: 11px 4px;
  min-height: var(--tap-tool);
}

/* 誤タップ防止の切替。label ＋ checkbox で組み、
   見た目だけ自前で描く（読み上げと鍵盤操作は既定のまま使える）*/
.safe-tap {
  flex: 1.6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  min-height: var(--tap-tool);
}

.safe-tap input { position: absolute; opacity: 0; pointer-events: none; }

.safe-tap__track {
  display: inline-block;
  width: 44px;
  height: 25px;
  border-radius: 13px;
  position: relative;
  transition: background .15s;
  flex: none;
  background: var(--switch-off);
}

.safe-tap__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--on-fill);
  box-shadow: 0 1px 3px rgb(0 0 0 / .3);
  transition: left .15s;
}

.safe-tap input:checked + .safe-tap__track { background: var(--accent); }
.safe-tap input:checked + .safe-tap__track::after { left: 22px; }

.safe-tap input:focus-visible + .safe-tap__track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.safe-tap__label {
  font-size: var(--fs-label);
  line-height: 1.3;
}



/* ═══ スマホは縮小しない ═══
   版面を丸ごと縮めると、560px 幅に対して 350px 前後しか無いスマホでは
   倍率が 0.65 前後になり、16.5px の CTA が 10px まで小さくなって読めない。
   触れる的も 52px → 34px となり、指で押せる下限（44px）を割る。

   asopiko も同じ理由で、狭い幅では縮小をやめて専用の流体レイアウトに切り替えている。
   こちらは盤を画面幅いっぱいの正方形にし、上下の帯は通常の積み上げに戻す。

   ⚠ 固定版面の指定（絶対配置・left:50%・top:56px・transform）は
     **すべて明示的に戻すこと**。position だけ戻して left を残すと、
     relative のまま left:50% が効いて版面が右へずれる（実際そうなった）。 */
@media (max-width: 560px) {
  .play-stage { height: auto; }

  .play {
    /* 遮罩の基準になるので relative。left / margin-left / transform は必ず戻す */
    position: relative;
    top: auto;
    left: 0;
    margin-left: 0;
    width: 100%;
    height: auto;
    transform: none;
  }

  .play__status-row { position: static; }
  .tools { position: static; margin-top: 12px; flex-wrap: wrap; }
  .kifu { flex: 1 1 100%; order: 5; }
  .kifu__list { max-height: 88px; }
  .tools__toggles { flex: 1 1 auto; }

  .board {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  /* 積み上げに戻るので、遮罩は .play いっぱいに敷く */
  .overlay--menu { top: 0; bottom: 0; height: auto; }

  /* 対局開始のカード（実測 415px）は、幅いっぱいでも 375px 以下の盤には入らない。
     .play 側に場所を作って、遮罩が盤の下へはみ出す形にする
     —— fit-play.js がカードを実測して --menu-min に書く */
  .play:has(> [data-menu]:not([hidden])) {
    min-height: var(--menu-min, 448px);
  }
}

/* ═══ 広い画面では帯を盤の左右へ ═══
   縦積みのままだと、版面 676px のうち盤は 560px ＝ 83% しか取れない。
   残り 17% は状態帯と工具条の予約で、対局開始時にはどちらも隠れている。
   その結果、盤は視口の高さの 6〜7 割にしかならなかった（「小さい」と言われた版）。

   一方で横は余っている。そこで帯を盤の左右へ移し、版面の高さを盤そのものにする。
   asopiko の plain 皮膚も同じ作り（左 230 / 盤 376 / 右 280 の 3 列）。

   ・版面の高さ  676 → 560（盤だけ）→ 盤は「使える高さ」いっぱいまで育つ
   ・版面の幅    560 → 992（左 200 ＋ 隙間 16 ＋ 盤 560 ＋ 隙間 16 ＋ 右 200）
   ・左右対称にするのは、片側だけに柱を置くと版面の中心が盤の中心とずれ、
     盤が画面の左に寄って見えるため（実際そうなった）

   どちらの案を使うかは幅では決められない —— 得になる条件は幅と高さの
   両方に依るので（1200×800 では横 3 列が勝ち、900×1000 では縦積みが勝つ）、
   fit-play.js が両方の倍率を出して「盤が大きくなるほう」を選び、
   data-layout="wide" を書く。ここはその見た目だけを持つ。 */
[data-layout="wide"] {
    /* 200（左柱）＋ 16 ＋ 560（盤）＋ 16 ＋ 200（右柱）＝ 992。
       ⚠ ここが実際の並びと 1px でもずれると、版面の中心と盤の中心がずれ、
          倍率を掛けたぶんだけ拡大されて盤が横にずれる（976 と書いて 12px ずれた）*/
    --box-w: var(--wide-w);
    --box-h: var(--wide-h);
    /* 内容の 920px を破る。盤はこのページの主役なので、ここだけ枠を広げる */
    width: min(calc(100vw - var(--wide-gutter) * 1px), calc(var(--wide-max) * 1px));
    margin-left: 50%;
    translate: -50% 0;
  }

  /* 盤は中央。版面の高さ＝盤の高さ */
[data-layout="wide"] .board { top: 0; left: 216px; }

  /* 左の柱 —— 状態帯 */
[data-layout="wide"] .play__status-row {
    top: 0;
    left: 0;
    right: auto;
    width: 200px;
    height: 560px;
    /* 縦に積む。200px 幅に「ここに置く」「やめる」を横並びにすると潰れる */
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    min-height: 0;
    margin-bottom: 0;
  }
  /* 縦列では flex:1 が縦に効いて帯が柱いっぱいに伸びてしまう */
[data-layout="wide"] .status { flex: none; }

  /* 右の柱 —— 工具条 */
[data-layout="wide"] .tools {
    top: 0;
    bottom: auto;
    left: 792px;
    right: auto;
    width: 200px;
    height: 560px;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 0;
  }
[data-layout="wide"] .tools .btn { flex: none; }
[data-layout="wide"] .tools__toggles {
  flex: none;
  flex-direction: column;
  align-items: stretch;
}
[data-layout="wide"] .safe-tap { flex: none; justify-content: flex-start; padding: 4px 2px; }
[data-layout="wide"] .kifu { flex: 1; margin-top: 4px; }
[data-layout="wide"] .kifu__list { max-height: none; flex: 1; }

  /* メニュー遮罩だけ盤位置へ。勝敗遮罩は .board 内なので left を付けない
     （付けると右へドリフトする） */
[data-layout="wide"] .overlay--menu {
  top: 0;
  left: 216px;
  width: 560px;
  right: auto;
  height: 560px;
}
[data-layout="wide"] .board > .overlay {
  left: 0;
  width: auto;
  right: 0;
}

/* 終局・再生中は操作ボタンを畳み棋譜だけ残す */
.tools[data-phase="result"] .btn,
.tools[data-phase="result"] .tools__toggles,
.tools[data-phase="replay"] .btn,
.tools[data-phase="replay"] .tools__toggles {
  display: none;
}