/* 三麻超会議2026: 926×855 の単一論理座標で描画する専用対局スキン。 */

:root {
  --board-logical-w: 926px;
  --board-logical-h: 855px;
  --board-scale: 1;
  --table-bg: #101d35;
  --table-edge: #263754;
  --ui-bg: #05070b;
  --ui-panel: rgba(9, 13, 22, 0.92);
  --ui-line: rgba(211, 221, 238, 0.42);
  --ui-text: #f2f4ef;
  --ui-muted: #bac6be;
  /* 牌の外枠・クリック領域は100%。透明な牌面レイヤーだけを内側へ収める。 */
  --tile-scale: 1;
  --tile-face-scale: 0.80;
  --tile-face-inset-x: 5px;
  --tile-face-inset-y: 7px;
  --tile-opponent-face-inset-x: 2.8px;
  --tile-opponent-face-inset-y: 3.92px;
  --tile-small-face-inset-x: 3.4px;
  --tile-small-face-inset-y: 4.76px;
  --tile-w: calc(50px * var(--tile-scale));
  --tile-h: calc(70px * var(--tile-scale));
  --tile-opponent-w: calc(28px * var(--tile-scale));
  --tile-opponent-h: calc(39.2px * var(--tile-scale));
  --tile-river-w: calc(34px * var(--tile-scale));
  --tile-river-h: calc(47.6px * var(--tile-scale));
  --tile-river-negative-h: calc(-47.6px * var(--tile-scale));
  /* リーチ宣言牌は通常牌を回転した外接矩形を1セルとして確保する。 */
  --tile-river-rotated-w: calc(47.6px * var(--tile-scale));
  --tile-river-riichi-grid-w: calc(204px * var(--tile-scale) + (47.6px - 34px) * var(--tile-scale));
  --tile-dora-w: calc(34px * var(--tile-scale));
  --tile-dora-h: calc(47.6px * var(--tile-scale));
  --tile-meld-w: calc(34px * var(--tile-scale));
  --tile-meld-h: calc(47.6px * var(--tile-scale));
  --tile-meld-negative-h: calc(-47.6px * var(--tile-scale));
  --river-grid-w: calc(204px * var(--tile-scale));
  --river-grid-h: calc(142.8px * var(--tile-scale));
  --river-box-h: calc(156.8px * var(--tile-scale));
  /* 対面は通常の河マスへ戻し、牌面だけを上下反転する。 */
  --river-top-cell-w: var(--tile-river-w);
  --river-top-cell-h: var(--tile-river-h);
  --river-top-grid-w: var(--river-grid-w);
  --river-top-grid-h: var(--river-grid-h);
}

html,
body.board {
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: var(--ui-bg);
  color: var(--ui-text);
  font-family: system-ui, -apple-system, "Yu Gothic", "Meiryo", sans-serif;
}

body.board > * { width: auto; }
#space { display: none !important; }

#board {
  overflow: hidden;
}

#board > .board-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--board-logical-w);
  height: var(--board-logical-h);
  margin: 0;
  overflow: hidden;
  transform-origin: top left;
  background: var(--table-bg);
  border: 1px solid var(--table-edge);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  box-sizing: border-box;
}

#board > .board-stage > * {
  position: absolute;
  transform: none;
  transform-origin: top left;
  box-sizing: border-box;
}

/* 四麻互換DOMは残し、画面上の三席は visual-seat-* で明示する。 */
#board > .board-stage .visual-seat-unused { display: none !important; }

/* 牌画像の基準線を統一する。牌の向きに必要な rotate 以外の個別補正は行わない。 */
#board > .board-stage .pai,
#board > .board-stage img.pai,
#board > .board-stage .chokaigi-nuki-img {
  display: block;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  vertical-align: top;
  line-height: 0;
}

/*
 * FluffyStuff の牌面SVGは図柄レイヤー、Front.svgは牌の外装レイヤーとして
 * 分離されている。imgの表示領域・クリック領域は既存のままにし、透明な牌面
 * の背面へ外装だけを合成する。裏牌(pai.gif)には適用しない。
 */
#board > .board-stage img.pai[src*="assets/tiles/fluffystuff/Regular/"],
#board > .board-stage .chokaigi-nuki-img[src*="assets/tiles/fluffystuff/Regular/"] {
  background: url("../assets/tiles/fluffystuff/Regular/Front.svg") 0 0 / 100% 100% no-repeat;
  box-sizing: border-box;
  padding: var(--tile-face-inset-y) var(--tile-face-inset-x);
}

/* 手牌。内部は同一基準線で組み、右家だけコンテナ全体を90度回転する。 */
#board > .board-stage .shoupai {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  overflow: visible;
  transform: none;
}

#board > .board-stage .shoupai .bingpai,
#board > .board-stage .shoupai .bingpai .zimo,
#board > .board-stage .shoupai .fulou {
  display: flex;
  align-items: flex-end;
  float: none;
  margin: 0;
  line-height: 0;
  white-space: nowrap;
}

#board > .board-stage .shoupai .bingpai .zimo { margin-left: 10px; }
#board > .board-stage .shoupai .fulou { flex-direction: row-reverse; }
#board > .board-stage .shoupai .fulou .mianzi {
  display: flex;
  align-items: flex-end;
  float: none;
  margin: 0 0 0 4px;
  line-height: 0;
}

#board > .board-stage .shoupai.main {
  left: 53px;
  top: 779px;
  width: 820px;
  /* 外枠は旧高さを保ち、牌の下端とクリック基準を固定する。 */
  height: 70px;
  transform: none;
  z-index: 3;
}

#board > .board-stage .shoupai.main .bingpai .pai {
  width: var(--tile-w);
  height: var(--tile-h);
  --tile-face-inset-x: 5px;
  --tile-face-inset-y: 7px;
}

#board > .board-stage .shoupai.main .bingpai {
  position: absolute;
  bottom: 0;
  left: 60px;
  float: none;
  margin: 0;
}

#board > .board-stage .shoupai.main .fulou {
  position: absolute;
  right: 0;
  bottom: 0;
  float: none;
  margin: 0;
}

#board > .board-stage .shoupai.duimian.visual-seat-top {
  left: 268px;
  top: 24px;
  width: 390px;
  height: var(--tile-opponent-h);
  /* 上流の #board > .board .shoupai.duimian は詳細度が高く、
     translate/rotate が残るため、三麻の相対配置を明示的に優先する。 */
  transform: none;
}

/*
 * 終局開示時だけ、対面の実牌列を卓の向きに合わせて反転する。
 * .shoupai 親ではなく .bingpai に限定し、通常対局中の手牌や、
 * 同じコンテナへ重ねる open-riichi-reveal の待ち表示は回転させない。
 */
#board > .board-stage.revealed-hand-orientation .shoupai.duimian.visual-seat-top > .bingpai {
  transform: rotate(180deg);
  transform-origin: center center;
}

/* 下家も終局開示時は、右家の卓向きに合わせて牌面を反転する。 */
#board > .board-stage.revealed-hand-orientation .shoupai.xiajia.visual-seat-right > .bingpai {
  transform: rotate(180deg);
  transform-origin: center center;
}

#board > .board-stage .shoupai.xiajia.visual-seat-right {
  left: 892px;
  top: 174px;
  width: 390px;
  height: var(--tile-opponent-h);
  transform: rotate(90deg);
  transform-origin: top left;
}

#board > .board-stage .shoupai.visual-seat-top .bingpai .pai,
#board > .board-stage .shoupai.visual-seat-right .bingpai .pai {
  width: var(--tile-opponent-w);
  height: var(--tile-opponent-h);
  --tile-face-inset-x: var(--tile-opponent-face-inset-x);
  --tile-face-inset-y: var(--tile-opponent-face-inset-y);
}

#board > .board-stage .shoupai[data-visual-seat] .bingpai,
#board > .board-stage .shoupai[data-visual-seat] .fulou {
  float: none;
  margin: 0;
}

#board > .board-stage .shoupai[data-visual-seat] .bingpai .zimo {
  margin-left: 10px;
}

/* オープンリーチの公開牌は実グループでまとめ、セット内は密着させる。 */
#board > .board-stage .shoupai.open-riichi-partial-hand .bingpai .open-riichi-public-group {
  display: inline-flex;
  align-items: flex-end;
  flex: 0 0 auto;
  gap: 0;
  margin: 0;
  line-height: 0;
}

#board > .board-stage .shoupai.open-riichi-partial-hand .bingpai .open-riichi-public-group-first {
  margin-left: 8px;
}

#board > .board-stage .shoupai.open-riichi-partial-hand .bingpai .open-riichi-public-group .open-riichi-public-tile {
  margin: 0;
}

/* 右家の手牌は縦向きのため、公開牌だけ牌面を他家から読める向きに戻す。 */
#board > .board-stage .shoupai.xiajia.visual-seat-right.open-riichi-partial-hand .bingpai .open-riichi-public-group {
  transform: rotate(180deg);
  transform-origin: center center;
}

#board > .board-stage .shoupai.open-riichi-partial-hand .bingpai .open-riichi-public-hidden-zimo {
  display: none;
}


#board > .board-stage .shoupai[data-visual-seat] .fulou .mianzi .pai {
  width: var(--tile-meld-w);
  height: var(--tile-meld-h);
  --tile-face-inset-x: var(--tile-small-face-inset-x);
  --tile-face-inset-y: var(--tile-small-face-inset-y);
}

#board > .board-stage .shoupai[data-visual-seat] .fulou .mianzi {
  display: flex;
  align-items: flex-end;
  float: none;
  margin: 0 0 0 4px;
}

#board > .board-stage .shoupai[data-visual-seat] .fulou .mianzi .rotate {
  width: var(--tile-meld-h);
  transform: rotate(270deg) translate(var(--tile-meld-negative-h), 0);
  transform-origin: top left;
}

#board > .board-stage .shoupai .fulou .mianzi .pai {
  width: var(--tile-meld-w);
  height: var(--tile-meld-h);
  --tile-face-inset-x: var(--tile-small-face-inset-x);
  --tile-face-inset-y: var(--tile-small-face-inset-y);
}

#board > .board-stage .shoupai .fulou .mianzi .rotate {
  display: block;
  width: var(--tile-meld-h);
  transform: rotate(270deg) translate(var(--tile-meld-negative-h), 0);
  transform-origin: top left;
}

/* HUD。三麻の名前札は名前・チップを2段で表示する。 */
#board > .board-stage > .player {
  box-sizing: border-box;
  width: 190px;
  height: 48px;
  padding: 5px 8px;
  overflow: visible;
  border: 1px solid rgba(190, 207, 197, 0.36);
  border-radius: 3px;
  background: rgba(12, 20, 17, 0.92);
  color: var(--ui-text);
  font-family: inherit;
  font-size: 14px;
  line-height: 18px;
  opacity: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
}

#board > .board-stage > .player .denno-player-name {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
}

#board > .board-stage > .player .denno-chip-totals {
  position: static;
  display: block;
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ui-text);
  font-size: 11px;
  line-height: 14px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

#board > .board-stage > .player .denno-chip-totals .ct-neg { color: #f87171; }
#board > .board-stage > .player .denno-chip-totals .ct-pos { color: #4ade80; }
#board > .board-stage > .player .denno-chip-totals .ct-zero { color: #cbd5e1; }

/* オープンリーチのモック表示。名前札のサイズを変えず、待ちだけを独立表示する。 */
#board > .board-stage > .player .denno-open-riichi-badge {
  position: absolute;
  top: 5px;
  right: 8px;
  color: #fbbf24;
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: .04em;
  pointer-events: none;
}

#board > .board-stage > .player .open-riichi-reveal {
  position: absolute;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 3px;
  min-height: 60px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--ui-text);
  white-space: nowrap;
  pointer-events: none;
}

#board > .board-stage > .player .open-riichi-reveal .or-sep {
  font-size: 11px;
  line-height: 18px;
}

#board > .board-stage > .player .open-riichi-reveal .or-wait {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

#board > .board-stage > .player .open-riichi-reveal .or-wait .pai {
  width: auto;
  height: 60px;
}

#board > .board-stage > .player.main .open-riichi-reveal {
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
}

#board > .board-stage > .player.xiajia .open-riichi-reveal {
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
}

#board > .board-stage > .player.duimian .open-riichi-reveal {
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
}

#board > .board-stage > .player.visual-seat-top {
  left: 109px;
  top: 195px;
  transform: none;
}
#board > .board-stage > .player.visual-seat-right {
  left: 610px;
  top: 270px;
  transform: none;
}
#board > .board-stage > .player.visual-seat-self {
  /* 自家手牌の bingpai は shoupai left 53px + bingpai left 60px。 */
  left: 113px;
  top: 723px;
  transform: none;
}

#board > .board-stage > .player .denno-chip-totals { font-family: inherit; }

/* 河。6列グリッドを卓へ直接置き、中央パネルを三方から囲む。 */
#board > .board-stage .he {
  width: var(--river-grid-w);
  height: var(--river-box-h);
  transform: none;
}

#board > .board-stage .he.duimian.visual-seat-top {
  left: 361px;
  top: 137px;
  width: var(--river-top-grid-w);
  transform: none;
}
#board > .board-stage .he.xiajia.visual-seat-right {
  /* 90度回転後の外接矩形の左端を、中央パネル右端(577px)から11px空ける。 */
  left: calc(587px + var(--river-box-h));
  top: 326px;
  transform: rotate(90deg);
  transform-origin: top left;
}
#board > .board-stage .he.main.visual-seat-self {
  left: 361px;
  top: 501px;
  transform: none;
}

#board > .board-stage .he div.lizhi {
  width: var(--river-grid-w);
  height: 14px;
  text-align: center;
  line-height: 0;
}

#board > .board-stage .he.duimian.visual-seat-top > div.lizhi {
  width: var(--river-top-grid-w);
}

#board > .board-stage .he div.lizhi img.chouma {
  display: inline-block;
  width: 122px;
  height: 10px;
  vertical-align: top;
}

#board > .board-stage .he > div.dapai {
  /*
   * break は vendor が6枚ごとに挿入する行区切り。flex にすると、
   * 横向きの宣言牌だけ幅を47.6pxへ広げても、後続牌が同じセルへ
   * 潜り込まず、時系列と6枚単位の折り返しを保てる。
   */
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  align-content: flex-start;
  width: var(--river-grid-w);
  height: var(--river-grid-h);
  /* vendor/grid 互換の計算値を残す（実レイアウトは上記 flex が担当）。 */
  grid-template-columns: repeat(6, var(--tile-river-w));
  grid-auto-rows: var(--tile-river-h);
  gap: 0;
  line-height: 0;
}
#board > .board-stage .he > div.dapai:has(> .lizhi) {
  /* 5枚の通常牌 + 1枚の回転後外接矩形を同じ行へ収める。 */
  width: var(--tile-river-riichi-grid-w);
}

#board > .board-stage .he .dapai .pai,
#board > .board-stage .he .dapai .lizhi {
  width: var(--tile-river-w);
  height: var(--tile-river-h);
  --tile-face-inset-x: var(--tile-small-face-inset-x);
  --tile-face-inset-y: var(--tile-small-face-inset-y);
}

#board > .board-stage .he .dapai .break {
  display: block;
  flex: 0 0 100%;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}
#board > .board-stage .he .dapai .pai.dapai { transform: none; }
#board > .board-stage .he .dapai .pai:focus { transform: translateY(-4px); }
#board > .board-stage .he .dapai .lizhi {
  /* 回転後の外接矩形をセルとして確保する。画像は縦長のまま保持する。 */
  position: relative;
  display: block;
  flex: 0 0 var(--tile-river-rotated-w);
  width: var(--tile-river-w);
  height: var(--tile-river-h);
  margin: 0;
  transform: none;
  overflow: visible;
}
#board > .board-stage .he .dapai .lizhi .pai {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--tile-river-w);
  height: var(--tile-river-h);
  margin: 0;
  transform: translate(-50%, -50%) rotate(270deg);
  transform-origin: center center;
}

/*
 * 上家の河は、時系列DOMを変更せずに視点だけを反転する。
 * gridを180度回転すると [1..6] が下段の [6..1] に、[7..12] が
 * 上段の [12..7] になり、各牌の90度回転と合成して最終270度になる。
 */
#board > .board-stage .he.duimian.visual-seat-top > div.dapai {
  /* 対面の河は6列の行を明示し、break要素のFlex折返しに依存しない。 */
  display: grid;
  width: var(--river-top-grid-w);
  height: var(--river-top-grid-h);
  grid-template-columns: repeat(6, var(--river-top-cell-w));
  grid-auto-rows: var(--river-top-cell-h);
  align-items: center;
  align-content: start;
  transform: rotate(180deg);
  transform-origin: center center;
}

#board > .board-stage .he.duimian.visual-seat-top .dapai > .break {
  /* 上家の河は6列グリッドが自然に折り返すため、vendorの行区切り要素を
     グリッド項目として残すと、空の1行を消費して次段がずれる。 */
  display: none;
}

#board > .board-stage .he.duimian.visual-seat-top .dapai > .pai {
  /* 河コンテナの180度回転だけで、牌面を上下逆にする。 */
  transform: none;
  transform-origin: center center;
}

#board > .board-stage .he.xiajia.visual-seat-right .dapai > .pai {
  /* 河コンテナを反転して時系列を下→上・右列→左列へ変換する。 */
  transform: none;
  transform-origin: center center;
}

/*
 * 右家は、親の90度回転で横河を縦河へ変換する。
 * さらに河全体を180度反転することで、時系列[1..6]が下から上へ、
 * [7..12]が右列から左列へ進む。牌面の最終方向は 90+180=-90度。
 */
#board > .board-stage .he.xiajia.visual-seat-right > div.dapai {
  transform: rotate(180deg);
  transform-origin: center center;
}

#board > .board-stage .he.duimian.visual-seat-top .dapai > .lizhi {
  width: var(--river-top-cell-w);
  height: var(--river-top-cell-h);
  flex: none;
  transform: rotate(90deg);
  transform-origin: center center;
}

#board > .board-stage .he.duimian.visual-seat-top .dapai > .lizhi .pai {
  /* 通常牌は河全体の180度反転。wrapperの90度回転で宣言牌を横向きにする。 */
  left: calc((var(--tile-river-h) - var(--tile-river-w)) / 2);
  top: 0;
  transform: rotate(0deg);
  transform-origin: center center;
}

/* 中央情報。天鳳PC版に近い 228×184 / (349,304)。 */
#board > .board-stage .score {
  left: 349px;
  top: 304px;
  width: 228px;
  height: 184px;
  padding: 8px;
  border: 1px solid var(--ui-line);
  border-radius: 2px;
  background: var(--ui-panel);
  color: var(--ui-text);
  font-family: inherit;
  font-size: 13px;
  transform: none;
}

#board > .board-stage .score .juchang {
  position: absolute;
  top: 7px;
  left: 8px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 212px;
  height: 36px;
  padding: 0;
  float: none;
}

#board > .board-stage .score .juchang .jushu {
  font-family: inherit;
  font-size: 22px;
  font-weight: 700;
  line-height: 28px;
}

#board > .board-stage .score .juchang .jicun {
  padding: 0;
  color: var(--ui-muted);
  font-size: 12px;
  line-height: 17px;
}

#board > .board-stage .score .juchang .jicun img.chouma {
  width: 54px;
  height: 7px;
  opacity: 0.86;
}

#board > .board-stage .score .shan {
  position: absolute;
  top: 42px;
  right: auto;
  left: 8px;
  width: 210px;
  height: 49px;
  padding: 0;
  color: var(--ui-muted);
  text-align: left;
  float: none;
}

#board > .board-stage .score .shan .baopai {
  display: flex;
  justify-content: flex-start;
  width: 170px;
  min-height: var(--tile-dora-h);
  margin: 0;
}

#board > .board-stage .score .shan > div:last-child {
  position: absolute;
  right: 0;
  bottom: 2px;
  width: 38px;
  font-size: 11px;
  line-height: 14px;
  text-align: right;
}

#board > .board-stage .score .shan .pai {
  width: var(--tile-dora-w);
  height: var(--tile-dora-h);
  --tile-face-inset-x: var(--tile-small-face-inset-x);
  --tile-face-inset-y: var(--tile-small-face-inset-y);
}

#board > .board-stage .score .defen {
  position: absolute;
  top: 96px;
  left: 8px;
  display: grid;
  grid-template-columns: 1fr;
  width: 210px;
  border-top: 1px solid rgba(222, 232, 225, 0.2);
}

#board > .board-stage .score .defen div {
  position: static;
  width: auto;
  height: 29px;
  padding: 4px 7px;
  border-bottom: 1px solid rgba(222, 232, 225, 0.12);
  color: var(--ui-text);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  line-height: 20px;
  text-align: left;
  transform: none;
  box-sizing: border-box;
}

#board > .board-stage .score .defen > .visual-seat-self,
#board > .board-stage .score .defen > .visual-seat-top,
#board > .board-stage .score .defen > .visual-seat-right {
  position: static;
  transform: none;
}

/* 三麻の中央点数欄は盤面の相対位置に合わせる。
 * DOM/モデルの相対席は main=自席、xiajia=右、duimian=上だが、
 * upstream の Score は main → xiajia → duimian の順で生成する。
 * 行そのものを並べ替え、名前・点数・祝儀表示の対応を一緒に保つ。
 */
body.chokaigi-client #board > .board-stage .score .defen > .visual-seat-top {
  order: 1;
}

body.chokaigi-client #board > .board-stage .score .defen > .visual-seat-right {
  order: 2;
}

body.chokaigi-client #board > .board-stage .score .defen > .visual-seat-self {
  order: 3;
}

body.chokaigi-client #board > .board-stage .score .defen > .visual-seat-unused {
  order: 4;
}

/* 抜き牌は副露と独立した専用コンテナを使う。 */
#board > .board-stage .chokaigi-nuki-board-area {
  position: absolute !important;
  top: -49px !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
  display: flex;
  gap: 1px;
  padding: 1px;
  border: 1px solid rgba(237, 220, 132, 0.72);
  border-radius: 2px;
  background: rgba(14, 26, 19, 0.9);
  transform: none !important;
}

#board > .board-stage .chokaigi-nuki-img {
  width: var(--tile-river-w);
  height: var(--tile-river-h);
  --tile-face-inset-x: var(--tile-small-face-inset-x);
  --tile-face-inset-y: var(--tile-small-face-inset-y);
}

#board > .board-stage .shoupai.visual-seat-top .chokaigi-nuki-board-area,
#board > .board-stage .shoupai.visual-seat-right .chokaigi-nuki-board-area {
  top: 45px !important;
}
#board > .board-stage > .player.connection-disconnected .denno-player-name {
  color: #f87171;
}

/* 右家の手牌列は時計回りに90度回転するため、抜き牌は牌面だけを180度戻して
 * 卓の外側から読める向きに揃える。通常の手牌・副露の向きは変更しない。 */
#board > .board-stage .shoupai.xiajia.visual-seat-right .chokaigi-nuki-img {
  transform: rotate(180deg);
  transform-origin: center center;
}

/* 必要な時だけ手牌直上に出るアクションオーバーレイ。 */
#board > .board-stage .shoupai.nuki-selecting .bingpai img.nuki-candidate {
  position: relative;
  z-index: 3;
  filter: brightness(1.08) saturate(1.25);
  box-shadow: 0 0 0 3px #e8c34d, 0 0 12px rgba(232, 195, 77, .85);
  cursor: pointer;
}

#board > .board-stage .shoupai.nuki-selecting .bingpai img.nuki-noncandidate {
  opacity: .42;
  cursor: not-allowed;
}

#board > .board-stage .player-button:not(.claim-mode) .button.nuki {
  color: #fff2bd;
  border-color: #d4ad3b;
  background: rgba(77, 61, 18, .9);
}

#board > .board-stage .player-button {
  top: 698px;
  right: 53px;
  left: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  min-height: 42px;
  padding: 6px;
  gap: 4px;
  border: 1px solid rgba(224, 233, 226, 0.34);
  border-radius: 2px;
  background: rgba(8, 13, 10, 0.82);
  text-align: center;
  white-space: nowrap;
  transform: none;
  z-index: 20;
}

#board > .board-stage .player-button:not(.claim-mode) .button:not(.submit-claim):not(.clear-claim),
#board > .board-stage .player-button:not(.claim-mode) .riichi-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 52px;
  height: 28px;
  margin: 0;
  padding: 0 9px;
  border: 1px solid #777f79;
  border-radius: 2px;
  background: #d7dbd4;
  color: #151b17;
  box-shadow: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 26px;
  box-sizing: border-box;
}

#board > .board-stage .player-button:not(.claim-mode) .button:hover { background: #f1f3ee; }
#board > .board-stage .player-button:not(.claim-mode) .button.rong,
#board > .board-stage .player-button:not(.claim-mode) .button.zimo {
  border-color: #9b7d27;
  background: #efd078;
  color: #2a210a;
  box-shadow: none;
}

#board > .board-stage .player-button:not(.claim-mode) .button.lizhi {
  border-color: #56815e;
  background: #c9dfc7;
  color: #18311d;
  box-shadow: none;
}

#board > .board-stage .player-button:not(.claim-mode) .button.cansel,
#board > .board-stage .player-button:not(.claim-mode) .button.daopai {
  background: #b9bfba;
  color: #242a26;
}

/* 三麻の鳴き待ちUI。天鳳の選択領域を926×855の論理盤面へ相対変換する。
 * 参考座標(850.667×793.333): x=426/614, y=362/519, w=188, h=157
 * → 三麻盤面では左=50.1%, 上=45.6%, 全体=44.2%×39.6%。
 * 各セルを独立した半透明領域にし、表示される操作の組み合わせで位置を動かさない。
 * claim-modeの付与・表示判定・送信処理はsanmaActionControllerの既存経路を維持する。 */
#board > .board-stage > .player-button.claim-mode {
  --claim-cell-border: 1px solid rgba(255, 255, 255, 0.32);
  left: 50.1% !important;
  right: auto !important;
  top: 45.6% !important;
  width: 44.2% !important;
  height: 39.6% !important;
  min-height: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  grid-template-rows: repeat(2, 1fr) !important;
  grid-template-areas:
    "kan ron"
    "pon skip" !important;
  justify-content: stretch !important;
  align-content: stretch !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
  bottom: auto !important;
  transform: none !important;
}

#board > .board-stage > .player-button.claim-mode .button {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center;
  align-self: stretch !important;
  justify-self: stretch !important;
  align-items: center !important;
  justify-content: center !important;
  border: var(--claim-cell-border) !important;
  border-radius: 0 !important;
  background: rgba(0, 0, 0, 0.42) !important;
  color: #fff !important;
  font-size: 22px !important;
  font-weight: 600;
  line-height: 1 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  box-sizing: border-box;
  transition: background 0.12s, border-color 0.12s;
}

#board > .board-stage > .player-button.claim-mode .button:hover,
#board > .board-stage > .player-button.claim-mode .button:focus-visible {
  background: rgba(255, 255, 255, 0.20) !important;
  border-color: rgba(255, 255, 255, 0.72) !important;
  outline: none;
}

#board > .board-stage > .player-button.claim-mode .button.rong { grid-area: ron; }
#board > .board-stage > .player-button.claim-mode .button.peng { grid-area: pon; }
#board > .board-stage > .player-button.claim-mode .button.gang { grid-area: kan; }
#board > .board-stage > .player-button.claim-mode .button.cansel { grid-area: skip; }
#board > .board-stage > .player-button.claim-mode .button.chi { display: none !important; }

/* 三麻の抜きも同じ操作Windowを使う。通常の鳴き領域のカスケードより後段で、
   抜き専用のセル配置を確定させる。 */
#board > .board-stage > .player-button.claim-mode.nuki-mode {
  grid-template-columns: repeat(3, 1fr) !important;
  grid-template-rows: repeat(3, 1fr) !important;
  grid-template-areas:
    ". . ."
    "zimo . kan"
    ". lizhi skip" !important;
}
#board > .board-stage > .player-button.claim-mode.nuki-mode .button.nuki { grid-area: skip; }
#board > .board-stage > .player-button.claim-mode.nuki-mode .button.zimo { grid-area: zimo; }
#board > .board-stage > .player-button.claim-mode.nuki-mode .button.gang { grid-area: kan; }
#board > .board-stage > .player-button.claim-mode.nuki-mode .button.lizhi { grid-area: lizhi; }

/* リーチ宣言も旧来の横一列ではなく、盤面上の操作Windowへ統一する。 */
#board > .board-stage > .player-button.claim-mode.riichi-mode {
  grid-template-columns: repeat(3, 1fr) !important;
  grid-template-rows: repeat(3, 1fr) !important;
  grid-template-areas:
    ". . ."
    "zimo . kan"
    ". open skip" !important;
}
#board > .board-stage > .player-button.claim-mode.riichi-mode .button.lizhi,
#board > .board-stage > .player-button.claim-mode.riichi-mode .riichi-opt-open {
  grid-area: open;
}
#board > .board-stage > .player-button.claim-mode.riichi-mode .button.lizhi.hide {
  display: none !important;
}
#board > .board-stage > .player-button.claim-mode.riichi-mode .button.cansel { grid-area: skip; }
#board > .board-stage > .player-button.claim-mode.riichi-mode .button.zimo { grid-area: zimo; }
#board > .board-stage > .player-button.claim-mode.riichi-mode .button.gang { grid-area: kan; }

/* オープン立直の選択肢も、キャンセルと同じ大きさの操作セルにする。 */
#board > .board-stage > .player-button.claim-mode.riichi-mode .riichi-opt-open {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--claim-cell-border) !important;
  border-radius: 0 !important;
  background: rgba(0, 0, 0, 0.42) !important;
  color: #fff !important;
  font-size: 22px !important;
  font-weight: 600;
  line-height: 1 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  box-sizing: border-box;
  transition: background 0.12s, border-color 0.12s;
}
#board > .board-stage > .player-button.claim-mode.riichi-mode .riichi-opt-open.hide {
  display: none !important;
}
#board > .board-stage .player-button .riichi-opt-open.hide {
  display: none !important;
}
#board > .board-stage > .player-button.claim-mode.riichi-mode .riichi-opt-open:has(.cb-open:checked) {
  background: rgba(192, 160, 0, 0.94) !important;
  border-color: rgba(255, 238, 145, 0.9) !important;
  color: #fff !important;
}

/* ツモ単独時も同じ操作Windowの大きなセルへ配置する。 */
#board > .board-stage > .player-button.claim-mode.tsumo-mode {
  grid-template-areas:
    ". . ."
    ". . ."
    ". . zimo" !important;
}
#board > .board-stage > .player-button.claim-mode.tsumo-mode .button.zimo { grid-area: zimo; }
#board > .board-stage > .player-button.claim-mode.tsumo-mode .button.gang { grid-area: kan; }
#board > .board-stage > .player-button.claim-mode.tsumo-mode .button.zimo {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
}

/* 自家カン単独時も、他の主要アクションと同じ共有Windowを使う。 */
#board > .board-stage > .player-button.claim-mode.kan-mode {
  grid-template-areas:
    ". . ."
    ". kan ."
    ". . ." !important;
}
#board > .board-stage > .player-button.claim-mode.kan-mode .button.gang { grid-area: kan; }

/* 三元牌暗刻ボーナス選択も、手牌の牌サイズとメイン画面の操作ボタン意匠に揃える。 */
#sanma-sangen-select {
  background: rgba(15, 31, 24, 0.97) !important;
  border: 1px solid rgba(190, 207, 197, 0.42) !important;
  border-radius: 10px !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
#sanma-sangen-select .sangen-choice-row {
  display: grid;
  grid-template-columns: 50px minmax(220px, 1fr);
  align-items: center;
  gap: 12px;
}
#sanma-sangen-select .sangen-choice-row > img.pai {
  width: 50px;
  height: 70px;
  object-fit: contain;
  background: #f7f5ef !important;
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-radius: 5px;
}
#sanma-sangen-select .sangen-choice-row > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#sanma-sangen-select .sangen-choice-button {
  min-width: 220px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid rgba(130, 185, 148, 0.42) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(43, 81, 58, 0.98), rgba(25, 50, 36, 0.98)) !important;
  color: #f2f5f2;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
#sanma-sangen-select .sangen-choice-button:hover,
#sanma-sangen-select .sangen-choice-button:focus-visible {
  background: linear-gradient(180deg, #397d52, #2f6845) !important;
  border-color: #9ad9a8 !important;
  outline: 2px solid rgba(154, 217, 168, 0.28);
  outline-offset: 2px;
  transform: translateY(-1px);
}
#sanma-sangen-select .sangen-choice-button:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.28);
}
#sanma-sangen-select .sangen-choice-button.is-selected {
  background: linear-gradient(180deg, rgba(111, 91, 31, 0.98), rgba(75, 61, 20, 0.98)) !important;
  border-color: #f0ce62 !important;
  color: #fff4c4;
  box-shadow: 0 0 0 1px rgba(240, 206, 98, 0.22), inset 0 1px 0 rgba(255, 246, 190, 0.16);
}
#sanma-sangen-select .sangen-choice-button:disabled {
  cursor: default;
  transform: none;
}

#sanma-sangen-select .sangen-choice-preview {
  flex-basis: 100%;
  margin-top: 2px;
  color: #cbd5d1;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}
@media (max-width: 520px) {
  #sanma-sangen-select .sangen-choice-row {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 8px;
  }
  #sanma-sangen-select .sangen-choice-button {
    min-width: 0;
    width: 100%;
    font-size: 12px;
  }
}

#board > .board-stage > .player-button.claim-mode .button.rong,
#board > .board-stage > .player-button.claim-mode .button.cansel {
  color: #fff;
}

/* ポン/カンの牌選択中は、天鳳風の4セル領域を残さず既存の確定・取消操作だけを表示する。 */
#board > .board-stage > .player-button.claim-mode:has(~ .shoupai.main.claim-choosing) {
  left: auto !important;
  right: 53px !important;
  top: 698px !important;
  width: auto !important;
  height: auto !important;
  min-height: 42px !important;
  padding: 6px !important;
  display: flex !important;
  gap: 4px !important;
  border: 1px solid rgba(224, 233, 226, 0.34) !important;
  border-radius: 2px !important;
  background: rgba(8, 13, 10, 0.82) !important;
}

#board > .board-stage > .player-button.claim-mode:has(~ .shoupai.main.claim-choosing) .button {
  width: auto !important;
  min-width: 5em !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 6px !important;
  border-radius: 2px !important;
  background: #d7dbd4 !important;
  color: #151b17 !important;
  font-size: 14px !important;
  line-height: 26px !important;
}

#board > .board-stage > .player-button.claim-mode:has(~ .shoupai.main.claim-choosing) .button:not(.submit-claim):not(.clear-claim):not(.cansel) {
  display: none !important;
}

#board > .board-stage .select-mianzi {
  left: 113px;
  top: 680px;
  width: 700px;
  min-height: 50px;
  text-align: center;
  transform: none;
  z-index: 21;
}

#board > .board-stage .timer { left: 803px; top: 746px; width: 70px; }

/* 発声は対応席の近くへ。 */
#board > .board-stage .say {
  width: 180px;
  height: 64px;
  color: #fff;
  font-family: inherit;
  font-size: 44px;
  line-height: 64px;
  text-align: center;
  text-shadow: 1px 1px 3px #101813;
  transform: none;
}

#board > .board-stage .say.visual-seat-top {
  left: 373px;
  top: 82px;
  transform: none;
}
#board > .board-stage .say.visual-seat-right {
  left: 690px;
  top: 566px;
  transform: none;
}
#board > .board-stage .say.visual-seat-self {
  left: 373px;
  top: 658px;
  transform: none;
}

/* 全面オーバーレイは論理盤面全体を覆う。 */
#board > .board-stage .hule-dialog,
#board > .board-stage > .summary,
#board > .board-stage .kaiju,
#board > .board-stage .suspend {
  width: var(--board-logical-w);
  height: var(--board-logical-h);
  background: rgba(8, 15, 11, 0.9);
}

#denno-action-toggles {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  min-height: 30px;
  padding: 3px 5px;
  border: 1px solid rgba(221, 232, 224, 0.2);
  border-radius: 2px;
  background: rgba(10, 15, 12, 0.76);
}

#denno-action-toggles .denno-toggle-btn {
  border-radius: 2px;
  box-shadow: none;
  font-family: inherit;
  font-size: 12px;
}

/* vendor の低いviewport向け四麻レイアウトを常に上書きする。 */
@media screen and (max-height: 450px) {
  #board > .board-stage {
    width: var(--board-logical-w);
    height: var(--board-logical-h);
  }
}

/* 縦持ち端末では盤面全体を縮小して収めるため、手牌だけが識別しづらくなる。
 * 論理座標やクリック領域は変えず、自席の手牌表示を軽く拡大して視認性を確保する。 */
@media screen and (max-width: 600px) and (orientation: portrait) {
  #board > .board-stage .shoupai.main {
    transform: scale(1.28);
    transform-origin: center bottom;
  }

  #board > .board-stage .shoupai.main.nuki-selecting .bingpai img.nuki-candidate {
    box-shadow: 0 0 0 2px #e8c34d, 0 0 8px rgba(232, 195, 77, .85);
  }

  #board > .board-stage .player-button {
    transform: scale(1.12);
    transform-origin: center bottom;
  }
}