/* dennoActionButtons.css — 鳴き操作ボタン(claim-mode)/プレイヤーボタンの override (#752)
 *
 * #750 / PR #751 で main.html の inline <style> に追加した claim-mode 段組みオーバーレイ等を、
 * override 肥大化解消のため専用ファイルへ分離した（#752・純リファクタ・見た目/挙動は不変）。
 * main.html から inline <style> の直後に <link> しており、カスケード順は従来と同等（最後＝最優先）。
 *
 * 依存・注意:
 * - 固定 translate 座標（desktop y678 / tablet y446・右下アンカー）は盤面サイズ(800×680 / tablet)
 *   と --board-scale に依存する。dennoBoardLayout.js や盤面座標を触る変更時は本ファイルを再確認すること。
 * - vendor majiang-ui.css は非編集。本ファイルは override として ID 込みセレクタで勝たせる。
 */

/* #750: 自分の番(②ツモ/リーチ/シュバリー/暗槓加槓)・choosing(③) のフラット行は
   配置維持のまま、押しやすさ向上のため最小限だけ背を高くする（board-px。位置は崩さない）。 */
#board > .board .player-button .button {
  height: 30px;
  line-height: 30px;
}
/* #750: choosing(③) の「これで鳴く」は常に表示し、選択が揃うまで非活性(グレー)にする。 */
#board > .board .player-button .button.btn-disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}

/* ================= #151: 自分番(②)フラット行のボタン意匠刷新 =================
   旧 vendor の黒ベタ(.button background:black)を上書きし、鳴き(claim-mode)と同じ
   ダーク角丸ピル＋アクセント配色に統一する。:not(.claim-mode) で claim 段組みには影響させない。
   - ツモ/ロン  = 和了アクション → 金アクセント（claim-mode のロンと同色味）
   - リーチ      = 宣言の主アクション → 緑アクセント（金=ツモ/シュバリーと差別化）
   - キャンセル/ノー聴 = 控えめグレー
   submit-claim/clear-claim(③鳴き確定の段)は独自幅(min-width:5em)が要るため除外する。 */
#board > .board .player-button:not(.claim-mode) .button:not(.submit-claim):not(.clear-claim) {
  width: auto;
  min-width: 3.4em;
  height: 32px;
  line-height: 30px;
  padding: 0 12px;
  background: rgba(0, 0, 0, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 8px;
  color: #ececec;
  font-weight: 600;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
#board > .board .player-button:not(.claim-mode) .button:hover {
  background: rgba(34, 34, 40, 0.92);
  border-color: rgba(255, 255, 255, 0.5);
}
#board > .board .player-button:not(.claim-mode) .button.zimo,
#board > .board .player-button:not(.claim-mode) .button.rong {
  color: #ffe9a8;
  border-color: #f0c860;
  box-shadow: inset 0 0 0 1px rgba(240, 200, 96, 0.45);
}
#board > .board .player-button:not(.claim-mode) .button.lizhi {
  color: #cdf2dd;
  border-color: #5ec98f;
  box-shadow: inset 0 0 0 1px rgba(94, 201, 143, 0.45);
}
#board > .board .player-button:not(.claim-mode) .button.cansel,
#board > .board .player-button:not(.claim-mode) .button.daopai {
  color: #cfcfcf;
  background: rgba(40, 40, 46, 0.82);
  border-color: rgba(255, 255, 255, 0.16);
}
/* #151: リーチ宣言オプション行の並び順を「シュバリー → オープン → キャンセル」にする。
   DOM 上は cansel が先頭にあるため flex order で後ろへ送る（claim-mode 段組みは grid-area
   で配置されるため :not(.claim-mode) スコープで非干渉）。 */
#board > .board .player-button:not(.claim-mode) .riichi-opt-shubary { order: 1; }
#board > .board .player-button:not(.claim-mode) .riichi-opt-open    { order: 2; }
#board > .board .player-button:not(.claim-mode) .button.cansel      { order: 3; }
/* ================= #750: claim時(①) の鳴き/ロン/スルー段組みオーバーレイ =================
   claim phase のときだけ dennoActionController が .claim-mode を付与する。
   - 固定スロット(grid-template-areas)で「押す場所が動かない」を保証（候補欠落はスロット空き）。
   - 不透明オーバーレイとして盤中央下に重ねる（自分の河への重なりは許容／相手牌には被せない）。
   - サイズは --board-scale を打ち消して画面上 clamp(46〜60px) の正方形に保つ（端末自動調整）。
   ID 込みセレクタで vendor / 上の override に勝たせる。 */
#board > .board .player-button.claim-mode {
  --naki-size: calc(clamp(46px, 13vw, 60px) / var(--board-scale, 1));
  --naki-h:    calc(clamp(40px, 11vw, 50px) / var(--board-scale, 1));
  --naki-font: calc(clamp(13px, 3.4vw, 17px) / var(--board-scale, 1));
  --naki-gap:  calc(6px / var(--board-scale, 1));
  display: grid;
  width: max-content;
  grid-template-columns: repeat(3, var(--naki-size));
  grid-template-rows: repeat(3, var(--naki-h));
  grid-template-areas:
    ".   ron  ."
    "chi pon  kan"
    ".   .    skip";
  gap: var(--naki-gap);
  justify-content: end;
  align-content: end;
  flex-wrap: nowrap;
  z-index: 5;
  /* 右下アンカー: translate(-100%,-100%) で要素の右下角を指定座標に固定し、上へ伸ばす。
     desktop/スマホ縦(800×680)。スルーが手牌(y620〜680)の横に来るよう右下角を y678 に置く。 */
  transform: translate(790px, 678px) translate(-100%, -100%);
}
#board > .board .player-button.claim-mode .button {
  width: var(--naki-size);
  height: var(--naki-h);
  min-width: 0;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--naki-font);
  line-height: 1.1;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(0, 0, 0, 0.82);
  border-radius: calc(8px / var(--board-scale, 1));
}
#board > .board .player-button.claim-mode .button.rong   { grid-area: ron; }
#board > .board .player-button.claim-mode .button.chi    { grid-area: chi; }
#board > .board .player-button.claim-mode .button.peng   { grid-area: pon; }
#board > .board .player-button.claim-mode .button.gang   { grid-area: kan; }
#board > .board .player-button.claim-mode .button.cansel { grid-area: skip; }
/* ロンのみ淡く金で強調（シュバリー#c0a000 とは別色味で衝突回避） */
#board > .board .player-button.claim-mode .button.rong {
  color: #ffe9a8;
  border-color: #f0c860;
  box-shadow: inset 0 0 0 1px rgba(240, 200, 96, 0.5);
}
/* スルーは控えめ(グレー)。物理的にも右下に離れている */
#board > .board .player-button.claim-mode .button.cansel {
  color: #cfcfcf;
  background: rgba(40, 40, 46, 0.82);
  border-color: rgba(255, 255, 255, 0.16);
}
@media screen and (max-height: 450px) {
  /* 横向き(タブレットブロック 800×450)。スルーが手牌(y388〜448)の横に来るよう右下角を y446 に。 */
  #board > .board .player-button.claim-mode {
    transform: translate(672px, 446px) translate(-100%, -100%);
  }
}