/* ゲーム画面(#game-screen)専用のスタイル。
   参加画面まわりは styles.css が持っているので、そちらには手を入れずここに足している。 */

/* ゲーム画面の中の出し分けは .hidden に頼っている。styles.css 側の定義に依存すると
   将来そちらを触ったときに黙って壊れるので、この画面の中だけは自前で保証しておく。 */
#game-screen .hidden {
  display: none !important;
}

#game-screen {
  display: none;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 12px 12px 96px;
  box-sizing: border-box;
}
/* 【align-items / justify-content を上書きする理由】#game-screen は styles.css の
   .screen を兼ねており、.screen は「1枚のパネルを画面中央に置く」ための
   `align-items: center; justify-content: center` を持っている。
   ゲーム画面だけは縦積みの複数行(名前バー・HUD・席・結果・手牌)なので、
   そのままだと:
     - 交差軸(横)が center のせいで各行が中身の幅までしぼみ、
       table-head の space-between も seat-list のグリッドも効かなくなる
     - 主軸(縦)が center のせいで、行が増減するたびに画面全体が上下に踊る
   横は stretch(全行を同じ幅に)、縦は flex-start(上から順に積む)に直す。 */
#game-screen:not(.hidden) {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
}

/* --- 自分の名前と持ちチップ(常時表示) ------------------------------------- */

.player-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  /* 右は固定表示の🔊/⚙️ボタン(横並びで約76px)ぶんを必ず空ける。
     ここを削ると、持ちチップの数字がボタンの下に隠れる。 */
  padding: 6px 84px 6px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--gold-dark);
}
.player-bar-avatar {
  font-size: 1.1rem;
  flex: 0 0 auto;
}
.player-bar-name {
  font-weight: 900;
  font-size: 0.95rem;
  color: var(--gold-pale);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.player-bar-chips {
  margin-left: auto;
  flex: 0 0 auto;
  font-weight: 900;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--cream);
}
.player-bar-unit {
  font-size: 0.65rem;
  font-weight: 400;
  opacity: 0.6;
  margin-left: 3px;
}

/* パネル系(待機中・ゲーム終了)は stretch で横いっぱいに伸びるが、
   .panel 自体が max-width を持つので中央に寄せ直しておく。 */
.waiting-box,
.game-end-box {
  margin-left: auto;
  margin-right: auto;
}

/* --- 待機画面 ------------------------------------------------------------ */

.waiting-box {
  text-align: center;
  padding: 24px 16px;
}
.waiting-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 6px;
}
.waiting-sub {
  margin: 0 0 16px;
  opacity: 0.75;
  font-size: 0.9rem;
  line-height: 1.6;
}
.waiting-count {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* --- 卓のHUD ------------------------------------------------------------- */

/* 対局中の本体。縦に伸ばし、手牌を画面の下端(親指の届く位置)に寄せる。
   こうしないと、席の数や結果の高さが変わるたびに手牌の位置が上下して押しにくい。 */
#table-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
}
/* 残り時間バーから下(バー・手牌・ヒント)をひとかたまりで下端へ寄せる。
   バーだけ上に取り残されると、どの操作の残り時間なのかが分かりにくい。 */
#table-area #turn-bar {
  margin-top: auto;
}

.table-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.9rem;
  font-weight: 700;
}
.round-label {
  font-weight: 900;
  font-size: 1rem;
}
.dora-label,
.head-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.head-key {
  font-size: 0.7rem;
  opacity: 0.6;
  font-weight: 700;
}
/* 場のチップの隣に出す供託(2026-08-16「供託チップも場のチップ辺りに表示」)。
   直前の場のチップの数字と区切るため、左に少し間を空ける。 */
.pot-deposits-key {
  margin-left: 8px;
}
.head-sub {
  font-size: 0.68rem;
  opacity: 0.5;
  font-weight: 400;
}

/* 2026-08-16「プレイヤー情報を2x2にして情報表示箇所をもっと広く」。以前はauto-fitで、
   画面幅次第で1〜4列に変化していた(狭いスマホでは自然に2列になることが多いが、
   横幅のある端末では3〜4列になり、1枚あたりの幅が伸びず名前や捨て牌が窮屈になっていた)。
   4人固定のゲームなので、常に2列(=2行)に固定して1枚あたりの幅を確保する。 */
.seat-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
/* 【色を明示する理由】body の文字色はクリーム(#fff8e7)。席カードや結果の吹き出しは
   明るい背景なので、色を指定しないとクリーム文字が白背景に乗って読めなくなる。 */
.seat-card {
  border: 2px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.seat-card.is-you {
  border-color: #f0a04b;
  background: rgba(255, 240, 220, 0.95);
}
/* 親マーク。以前は.seat-nameの::afterで名前の文字列に直接くっつけていたが、
   .seat-nameはoverflow:hidden+text-overflow:ellipsisで自分自身を切り詰める箱なので、
   その中に生成した「親」バッジも一緒に切り詰め・はみ出しの対象になってしまい、
   席カードに順位バッジ・クォッカの顔が増えて横幅が詰まった際に見切れて表示が崩れた
   (2026-08-16に報告)。riichiTagと同じく.seat-headの独立したフレックス子要素にして、
   名前の切り詰めに巻き込まれないようにする。 */
.seat-dealer-tag {
  flex: 0 0 auto;
  font-size: 0.7rem;
  font-weight: 700;
  background: #f0a04b;
  color: #fff;
  border-radius: 6px;
  padding: 1px 5px;
}
/* リーチ中の席。誰がリーチしているかは卓で一番重要な情報なので、
   枠の内側の線だけでなく外側の光でも分かるようにする。 */
.seat-card.is-riichi {
  border-color: #e5533d;
  box-shadow: 0 0 0 2px #e5533d inset, 0 0 0 3px rgba(229, 83, 61, 0.35);
}
/* リーチが今まさに決まった瞬間だけの一過性の演出(2026-08-16「リーチ演出をもっと
   目立たせたい」)。.is-riichiの赤枠(ずっと点いたまま)とは別物で、こちらはJS側
   (client/src/ui.js の pulseRiichiSeats)がクラスを付けてから約0.9秒で自動的に外す。
   下の @keyframes riichi-pulse(リーチボタンの「今なら宣言できる」の常時脈動)と同じ
   「輪が広がって消える」モーションを流用し、常時ループさせず1回だけ大きく鳴らす形にした。 */
.seat-card.is-riichi-flash {
  animation: riichi-declare-flash 0.9s ease-out;
}
@keyframes riichi-declare-flash {
  0% {
    box-shadow: 0 0 0 2px #e5533d inset, 0 0 0 0 rgba(229, 83, 61, 0.85);
    transform: scale(1);
  }
  35% {
    box-shadow: 0 0 0 2px #e5533d inset, 0 0 0 10px rgba(229, 83, 61, 0);
    transform: scale(1.035);
  }
  100% {
    box-shadow: 0 0 0 2px #e5533d inset, 0 0 0 10px rgba(229, 83, 61, 0);
    transform: scale(1);
  }
}
.seat-head {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
/* 2026-08-16「親のところはみ出すようになったからユーザーの情報欄をもっと広くしていい」。
   順位バッジ・クォッカの顔・親マーク・リーチタグと横並びになる関係で、以前は暗黙の
   flex:0 1 auto(自分の内容量ぶんの幅)のままだった。flex:1 1 autoで.seat-headの
   余った幅を積極的に取りに行くようにし、他の固定幅バッジを圧迫せずに名前へ幅を
   多く回す(min-width:0はflexアイテムのoverflow:hidden/text-overflow:ellipsisを
   効かせるために必須)。 */
/* 2026-08-16「名前が途切れて表示される」。flex: 1 1 auto のままだと、flex-basisが
   「自分の文字列の自然な幅」になる。リーチタグ等の固定幅バッジが同じ行に増えると、
   名前の取り分がその自然な幅より狭く計算され、実際にはカードにまだ余白があっても
   早めに省略記号が出てしまっていた。flex-basisを0にして「自分の中身の幅を無視し、
   余った幅を丸ごと取りに行く」形に変えることで、他の固定幅バッジを差し引いた
   残り幅をきっちり使い切るようにする(min-width:0は引き続き、本当に収まらない
   ときの省略記号のために必要)。 */
.seat-name {
  flex: 1 1 0;
  min-width: 0;
  font-weight: 700;
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 現在の暫定順位(所持チップだけで決まる。最終順位はゲーム終了時のstandingsとは別物)。
   2026-08-16「各メンバーの現在の順位が出るように」。1位だけ金色で目立たせ、
   2〜4位は控えめな同系色にして「1位が誰か」が一目で分かるようにする。 */
.seat-rank {
  flex: 0 0 auto;
  font-size: 0.65rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  border-radius: 5px;
  padding: 1px 5px;
  background: rgba(0, 0, 0, 0.08);
  color: var(--text-muted);
}
.seat-rank-1 {
  background: var(--gold);
  color: #241505;
}
/* 名前の横のクォッカの顔(2026-08-16「順位によってスマイル具合をかえて」)。
   表情はSVG内のg要素を出し分ける(ui.jsのQUOKKA_FACE_SVG参照)。1位=glad(にっこり)、
   最下位=sad(しょんぼり)、その中間はcalm/normalの2段階。 */
.seat-face {
  flex: 0 0 auto;
  width: 18px;
  aspect-ratio: 90 / 82;
  line-height: 0;
}
.seat-face svg {
  width: 100%;
  height: 100%;
  display: block;
}
.seat-face .face {
  display: none;
}
.seat-face.is-normal .face-normal,
.seat-face.is-calm .face-calm,
.seat-face.is-glad .face-glad,
.seat-face.is-sad .face-sad {
  display: block;
}
/* 誰がリーチしているかは卓で一番重要な情報。タグ・枠の赤・宣言牌の横向きの
   3つで示す。
   【アニメーションを付けない理由】renderSeats() は席カードのHTMLを毎回作り直すので、
   出現アニメを付けると更新のたびに再生されてチラつく。 */
.seat-riichi-turn {
  margin-left: 3px;
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}
.seat-riichi-tag {
  font-size: 0.65rem;
  font-weight: 900;
  background: #e5533d;
  color: #fff;
  border-radius: 5px;
  padding: 1px 6px;
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px rgba(229, 83, 61, 0.25);
}
.seat-chips {
  font-variant-numeric: tabular-nums;
  font-size: 1.1rem;
  font-weight: 900;
}
.seat-chips-unit {
  font-size: 0.7rem;
  font-weight: 400;
  opacity: 0.6;
  margin-left: 3px;
}
/* 捨て牌はミニカードを並べる。全部出す(2026-08-16、「すべて見れるように」との要望で
   「直近5枚だけ」表示から変更)。当初は横スクロール1行にしていたが、スクロールしないと
   見えないのは「もっと長く(=一目で多く)見えるように」という要望に合わなかったため、
   折り返して複数行に広げる形にした(2026-08-16再修正)。以前は3行・24px幅にしていたが、
   2026-08-16「捨て牌表示2段にしてもう少し大きく牌を表示するように」で2行・30px幅に
   変更(1局最大13ターンぶんを2行だけで収めるのは難しいので、収まらない場合は
   縦スクロールで見る前提。牌を大きく読みやすくすることを優先)。1枚あたりの幅は
   固定(可変幅だと枚数が増えるたびに牌がどんどん小さくなってしまうため)。 */
.seat-discards {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 2px;
  min-height: 40px;
  max-height: 84px;
  overflow-x: hidden;
  overflow-y: auto;
  margin-top: 2px;
  scrollbar-width: thin;
}
.seat-discards .tile-mini {
  width: 30px;
  height: auto;
  aspect-ratio: 26 / 34;
  flex-shrink: 0;
}
/* リーチ宣言牌。実物の麻雀と同じく横向きに置く。
   「いつリーチしたか」= それ以降の捨て牌は本人も選べていない、という重要な情報なので、
   単に「リーチ中」と出すだけでなく何枚目で宣言したかを見せる。
   transform は配置に影響しないぶん左右へはみ出すので、その分の余白を足しておく。 */
.seat-discards .tile-mini.is-riichi-tile {
  transform: rotate(90deg);
  border-color: #e5533d;
  background: #ffece9;
  margin: 0 6px;
}

/* このターンに切られたばかりの牌。一斉打牌で4人ぶんが同時に増えるので、
   印が無いとどれが今の1枚なのか目で追えない(ロンの判断に直結する)。 */
.seat-discards .tile-mini.is-latest {
  border-color: #f0a04b;
  box-shadow: 0 0 0 2px rgba(240, 160, 75, 0.55);
}

/* 今まさに切ろうとしている牌と同じ種類の捨て牌(2026-08-16「捨て牌を選択したとき
   場に出てるやつがあればハイライト表示」)。「この牌はもう場に出ている」を一目で
   伝える見た目だけの補助。リーチ宣言牌(赤)・直近の1枚(橙)とは別の色にして重ならないよう
   青系にする(is-latestと同時に付くこともあるため、box-shadowを二重にして両方見えるように)。 */
.seat-discards .tile-mini.is-selected-match {
  border-color: #4a90d9;
  box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.7);
}
.seat-discards .tile-mini.is-selected-match.is-latest {
  box-shadow: 0 0 0 2px rgba(240, 160, 75, 0.55), 0 0 0 4px rgba(74, 144, 217, 0.7);
}

/* --- 残り時間バー -------------------------------------------------------- */

.turn-bar-outer {
  height: 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.turn-bar-inner {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #7bc47f, #f0a04b);
  transform-origin: left center;
  transition: transform 0.1s linear;
}
.turn-bar-inner.is-urgent {
  background: linear-gradient(90deg, #f0a04b, #e5533d);
}

/* --- 手牌と牌のカード ------------------------------------------------------ */

.hand-label {
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.hand-label-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
/* 役一覧・遊び方を開くボタン。リーチほど目立たせず、でも常に見えている位置に置く。
   遊び方は<a data-legal>(styles.cssの.rules-linkと同じ考え方)なので、display/text-decoration
   も明示しておく(<button>側には元々効かない指定なので、共存させても問題ない)。 */
.help-btn {
  display: inline-flex;
  align-items: center;
  border: 2px solid var(--gold-dark);
  background: rgba(224, 178, 58, 0.12);
  color: var(--gold-pale);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
}
/* 手牌8枚は必ず1行に収める。折り返すと「どれが今引いた牌か」が分からなくなるうえ、
   行が増えて打牌ボタンの位置が毎ターン動いてしまう。画面幅から1枚あたりの幅を割り出す。
   ただし計算どおりに収まらない幅の端末があると、右端(=ツモ牌。末尾に置いているため)が
   画面外へ切れて見えなくなる(2026-08-16に報告)。計算がずれても実害が出ないよう、
   横スクロールを保険として効かせておく(折り返しではないので上の方針は崩さない)。 */
.hand-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  justify-content: center;
  align-items: flex-end;
  /* 選択中の牌が持ち上がり、その上に「きる」の吹き出しが出るぶんの余白を確保する
     (確保しないと、選ぶたびに行の高さが変わって画面がガタつく)。
     吹き出しは牌の上端から28px(持ち上げ12px + 吹き出し16px)出るので、
     余白はそれを必ず上回らせる。足りないと上の行に吹き出しが重なる。 */
  min-height: 100px;
  padding-top: 30px;
  border-radius: 12px;
  transition: background 0.15s ease;
  overflow-x: auto;
  overflow-y: hidden;
}
/* リーチを選ぼうとしている間は手牌の行そのものを赤く染める。
   ボタンから視線を落とした先(=実際に牌を選ぶ場所)にも状態の印が要る。 */
.hand-row.is-riichi-arming {
  background: rgba(229, 83, 61, 0.16);
  box-shadow: 0 0 0 2px rgba(229, 83, 61, 0.45) inset;
}
/* 宣言済み。もう触れないことを見た目でも示す。 */
.hand-row.is-riichi-locked {
  background: rgba(229, 83, 61, 0.08);
}

/* リーチの下見中。切ればテンパイになる牌だけを光らせ、それ以外は沈める。
   「どれを切ればいいのか分からない」が一番の詰まりどころなので、
   選べる牌そのものを画面で絞り込んでしまう。 */
.tile.is-riichi-candidate {
  border-color: #e5533d;
  box-shadow: 0 0 0 2px rgba(229, 83, 61, 0.5), 0 2px 0 rgba(229, 83, 61, 0.4);
  opacity: 1;
}
.tile.is-riichi-blocked:disabled {
  opacity: 0.22;
}

/* --- リーチの待ち確認 ----------------------------------------------------- */

.riichi-confirm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--text);
  border: 2px solid #e5533d;
}
.wait-line {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.wait-label {
  font-size: 0.8rem;
  font-weight: 700;
}
.wait-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px 2px 3px;
  border-radius: 999px;
  background: rgba(240, 160, 75, 0.16);
  border: 1px solid rgba(240, 160, 75, 0.5);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* 残り0枚 = その牌はもう場に出きっていて、その待ちでは和了れない。 */
.wait-chip.is-dead {
  opacity: 0.45;
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.2);
}
.wait-total {
  font-size: 0.8rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.wait-warn {
  margin-left: 8px;
  color: #b23a3a;
  font-weight: 700;
}
.riichi-confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
/* 2026-08-16「『リーチして切る』ボタンが暗いままもっと明るいボタンにして」。
   button.primary の既定色(金のグラデーション、styles.css)は緑の卓の上だと
   くすんで見え、リーチ関連の他の要素(リーチボタン・タグ・注意書きの赤)とも
   トーンが揃っていなかった。リーチ確定という一番目立たせたい操作なので、
   同じ鮮やかな赤に統一する。 */
.riichi-confirm-actions .primary {
  border-radius: 999px;
  padding: 8px 20px;
  background: #e5533d;
  border-color: #e5533d;
  color: #fff;
}

/* 牌は「スートを上・数字を下」に積んだ縦長のカード。
   絵文字と数字を横に並べると小さく潰れて読めないので、縦に積んで数字を大きく出す。 */
.tile {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  /* 8枚 + 隙間7つ + ツモ牌の余白 + 画面の左右padding が幅に収まるようにする。 */
  width: clamp(30px, calc((100vw - 88px) / 8), 46px);
  aspect-ratio: 46 / 64;
  padding: 0;
  border: 2px solid rgba(0, 0, 0, 0.14);
  border-radius: 9px;
  background: linear-gradient(180deg, #fffefb 0%, #fff7e9 100%);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.08s ease, border-color 0.15s ease, box-shadow 0.08s ease;
  flex: 0 0 auto;
  position: relative;
}
.tile-suit {
  font-size: clamp(0.9rem, 3.6vw, 1.3rem);
  line-height: 1;
}
.tile-num {
  font-size: clamp(0.8rem, 3vw, 1.05rem);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* スートごとに数字を色分けする。同じスートの牌が一目で束になって見える。 */
.suit-leaf .tile-num {
  color: #2f8f4e;
}
.suit-berry .tile-num {
  color: #d13b53;
}
.suit-star .tile-num {
  color: #c98a00;
}

/* 字牌(猫・魚・鳥)。2026-08-16「猫鳥魚は文字だけでなく絵文字も付けて」より、数字牌と
   同じ「上段(スート絵文字/字牌の絵文字) + 下段(数字/漢字1文字)」の縦2段構成に揃えた
   (tileInnerHtml参照)。色は数字牌の配色(くさ緑・いちご赤・ほし琥珀)とは別系統を割り当て、
   猫=陸(りく)の土色、魚=海(うみ)の深い青緑、鳥=空(そら)の水色と、それぞれのモチーフに
   寄せた3色で見分けやすくしている。 */
.tile-honor-label {
  font-size: clamp(0.8rem, 3vw, 1.05rem);
  font-weight: 900;
  line-height: 1;
}
.suit-tori {
  border-color: #4f97d1;
}
.suit-tori .tile-honor-label {
  color: #2f72b8;
}
.suit-neko {
  border-color: #a3835a;
}
.suit-neko .tile-honor-label {
  color: #7a5c3e;
}
.suit-sakana {
  border-color: #2f9c94;
}
.suit-sakana .tile-honor-label {
  color: #1f7a72;
}

.tile:hover:not(:disabled) {
  transform: translateY(-5px);
  border-color: #f0a04b;
}
.tile:disabled {
  cursor: default;
  opacity: 0.5;
}
/* 今ツモった牌。左に隙間を空けて、色でも分かるようにする。 */
.tile.is-drawn {
  border-color: #7bc47f;
  box-shadow: 0 2px 0 rgba(123, 196, 127, 0.55);
  margin-left: 8px;
}
/* 今これを切る、という選択状態。ターン開始時からツモ牌がこの状態で始まる。
   持ち上げ + 枠の色 + 「きる」の吹き出しで、押せる状態との違いを明確にする。 */
.tile.is-chosen {
  transform: translateY(-12px);
  border-color: #e5533d;
  box-shadow: 0 3px 0 rgba(229, 83, 61, 0.5);
  opacity: 1;
}
.tile.is-chosen::after {
  content: "きる";
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  font-weight: 700;
  color: #fff;
  background: #e5533d;
  border-radius: 999px;
  padding: 1px 6px;
  white-space: nowrap;
  pointer-events: none;
}
/* 締切後も、どれを切ったのかは見えたままにしておく。 */
.tile.is-chosen:disabled {
  opacity: 1;
}

/* 押せないカード(捨て牌・ドラ・和了手)。 */
.tile-static {
  cursor: default;
  box-shadow: none;
}
.tile-mini {
  width: 26px;
  height: 34px;
  aspect-ratio: auto;
  border-width: 1px;
  border-radius: 5px;
  gap: 0;
}
.tile-mini .tile-suit {
  font-size: 0.8rem;
}
.tile-mini .tile-num {
  font-size: 0.7rem;
}
.tile-mini .tile-honor-label {
  font-size: 0.8rem;
}
.tile-small {
  width: 34px;
  height: 46px;
  aspect-ratio: auto;
  border-radius: 7px;
}
.tile-small .tile-suit {
  font-size: 1rem;
}
.tile-small .tile-num {
  font-size: 0.85rem;
}
.tile-small .tile-honor-label {
  font-size: 0.95rem;
}

.action-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.riichi-btn {
  border: 2px solid #e5533d;
  color: #e5533d;
  background: #fff;
  border-radius: 999px;
  padding: 6px 16px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  flex: 0 0 auto;
  white-space: nowrap;
}
.riichi-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
/* 「今なら宣言できる」。押せることに気付いてもらうのが目的なので、
   色を反転させたうえでゆっくり脈打たせる。 */
.riichi-btn.is-ready {
  background: #e5533d;
  color: #fff;
  animation: riichi-pulse 1.4s ease-in-out infinite;
}
/* 宣言する牌を選んでいる最中。以前は濃い焦げ茶(#7a2418)にしていたが、無効化された
   ボタンに見えてしまい「暗い」と分かりづらかったため、is-ready/is-declaredと同じ赤に
   揃えた(押せる状態であることが一目で分かるように)。区別はパルスの有無とテキストで付ける。 */
.riichi-btn.is-armed {
  background: #e5533d;
  border-color: #e5533d;
  color: #fff;
  animation: none;
}
/* 宣言済み(この局はもう変えられない)。 */
.riichi-btn.is-declared {
  background: #e5533d;
  border-color: #e5533d;
  color: #fff;
  opacity: 1;
}
@keyframes riichi-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 83, 61, 0.6); }
  50% { box-shadow: 0 0 0 7px rgba(229, 83, 61, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .riichi-btn.is-ready { animation: none; }
}

/* リーチの状態を言葉で出す1行。手牌のすぐ上に置く。 */
.riichi-note {
  margin: 0;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.5;
  border-radius: 8px;
  padding: 4px 8px;
}
.riichi-note.is-ready {
  background: rgba(229, 83, 61, 0.18);
  color: #ffd9d2;
}
.riichi-note.is-armed {
  background: #e5533d;
  color: #fff;
}
.riichi-note.is-declared {
  background: rgba(229, 83, 61, 0.14);
  color: #ffc9c0;
}
/* リーチ後も自分の待ちを見せ続ける行(2026-08-16)。.wait-chip は明るい下地を
   前提にした配色なので、is-declaredの薄いピンク文字を引き継がず自前の色を明示する。 */
.riichi-note-waits {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  color: var(--text);
}
.riichi-note-waits .wait-label {
  color: #ffc9c0;
  font-size: 0.75rem;
}

.turn-hint {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 700;
  opacity: 0.85;
  min-height: 1.4em;
  margin: 0;
}
.turn-hint.is-riichi {
  color: #ff8f7c;
  opacity: 1;
}
.turn-hint.is-locked {
  opacity: 0.6;
}

/* --- 結果画面(フローティングカード) --------------------------------------
   2026-08-16「結果画面はフローティングにして」。以前は#result-box/#review-rowが
   ページの縦の流れにそのまま挿入され、卓の下に割り込む形で表示されていた。
   卓を隠さず上に浮かせるほうが「今の卓の様子」と「結果」を両方見せられるので、
   yaku-modal/legal-modalと同じ「fixed全面 + 暗幕 + 中央のカード」の構成に変える。
   z-indexはフッター(55)・音量パネル(50)より上、規約モーダル(100)・役一覧(120)より下
   (結果を見ながら役一覧を開き直せるように)。 */
.result-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.result-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.result-overlay-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: min(84vh, 680px);
  max-height: min(84dvh, 680px);
  display: flex;
  flex-direction: column;
  background: var(--cream);
  color: var(--text);
  border: 3px solid var(--gold-dark);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

/* --- 結果を見終わるまでの待ち(round_review) -------------------------------
   フローティングカードの下段(フッター)。中身がスクロールしても
   「次の局へ」ボタンだけは常に見えている必要があるので、flex-shrink させない。 */
.review-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 0 0 auto;
  padding: 12px 16px;
  border-top: 2px solid rgba(0, 0, 0, 0.1);
}
.next-btn {
  padding: 10px 24px;
  border-radius: 999px;
  font-size: 1rem;
}
.review-status {
  font-size: 0.8rem;
  font-weight: 700;
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}

/* --- 結果の中身 ----------------------------------------------------------
   カードの上段(スクロール可能な本体)。以前ここに付いていた背景・枠・角丸は、
   外側の.result-overlay-cardがカードそのものとして持つようになったので不要になった
   (二重の箱に見えてしまうため)。 */
.result-box {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  color: var(--text); /* 明るい背景なので、bodyのクリーム文字のままだと読めない */
  font-size: 0.9rem;
  line-height: 1.7;
}
.result-title {
  font-weight: 700;
  margin: 0 0 4px;
}
.result-box ul {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
/* 和了者が複数(ダブロン)のときの区切り。
   直下のliだけに効かせること。子孫まで効かせると、点数の内訳や支払いの
   1行ごとにも線が入って読みにくくなる。 */
.result-box > ul > li + li {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(0, 0, 0, 0.18);
}
.result-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.result-kind {
  font-weight: 700;
  background: #f0a04b;
  color: #fff;
  border-radius: 6px;
  padding: 1px 7px;
  font-size: 0.8rem;
}
.result-from {
  font-size: 0.8rem;
  opacity: 0.75;
}
.result-points {
  margin-left: auto;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #d1701a;
}
.result-hand {
  display: flex;
  gap: 2px;
  margin: 6px 0;
  flex-wrap: wrap;
}

/* 役の内訳。役名と倍率をひとまとまりのチップにして並べる。 */
.result-yaku {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-bottom: 6px;
}
.yaku-chip {
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(240, 160, 75, 0.16);
  border: 1px solid rgba(240, 160, 75, 0.45);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}
.yaku-mul {
  margin-left: 4px;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}
.yaku-total {
  font-size: 0.78rem;
  font-weight: 900;
  color: #d1701a;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

/* 点数の内訳と支払い。左に説明・右に数字を並べて、目が数字の列を追えるようにする。 */
.result-calc,
.result-pay {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  font-size: 0.8rem;
}
.result-calc li,
.result-pay li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 1px 0;
  line-height: 1.6;
}
.result-calc b,
.result-pay b {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.result-calc {
  opacity: 0.8;
}
/* 支払いは「誰が誰に」なので、内訳より一段強く見せる。 */
.result-pay {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  padding-top: 5px;
  margin-bottom: 0;
  opacity: 1;
}
.result-pay b {
  color: #d13b53;
  font-weight: 900;
}
.result-pay-title {
  font-size: 0.7rem;
  font-weight: 700;
  opacity: 0.55;
  margin: 6px 0 0;
}

/* --- 役一覧パネル --------------------------------------------------------- */

.yaku-modal {
  position: fixed;
  inset: 0;
  z-index: 120; /* 音量パネル(50)・フッター(55)より上、規約モーダル(100)より上 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.yaku-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
}
.yaku-modal-box {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: min(84vh, 720px);
  max-height: min(84dvh, 720px);
  display: flex;
  flex-direction: column;
  background: var(--cream);
  color: var(--text);
  border: 3px solid var(--gold-dark);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.yaku-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  font-weight: 900;
  background: #e5d18f;
  color: #2c2416;
  flex: 0 0 auto;
}
.yaku-close {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--gold-dark);
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1;
  flex: 0 0 auto;
}
/* 中身だけをスクロールさせる。パネルごとスクロールさせると閉じるボタンが流れて消える。 */
.yaku-modal-body {
  padding: 14px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 0.85rem;
  line-height: 1.7;
}
.yaku-help-lead {
  margin: 0 0 10px;
}
.yaku-help-title {
  font-size: 0.9rem;
  margin: 16px 0 6px;
  padding-bottom: 3px;
  border-bottom: 2px solid #e5d18f;
  color: #1f5c45;
}
.yaku-help-note {
  margin: 6px 0 0;
  font-size: 0.75rem;
  color: #8a7d5f;
}
.yaku-help-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* 役名・倍率・説明の3列。狭い画面では説明だけ次の行へ落とす。 */
.yaku-help-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.15);
}
.yaku-help-name {
  font-weight: 900;
  flex: 0 0 auto;
}
.yaku-help-mul {
  font-weight: 900;
  color: #d1701a;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
/* 麻雀での呼び名。独自名で覚えてもらうのが主役なので、こちらは控えめに添えるだけ。
   麻雀を知っている人が「これはタンヤオか」と対応づけられればよい。 */
.yaku-help-formal {
  font-size: 0.7rem;
  color: #a89a78;
  flex: 0 0 auto;
}
.yaku-help-desc {
  flex: 1 1 100%;
  font-size: 0.78rem;
  color: #6b6047;
}
/* 役ごとの実例の牌姿(2026-08-16「役一覧の例画像がない」)。.yaku-help-descと同じく
   常に自分の行を占有させ、8枚+区切りが折り返しても崩れないようにする。 */
.yaku-help-example {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
}
.yaku-help-calc {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
}
.yaku-help-calc li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.12);
}
.yaku-help-calc b {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.game-end-box {
  text-align: center;
}
.standings {
  list-style: none;
  padding: 0;
  margin: 8px 0 12px;
  font-variant-numeric: tabular-nums;
}
.standings li {
  padding: 3px 0;
}
.standings li.is-you {
  font-weight: 700;
}

/* --- 大きい画面向けの拡大表示 ----------------------------------------------
   2026-08-16「全体的に画面が小さい、ゲーム中画面はもっと全体的に大きくデザインして」。
   スマホ幅(これまでの既定スタイル)は一切変えない。タブレット/PC幅など余裕があるときだけ、
   コンテナ幅・牌・文字・ボタンを大きくする。ブレークポイントは大型スマホの横幅
   (iPhone Pro Max等でも430px前後)より確実に広く、一般的なタブレット縦持ち(768px)より
   少し手前の700pxに設定し、「スマホでは今までどおり、それより広い画面だけ拡大」を狙う。
   手牌の.tileはここで幅を上書きする。【#hand-rowで限定する理由】素の`.tile`で上書きすると、
   同じ(0,1,0)の特異度を持つ`.tile-mini`(26px)・`.tile-small`(34px)より後ろにあるぶん
   カスケードで勝ってしまい、ドラ表示・結果カードの和了手・役一覧の例など、高さ固定の
   ミニ/スモール牌まで幅58pxに引き伸ばされて横長に潰れる(2026-08-16レビューで確定した
   不具合)。拡大したいのは手牌だけなので、#hand-row配下に限定する。 */
@media (min-width: 700px) {
  #game-screen {
    max-width: 1040px;
    padding: 20px 28px 96px;
    gap: 16px;
  }
  #hand-row .tile {
    width: 58px;
  }
  .tile-suit {
    font-size: 1.5rem;
  }
  .tile-num {
    font-size: 1.3rem;
  }
  .tile-honor-label {
    font-size: 1.3rem;
  }
  /* 2026-08-16「プレイヤー情報を2x2にして情報表示箇所をもっと広く」。auto-fitのままだと
     幅の広い画面では4人ぶんが1行に並んでしまい、1枚あたりの幅が伸びない
     (結果として名前や捨て牌の表示欄が窮屈になる)。常に2列(=4人なら2行)に固定し、
     1枚ぶんの幅そのものを広く取る。 */
  .seat-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .seat-card {
    padding: 12px 14px;
  }
  .seat-name {
    font-size: 1rem;
  }
  .seat-chips {
    font-size: 1.3rem;
  }
  .seat-face {
    width: 24px;
  }
  .round-label {
    font-size: 1.3rem;
  }
  .table-head {
    font-size: 1.05rem;
  }
  .riichi-btn {
    font-size: 0.95rem;
    padding: 8px 20px;
  }
  .help-btn {
    font-size: 0.9rem;
    padding: 8px 18px;
  }
  .next-btn {
    font-size: 1.15rem;
    padding: 12px 28px;
  }
  .result-overlay-card {
    max-width: 520px;
  }
  .result-box {
    font-size: 1rem;
  }
}