/* おーやまダービー 予想ページ（視聴者がスマホから賭ける画面）。
   前提：片手・寝ながら・暗い部屋。だからタップ範囲を大きく、色は暗め、文字は太めにしてある。 */
:root{
  color-scheme: dark;   /* 自前の暗色配色があることをブラウザに伝え、強制ダークモードの二重処理を防ぐ */
  --bg:#0b1622; --panel:#142433; --panel2:#1b3145; --line:#26405a;
  --gold:#e0b23c; --green:#25a35c; --red:#e0574a; --text:#eaf2f8; --muted:#8fa6ba;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.6 "Hiragino Kaku Gothic ProN","Yu Gothic UI",system-ui,sans-serif;
  padding-bottom:env(safe-area-inset-bottom);
}
a{color:var(--gold)}
code{background:#0d2033; border:1px solid var(--line); padding:2px 7px; border-radius:5px}

.screen{max-width:520px; margin:0 auto; padding:12px}

/* ===== PC（横幅がある画面）向け =====
   スマホは上から1列。PCは「左＝どの馬にするか／右＝いくら賭けるか」の2カラムにして、
   スクロールせずに馬選び→枚数→賭けるまで見えるようにする。
   ※ display を指定するので :not([hidden]) を必ず付ける。付けないと画面の出し分け
     （hidden属性）が効かなくなり、両方の画面が同時に出てしまう。 */
@media (min-width:900px){
  /* レース画面はできるだけ大きく見せたいので、横幅を広めに取る。 */
  .screen{max-width:1600px; padding:20px}

  /* 中くらいのPC幅は、左＝操作、右＝レース画面の2列。
     以前はレース画面を左、操作を右へ全部縦積みしていたうえ、1100pxから無理に3列へ
     切り替えていた。280pxしかない馬カードの横に「近5走」まで一列で詰め込まれ、カードが
     レース画面へ食い込んで見えていた。操作を左へまとめ、3列化は十分な幅まで待つ。 */
  #screen-bet:not([hidden]){
    display:grid; grid-template-columns:420px minmax(0,1fr); gap:20px; align-items:start;
  }
  #screen-bet > .bar{grid-column:1 / -1; grid-row:1}
  #screen-bet > .widget-frame{grid-column:2; grid-row:2 / 7; margin-bottom:0}
  .col-left{grid-column:1; grid-row:2; min-width:0}
  .col-right{grid-column:1; grid-row:3; min-width:0}
  #screen-bet > .result{grid-column:1; grid-row:4}
  #screen-bet > .bonus{grid-column:1; grid-row:5}
  #screen-bet > .foot{grid-column:1 / -1; grid-row:7}

  /* レース画面は「横幅なりに目一杯」だと画面の高さを軽く超える（1920×889で840px）。
     すると賭ける操作や購入ボタンが折り返しの下に隠れ、PCだと縦に長いだけのページになる。
     画面の高さから上下の枠（ヘッダ・フッタ・余白）を引いた分で頭打ちにして、
     **1画面に収まる範囲でいちばん大きく**する。4/3は埋め込んでいるウィジェットの比率。 */
  #screen-bet > .widget-frame{
    max-width:calc((100vh - 210px) * var(--widget-ratio, 1.076)); margin-inline:auto;
  }

  /* 右の列は幅が狭いので、馬のカードを少し詰める。 */
  .col-left .horse{padding:10px; gap:10px}
  .col-left .horse .no{flex:0 0 38px; height:38px; font-size:19px}
  .col-left .horse .od{font-size:20px}

  /* スマホでは画面下に貼り付いていたが、PCでは右カラムの中に収まるので固定しない。 */
  .confirm{position:static; background:none; padding:0}
  .mybets{margin-top:14px}

  #screen-link:not([hidden]){
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:start;
  }
  .pane{padding:24px 20px}
  .peek{padding-top:14px}
  /* 連携前の画面も、馬6頭を縦積みにすると1画面に入らない。2列にして高さを半分にする。 */
  .peek .horses{grid-template-columns:1fr 1fr}
  .peek .widget-frame{max-width:calc((100vh - 330px) * var(--widget-ratio, 1.076)); margin-inline:auto}
}

/* ===== 横幅に余裕があるPC（1280px〜）＝3カラム =====
   2カラムだと「賭け方→馬→枚数→賭ける→いまの賭け→買う」が右の1列に全部縦積みになり、
   合計1100px超＝どうやっても画面の高さに収まらない。
   左（馬を選ぶ）と右（いくら賭ける）に割って、レース画面を真ん中に置くと1画面で完結する。 */
@media (min-width:1280px){
  #screen-bet:not([hidden]){grid-template-columns:280px minmax(0,1fr) 272px; gap:14px}
  #screen-bet > .widget-frame{grid-column:2; grid-row:2 / 5}
  /* 2026-08-08「賭けるところを右上に」対応(上の2カラム側と同じ理由)。 */
  .col-right{grid-column:3; grid-row:2}
  #screen-bet > .result{grid-column:3; grid-row:3}
  #screen-bet > .bonus{grid-column:3; grid-row:4}
  .col-left{grid-column:1; grid-row:2 / 5}
  #screen-bet > .foot{grid-row:5}
}

/* 左右の列はこれ以上広くても中身が増えないので、横幅が増えた分は全部レース画面に回す。 */
@media (min-width:1560px){
  #screen-bet:not([hidden]){grid-template-columns:340px minmax(0,1fr) 320px; gap:20px}
}

/* --- ログイン／連携 --- */
.pane{text-align:center; padding:34px 20px 10px}
.pane .mark{font-size:56px; line-height:1}
.pane h1{font-size:24px; margin:10px 0 14px}
.lead{color:var(--muted); margin:0 0 26px}
.lead2{margin:0 0 10px; font-weight:800}
.fine{color:var(--muted); font-size:13px; margin:14px 0 0}

/* チャットに打ってもらう番号。読み間違えないよう大きく等幅で出す。 */
.codebox{
  background:#0d2033; border:2px solid var(--gold); border-radius:14px;
  padding:16px 12px; font-size:26px; font-weight:800; color:var(--gold);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; margin-bottom:10px;
}
.codebox b{letter-spacing:.18em}
.btn.ghost{background:transparent; border:2px solid var(--line); color:var(--muted); font-size:15px; padding:12px}
.warn{
  margin:18px 0 0; background:#3a2016; border:1px solid var(--red); color:#ffb3aa;
  border-radius:12px; padding:12px 14px; font-size:13px; text-align:left; line-height:1.7;
}

/* 連携前でも「何のページか」が分かるように、レースだけ覗けるようにする。 */
.peek{padding:0 4px 30px}
.peek h2{font-size:15px; color:var(--muted); margin:0 0 8px}
.peek-head{
  display:flex; justify-content:space-between; color:var(--muted);
  font-size:13px; margin-bottom:8px; font-weight:700;
}
.peek .horse{cursor:default}

.linkish{
  background:none; border:0; color:var(--muted); font-size:13px;
  text-decoration:underline; cursor:pointer; padding:8px;
}

.btn{
  display:block; width:100%; border:0; border-radius:14px; font-weight:800;
  font-size:17px; padding:16px; color:#fff; background:var(--panel2); cursor:pointer;
  text-decoration:none; text-align:center;
}
.btn.primary{background:var(--green)}
.btn.big{font-size:18px; padding:18px}
.btn:disabled{background:#20344a; color:#61798f}
.err{color:#ff9c92; font-weight:700; margin:12px 0 0}

/* --- 予想画面 --- */
.bar{
  position:sticky; top:0; z-index:5; display:flex; justify-content:space-between;
  align-items:center; gap:10px; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:12px 14px; margin-bottom:12px;
}
.who b{display:block; font-size:15px}
.who span{color:var(--gold); font-weight:800; font-size:20px}
.who span::after{content:" 枚"; font-size:12px; color:var(--muted); font-weight:400}
.race{text-align:right}
.race small{display:block; color:var(--muted); font-size:12px}
.phase{font-weight:800}

/* 埋め込んだ配信画面の音を出す／消す。押すまでは必ず消音。 */
.sound-toggle{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  background:var(--panel2); border:2px solid var(--line); color:var(--muted);
  border-radius:999px; padding:8px 14px; font-size:13px; font-weight:800;
  cursor:pointer; line-height:1; transition:border-color .15s, background .15s, color .15s;
}
.sound-toggle.on{border-color:var(--green); background:rgba(37,163,92,.18); color:var(--text)}
.sound-toggle .ico{font-size:15px}
/* 幅の狭いスマホでは、残高とレース情報を潰さないようアイコンだけにする。 */
@media (max-width:430px){
  .sound-toggle .txt{display:none}
  .sound-toggle{padding:8px 11px}
}

.notice{
  background:#3a2a12; border:1px solid var(--gold); color:#ffd98a;
  border-radius:12px; padding:12px 14px; margin-bottom:12px; font-weight:700; font-size:14px;
}

/* 券種は3列×2段。6種類あるので、全部同じ幅にすると過不足なく2段で埋まる。
   以前は6分割グリッドに span 2 / span 3 を混ぜていたが、これは券種が5つだった頃の割付で、
   ワイドを足して6つになった時点で「2段目に2つ＋3段目に1つ」の歯抜けになっていた。
   券種を増減したらここの列数を見直すこと（列数＝1段に並べる数）。 */
/* grid-auto-rows:1fr … 説明が2行になる段（3連単など）に高さを合わせて、全6個を同じ
   大きさに揃える。揃えないと1段目だけ背が低くて不揃いに見える。 */
/* 買い方は4列×2行（2026-08-20）。8つ＝券種6＋ボックス＋フォーメーションを1つのまとまりに
   並べる。条件で hidden になるボタンがあるぶん、行が埋まらないこともある（それでOK）。 */
.kinds{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:1fr; gap:6px;
       margin-bottom:12px}
.kind{
  border:2px solid var(--line); background:var(--panel); color:var(--muted);
  border-radius:12px; padding:9px 3px; font-weight:800; font-size:14px; cursor:pointer;
  line-height:1.2;
}
/* 3列にすると「1・2・3着を着順どおりに」のような長い説明は2行になる。
   グリッドなので同じ段のボタンは自動で同じ高さに揃う。行間だけ詰めておく。 */
.kind small,
.kinds .box-toggle small{display:block; font-weight:400; font-size:10px; margin-top:2px;
       line-height:1.3; color:var(--muted)}
.kind.on{border-color:var(--gold); background:var(--panel2); color:var(--text)}

/* --- 配信画面(OBSウィジェット)をそのまま埋め込む --- */
/* ウィジェットは1280×960の固定サイズで作られている（OBSに乗せる前提）。
   レスポンシブに直すと配信側の見え方まで変わるので、中身はそのままに枠へ縮小して収める。 */
/* 縦横比と中の実寸は、読み込み後にJSが実物から測って上書きする（scaleWidgetFrames参照）。
   ここの値は測れるまでの見た目のブレを抑えるための初期値。 */
.widget-frame{
  position:relative; width:100%; min-width:0; max-width:100%; aspect-ratio:1280 / 1190; overflow:hidden;
  border-radius:14px; background:#0d1b2a; margin-bottom:12px;
}
/* スマホはレース画面を少しでも大きくしたいので、左右の余白を潰して画面幅いっぱいに出す。 */
@media (max-width:899px){
  .widget-frame{
    margin-left:-12px; margin-right:-12px; width:calc(100% + 24px); border-radius:0;
  }
}
.widget-frame iframe{
  position:absolute; top:0; left:0; width:1280px; height:1190px; border:0;
  transform-origin:0 0; display:block;
}

.result{
  border-radius:14px; padding:12px 14px; margin-bottom:12px; text-align:center;
  font-size:16px; border:1px solid var(--line); background:var(--panel);
}
.result b{font-size:18px}
.result.win{border-color:var(--gold); background:rgba(224,178,60,.12); color:var(--gold)}
.result.lose{color:var(--muted)}

.horses{display:grid; gap:8px; margin-bottom:14px}
.horse{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:linear-gradient(180deg,var(--panel),#122234);
  border:2px solid var(--line); border-radius:14px;
  padding:12px; color:var(--text); cursor:pointer;
  transition:border-color .15s, transform .1s, box-shadow .15s;
}
.horse:not(:disabled):active{transform:scale(.985)}
.horse.on{
  border-color:var(--gold); background:linear-gradient(180deg,var(--panel2),#16293c);
  box-shadow:0 0 0 3px rgba(224,178,60,.16);
}
/* ゼッケンの色は3Dのリング・番号板と同じ（色はJS側でインライン指定）。 */
.horse .no{
  flex:0 0 42px; height:42px; border-radius:11px; display:grid; place-items:center;
  font-size:21px; font-weight:800; box-shadow:inset 0 -2px 0 rgba(0,0,0,.18);
}
.horse .info{flex:1; min-width:72px}
.horse .nm{
  display:flex; align-items:center; gap:6px; font-weight:800; font-size:15px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.horse .nm .fav{
  flex:0 0 auto; font-style:normal; font-size:10px; font-weight:800; letter-spacing:.05em;
  color:#0b1622; background:var(--gold); border-radius:4px; padding:2px 5px;
}
.horse .sub{display:flex; align-items:center; gap:6px; color:var(--muted); font-size:12px}
.horse .sub .cond{
  font-style:normal; font-size:11px; font-weight:700; border-radius:4px; padding:1px 6px;
}
.cond-best{background:rgba(37,163,92,.22); color:#5fd894}
.cond-good{background:rgba(37,163,92,.13); color:#8fd0ac}
.cond-mid {background:rgba(143,166,186,.14); color:var(--muted)}
.cond-bad {background:rgba(224,87,74,.15); color:#e8968c}

.horse .od{
  text-align:right; font-weight:800; color:var(--gold);
  font-size:22px; line-height:1.1; white-space:nowrap; font-variant-numeric:tabular-nums;
}
.horse .od small{display:block; color:var(--muted); font-weight:600; font-size:10px}
.horse .pick{
  flex:0 0 22px; height:22px; border-radius:50%; border:2px solid var(--line);
  display:grid; place-items:center; font-size:12px; font-weight:800; color:#0b1622;
}
.horse.on .pick{background:var(--gold); border-color:var(--gold)}

/* PCの左列では「番号・名前・近5走・倍率・選択印」を一列に押し込まない。
   近5走だけ2段目へ送ることで、馬名や倍率がレース画面側へはみ出さず、情報も省略しない。 */
@media (min-width:900px){
  .col-left .horse{
    display:grid; grid-template-columns:38px minmax(0,1fr) auto auto;
    grid-template-rows:auto auto; column-gap:8px; row-gap:3px;
  }
  .col-left .horse .no{grid-column:1; grid-row:1 / 3; align-self:center}
  .col-left .horse .info{grid-column:2; grid-row:1; min-width:0}
  .col-left .horse .recent{grid-column:2 / -1; grid-row:2; justify-self:start; min-width:0}
  .col-left .horse .recent b{display:none}
  .col-left .horse .od{grid-column:3; grid-row:1; align-self:center}
  .col-left .horse .pick,
  .col-left .horse .slots{grid-column:4; grid-row:1; align-self:center}
}

.amounts{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px}
.amt{
  border:2px solid var(--line); background:var(--panel); color:var(--text);
  border-radius:12px; padding:12px 2px; font-weight:800; font-size:15px; cursor:pointer;
}
.amt.on{border-color:var(--gold); background:var(--panel2)}

/* 決まった額以外を賭けたいとき用の手入力欄。 */
.amount-custom{
  display:flex; align-items:center; gap:8px; margin:-6px 0 14px;
  border:2px solid var(--line); background:var(--panel); border-radius:12px; padding:4px 12px;
}
.amount-custom.on{border-color:var(--gold); background:var(--panel2)}
.amount-custom input{
  flex:1; min-width:0; background:none; border:0; color:var(--text);
  font-size:17px; font-weight:800; padding:10px 0; font-variant-numeric:tabular-nums;
}
.amount-custom input::placeholder{font-size:14px; font-weight:400; color:var(--muted)}
.amount-custom input:focus{outline:none}
/* 数値入力の上下ボタンは指では押しにくく誤操作のもとなので消す。 */
.amount-custom input::-webkit-outer-spin-button,
.amount-custom input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.amount-custom input[type=number]{-moz-appearance:textfield}
.amount-custom span{color:var(--muted); font-size:13px; font-weight:700}

.confirm{
  position:sticky; bottom:0; background:linear-gradient(180deg,rgba(11,22,34,0),var(--bg) 24%);
  padding:10px 0 12px;
}
.summary{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; margin-bottom:8px; font-size:14px; color:var(--muted); text-align:center;
  line-height:1.7;
}
.summary b{color:var(--text)}
/* まとめ欄の主役は倍率。買い目を比べる時に見るのはこの数字なので、いちばん大きく出す。 */
.summary .pay{
  color:var(--gold); font-weight:800; font-size:26px; font-variant-numeric:tabular-nums;
  line-height:1.25;
}

.kind{transition:border-color .15s, background .15s, color .15s}
.amt{transition:border-color .15s, background .15s}
.amt:active{transform:scale(.97)}
.btn.primary:not(:disabled){box-shadow:0 4px 14px rgba(37,163,92,.28)}

.mybets{margin-top:18px}
.mybets h2{font-size:15px; color:var(--muted); margin:0 0 8px}
.mybets-list{color:var(--muted); font-size:14px}
.mybet{
  display:flex; justify-content:space-between; gap:10px; background:var(--panel);
  border:1px solid var(--line); border-radius:10px; padding:9px 12px; margin-bottom:6px; color:var(--text);
}
.mybet .r{color:var(--gold); font-weight:800}
.bet-cancel{
  width:100%; margin-top:10px; padding:11px 14px;
  background:transparent; border:1px solid var(--red); color:#ffb3aa; font-size:14px;
}
.bet-cancel:not(:disabled):active{transform:scale(.99)}
.bet-cancel-note{margin:6px 2px 0; color:var(--muted); font-size:12px; text-align:center}

/* ヤマコインの購入ボタン(.buy / .buy-btn)の見た目は、有償購入の廃止(2026-07-29)に伴い削除。 */

.foot{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  text-align:center; padding:22px 0 32px; font-size:13px;
}

.toast{
  position:fixed; left:50%; bottom:96px; transform:translateX(-50%);
  background:var(--green); color:#fff; font-weight:800; padding:12px 20px;
  border-radius:999px; z-index:20; max-width:88vw; text-align:center;
}
.toast.bad{background:var(--red)}

/* 「この順で」「順不同」の但し書き。買い目の意味を取り違えると被害が大きいので必ず添える。 */
.summary .note{
  font-size:11px; font-weight:700; color:var(--muted); background:#0d2033;
  border:1px solid var(--line); border-radius:4px; padding:2px 6px; margin-left:6px;
}

/* 倍率の隣に添える払い戻し額。賭けた枚数を掛けただけの数字なので、控えめに。 */
.summary .sub{
  display:block; font-style:normal; font-size:12px; font-weight:700; color:var(--muted);
  margin-top:2px; font-variant-numeric:tabular-nums;
}

/* ボックス買いの切り替え。賭け方の下に置き、押している間は金色で「効いている」ことを示す。 */
/* ★.box-toggle の display:block は UA の [hidden]{display:none} に勝ってしまうので、
   hidden 属性だけでは消えない（単勝・複勝を選んでもボックスが出たままだった＝2026-08-20に発覚。
   .kinds へ入れたことで空いた升目を占めるようになり見つかった）。明示的に打ち消す。
   同じ罠が control/yamaan-debug.html と widget/pachinko/style.css にもある。 */
.box-toggle[hidden]{display:none}

/* ただし .kinds の中の2つ（ボックス・フォーメーション）は、隠すときも**升を残す**。
   display:none で消すと升が減り、行の高さが「その時いる中身」で決まり直すため、
   3連単を選んだ瞬間にグリッドが伸び縮みする。visibility なら場所を取ったまま消えるので、
   どの券種を選んでも 4列×2行・同じ高さが構造的に保証される（クリックもタブ移動も無効）。 */
.kinds .box-toggle[hidden]{display:block; visibility:hidden}
.kinds.duel{grid-template-columns:1fr}
.kinds.duel .box-toggle[hidden], .kind[hidden]{display:none}

/* ボックス・フォーメーションを .kinds の中に入れたので、券種ボタンと同じ見た目・同じ大きさに
   揃える（単独で置いていた頃の 幅100%・負のマージン は打ち消す）。 */
.kinds .box-toggle{width:auto; margin:0; padding:9px 3px; font-size:14px; line-height:1.2}
/* 「フォーメーション」は8文字あり、升の中で必ず2行になる（PCの左カラム280pxだと1升66px）。
   b はインラインのままだと親ボタンの行送り(14px×1.2)で行箱が組まれ、2行ぶんで升が数px背高に
   なる＝3連単を選んだ瞬間にグリッドが下へ伸びる。block にして自前の行送りを持たせて詰める。 */
.kinds .box-toggle b{display:block; font-size:12px; line-height:1.1}

.box-toggle{
  display:block; width:100%; margin:-4px 0 12px;
  border:2px solid var(--line); background:var(--panel); color:var(--muted);
  border-radius:12px; padding:9px 10px; cursor:pointer; text-align:center;
  transition:border-color .15s, background .15s, color .15s;
}
.box-toggle b{font-size:14px; font-weight:800}
.box-toggle small{display:block; font-weight:400; font-size:10px; margin-top:2px}
.box-toggle.on{border-color:var(--gold); background:var(--panel2); color:var(--text)}
/* ボックス中は「何点買いか」をまとめ欄に出す。金額の誤解が一番怖いので目立たせる。 */
.summary .box-count{
  display:inline-block; font-size:12px; font-weight:800; color:#0b1622;
  background:var(--gold); border-radius:5px; padding:2px 7px; margin-left:6px;
}

/* フォーメーション：今どの枠(1着/2着/3着)を編集しているかを選ぶタブ。 */
.formation-tabs{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:-4px 0 12px}
.formation-tabs[hidden]{display:none}
.formation-tab{
  border:2px solid var(--line); background:var(--panel); color:var(--muted);
  border-radius:10px; padding:8px 4px; font-size:12px; font-weight:800; cursor:pointer;
  transition:border-color .15s, background .15s, color .15s;
}
.formation-tab.on{border-color:var(--gold); background:var(--panel2); color:var(--gold)}
/* 馬カードに「どの枠の候補になっているか」を小さなチップで並べて出す（複数枠に同時に
   入っていることがあるので、.pickの1文字バッジ(1個しか出せない)は使えない）。 */
.horse .slots{flex:0 0 auto; display:flex; gap:3px}
.horse .slots .slot-chip{
  display:inline-block; min-width:18px; height:18px; padding:0 4px; border-radius:9px;
  border:2px solid var(--line); background:var(--panel); color:var(--muted);
  font-size:10px; font-weight:800; line-height:14px; text-align:center;
}
.horse .slots .slot-chip.on{background:var(--gold); border-color:var(--gold); color:#0b1622}

/* 応援リンク（Doneru）。賭けるボタンと間違えないよう、色と位置をはっきり分ける。
   ここを「コインの売り場」にしないこと。理由は bet/index.html のコメント参照。 */
.support{margin-top:18px; padding-top:16px; border-top:1px solid var(--line)}
.support-btn{
  background:linear-gradient(180deg,#2f5d86,#24486a); border:2px solid #3d739f;
  font-size:16px; padding:14px;
}
.support-btn:hover{filter:brightness(1.08)}
.support .fine{text-align:center; margin-top:8px}

/* 応援の合言葉。押した後だけ出る。読み間違えないよう連携番号と同じ見た目にする。 */
.support-code{margin-top:14px}
.support-code .codebox{font-size:30px; margin-bottom:8px}

/* --- 配信のチャット（YouTube公式の埋め込み。自前のチャットは作らない） ---
   PCは画面の隅から差し込むサイドパネル、スマホは下から迫り上がるドロワーにする。
   賭ける操作のレイアウト（既に1画面ぴったりに収めてある）を一切押し広げないよう、
   grid内には置かず fixed オーバーレイにしてある。 */
.bar-actions{display:flex; gap:8px; flex:0 0 auto}

.chat-toggle{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  background:var(--panel2); border:2px solid var(--line); color:var(--muted);
  border-radius:999px; padding:8px 14px; font-size:13px; font-weight:800;
  cursor:pointer; line-height:1; transition:border-color .15s, background .15s, color .15s;
}
.chat-toggle.on{border-color:var(--gold); background:rgba(224,178,60,.18); color:var(--text)}
.chat-toggle .ico{font-size:15px}
@media (max-width:430px){
  .chat-toggle .txt{display:none}
  .chat-toggle{padding:8px 11px}
}

/* スマホは画面全体を覆う帯で、タップで閉じられるようにする。 */
.chat-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:39}

.chat-drawer{
  position:fixed; z-index:40; left:0; right:0; bottom:0;
  height:min(72vh,640px);
  background:var(--panel); border-top:2px solid var(--gold);
  border-radius:16px 16px 0 0; box-shadow:0 -8px 30px rgba(0,0,0,.4);
  display:flex; flex-direction:column;
  transform:translateY(100%); transition:transform .25s ease;
}
.chat-drawer.open{transform:translateY(0)}

.chat-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid var(--line); flex:0 0 auto;
}
.chat-drawer-head b{font-size:15px}
.chat-close{
  background:none; border:0; color:var(--muted); font-size:22px; line-height:1;
  cursor:pointer; padding:2px 8px;
}
.chat-body{flex:1; min-height:0; position:relative}
.chat-body iframe{width:100%; height:100%; border:0; display:block}
.chat-empty{margin:0; padding:22px 18px; color:var(--muted); font-size:14px; text-align:center; line-height:1.7}

/* PC：画面の隅を覆うだけなので、他の操作を暗くしてブロックする必要が無い＝背景幕は出さない。 */
@media (min-width:900px){
  .chat-backdrop{display:none}
  .chat-drawer{
    left:auto; top:0; bottom:0; right:0; height:auto;
    width:380px; border-radius:0; border-top:0; border-left:2px solid var(--gold);
    transform:translateX(100%);
  }
  .chat-drawer.open{transform:translateX(0)}
}

/* ===== 賭け麻雀 ===== */

/* 2026-08-08「部屋に入るところは左下、倍率が表示されているところの下側に」対応で、
   ページ上部の全幅バナーから左カラム(馬＝倍率の一覧)の下へ移した。列の幅いっぱいに
   収まるよう、左右のmarginは持たせない(以前は全幅前提で 10px 16px 0 だった)。 */
.mahjong-card{
  margin:12px 0 0; background:var(--panel); border:2px solid var(--line);
  border-radius:12px; padding:10px 14px;
}
.mahjong-card-head{display:flex; align-items:center; gap:8px; font-size:14px}
.mahjong-ico{font-size:18px}
.mahjong-status{margin-left:auto; color:var(--muted); font-size:13px}
.mahjong-card-body{margin-top:8px; display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.mahjong-card-body .btn{padding:9px 14px; font-size:14px}
.mahjong-card-body .err{color:var(--red); font-size:13px; margin:0}
.mahjong-waiting-list{color:var(--muted); font-size:13px}

/* 2026-08-07、ユーザーから「スマホの横画面だと思って作ってほしい。手番の自分の駒と
   相手の捨て駒を見る画面が離れているのはおかしい」と指摘され、卓画面全体を1枚の
   16:9ビューポート(.mj-viewport)に統合。スコア/戻るは卓の隅に重ねるHUDにし、
   手牌トレイ・鳴き選択肢もこの同じ枠の下段(.mj-dock)に収めた＝ページスクロール無しの
   「1画面のゲーム画面」。内部寸法はすべてコンテナクエリ単位(cqh)で.mj-viewportの実際の
   描画サイズに追従して伸縮するため、@mediaでの個別調整が不要になった。 */
#screen-mahjong{
  max-width:none; padding:0; margin:0; min-height:calc(100vh - 40px); background:#000;
}
/* display:flex を #screen-mahjong 自体(id指定)に書くと、UAスタイルシートの
   [hidden]{display:none} より詳細度・優先度で勝ってしまい、hidden属性が付いていても
   常にflex表示されてしまう。以前.mj-overlayで踏んだのと同じ実害バグが、本番で
   予想画面をスクロールすると麻雀の卓が競馬画面の下に見えてしまう形で再発していた
   (2026-08-08ユーザーが本番oyamaderby.comで実際に発見)。:not([hidden])の時だけ
   flexにすることで、hidden属性が確実に効くようにする。 */
#screen-mahjong:not([hidden]){display:flex; align-items:center; justify-content:center}
.mj-viewport{
  container-type:size; container-name:mjv;
  /* width:100%とmax-heightを併用すると、widthが先に確定してaspect-ratioで高さが
     出た後にmax-heightだけがクランプされ、縦横比が崩れて画面から溢れる実害バグに
     なった(2026-08-07実機確認、卓が画面いっぱいに巨大化した)。min()で「画面の高さから
     逆算した16:9の幅」と「使える幅いっぱい」の小さい方をwidthとして先に確定させ、
     aspect-ratioでそこから高さを導く(結果として高さも必ず収まる)。 */
  position:relative; aspect-ratio:16/9;
  width:min(100%, calc((100vh - 40px) * 16 / 9));
  background:#050b14; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 8px 30px rgba(0,0,0,.6);
}

/* ===== 隅に重ねるHUD(戻る・自分の得点)。参考画像同様、専用の帯を持たせず卓に直接重ねる ===== */
.mj-hud-left{
  position:absolute; top:1.6cqh; left:1.6cqh; z-index:5;
  display:flex; align-items:center; gap:1cqh;
}
.mj-hud-back, .mj-hud-leave, .mj-hud-score{
  border-radius:1.6cqh; background:rgba(5,11,20,.78); border:1px solid rgba(255,255,255,.22);
  padding:0.9cqh 1.8cqh; font-size:2.4cqh; font-weight:800; color:#eaf2f8;
}
.mj-hud-back, .mj-hud-leave{border:0; cursor:pointer; font-family:inherit; white-space:nowrap}
/* 途中退出は取り消せない操作なので、戻るボタンと見た目で区別する(2026-08-08対応)。 */
.mj-hud-leave{background:rgba(59,15,15,.85); border:1px solid rgba(224,87,74,.5); color:#ffb3aa}
.mj-hud-score{
  position:absolute; top:1.6cqh; right:1.6cqh; z-index:5;
  display:flex; align-items:baseline; gap:0.8cqh; white-space:nowrap;
}
.mj-hud-score span{color:var(--gold)}
.mj-hud-score span::after{content:"点"; font-size:.7em; color:var(--muted); font-weight:400; margin-left:1px}

/* 下家(右)・上家(左)の名前+北抜き枚数(2026-08-08「黒い帯の名前と北抜きの枚数はいらない
   から消して、代わりに下家と上家のどこかに同じようなものを作って。今だと捨て牌が
   見えなくて」対応)。以前は.mj-zone-name(卓の回転システムの中、河→鳴き→伏せ手牌→
   名前の一番外側)に名前を置いていたため、河が伸びるとこの並び自体が窮屈になり
   名前が捨て牌と重なって見づらくなっていた。ここでは卓の回転から完全に切り離し、
   ビューポート左右の端・縦方向中央に固定することで、河が何段になっても絶対に
   重ならないようにする。 */
.mj-opp-badge{
  position:absolute; top:50%; z-index:6; transform:translateY(-50%);
  display:flex; align-items:center; gap:0.6cqh; white-space:nowrap;
  background:rgba(4,10,18,.72); border:1px solid rgba(255,255,255,.18); border-radius:1cqh;
  padding:0.3cqh 1cqh; font-size:1.7cqh; font-weight:700; color:#dfeeff;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.mj-opp-badge:empty{display:none}
.mj-opp-badge.left{left:1.6cqh}
.mj-opp-badge.right{right:1.6cqh}

/* ===== 卓（緑フェルト、2026-08-08ユーザー提供の参考画像に寄せたデザイン。以前は紺色
   フェルトだったが、参考画像は緑フェルト＋木目調の縁だったため差し替え。龍の透かし模様は
   「再現しなくていい」とのユーザー判断で省略し、フェルトの質感はCSSのグラデーションのみで
   近似する。） ===== */
.mj-table{
  position:relative; flex:1 1 auto; min-height:0; width:100%; overflow:hidden;
  background:radial-gradient(circle at center, #2d6b45 0%, #1c4a30 55%, #0d2818 100%);
  box-shadow:inset 0 0 5cqh rgba(0,0,0,.55);
}

/* 卓の中央に置く正方形の領域。この中に4つの.mj-zoneを重ねて四方に回転配置する。
   正方形にしてあるのが肝で、16:9の長方形のまま90度回すと横にあふれてしまう。
   卓の高さを基準(cqh)にすることで、画面幅が変わっても4人ぶんの河が常に収まる。 */
.mj-ring{
  /* 高さ100%＋aspect-ratioで「卓の高さを一辺とする正方形」にする。cqh(ビューポート基準)で
     指定すると卓より大きくなり、上下がはみ出して対面の河・名札が切れる実害があった
     (2026-08-08実測: ring 653px に対し卓は 529px しかなかった)。卓自身の高さから
     導けば、卓の大きさが変わっても必ず内側に収まる。 */
  position:absolute; left:50%; top:50%; height:100%; aspect-ratio:1/1;
  transform:translate(-50%,-50%);
}

/* 1人ぶんの領域。ringいっぱいに広げたうえで回転させ、中身は「中央の少し外側」から
   外へ向かって縦に積む。bottom=自分、右回りにright(下家)/top(対面)/left(上家)。
   CSSのrotateは時計回りなので、下(=自分)を基準にrotate(90deg)で左、-90degで右になる。 */
.mj-zone{position:absolute; inset:0; transform-origin:50% 50%}
.mj-zone.bottom{transform:rotate(0deg)}
.mj-zone.right{transform:rotate(-90deg)}
.mj-zone.top{transform:rotate(180deg)}
.mj-zone.left{transform:rotate(90deg)}
.mj-zone:empty{display:none}

/* 中央(コンソール)のすぐ外側から始めて、外向きに並べる。margin-topがコンソール半径ぶんの
   オフセット。中身はDOM順にそのまま外へ流れる＝河 → 鳴き → 伏せ手牌 → 名前。 */
/* 河と鳴きだけを積む列。中心からの開始距離(margin-top)は「中央コンソールの外側」に
   なるようにする。2026-08-08「下家と上家の最初の捨て牌が中央のパネルに重なっている」対応:
   コンソールは height:26cqh・比754/640 なので【幅は30.6cqh】＝半分で15.3cqh ある。
   上下方向の半分(13cqh)しか見ておらず一律13.5cqhにしていたため、横方向に伸びる
   上家/下家の河だけがコンソールに食い込んでいた。左右のゾーンは半幅を超える16.5cqhから
   始める。 */
.mj-zone-inner{
  position:absolute; left:50%; top:50%; transform:translateX(-50%); margin-top:13.5cqh;
  display:flex; flex-direction:column; align-items:center; gap:0.8cqh;
}
.mj-zone.left .mj-zone-inner, .mj-zone.right .mj-zone-inner{margin-top:16.5cqh}

/* 河(捨て牌)。実物と同じく6枚ずつで折り返す。ゾーンごと回転しているので、
   各自の河が自分の座席の向きを向く＝参考画像と同じ見え方になる。 */
.mj-zone-discards{
  display:grid; grid-template-columns:repeat(6, auto); gap:0.25cqh; justify-content:center;
}
/* 河の牌を少し小さくしてある(5.9→5.2cqh)。流局まで打ち切ると1人18枚＝3段になるが、
   上下方向は中心から卓の端まで約37cqhしか無く、5.9cqhのままだと3段目と鳴きが卓から
   はみ出すため(2026-08-08、手牌を固定位置に変える際に実測して判明)。 */
/* 2026-08-08「捨て牌と相手の字牌を1.5倍くらいに」対応で 3.7×5.2 → 5.55×7.8cqh。
   流局まで打ち切ると1人18枚＝3段になり、3段ぶん(7.8×3+段間)が中央コンソールの外から
   卓の端までに収まる必要がある。自分(手前)の鳴きは下段ドックにも出していて重複なので、
   卓上側は消してその高さを3段目に回している(下の .mj-zone.bottom .mj-zone-melds)。 */
.mj-zone-discards .mj-mini-tile{width:5.55cqh; height:7.8cqh}
/* 自分の鳴きは下段ドック(#mj-melds)に出るので、卓上のこちらは重複＝消す。
   1.5倍にした河3段ぶんの高さを確保するためにも必要。 */
.mj-zone.bottom .mj-zone-melds{display:none}
.mj-zone-melds{display:flex; gap:0.8cqh; flex-wrap:wrap; justify-content:center; max-width:30cqh}
.mj-zone-melds:empty{display:none}
/* 1組の鳴き(ポン/チー/カン)。組の中は隙間なく、組と組の間だけ空ける。 */
.mj-meld{display:flex; gap:1px}

/* ===== 他家(下家・上家)の伏せ手牌 =====
   2026-08-08「一つの直方体にならない。斜めに重ねてもいい。いま字牌に対して垂直に
   並べているからそうならないと思う」というユーザー指摘への対応。指摘の通りだった。

   この伏せ牌の絵は立体(直方体)を斜めから見た六角形で、画像を解析すると輪郭は
   中心対称な六角形＝3組の平行な稜線でできている(実測した稜線ベクトル:
   水平(104,0) / 右下(55,144) / 左下(-76,155))。
   この手の図形は「自分の稜線ベクトルの方向」に並べた時だけ隣と辺がぴったり噛み合い、
   1本の長い直方体に見える。逆に画面の縦横に沿って(=稜線と違う方向に)並べると、
   どれだけ寄せても斜めの角に切り欠きが残り、絶対に1本の柱にならない。

   そこで牌は回転する.mj-zoneの外(卓の直下)に置き、画面座標のまま稜線ベクトル
   (55,144)/(-55,144) の方向へ1枚ずつずらして絶対配置する。ずらし量は牌の表示高さH
   に対する比で持つので、Hを変えても噛み合いは崩れない。
   下家(右)は右下がり、上家(左)は左下がり(画像が左右反転なので稜線も反転する)。 */
.mj-hand-strip{
  /* 大きさを持たない「基準点」。牌はこの点を中心に±方向へ並ぶので、枚数が
     13→10→7と減っても列の中心位置は動かない。 */
  position:absolute; left:50%; top:50%; width:0; height:0; z-index:1;
}
/* 中心からの距離。流局まで打ち切った時の河(6枚×3段)＋鳴きの外側に来るよう取ってある。 */
/* 河を1.5倍にしたので3段ぶんの張り出しも増えた。その外側に来るよう41→53cqhへ。 */
.mj-hand-strip.right{margin-left:53cqh}
.mj-hand-strip.left{margin-left:-53cqh}
.mj-hand-strip.top{margin-top:-30cqh}


.mj-opp-back{
  /* 白背景をくり抜いた透過PNGなので、下地・枠・角丸は一切付けない
     (牌の輪郭が六角形なので、四角い下地があると四隅がはみ出して見える)。 */
  position:absolute; left:0; top:0;
  width:auto; height:7.2cqh;
  background:none; border:0; border-radius:0; box-shadow:none;
  filter:drop-shadow(1px 2px 2px rgba(0,0,0,.5));
  /* 1枚ごとの位置はJS(oppHandLineHtml)が計算して--x/--yで渡す。手牌と副露で1枚あたりの
     間隔が違うため、CSS側の一定倍(--i×歩幅)では表せないので実座標を受け取る形にした。 */
  transform:translate(-50%,-50%) translate(var(--x, 0cqh), var(--y, 0cqh));
}
.mj-opp-back .face{width:auto; height:100%; display:block}

/* 手牌と同じ列に並べる副露(ポン/チー/カン)と北抜きの牌。表を見せるので伏せ牌より
   間隔を広く取ってある(JS側のMELD_STEP)。位置の渡し方は伏せ牌と同じ。
   .mj-mini-tileの定義がこのファイルの後方にあるため、幅・高さ・位置は
   セレクタを二重(.mj-mini-tile.mj-line-meld)にして必ず勝たせる。 */
.mj-mini-tile.mj-line-meld{
  position:absolute; left:0; top:0; width:4.63cqh; height:6.5cqh; margin:0;
  /* --rot はその席の向き(捨て牌と同じ角度)。倒すぶん列方向に占める長さが牌の幅に
     変わるので、JS側の歩幅(MELD_SPAN)もその幅に合わせてある。 */
  transform:translate(-50%,-50%) translate(var(--x, 0cqh), var(--y, 0cqh)) rotate(var(--rot, 0deg));
  box-shadow:0 1px 3px rgba(0,0,0,.5);
}

/* 名前・リーチ棒・北抜き・鳴き判定の待ち時間。卓上に直接置く小さな名札にする
   (以前の「対局者カード」の枠は廃止したので、名札だけが残る形)。 */
/* 名札も手牌と同じく中心から固定距離に置く(河の増減で動かないように)。 */
.mj-zone-name{
  position:absolute; left:50%; top:50%; transform:translateX(-50%); margin-top:45.5cqh;
  display:flex; align-items:center; gap:0.6cqh; white-space:nowrap;
  background:rgba(4,10,18,.72); border:1px solid rgba(255,255,255,.18); border-radius:1cqh;
  padding:0.3cqh 1cqh; font-size:2.1cqh; font-weight:700; color:#dfeeff;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.mj-zone-name:empty{display:none}
/* 2026-08-08「下家と上家のすぐ横に黒いなにかがあるから削除して」対応。
   名前と北抜き枚数は別の場所(.mj-opp-badge)へ移したので、下家/上家のこの枠は
   中身が「状態表示用の空のspan」1個だけになることが多い。空のspanでも子要素は子要素
   なので :empty では消えず、黒い枠だけが手牌の横に residual として残っていた。
   実際に見せる中身(名前・北抜き=small・リーチ棒=img・考え中表示=中身入りspan)が
   1つも無い時だけ枠ごと隠す。 */
.mj-zone-name:not(:has(img, small, span:not(:empty))){display:none}
.mj-zone.top .mj-zone-name{margin-top:34.5cqh}
/* 自分(手前)の名札は出さない。名前と持ち点は画面右上のHUDに常時出ているので重複だし、
   縦方向は卓の半分(約37cqh)しか無く、河が3段まで伸びると置き場所が無いため。 */
.mj-zone.bottom .mj-zone-name{display:none}
/* 「誰の番か・鳴き判定中か」(2026-08-07「相手のターンか分かりづらい」対応)。
   カードの枠が無くなったので、名札そのものを光らせる形に置き換えた。 */
.mj-zone.acting .mj-zone-name{border-color:var(--gold); box-shadow:0 0 14px rgba(224,178,60,.55); animation:mj-opp-pulse 1.3s ease-in-out infinite}
.mj-zone.acting.reaction .mj-zone-name{border-color:var(--red); box-shadow:0 0 14px rgba(224,87,74,.55)}
.mj-zone.riichi .mj-zone-name{border-color:var(--red)}
@keyframes mj-opp-pulse{0%,100%{opacity:1}50%{opacity:.88}}
.mj-opp-status{display:flex; align-items:center; gap:0.6cqh}
.mj-opp-status:empty{display:none}
.mj-opp-label{font-size:0.82em; color:var(--gold); font-weight:700}
.mj-zone.reaction .mj-opp-label{color:var(--red)}
.mj-opp-timer{font-size:0.82em; font-weight:800; color:var(--gold)}
.mj-zone.reaction .mj-opp-timer{color:var(--red)}

/* 河(捨て牌)・鳴きの牌チップ。手牌タイルと同じ牌面(SVG)を縮小して統一感を出す
   (以前は生の文字だけで、手牌タイルと縮尺・見た目が揃わず見づらかった＝2026-08-07ユーザー指摘)。 */
.mj-mini-tile{
  /* padding to be in cqh/cqw, not %: %のpaddingはcontaining block(親)の幅基準で
     決まるため、box-sizing:border-boxかつ幅もcqh指定の要素と組み合わさると
     Chromeがwidthの明示値を無視してauto/shrink-to-fit相当に落ちてしまう実害バグが
     あった(2026-08-07実機確認。牌が実際より何倍も大きく描画された)。 */
  display:inline-flex; align-items:center; justify-content:center; overflow:hidden;
  min-width:0; min-height:0;
  width:4.2cqh; height:5.9cqh; flex:0 0 auto; padding:0; box-sizing:border-box;
  background:linear-gradient(180deg,#fdfaf2 0%,#efe7d4 100%);
  border:1px solid #b8ab8a; border-radius:10%/8%; box-shadow:0 1px 2px rgba(0,0,0,.35);
}
/* 2026-08-07、ユーザー提示の実物牌写真を切り出したPNGに全面差し替え(以前は自前SVG描画)。
   object-fit:coverで牌ボタンいっぱいに敷き詰め、隙間が出ないようにする。 */
.mj-mini-tile .face{width:100%; height:100%; display:block; object-fit:cover}
.mj-mini-tile.red{box-shadow:0 0 0 1.5px rgba(224,87,74,.65), 0 1px 2px rgba(0,0,0,.35)}
/* 今まさにポン/チー/ロンの判定対象になっている捨て牌を光らせる(2026-08-07
   「誰の捨て牌のどれをポン/チーできるのか分かりやすく」対応)。 */
.mj-mini-tile.reaction-target{
  box-shadow:0 0 0 2px var(--gold), 0 0 10px rgba(224,178,60,.75);
  animation:mj-call-pulse 1s ease-in-out infinite;
  transform:scale(1.12); z-index:3;
}
@keyframes mj-call-pulse{0%,100%{box-shadow:0 0 0 2px var(--gold), 0 0 10px rgba(224,178,60,.75)}
  50%{box-shadow:0 0 0 2px var(--gold), 0 0 16px rgba(224,178,60,1)}}
.mj-call-hint{color:var(--gold); font-weight:700; font-size:0.8em; margin-left:2px; flex:0 0 auto}

/* 2026-08-07、得点バッジ(.mj-pt)が対局者カード/捨て牌と重なる不具合の根本原因が
   ここにあった: このテーブルは横長(16:9のビューポート)なので、同じfr値でも「行の高さ」
   は「列の幅」よりずっと小さい。widthを基準にaspect-ratio:1/1で高さを決めていたため、
   カードが実際の行の高さを大きくはみ出し、縁に重ねたバッジも一緒に隣のセルへ
   突っ込んでいた。行の高さを基準にする(heightを指定してaspect-ratioでwidthを決める)よう
   逆転させ、実際のセル境界にきちんと収まるようにした。 */
/* 2026-08-08、「東西南北をこの画像のように設置して、加えてもっと大きく」対応で
   16cqh→24cqhに拡大。得点バッジ(.mj-pt)も画像の外へ逃がすのをやめ、mj-console.png
   自体が持つ4つのスロット絵(四隅寄りの正方形+棒状の枠)の上に直接文字を重ねる方式に
   変更した(以前は画像を導入する前の名残で、カードの外周に浮かせる配置のままだった)。 */
/* コンソールは.mj-ringの中央に絶対配置する(卓レイアウトを放射状に作り直したため、
   以前のgrid-area指定は廃止)。z-indexで河より前面に出し、四辺の得点表示が河の牌に
   隠れないようにする。 */
.mj-center{
  /* コンソール画像(mj-console.png)と同じ縦横比(754:640)にし、背景も100% 100%で
     ぴったり敷く。以前はcontainで正方形の枠に収めていたため画像の上下に余白ができ、
     %指定で置いた文字が画像の実際のスロットとずれていた。画像と枠を一致させることで、
     PNGを解析して求めたスロット位置(%)がそのまま使えるようになる。 */
  position:absolute; left:50%; top:50%; height:26cqh; aspect-ratio:754/640;
  transform:translate(-50%,-50%); z-index:2;
}
.mj-center-card{
  position:relative; width:100%; height:100%;
  background:url("assets/mj-console.png") 0 0/100% 100% no-repeat;
}
/* 中央の黒い窓に「東◯局」と「残り◯」。参考画像(155236)と同じ配色・配置。 */
.mj-round{
  position:absolute; left:47%; top:42%; transform:translate(-50%,-50%);
  color:#3ff0e0; font-weight:800; font-size:3.4cqh; white-space:nowrap;
  text-shadow:0 0 6px rgba(0,0,0,.9);
}
.mj-wallcount{
  position:absolute; left:47%; top:56%; transform:translate(-50%,-50%);
  color:#eafaff; font-size:2.4cqh; font-weight:700; white-space:nowrap;
  text-shadow:0 0 6px rgba(0,0,0,.9);
}

/* --- 4人ぶんの点数と風バッジ ---
   位置はmj-console.pngを画像解析して求めた実測スロット中心(%)。
   画像には既に立体的な枠が描かれているので、こちらは中身(文字)だけを重ねる。
   各辺の席から読める向きになるよう辺ごとに回転させる。 */
/* line-height:1 が必須。既定の行送り(normal)だと文字の上下に余白が付いて、点数の帯が
   スロットの幅(左家なら x%13.3-22.9)を超えて隣の棒受けまではみ出す。2026-08-08に
   「リーチが2局続くと表示がおかしい」と報告された見た目の崩れは、棒側の膨らみと
   この文字側の余白が両方から寄っていたのが原因だった。 */
.mj-pt{
  position:absolute; font-size:2.5cqh; line-height:1; font-weight:800; color:#ffc93c; white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.9);
}
.mj-pt:empty{display:none}
.mj-pt.bottom{left:64.9%; top:82.2%; transform:translate(-50%,-50%) rotate(0deg)}
.mj-pt.right {left:86.2%; top:33.9%; transform:translate(-50%,-50%) rotate(-90deg)}
.mj-pt.top   {left:37.2%; top:11.2%; transform:translate(-50%,-50%) rotate(180deg)}
.mj-pt.left  {left:18.1%; top:61.3%; transform:translate(-50%,-50%) rotate(90deg)}

.mj-wind{
  position:absolute; display:flex; align-items:center; justify-content:center;
  width:6.5%; height:7.6%; font-size:2.2cqh; font-weight:800; color:#eaf2f8;
  text-shadow:0 1px 2px rgba(0,0,0,.9);
}
.mj-wind:empty{display:none}
/* 東は東風戦の場風と常に一致する特別な風なので、参考画像通り赤で目立たせる。 */
.mj-wind.is-east{color:#ff6a5c}
.mj-wind.bottom{left:76.0%; top:67.2%; transform:translate(-50%,-50%) rotate(0deg)}
.mj-wind.right {left:72.9%; top:22.1%; transform:translate(-50%,-50%) rotate(-90deg)}
.mj-wind.top   {left:27.8%; top:25.5%; transform:translate(-50%,-50%) rotate(180deg)}
.mj-wind.left  {left:31.0%; top:72.9%; transform:translate(-50%,-50%) rotate(90deg)}

/* --- 各自のリーチ棒 ---
   2026-08-08「リーチ棒を置く場所がおかしい。下家・自家・上家それぞれの場所に入れて」対応。
   コンソール画像を解析すると、四辺それぞれの最も外側に細長い棒受けスロットがある
   (実測した中心: 下55.4/97.7・右94.8/41.9・上46.9/3.2・左8.8/54.5)。リーチした人の棒を
   その人の側のスロットへ1本だけ置く。以前は全員ぶんを左の溝に積み上げていた。
   棒の画像は横長なので、縦のスロット(左右)は90度回して使う。 */
.mj-stick{
  position:absolute; width:13cqh; height:1.4cqh;
  display:flex; align-items:center; justify-content:center;
}
.mj-stick:empty{display:none}
.mj-stick img{width:100%; height:100%; object-fit:fill; filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.mj-stick.bottom{left:55.4%; top:97.7%; transform:translate(-50%,-50%)}
.mj-stick.top   {left:46.9%; top: 3.2%; transform:translate(-50%,-50%)}
.mj-stick.right {left:94.8%; top:41.9%; transform:translate(-50%,-50%) rotate(90deg)}
.mj-stick.left  {left: 8.8%; top:54.5%; transform:translate(-50%,-50%) rotate(90deg)}

/* リーチ棒(実物の見た目に合わせた画像、2026-08-08ユーザー提供分)。座席名の横に「この人は
   リーチ中」の目印として出す(zoneHtml()参照)。以前は供託棒の本数ぶんこの画像を中央
   コンソールの棒受けスロットに並べる表示もあったが、本数が増えると細って見づらくなる
   問題があり、2026-08-08にユーザー提供の参考画像に合わせて左上の.mj-counter-badge
   (アイコン×本数)表示へ置き換えた。このクラス自体はリーチ中インジケーターとして
   引き続き使う。 */
.mj-riichi-stick{height:1.8cqh; width:auto; display:inline-block; vertical-align:middle; flex:0 0 auto; filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}

/* --- 卓左上の情報パネル群(ドラ・本場・供託棒)。2026-08-08、ユーザー提供の参考画像に
   合わせて縦に積む1つのブロックにまとめた。 --- */
.mj-corner-info{
  position:absolute; left:1.6cqh; top:8.5cqh; z-index:6;
  display:flex; flex-direction:column; gap:0.7cqh; align-items:flex-start;
}
.mj-dora-panel{
  display:flex; align-items:center; gap:0.8cqh;
  background:rgba(5,11,20,.82); border:1px solid rgba(255,255,255,.22); border-radius:1cqh;
  padding:0.7cqh 1.1cqh; box-shadow:0 2px 8px rgba(0,0,0,.5);
}
.mj-dora-label{color:var(--gold); font-size:1.9cqh; font-weight:800; white-space:nowrap}
.mj-dora{display:flex; gap:0.3cqh}

/* 本場・供託リーチ棒を「アイコン×枚数」の小さなバッジで見せる(2026-08-08、ユーザー
   提供の参考画像の左上バッジに合わせた)。以前の中央コンソールの文字表記「◯本場」・
   供託棒の実物本数ぶん表示より、本数が増えても崩れず一目で読める。0本の時も
   バッジごと隠さず「×0」のまま見せる(参考画像と同じ、常時同じ場所にある方が分かりやすい)。 */
.mj-counters-panel{display:flex; gap:0.6cqh}
.mj-counter-badge{
  display:flex; align-items:center; gap:0.4cqh;
  background:rgba(5,11,20,.82); border:1px solid rgba(255,255,255,.22); border-radius:1cqh;
  padding:0.5cqh 0.9cqh; font-size:1.8cqh; font-weight:800; color:#eaf2f8; white-space:nowrap;
}
.mj-counter-badge b{color:var(--gold)}
.mj-counter-badge b::before{content:"×"; color:var(--muted); font-weight:700}
.mj-counter-badge .ico{height:2cqh; width:auto; display:block; object-fit:contain}
.mj-counter-badge .ico.chip{
  height:2cqh; width:2cqh; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 35% 30%,#fff6dc,#e0b23c 55%,#8a6110);
  font-size:1.2cqh; font-weight:900; color:#3a2500;
}
.mj-dora .mj-mini-tile{width:3.6cqh; height:5cqh}

/* 自分の河も他家と同じ.mj-zone.bottomの中に置くようになったため、専用の.mj-my-discards
   は廃止(2026-08-08の卓レイアウト全面作り直し)。 */

/* リーチ宣言と同時に切った牌は横向き(2026-08-08「リーチした時は牌が横向きになるように」
   対応、実物の麻雀と同じリーチの目印)。回転すると見た目の占有幅が縦横入れ替わり隣の列に
   少しはみ出すが、実物の麻雀卓でも隣の牌に重なって見えるのが自然なのでそのままにする。 */
.mj-mini-tile.riichi-tile{transform:rotate(90deg); z-index:2}

/* ===== 下段ドック（手牌トレイ）。卓の下にスクロールで続くのではなく、同じ16:9の枠の
   中に収まる固定パネルにした(2026-08-07「画面が離れているのはおかしい」対応)。 ===== */
.mj-dock{
  flex:0 0 auto; width:100%; box-sizing:border-box;
  padding:0.8cqh 2cqw 1.2cqh; background:linear-gradient(180deg,#0a1420,#050b14);
  border-top:1px solid rgba(255,255,255,.1);
  display:flex; flex-direction:column; gap:0.5cqh; position:relative; z-index:2;
}
.mj-melds{display:flex; gap:1.6cqw; margin:0; flex-wrap:wrap; flex:0 0 auto}
.mj-meld-group{display:flex; gap:2px}
.mj-meld-group .mj-tile{width:5.2cqh; height:7.3cqh; cursor:default}
/* 自分が抜いた北(2026-08-08「自分で北を抜いたときに分からない」対応)。
   鳴いた面子と区別が付くよう金色の枠を添える。 */
.mj-kita-group{
  padding:0.3cqh; border:1.5px solid var(--gold); border-radius:0.8cqh;
  background:rgba(224,178,60,.12);
}

/* 聴牌中(リーチ中含む)の「あと何を引けば上がれるか」表示(2026-08-07対応)。
   常時見えてよい自分専用の情報なので、手牌のすぐ上に控えめな金色の帯で出す。 */
.mj-waits{
  display:flex; align-items:center; gap:0.8cqw; flex:0 0 auto;
  background:rgba(224,178,60,.14); border:1px solid rgba(224,178,60,.5); border-radius:1cqh;
  padding:0.4cqh 1cqw;
}
.mj-waits:empty, .mj-waits[hidden]{display:none}
.mj-waits .lbl{
  flex:0 0 auto; color:var(--gold); font-weight:800; font-size:1.9cqh; white-space:nowrap;
}
.mj-waits .mj-mini-tile{width:4.6cqh; height:6.5cqh}

.mj-hand{display:flex; flex-wrap:wrap; gap:0.5cqw; justify-content:center; flex:0 0 auto}
/* 今引いた牌だけ隙間を空けて浮かせ、「一番右＝今引いた牌」を一目で分かるようにする
   (2026-08-07「新しく引いてきた牌が分かるように」対応)。実際に並び順を右端固定にするのは
   サーバー側(table.py の _hand_view)で、ここは見た目の強調のみ担当する。 */
.mj-tile.drawn{margin-left:1.4cqw}
.mj-tile.drawn::before{
  content:""; position:absolute; left:-0.9cqw; top:10%; bottom:10%; width:1px;
  background:rgba(224,178,60,.5);
}
.mj-tile{
  /* min-width/min-height:0が無いと、flexアイテムの既定min-width:autoが中身(SVG)の
     min-content基準で床を作ってしまい、指定した7cqh/9.8cqhより大きく描画される実害
     バグがあった(2026-08-07実機確認。SVGへの明示width/height属性追加と合わせて対処)。
     さらにpaddingを%指定にしていたことも別の実害バグだった: %のpaddingは親要素の幅基準で
     決まるため、box-sizing:border-box＋幅もcqh指定という組み合わせだとChromeがwidthの
     明示値を無視してauto/shrink-to-fit相当に落ち、牌が本来より何倍も大きく描画されて
     いた。paddingもcqh/cqwに統一して解消。 */
  position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden;
  min-width:0; min-height:0; flex:0 0 auto;
  width:7cqh; height:9.8cqh; box-sizing:border-box; padding:0;
  background:linear-gradient(180deg,#ffffff 0%,#f4efe2 55%,#e6dcc4 100%);
  border:1px solid #cbbd9c; border-radius:10%/7%; cursor:pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9), inset 0 -3px 0 rgba(0,0,0,.08),
    0 3px 0 #b9a97d, 0 5px 8px rgba(0,0,0,.4);
}
/* 2026-08-07、ユーザー提示の実物牌写真を切り出したPNGに全面差し替え(以前は自前SVG描画)。
   object-fit:coverで牌ボタンいっぱいに敷き詰め、隙間が出ないようにする。 */
.mj-tile .face{width:100%; height:100%; display:block; object-fit:cover}
.mj-tile.red{box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9), inset 0 -3px 0 rgba(0,0,0,.08),
    0 0 0 2px rgba(224,87,74,.6), 0 3px 0 #b9a97d, 0 5px 8px rgba(0,0,0,.4)}
.mj-tile:disabled{opacity:.5; cursor:default; box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.mj-tile.on{outline:0.5cqh solid var(--gold); outline-offset:1px}

/* ===== 自分の番/鳴き判定中を1つの箱にまとめる(2026-08-08「時間制限もポンもチーも
   カンも鳴きますか？もあなたの番ですって書いてあるところにまとめて、そこから
   はみ出さないように統一しよう」対応)。以前は.mj-turn-banner(あなたの番です)・
   .mj-special(ツモ/カン/リーチ)・.mj-action-bar(鳴きますか？+ポン/チー/カン/ロン/
   スルー)の3つに分かれていて、場面ごとに表示位置・大きさがバラバラだった。
   常に中央寄せ・この箱の横幅を超えない(flex-wrapで折り返す)ようにする。 ===== */
.mj-status-box{
  z-index:2; flex:0 0 auto; align-self:center; box-sizing:border-box; max-width:22cqh;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  border-radius:0.8cqh; padding:0.6cqh 1.4cqw 0.7cqh;
  background:rgba(224,178,60,.08); border:1px solid rgba(224,178,60,.35);
}
.mj-status-box.your-turn{animation:mj-turn-glow 1.6s ease-in-out infinite}
.mj-status-box.reaction{
  background:rgba(224,87,74,.1); border-color:rgba(224,87,74,.4);
  animation:mj-reaction-glow 1s ease-in-out infinite;
}
@keyframes mj-turn-glow{
  0%,100%{box-shadow:inset 0 0 0 2px rgba(224,178,60,.25), 0 0 0 rgba(224,178,60,0)}
  50%{box-shadow:inset 0 0 0 2px rgba(224,178,60,.7), 0 0 2cqh rgba(224,178,60,.4)}
}
@keyframes mj-reaction-glow{
  0%,100%{box-shadow:inset 0 0 0 2px rgba(224,87,74,.25)}
  50%{box-shadow:inset 0 0 0 2px rgba(224,87,74,.8), 0 0 2cqh rgba(224,87,74,.35)}
}

.mj-status-label{font-weight:800; font-size:1.6cqh; margin-bottom:0.2cqh; letter-spacing:.04em}
.mj-status-box.your-turn .mj-status-label{color:var(--gold)}
.mj-status-box.reaction .mj-status-label{color:var(--red)}

/* 残り時間の数字(2026-08-08、大きすぎたのをユーザー指摘で「以前の残り◯秒くらいの
   大きさがちょうどよい」に合わせて縮小)。[hidden]をdisplay:flexが上書きしてしまわない
   よう:not([hidden])を必ず付ける(2026-08-07に#screen-mahjong等で踏んだのと同じ罠)。 */
.mj-timer{
  font-weight:800; line-height:1; color:#fff; text-align:center; margin-bottom:0.3cqh;
  font-size:2cqh;
}
.mj-timer:not([hidden]){display:flex; align-items:baseline; justify-content:center; gap:0.2cqh}
.mj-timer .unit{font-size:0.7em; font-weight:800; color:var(--gold)}
.mj-timer.low{color:var(--red)}

/* 鳴き判定/自分の番のボタン(ポン/チー/カン/ロン/スルー/ツモ/暗槓/加槓/北抜き/リーチ)を、
   斜めに切れたリボン風の小さいボタンにする(2026-08-08、ユーザー提供の参考画像に
   合わせた)。clip-pathで平行四辺形に切り、::afterの斜めハイライト帯でリボンらしい
   光沢を足す。実行系は金色系グラデーション、「スルー」は落ち着いた青灰色にして
   押し間違いを防ぐ。すべて.mj-status-box内に収まるよう中央寄せでflex-wrapする。 */
.mj-status-actions{display:flex; flex-wrap:wrap; justify-content:center; gap:0.7cqw; max-width:100%}
.mj-status-actions:not(:empty){margin-top:0.3cqh}
.mj-status-actions .btn{
  position:relative; overflow:hidden; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center; width:auto;
  padding:0.5cqh 1.3cqw; font-size:1.3cqh; font-weight:900; color:#fff;
  border-radius:0.4cqh; clip-path:polygon(9% 0, 100% 0, 91% 100%, 0 100%);
  text-shadow:0 1px 3px rgba(0,0,0,.85); white-space:nowrap;
  background:linear-gradient(135deg,#f6d27a,#d99a2b 55%,#8f5e10);
  box-shadow:0 0.3cqh 0.7cqh rgba(0,0,0,.5);
}
.mj-status-actions .btn.ghost{
  background:linear-gradient(135deg,#8299ad,#425468 55%,#232f3a); color:#eaf2f8;
}
.mj-status-actions .btn::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg,transparent 42%, rgba(255,255,255,.4) 50%, transparent 58%);
}

.mj-overlay{
  position:absolute; inset:0; background:rgba(6,12,20,.92); z-index:40; padding:3cqh;
}
/* display:flex を .mj-overlay 自体に書くと、hidden属性より詳細度で勝ってしまい
   非表示のはずのオーバーレイが常に画面全体を覆ってしまう(2026-08-07に実機で発覚した重大バグ＝
   ページのほぼ全体が暗い幕の下に隠れて見えなくなっていた)。hidden化を確実に効かせるため
   :not([hidden])の時だけflexにする。 */
.mj-overlay:not([hidden]){display:flex; align-items:center; justify-content:center}
.mj-overlay-card{
  background:var(--panel); border:2px solid var(--gold); border-radius:1.6cqh; padding:2.4cqh;
  max-width:70cqw; width:100%; text-align:center; font-size:2cqh;
}
.mj-overlay-card h2{margin:0 0 0.6em; font-size:1.3em}
.mj-overlay-card .row{display:flex; justify-content:space-between; padding:0.3em 0; color:var(--muted)}
.mj-overlay-card .row b{color:var(--text)}
.mj-overlay-card .btn{font-size:1em}
/* 誰かが上がった直後、全員の持ち点を一覧で見せる欄(2026-08-07対応)。役の内訳と
   ごっちゃにならないよう上に区切り線を入れる。 */
.mj-scoreboard{margin-top:0.8em; padding-top:0.6em; border-top:1px solid var(--line)}
.mj-scoreboard .row small{margin-left:0.4em; font-weight:700}

/* パチンコ（クルーン台）。麻雀カードと同じ見た目に揃える＝
   「レースの下に並ぶ、参加できるもう1つの遊び」として一目で分かるように。 */
.pachinko-card{
  margin:12px 0 0; background:var(--panel); border:2px solid var(--line);
  border-radius:12px; padding:10px 14px;
}
.pachinko-card-head{display:flex; align-items:center; gap:8px; font-size:14px}
.pachinko-ico{font-size:18px}
.pachinko-status{margin-left:auto; color:var(--muted); font-size:13px}
.pachinko-rule{margin:8px 0 0; color:var(--muted); font-size:13px; line-height:1.6}
.pachinko-rule b{color:var(--gold)}
.pachinko-shots{display:flex; gap:8px; margin:10px 0 8px}
.pachinko-shot{
  flex:1; background:var(--panel2); border:2px solid var(--line); color:var(--muted);
  border-radius:10px; padding:8px 0; font-size:17px; font-weight:800; cursor:pointer;
}
.pachinko-shot small{display:block; font-size:10px; font-weight:400; margin-top:1px}
.pachinko-shot.on{border-color:var(--gold); background:var(--panel); color:var(--text)}
.pachinko-card .btn{width:100%; padding:12px; font-size:15px}
.pachinko-queue{margin:8px 0 0; color:var(--muted); font-size:12px}
.pachinko-card .err{margin:8px 0 0; font-size:13px}

/* --- ヤマコインの履歴 ------------------------------------------------------
   履歴は別ページ(history.html)。予想画面に重ねて出すと賭けの操作の邪魔になるため
   （2026-08-20の指摘で、真ん中に出るシートからページ遷移へ変更）。
   ここにあるのは「残高を押せると分かる見た目」と、履歴ページ側の一覧の体裁。 */
.who{display:block; color:inherit; text-decoration:none}
.who span{border-bottom:1px dashed var(--line)}   /* 押せると分かるように */
.who:hover span{border-bottom-color:var(--gold)}

/* --- 履歴ページ（history.html） --- */
.hist-page{max-width:640px; margin:0 auto; padding:12px}
.hist-top{
  display:flex; align-items:center; gap:12px; margin-bottom:12px;
  padding:10px 12px; background:var(--panel); border:1px solid var(--line); border-radius:12px;
}
.hist-top h1{font-size:16px; margin:0}
.hist-top .now{margin-left:auto; color:var(--gold); font-weight:800; font-size:20px;
               font-variant-numeric:tabular-nums}
.hist-top .now::after{content:" 枚"; font-size:12px; color:var(--muted); font-weight:400}
.hist-back{
  display:inline-block; margin-bottom:12px; padding:10px 16px;
  background:var(--panel2); border:1px solid var(--line); border-radius:10px;
  color:var(--text); text-decoration:none; font-weight:700;
}
.hist-list{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:0 12px}
.hist-note{color:var(--muted); font-size:12px; margin:12px 2px 24px; line-height:1.6}

.hist-row{
  display:grid; grid-template-columns:1fr auto; gap:2px 10px;
  padding:10px 2px; border-bottom:1px solid var(--line);
}
.hist-row:last-child{border-bottom:0}
.hist-what{font-size:15px; font-weight:700}
.hist-when{color:var(--muted); font-size:12px}
.hist-delta{
  font-size:17px; font-weight:800; text-align:right; font-variant-numeric:tabular-nums;
  align-self:center; grid-row:1 / 3;
}
.hist-delta.plus{color:var(--green)}
.hist-delta.minus{color:var(--red)}
.hist-delta small{display:block; color:var(--muted); font-size:12px; font-weight:400}
/* 記録していない増減（参加ボーナス等）をまとめた行。本物の記録と見分けが付くよう控えめに。 */
.hist-gap{
  display:flex; justify-content:space-between; gap:10px;
  padding:7px 2px; color:var(--muted); font-size:12px;
  border-bottom:1px dashed var(--line);
}
.hist-empty{color:var(--muted); font-size:14px; padding:28px 4px; text-align:center; line-height:1.8}


/* 投票中の「近走」（直近5走の着順）。
   名前の下（.sub）に入れると幅が足りず窮屈だったので、**オッズの左隣の空き**に横並びで置く
   （2026-08-26のおーやま指定）。名前・脚質・調子・オッズはそのまま残す。
   色は配信画面(widget)と揃える：1着=金 / 2着=銀 / 3着=銅 / 4着以下=グレー。
   狭い画面ではラベルとマスを間引いて、名前とオッズを優先する。 */
.horse .recent{flex:none;display:flex;align-items:center;gap:2px;font-style:normal}
/* ラベルは広い画面のときだけ。狭いと近走が幅を取りすぎて馬名が潰れる
   （実測：カード414pxで名前の枠が103pxまで縮んだ）。 */
.horse .recent b{display:none;font-size:10px;font-weight:800;color:var(--muted);
  letter-spacing:.04em;margin-right:2px}
@media (min-width:560px){ .horse .recent b{display:inline} }
.horse .recent .rp{display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:5px;background:#2a3442;color:#c8d3de;
  font:900 12px Arial;line-height:1;flex:none}
.horse .recent .rp.r1{background:#d0a512;color:#fff}
.horse .recent .rp.r2{background:#9aa7b2;color:#fff}
.horse .recent .rp.r3{background:#b5793f;color:#fff}
.horse .recent .rp.rb{background:transparent;box-shadow:inset 0 0 0 1px #2a3442;color:transparent}
@media (max-width:420px){
  .horse .recent .rp{width:18px;height:18px;font-size:11px}
}
/* ★狭い画面でも隠さない。以前ここに display:none を入れていたら、
   幅の狭い端末では近走が丸ごと消えて「空きスペースだけ」になっていた（2026-08-26）。
   隠すのではなく、マスを縮めて必ず出す。 */
@media (max-width:360px){
  .horse .recent{gap:1px}
  .horse .recent .rp{width:16px;height:16px;font-size:10px;border-radius:4px}
}


/* --- ボーナスゲーム（3Dあみだくじ）------------------------------------------
   30レースに1回だけ、賭けの操作の上に出す。押すだけで参加できることが伝わるよう、
   ボタンを大きく8つ並べる（片手・寝ながらでも押せる大きさ）。 */
.bonus{background:var(--panel2); border:2px solid var(--gold); border-radius:14px;
       padding:12px; margin-bottom:12px}
.bonus-head{display:flex; align-items:baseline; gap:10px; margin-bottom:6px}
.bonus-head b{font-size:18px; color:var(--gold)}
.bonus-head span{color:var(--muted); font-size:12px}
.bonus-lead{margin:0 0 10px; font-size:13px; line-height:1.7; color:var(--text)}
.bonus-lead b{color:var(--gold)}
.bonus-pick{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.bonus-pick button{
  min-height:64px; border-radius:12px; border:2px solid var(--line); background:var(--panel);
  color:var(--text); font-weight:900; font-size:22px; cursor:pointer;
}
.bonus-pick button .amt{display:block; font-size:11px; font-weight:400; color:var(--muted); margin-top:2px}
.bonus-pick button.on{border-color:var(--gold); background:#3a2f12; color:#fff}
.bonus-pick button:disabled{opacity:.45; cursor:default}
.bonus-mine{margin:10px 0 0; font-size:13px; color:var(--gold); font-weight:700}
@media (min-width:760px){ .bonus-pick{grid-template-columns:repeat(8,1fr)} }

.race #race-name:not([hidden]){display:block;color:var(--gold);font-size:14px;line-height:1.4}
.race #race-distance{display:block;font-size:12px;color:var(--muted)}

.horse .sub { flex-wrap: wrap; row-gap: 3px; }
.distance-aptitude { font-size: 10px; font-style: normal; white-space: nowrap; color: var(--muted); }
.distance-aptitude.distance-match { color: #176039; background: #e2f3cf; border-radius: 4px; padding: 1px 4px; font-weight: 800; }