/* --- poker (ポーカー) ---
   卓は胡桃の枠に紺の羅紗 ―― 緑(リバーシ)・緋(大富豪)・紫紺(ばば抜き)に続く
   四枚目の布。他の札の卓と違って、この卓に置くのは出した札ではなく賭けなので、
   布の上には打ち手の木札・伏せ札・銭の山・ポットが乗る。

   扇の手札・打ち手の木札・卓の木札(フォールド/コール…)は大富豪と共有
   (styles/daifugo.css の「緋毛氈の卓」に #poker-container を足してある)。
   ここが持つのは卓 ―― 枠と羅紗、席、賭け、場札、せり札、決着の帳面。 */
.poker-container {
  width: 100%;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}
.poker-container.hidden { display: none; }

/* 胡桃の枠(9px)。将棋・リバーシ・チェス・大富豪・七並べの盤と同じ組み方。 */
.poker-table {
  box-sizing: border-box;
  padding: 9px;
  border-radius: 4px;
  border: 1px solid var(--daifugo-frame-edge);
  background:
    var(--wood-grain),
    linear-gradient(var(--daifugo-frame-a), var(--daifugo-frame-b));
  box-shadow:
    0 3px 6px var(--daifugo-frame-drop),
    inset 0 1px 0 var(--daifugo-frame-sheen);
}

/* 羅紗。上端の30pxは巡目の札の場所。 */
.poker-cloth {
  position: relative;
  box-sizing: border-box;
  min-height: 176px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 30px 14px 16px;
  border-radius: 2px;
  background:
    var(--poker-rasha-sheen),
    var(--poker-rasha-nap),
    linear-gradient(168deg, var(--poker-rasha-a), var(--poker-rasha-b));
  box-shadow: var(--poker-rasha-well);
}

/* 巡目 ―― 交換前・フロップ・第五の札…。今どこにいるかは卓の左肩に置く。 */
.poker-street {
  position: absolute;
  left: 14px;
  top: 11px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--shop-font-display);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--poker-rasha-ink-soft);
}
.poker-street::after {
  content: '';
  width: 26px;
  height: 1px;
  background: var(--shop-brass);
  opacity: 0.6;
}

/* 席 ―― 木札・伏せ札・張った銭の三段。上から下へ、打ち手からポットへ向かう
   並びにしてある。 */
.poker-seats {
  width: 100%;
  gap: 8px 18px;
  align-items: flex-start;
}
.poker-seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
/* 伏せ札の小さな扇。枚数は2〜7枚(ホールデム2・ドロー5・スタッド7)なので、
   開きと重なりは決め打ちでよい ―― JSは何枚目か(--i)だけを渡す。 */
.poker-seat-cards {
  --fan-step: 3.2deg;
  --fan-dip: 0.5px;
  display: flex;
  align-items: flex-start;
  min-height: 52px;
}
.poker-seat-cards:empty { display: none; }
.poker-seat-cards .daifugo-card {
  width: 34px;
  height: 48px;
  border-radius: 4px;
  cursor: default;
  filter: drop-shadow(0 2px 3px rgba(8, 14, 26, 0.5));
}
.poker-seat-cards .daifugo-card + .daifugo-card { margin-left: -19px; }
/* 表を向いた札(スタッドの見せ札・ショーダウンで開いた手)は絵柄を読むので、
   伏せ札より浅く重ねる。 */
.poker-seat-cards.revealed .daifugo-card + .daifugo-card { margin-left: -8px; }
.poker-seat-cards .daifugo-card:hover { transform: none; }
/* スタッドの見せ札は伏せ札より一段明るいので、表と裏の切れ目が分かるように
   表の札だけ真鍮の細い縁を付ける。 */
.poker-seat-cards .daifugo-card:not(.card-back) {
  box-shadow: 0 0 0 1px rgba(221, 192, 127, 0.55);
}

/* 張った銭。山の高さは額に比例する(games/poker.js の pokerCoinPile)ので、
   いちばん高い山のぶんだけ場所を先に空けておく ―― 張るたびに卓が伸びると、
   卓の下の手札が上下に跳ねる。 */
.poker-seat-bet {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 1px;
  min-height: 28px;
}
.poker-coin-row {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  font-family: var(--shop-font-display);
  font-size: 0.82rem;
  color: var(--poker-rasha-ink);
}
.poker-coin-row svg { display: block; }
/* 自分の張りの下に差す小さな断り。卓の手前の辺に置く山が誰のものか、
   相手の山と同じ形をしているので一言だけ添える。 */
.poker-seat-tag {
  font-family: var(--shop-font-display);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--poker-rasha-ink-soft);
}
/* 自分の張りは卓の手前の辺、ポットのすぐ下に置く。空のときも場所は残す ――
   ここが自分の張る所で、張った瞬間に卓が伸びない。 */
.poker-my-bet {
  min-height: 42px;
}
/* 降りた打ち手・尽きた打ち手も席は残す ―― 消すと誰が居たか分からなくなる。 */
.poker-seat.folded { opacity: 0.5; filter: saturate(0.6); }
.poker-seat.folded .poker-seat-cards { opacity: 0.65; }
/* 木札に差す小札。既定は真鍮の細縁(親・降り・チップ切れ)で、朱の地は手番だけ
   ―― 卓でいちばん強い一枚が「いま誰の番か」になるようにする。真鍮の灯りは
   色でしか読めないので、字でも出す。 */
/* 小札の段は空でも残す ―― 手番の朱札が出入りするたびに木札の丈が変わると、
   卓ごと伸び縮みして、下の手札が上下に跳ねる。 */
.poker-seat-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  /* 小札一枚の丈。空の段と札の入った段で木札の丈が変わらないように。 */
  min-height: 20px;
}
.poker-seat-badge {
  padding: 1px 7px 2px;
  border-radius: 2px;
  font-family: var(--shop-font-display);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  border: 1px solid rgba(221, 192, 127, 0.6);
  background: none;
  color: var(--shop-brass-light);
}
.poker-seat-badge.turn {
  border-color: var(--shop-brass);
  background: linear-gradient(var(--shop-seal), var(--shop-seal-deep));
  color: var(--shop-paper-light);
}
/* 全額は取り返しのつかない手なので朱の縁。手番(朱の地)とは重さを分ける。 */
.poker-seat-badge.allin {
  border-color: var(--shop-seal);
  color: #eba79c;
}
/* 手持ちの頭は札束ではなく銭の重なり ―― 数えるのが枚数ではなく額なので。 */
#poker-container .daifugo-opponent-count::before {
  -webkit-mask-image: var(--chip-stack-mark);
  mask-image: var(--chip-stack-mark);
}

/* 場札(ホールデム)。まだ来ていない札は空枠で残す ―― あと何枚めくれるかが
   分かる。 */
.poker-community {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.poker-community.hidden { display: none; }
.poker-community .daifugo-card { cursor: default; }
.poker-community .daifugo-card:hover { transform: none; }
.poker-slot {
  width: 64px;
  height: 90px;
  box-sizing: border-box;
  border: 1px dashed var(--poker-slot-edge);
  border-radius: 7px;
}

/* ポット ―― 卓のまんなかに置く銭の山。 */
.poker-pot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  /* 山の頭打ち(七枚=37px)と札の二行ぶん。ポットが育っても卓は伸びない。 */
  min-height: 64px;
}
.poker-pot-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--shop-font-display);
}
.poker-pot-label {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--poker-rasha-ink-soft);
}
.poker-pot-value {
  font-size: 1.2rem;
  color: var(--shop-brass-light);
}
.poker-pot-side {
  font-size: 0.68rem;
  color: var(--poker-rasha-ink-soft);
}

/* 配る前の羅紗 ―― 席の木札の下に伏せた山札を置き、横に卓が何を待っているかを
   書く(七並べの手元・ばば抜きの布と同じ組み)。まだ何も張られていないので、
   ポットと自分の張りの段は畳む ―― 空のまま残すと、布の下に106pxの空き地が残る。 */
.poker-cloth.is-waiting .poker-pot,
.poker-cloth.is-waiting .poker-my-bet { display: none; }
.poker-deal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 6px 0 4px;
}
.poker-deal.hidden { display: none; }
#poker-container .poker-deal .daifugo-deck {
  flex: none;
  margin: 0;
  filter: drop-shadow(0 4px 6px rgba(8, 16, 30, 0.5));
}
.poker-deal-text { max-width: 320px; }
.poker-deal-title {
  margin: 0;
  font-family: var(--shop-font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.1em;
  color: var(--shop-brass-light);
}
.poker-deal-note {
  margin: 10px 0 0;
  font-size: 0.85rem;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--poker-rasha-ink);
}
@media (max-width: 520px) {
  .poker-deal { gap: 16px; }
  .poker-deal-title { font-size: 1.05rem; }
}

/* 観戦者には手札が無い ―― 空の段が116px空いたままだと、卓の下に理由のない
   余白が残る(卓に着いている打ち手の手札は空にならない)。 */
#poker-container .daifugo-hand:empty { min-height: 0; padding-top: 0; }

/* 手持ち ―― 卓に出していない自分の分。卓の下、手札とせり札のあいだ。 */
.poker-purse {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 0.78rem;
  color: var(--shop-ink-soft);
}
.poker-purse.hidden { display: none; }
.poker-purse-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.poker-purse-item::before {
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  background: var(--shop-brass-deep);
  -webkit-mask: var(--chip-stack-mark) no-repeat center / contain;
  mask: var(--chip-stack-mark) no-repeat center / contain;
}
.poker-purse-item.plain::before { display: none; }
.poker-purse-value {
  font-family: var(--shop-font-display);
  font-size: 0.95rem;
  color: var(--shop-ink);
}

/* せり札 ―― 額の入力欄はロビーの暗い盤面の色のままだったので、紙の額面札に
   減増の木札を添える形に組み直す。左の三枚(最低・半分・ポット)は打つ額の
   あらかたを覆うので、数字を打ち込まずに済む。 */
.poker-bet-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.poker-bet-controls.hidden { display: none; }
.poker-quick-btn {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 6px 10px 7px;
  border-radius: 2px;
  border: 1px solid var(--shop-paper-line);
  background: var(--shop-paper-deep);
  color: var(--shop-ink-soft);
  font-family: var(--shop-font-body);
  font-size: 0.7rem;
  cursor: pointer;
}
.poker-quick-btn:hover {
  border-color: var(--shop-brass-deep);
  background: var(--shop-paper-light);
}
.poker-quick-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.poker-quick-value {
  font-family: var(--shop-font-display);
  font-size: 0.85rem;
  color: var(--shop-ink);
}
.poker-bet-rule {
  width: 1px;
  height: 26px;
  margin: 0 2px;
  background: var(--shop-paper-line);
}
.poker-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--shop-brass-deep);
  border-radius: var(--radius);
  background:
    var(--shop-paper-grain),
    linear-gradient(var(--shop-paper-light), var(--shop-paper-light));
  box-shadow: inset 0 1px 2px rgba(42, 36, 28, 0.12);
}
.poker-step-btn {
  width: 30px;
  border: none;
  background: transparent;
  color: var(--shop-brass-deep);
  font-family: var(--shop-font-display);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.poker-step-btn:hover { color: var(--shop-ink); }
.poker-stepper input {
  width: 76px;
  padding: 7px 4px 8px;
  border: none;
  border-left: 1px solid var(--shop-paper-line);
  border-right: 1px solid var(--shop-paper-line);
  border-radius: 0;
  background: transparent;
  color: var(--shop-ink);
  font-family: var(--shop-font-display);
  font-size: 1.05rem;
  text-align: center;
  -moz-appearance: textfield;
}
/* 減増は木札で持つので、環境ごとに姿の違う矢印は伏せる。 */
.poker-stepper input::-webkit-outer-spin-button,
.poker-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.poker-stepper input:focus {
  outline: 2px solid var(--shop-brass);
  outline-offset: -2px;
}
/* 手番でないあいだも消さずに伏せる ―― 行が畳まれると下の手札が上下に跳ねる。 */
.poker-stepper.off {
  border-style: dashed;
  border-color: var(--shop-paper-line);
  background: rgba(222, 208, 170, 0.5);
  box-shadow: none;
}
.poker-stepper.off input { color: #6f6455; }
.poker-step-btn:disabled { color: #6f6455; cursor: not-allowed; }
#poker-bet-btn:disabled {
  border: 1px dashed var(--shop-paper-line);
  background: rgba(222, 208, 170, 0.5);
  color: #6f6455;
  box-shadow: none;
  cursor: not-allowed;
}
#poker-container #poker-allin-btn:disabled {
  border: 1px dashed var(--shop-paper-line);
  background: rgba(222, 208, 170, 0.5);
  color: #6f6455;
  cursor: not-allowed;
}

/* 卓の木札は四枚並ぶので、大富豪(二枚)より幅を詰めて、狭い画面では折り返す。
   重さは三段 ―― コールは松、レイズは胡桃、オールインは朱の縁、
   フォールドは紙。取り返しのつかない順に濃くしてある。 */
#poker-container .daifugo-actions {
  flex-wrap: wrap;
}
#poker-container .daifugo-actions .primary-btn,
#poker-container .daifugo-actions .secondary-btn {
  min-width: 104px;
  padding: 10px 22px;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
}
#poker-bet-btn {
  border: 1px solid var(--shop-brass);
  background:
    var(--wood-grain),
    linear-gradient(var(--shop-walnut-warm), var(--shop-walnut-deep));
  color: var(--shop-brass-light);
  box-shadow:
    0 2px 3px rgba(20, 12, 4, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
#poker-bet-btn:hover {
  background:
    var(--wood-grain),
    linear-gradient(var(--shop-walnut-deep), var(--shop-walnut-deep));
}
#poker-container #poker-allin-btn {
  border: 1.5px solid var(--shop-seal);
  color: var(--shop-seal-deep);
}
#poker-container #poker-allin-btn:hover {
  background: var(--shop-paper-deep);
  border-color: var(--shop-seal-deep);
}

/* 決着の帳面 ―― 「名前: 役 (3♠ 3♥ …)」の一行だったものを、名前・役・札の
   三列に組み直す。勝ち手には朱印を捺して地を一段濃くする。 */
.poker-result {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px 14px;
  border: 1px solid var(--shop-paper-line);
  border-left: 3px solid var(--shop-brass-deep);
  background-image:
    var(--shop-paper-grain),
    linear-gradient(var(--shop-paper-light), var(--shop-paper-light));
}
.poker-result.hidden { display: none; }
.poker-result-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--shop-paper-line);
}
.poker-result-head h3 {
  margin: 0;
  font-family: var(--shop-font-display);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.1em;
}
.poker-result-sub {
  font-size: 0.72rem;
  color: var(--shop-ink-soft);
}
.poker-result-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.poker-result-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--shop-paper-line);
  background: transparent;
}
.poker-result-row.win {
  background: var(--shop-paper-deep);
  border-color: var(--shop-brass);
}
.poker-result-seal {
  flex: none;
  width: 21px;
  height: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--shop-font-display);
  font-size: 0.68rem;
}
.poker-result-row.win .poker-result-seal {
  border: 1.5px solid var(--shop-seal);
  color: var(--shop-seal);
}
.poker-result-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.poker-result-role {
  flex: none;
  font-family: var(--shop-font-display);
  font-size: 0.88rem;
  color: var(--shop-ink-soft);
}
.poker-result-row.win .poker-result-role { color: var(--shop-seal-deep); }
.poker-result-cards {
  flex: none;
  display: flex;
  margin-left: auto;
}
.poker-result-cards .daifugo-card {
  width: 34px;
  height: 48px;
  border-radius: 4px;
  cursor: default;
  filter: drop-shadow(0 1px 2px rgba(42, 36, 28, 0.28));
}
.poker-result-cards .daifugo-card + .daifugo-card { margin-left: -10px; }
.poker-result-cards .daifugo-card:hover { transform: none; }
.poker-result-award {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 2px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--shop-paper-line);
  font-size: 0.8rem;
}
.poker-result-award-label {
  font-family: var(--shop-font-display);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--shop-brass-deep);
}
#poker-hand-actions.hidden { display: none; }
#poker-draw-controls.hidden { display: none; }

/* 狭い画面 ―― 布の内余白と札を詰める。伏せ札の扇は元から小さいので、
   場札(64×90)と手札の重なりだけを落とす。 */
@media (max-width: 560px) {
  .poker-cloth { gap: 10px; padding: 28px 8px 12px; }
  .poker-seats { gap: 8px 10px; }
  .poker-community { gap: 4px; }
  .poker-community .daifugo-card,
  .poker-slot { width: 46px; height: 65px; border-radius: 5px; }
  .poker-result-cards .daifugo-card { width: 28px; height: 39px; }
  .poker-result-cards .daifugo-card + .daifugo-card { margin-left: -8px; }
  .poker-result-role { font-size: 0.8rem; }
  .poker-stepper input { width: 62px; }
}