/* ============================================================
   テキサス・ホールデム ― 第2段「役が見える画面」（T40）の 見た目
   ------------------------------------------------------------
   ・色・かたちは 既存3本（ブラックジャック／七並べ／大富豪）と そろえてある
     （設計図 §9.5 ＝ パステル・丸ゴシック・白い角丸カード）。
   ・ここは「役が 正しく 出ているか 目で 見るため」の 見た目です。
     仕上げは 🎨アトが やります。あとから かざりやすい ように
     部品ごとに 見出しを 入れてあります。
   ・カードの ひりつ 419:635（2:3）は ぜったいに くずさない（設計図 §9）。
   ============================================================ */

:root {
  --ink:#463c52;
  --pink:      #FF8CB8;
  --pink-deep: #E94F8A;
  --pink-dark: #C43A73;
  --pink-soft: #FFE3EF;
  --white:     #ffffff;
  --cream:     #fff9ea;
  --gold:      #F1A426;
  --gold-soft: #FFE690;
  --mint:      #6FC98C;
  --mint-soft: #DCF6E4;

  --font-main:"Hiragino Maru Gothic ProN","ヒラギノ丸ゴ ProN W4","M PLUS Rounded 1c","Rounded Mplus 1c","BIZ UDPGothic","Yu Gothic UI","Hiragino Sans","Noto Sans JP",Meiryo,system-ui,sans-serif;

  /* カードは 419×635（比率 2:3）。この ひりつは ぜったいに くずさない。 */
  --card-w:66px;
  --card-h:calc(var(--card-w) * 635 / 419);
}

* { box-sizing:border-box; }
body {
  margin:0; min-width:320px; color:var(--ink); font-family:var(--font-main);
  background:linear-gradient(180deg,#bcebf0 0 150px,#fff7e8 150px); min-height:100vh;
}
button { font-family:inherit; cursor:pointer; }
.hidden { display:none !important; }
.sprite-defs { position:absolute; width:0; height:0; overflow:hidden; }
.app-shell { max-width:940px; margin:0 auto; padding:12px 14px 26px; }

/* ── 上の帯 ───────────────────────────────────── */
.topbar { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.back {
  flex:0 0 auto; display:inline-flex; align-items:center; min-height:38px; padding:0 13px;
  background:var(--white); border:3px solid var(--pink-soft); border-radius:999px;
  color:var(--pink-dark); font-weight:900; font-size:13px; text-decoration:none; white-space:nowrap;
}
.back:hover { border-color:var(--pink); }
.brand { flex:1 1 auto; display:flex; align-items:center; justify-content:center; gap:7px; min-width:0; }
.brand-cat { width:34px; height:26px; flex:0 0 auto; }
.brand span { font-weight:900; font-size:16px; color:#3f5a70; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stage-chip {
  flex:0 0 auto; padding:7px 12px; border-radius:999px;
  background:var(--gold-soft); color:#7d6321; font-weight:900; font-size:12.5px; white-space:nowrap;
}

/* ── 上の帯（何ハンドめ・自分のコイン）──────────────── */
.tape {
  margin:0 0 8px; text-align:center; padding:5px 12px; border-radius:999px;
  background:#fff5d8; border:3px solid #f3d98a; color:#7d6321;
  font-size:13px; font-weight:900;
}

/* ── ロボット3人の 席 ──────────────────────────── */
.seats { display:flex; justify-content:space-around; gap:6px; padding:2px 0 10px; }
.seat {
  flex:1; min-width:0; text-align:center; padding:6px 2px 4px;
  border-radius:16px; border:3px solid transparent; background:rgba(255,255,255,.55);
}
.seat-name { margin:0 0 2px; font-size:13px; font-weight:900; white-space:nowrap; }
/* いま 番の人（T38：だれの番かが 分かること） */
.seat.is-turn { border-color:var(--pink); background:var(--white); box-shadow:0 4px 0 rgba(233,79,138,.18); }
/* 降りた人は うすい灰色（大富豪の「お休み中」の 作りかえ・T38 §1-5）*/
.seat.is-folded { opacity:.45; filter:grayscale(.9); }
.btn-mark { margin-left:3px; font-size:12px; }
.seat-coin { margin:2px 0 0; font-size:12px; font-weight:900; color:#7d6321; white-space:nowrap; }
.seat-bet  { margin:1px 0 0; font-size:11.5px; font-weight:900; color:var(--pink-dark); min-height:14px; }
.seat-last { margin:1px 0 0; font-size:11px; font-weight:700; color:#8b7d95; min-height:13px; }

/* 伏せ札（設計図 §9・大富豪 T22 の 形を そのまま）
   札は ぜんぶ カード1枚ぶんの 大きさ（419:635）にして、左マージンを マイナスで かさねる。
   かさなるのは 左がわ どうしなので、一番 右の 1枚は かならず まるごと 見える。 */
.seat-cards { display:flex; justify-content:center; align-items:flex-end; min-width:0; padding-top:2px; }
.seat-back {
  --back-h:52px; --back-step:16px;
  flex:0 0 auto;
  width:calc(var(--back-h) * 419 / 635);
  height:var(--back-h);
  margin-left:calc(var(--back-step) - (var(--back-h) * 419 / 635));
  border-radius:3px;
  background:transparent url('../cards/%E3%83%88%E3%83%A9%E3%83%B3%E3%83%97%E8%A3%8F%E8%B5%A4.png') center/contain no-repeat;
}
.seat-back:first-child { margin-left:0; }

/* ── 場のカード ────────────────────────────────── */
.board-wrap {
  position:relative; padding:18px 10px 12px; border-radius:23px;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 2px,transparent 2px 8px), #82ce84;
  border:5px solid #3f863f; box-shadow:0 7px 0 rgba(86,53,38,.2);
}
.board-ribbon {
  position:absolute; z-index:3; top:-15px; left:50%; transform:translateX(-50%);
  margin:0; padding:4px 18px; background:#ffe681; border:3px solid #996d40; border-radius:30px;
  color:#75513c; font-weight:900; font-size:12px; white-space:nowrap;
}
.board { display:flex; justify-content:center; align-items:center; gap:6px; flex-wrap:nowrap; }

/* ポット（まん中に あつまっている コイン・T38 §9-1 で カタカナ可）*/
.pot {
  margin:0 auto 8px; width:max-content; padding:5px 18px; border-radius:999px;
  background:#fffbe9; border:3px solid var(--gold); color:#7a5205;
  font-size:15px; font-weight:900; box-shadow:0 3px 0 rgba(122,82,5,.15);
}

/* ── 進み具合バー（部品5）────────────────────────── */
.steps {
  display:flex; align-items:center; justify-content:center; gap:2px;
  margin:12px 0 10px; padding:7px 6px; background:var(--white);
  border:3px solid var(--pink-soft); border-radius:999px; overflow-x:auto;
}
.step {
  flex:0 0 auto; padding:3px 9px; border-radius:999px;
  font-size:11.5px; font-weight:900; color:#a394ab; white-space:nowrap;
}
.step.passed { color:var(--mint); }
.step.now { background:var(--pink); color:#fff; }
.step-line { flex:0 0 auto; width:12px; height:3px; border-radius:3px; background:#f0e3ea; }

/* ※「今の役」の 名札・手札の目安★・場だけの役の 1行は T54 で 撤去した（復活させないこと）。
   かわりに 下の「役の強さの一覧」が 役の 情報源に なる。 */

/* ── ★ 役の強さの一覧（T54で ポーカーから 持ちこみ）──────
   中身は game.js の buildRanks が PokerCore.HANDS から 自動で 作る。
   🎨アトへ：見た目は 自由に 直して OK。ただし
   「今の役」の 印（.ranks-row.is-me）は 消さないで ください。 */
.ranks { margin-top:10px; }
.ranks-toggle {
  display:block; width:100%; padding:8px 12px; border-radius:999px; cursor:pointer;
  background:var(--white); border:3px solid var(--pink-soft);
  color:var(--pink-dark); font-family:inherit; font-size:13px; font-weight:900;
}
.ranks-toggle:hover { border-color:var(--pink); }
.ranks-box {
  margin-top:8px; padding:9px 12px 11px;
  background:var(--white); border:3px solid var(--pink-soft); border-radius:16px;
}
.ranks-note { margin:0 0 6px; text-align:center; font-size:12px; font-weight:900; color:#7a6a86; }
.ranks-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.ranks-row {
  display:flex; align-items:center; gap:8px; padding:4px 8px;
  border-radius:10px; border:2px solid transparent;
}
.ranks-no   { flex:0 0 34px; text-align:center; font-size:11.5px; font-weight:900; color:#9b8fa4; }
.ranks-body { display:flex; flex-direction:column; min-width:0; }
.ranks-name { font-size:13.5px; font-weight:900; color:#3f5a70; line-height:1.25; }
.ranks-desc { font-size:11.5px; font-weight:700; color:#7a6a86; line-height:1.3; }
.ranks-now  {
  display:none; margin-left:auto; font-size:11.5px; font-weight:900;
  color:var(--pink-deep); white-space:nowrap;
}
.ranks-row.is-me { background:var(--pink-soft); border-color:var(--pink); }
.ranks-row.is-me .ranks-now { display:inline; }

/* ── 自分の手札 ────────────────────────────────── */
.mine { margin-top:12px; padding:8px 13px 11px; background:#fffdf5; border:3px solid #f4dfbd; border-radius:20px; }
.mine-head { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.mine-heading { margin:0; font-size:13.5px; font-weight:900; color:#755a5c; }
.me-info { margin:0; display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.me-coin {
  padding:3px 11px; border-radius:999px; background:#fff5d8; border:2px solid #f3d98a;
  color:#7d6321; font-size:12.5px; font-weight:900;
}
.me-tag {
  padding:3px 10px; border-radius:999px; background:var(--pink-soft);
  color:var(--pink-dark); font-size:12px; font-weight:900;
}
.me-tag.is-out { background:#e9e4ee; color:#7c7186; }
.hand { display:flex; justify-content:center; align-items:center; gap:8px; padding:6px 0 2px; }

/* ── カード（絵札は かならず 支給画像・設計図 §9）─────── */
.card {
  flex:0 0 auto; position:relative; width:var(--card-w); height:var(--card-h);
  aspect-ratio:419 / 635;
  background:var(--white); border:2px solid #d9c9b6; border-radius:7px; overflow:hidden;
  box-shadow:1px 3px 2px rgba(49,41,42,.25);
}
.card.red { color:#e8434f; } .card.black { color:#25252c; }
.card .face-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.card .fallback { position:absolute; inset:0; display:block; }
.card.img-ok .fallback { display:none; }
.card .corner { position:absolute; top:4px; left:5px; display:flex; flex-direction:column; align-items:center; gap:1px;
  font-size:13px; font-weight:900; line-height:1; }
.card .corner i { font-style:normal; font-size:11px; }
.card .pip { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:26px; line-height:1; }

/* まだ 開いていない 場のカードの わく */
.card-slot {
  background:rgba(255,255,255,.28); border:3px dashed rgba(255,255,255,.75); box-shadow:none;
  display:flex; align-items:center; justify-content:center;
}
.slot-mark { font-size:22px; font-weight:900; color:rgba(255,255,255,.9); }

/* ※ 使う5枚の 光り（.card.is-used）と うすい札（.card.is-dim）は T54 で 撤去した
   （強調は 画面に 1種類まで・設計図 §5.5。復活させないこと）。 */

/* ★★ 勝負の 決着（T38 §6-6）―― つかった5枚だけを 上下に ならべる
   🎨アトへ：かざりは 変えて OK。ただし つぎの3つは 消さないで ください。
     ① 勝った行の 金色わく ＋ 👑（1行で 分かる）
     ② つかった5枚だけを 出す（7枚は 出さない。ならべられなく なります）
     ③ 同じ役どうしの ▲「ここで 勝った／負けた」（これが キッカーの 説明の 全部） */
.showdown {
  margin-top:12px; padding:11px 12px 12px; background:var(--white);
  border:3px solid var(--gold); border-radius:20px;
  box-shadow:0 4px 0 rgba(241,164,38,.22);
}
.sd-title { margin:0 0 2px; font-size:18px; font-weight:900; color:#7a5205; text-align:center; }
.sd-lead  { margin:0 0 9px; font-size:13.5px; font-weight:900; color:var(--pink-dark); text-align:center; }
.sd-rows  { display:flex; flex-direction:column; gap:7px; }
.sd-row {
  padding:7px 9px; background:#fffdf5; border:2px solid #f0e3d0; border-radius:14px;
}
.sd-row.is-win { background:var(--gold-soft); border-color:var(--gold); }
.sd-row.is-out { background:#f4f1f7; border-color:#e3dcea; opacity:.75; }
.sd-head { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; margin:0 0 5px; }
.sd-who  { font-size:13.5px; font-weight:900; color:#5c4a68; }
.sd-hand { font-size:13px; font-weight:900; color:#7a5205; }
.sd-hand small { font-size:11px; font-weight:700; color:#93743a; margin-left:3px; }
.sd-gain { margin-left:auto; font-size:13.5px; font-weight:900; color:#1f6b32; white-space:nowrap; }
.sd-gain.is-zero { color:#a396ac; }
.sd-cards { display:flex; gap:4px; align-items:flex-start; flex-wrap:nowrap; }
.sd-slot  { display:flex; flex-direction:column; align-items:center; min-width:0; }
.sd-arrow { font-size:11px; font-weight:900; color:var(--pink-deep); line-height:1.1; min-height:13px; }
.card.is-mini { --mini-w:38px; width:var(--mini-w); height:calc(var(--mini-w) * 635 / 419); border-width:2px; }
.card.is-mini .corner { top:2px; left:3px; font-size:10px; }
.card.is-mini .corner i { font-size:8px; }
.card.is-mini .pip { font-size:17px; }
.card.is-mini.is-deciding {
  border-color:var(--pink-deep);
  box-shadow:0 0 0 3px var(--pink-soft), 1px 2px 2px rgba(49,41,42,.3);
}
.sd-mark { margin:3px 0 0; font-size:11.5px; font-weight:900; color:var(--pink-deep); }
.sd-out  { margin:0; font-size:12.5px; font-weight:900; color:#8b7d95; }
.sd-pots { margin:9px 0 0; font-size:11.5px; font-weight:700; color:#93743a; text-align:center; }

/* ── コインが 0（自分だけ・T38 §4-6）───────────────── */
.over-box {
  margin-top:10px; padding:13px 12px; text-align:center;
  background:#fff1f5; border:3px solid var(--pink); border-radius:20px;
}
.over-title { margin:0 0 4px; font-size:20px; font-weight:900; color:var(--pink-dark); }
.over-note  { margin:0 0 10px; font-size:13px; font-weight:900; color:#7a6a86; }
.over-btn {
  min-height:48px; padding:0 20px; border:0; border-radius:999px;
  background:var(--pink); color:#fff; font-size:15px; font-weight:900;
  box-shadow:0 4px 0 var(--pink-deep);
}

/* ── ハッピー（設計図 §9.5・全画面に かならず 出す）────── */
.happy-row { display:flex; align-items:center; gap:8px; margin-top:12px; }
.happy-cat { width:52px; height:39px; flex:0 0 auto; }
.happy-bubble {
  margin:0; position:relative; padding:9px 14px; background:var(--white);
  border:3px solid var(--pink-soft); border-radius:16px; font-size:13.5px; font-weight:900; color:#7a6a86;
}
.happy-bubble::before {
  content:''; position:absolute; left:-11px; top:50%; transform:translateY(-50%);
  border:7px solid transparent; border-right-color:var(--pink-soft);
}

/* ── 実況（さいきん おきたこと 3行）───────────────── */
.table-log {
  margin:10px 0 0; padding:8px 12px; background:var(--white);
  border:3px solid var(--pink-soft); border-radius:16px;
  display:flex; flex-direction:column; gap:2px;
}
.log-line { font-size:12.5px; font-weight:700; color:#a396ac; }
.log-line.now { font-size:14px; font-weight:900; color:#5c4a68; }

/* ── ★ かけの ボタン ───────────────────────────
   🎨アトへ：ここは「いくら 動くか」が 読めることが 命です。
   <b>に 何を するか、<small>に いくら 出すか が 入っています。 */
.act { margin-top:12px; }
/* T54：持っている コイン ―― ボタンの すぐ上に（社長指示）。
   上の帯と 同じ 黄色の コインふだ。金のまる（.pot と 同じ 絵）を 1つ そえる。 */
.act-coins {
  display:flex; align-items:center; gap:7px;
  margin:0 0 8px; width:max-content; max-width:100%;
  padding:5px 15px; border-radius:999px;
  background:#fff5d8; border:3px solid #f3d98a; color:#7d6321;
  font-size:14.5px; font-weight:900; white-space:nowrap;
  box-shadow:0 3px 0 rgba(196,155,110,.16);
}
.act-coins::before {
  content:''; flex:0 0 auto; width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #FFE690, #F1A426 70%, #C9840F);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.5), 0 1px 0 rgba(122,82,5,.35);
}
.act-row { display:flex; flex-wrap:wrap; gap:8px; }
.act-btn {
  flex:1 1 46%; min-width:132px; min-height:56px; padding:7px 10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:var(--white); border:3px solid var(--pink-soft); border-radius:18px;
  color:var(--pink-dark); box-shadow:0 4px 0 rgba(233,79,138,.13);
}
.act-btn b { font-size:16px; font-weight:900; line-height:1.1; }
.act-btn small { font-size:11px; font-weight:700; color:#8b7d95; line-height:1.2; }
.act-btn:hover { border-color:var(--pink); }
.act-btn.is-call  { background:var(--pink); border-color:var(--pink-deep); color:#fff; }
.act-btn.is-call small { color:#ffe6f0; }
.act-btn.is-raise { background:var(--gold-soft); border-color:var(--gold); color:#7a5205; }
.act-btn.is-raise small { color:#93743a; }
.act-btn.is-allin { background:#ffe0ea; border-color:#ff9dbd; color:#b03060; }
.act-btn.is-fold  { background:#f1eef5; border-color:#ddd4e6; color:#7c7186; }

/* レイズ を おしたときの パネル（T54：1枚きざみに 一本化。3択の .raise-opt は 撤去した） */
.raise-panel {
  margin-top:9px; padding:10px 12px 12px; background:#fffbe9;
  border:3px solid var(--gold); border-radius:18px;
}
.raise-title { margin:0 0 8px; font-size:13px; font-weight:900; color:#7a5205; text-align:center; }
.raise-stepper { display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:nowrap; }
.step-btn {
  flex:0 0 auto; min-width:46px; min-height:46px; border-radius:14px;
  background:var(--white); border:3px solid var(--gold); color:#7a5205; font-size:14px; font-weight:900;
}
.raise-input {
  flex:0 1 88px; min-width:70px; min-height:46px; text-align:center;
  border:3px solid var(--gold); border-radius:14px; background:var(--white);
  color:#7a5205; font-size:19px; font-weight:900; font-family:inherit;
}
.raise-note { margin:8px 0 9px; text-align:center; font-size:11.5px; font-weight:700; color:#93743a; }
.raise-ok {
  display:block; width:100%; min-height:48px; border-radius:15px;
  background:var(--gold); border:3px solid #c9840f; color:#fff; font-size:16px; font-weight:900;
}

.turn-note {
  margin:0; padding:12px; text-align:center; background:var(--white);
  border:3px dashed var(--pink-soft); border-radius:16px;
  font-size:13.5px; font-weight:900; color:#a396ac;
}
.next-hand {
  display:block; width:100%; min-height:56px; margin-top:2px; border-radius:18px;
  background:var(--pink); border:3px solid var(--pink-deep); color:#fff;
  font-size:17px; font-weight:900; box-shadow:0 5px 0 rgba(196,58,115,.3);
}

/* ※ 設定パネル（.settings／.set-btn 一式）は T54 で まるごと 撤去した（復活させないこと）。
   ロボットは「つよい」固定・かけ金は 1枚きざみに 一本化。 */

/* ── たしかめ用（作る人むけ）── */
.devbox {
  margin-top:16px; padding:10px 12px 12px; background:#f6f2fb;
  border:3px dashed #cdbfe0; border-radius:18px;
}
.dev-heading { margin:0 0 7px; font-size:12.5px; font-weight:900; color:#7c6a92; }
.dev-buttons { display:flex; flex-wrap:wrap; gap:7px; }
.dev-btn {
  min-height:38px; padding:0 14px; border:3px solid var(--pink-soft); background:var(--white);
  border-radius:999px; font-size:13px; font-weight:900; color:var(--pink-dark);
}
.dev-btn:hover:not(:disabled) { border-color:var(--pink); }
.dev-btn:disabled { opacity:.45; cursor:not-allowed; }
.dev-btn.primary { background:var(--pink); border-color:var(--pink-deep); color:#fff; }
.dev-btn.small { min-height:34px; padding:0 11px; font-size:12px; }
.dev-note { margin:9px 0 5px; font-size:11.5px; font-weight:700; color:#7c6a92; word-break:break-all; }
.dev-note code { background:#fff; border:2px solid #e2d7ef; border-radius:7px; padding:1px 6px; font-size:11.5px; }

/* ── せまい画面（スマホ）────────────────────────── */
@media (max-width:560px) {
  :root { --card-w:52px; }
  .app-shell { padding:10px 10px 22px; }
  .brand span { font-size:14px; }
  .board { gap:4px; }
  .board-wrap { padding:16px 6px 10px; }
  .seat-back { --back-h:42px; --back-step:13px; }
  .seat-name { font-size:11.5px; }
  .card .corner { font-size:10px; } .card .corner i { font-size:8px; } .card .pip { font-size:19px; }
  .seats { gap:4px; }
  .seat-coin { font-size:11px; } .seat-bet { font-size:10.5px; } .seat-last { font-size:10px; }
  .act-btn { flex:1 1 46%; min-width:0; }
  .act-btn b { font-size:15px; }
  .card.is-mini { --mini-w:34px; }
  .sd-who { font-size:12.5px; } .sd-hand { font-size:12px; } .sd-gain { font-size:12.5px; }
}
@media (max-width:380px) {
  :root { --card-w:46px; }
  .stage-chip { display:none; }
  .raise-input { flex:0 1 66px; min-width:56px; font-size:17px; }
  .step-btn { min-width:40px; padding:0 4px; font-size:13px; }
  /* 5枚 ならべても はみ出さない ように（横スクロールを 作らない） */
  .card.is-mini { --mini-w:31px; }
  .sd-cards { gap:3px; }
  .showdown { padding:10px 8px 11px; }
  .sd-row { padding:6px 6px; }
}

@media (prefers-reduced-motion:reduce) {
  .card { transition:none !important; }
}

/* ============================================================
   ここから下：仕上げ ― 🎨アト（T45）
   ------------------------------------------------------------
   ・見た目だけの 追記です。game.js／poker-core.js には 1文字も
     さわっていません。画面に 出る ことばも 1文字も 変えていません。
   ・ねらいは 5つ：
     ① 既存3本と 同じ会社の 作品に 見せる（木わくの台・ハッピーの名ふだ・空と花）
     ② かけの 5ボタンを「役割の色」で 分ける
        ―― 降りる＝あお灰色（席を立つ）／かけない・合わせる＝ピンク（続ける の 主役）
           上げる＝きいろ（もっと 出す）／ぜんぶかける＝むらさき（大勝負・1つだけの 色）
        ⚠️「降りる」と「ぜんぶかける」は 取り返しが つかない 2つ。
           冷たい色と あたたかい色の 両はしに 置いて、絶対に 見間違えない ように した
     ③ 今の役の名札を 主役に する（この画面で 一番 よく 読まれる 場所）
     ④ 光る5枚／うすい札の 差を はっきり（「場だけの役」に 気づく ための 部品）
     ⑤ 決着の 場面 ―― 勝った5枚が 順に 光る（紙ふぶきの 考え方・派手すぎない）
   ============================================================ */

:root {
  color-scheme: light;              /* 暗転させない（読めなくなる 事故を ふせぐ） */
  --wood-dark:#412817;
  --felt:#82ce84;
  --blue:#9FB3C8; --blue-deep:#7A90A8; --blue-dark:#5F7488;
  --purple:#B98CEA; --purple-deep:#8B57CE; --purple-dark:#6B3DAA;
  --gold-dark:#B7740C;
  --shadow-warm:0 4px 0 rgba(196,155,110,.18), 0 10px 22px rgba(150,110,70,.14);
}

/* ── 土台 ────────────────────────────────
   line-break:strict ＝ 行あたまに「ー」を 出さない（会社の 定番）。
   background-size で 空の 帯の 高さを 決めうちに して、
   画面の 高さで 空の 位置が ずれるのを とめる。 */
body {
  background-color:#fff7e8;
  background-image:linear-gradient(180deg,#BCEBF0 0%,#D9F2F6 100%);
  background-repeat:no-repeat;
  background-size:100% 172px;
  overflow-x:hidden;                /* よこスクロールは ぜったいに 出さない */
  line-break:strict;
  word-break:normal;
  overflow-wrap:break-word;
}

/* game.js が 作る 文（こちらで 折り返し位置を 直せない ところ）は
   ことばの きれめで 折り返す。対応していない ブラウザは 読みとばすだけ。 */
.seat-name, .seat-last, .happy-bubble,
.log-line, .turn-note, .sd-lead, .sd-out, .sd-pots, .raise-note,
.over-note, .tape, .me-tag, .ranks-desc {
  word-break:auto-phrase;
}

/* ── 上の帯：もどるボタン（既存3本と 同じ 白い丸ピルの 手ざわり） ── */
.back {
  box-shadow:0 3px 0 rgba(196,155,110,.18);
  transition:transform .12s ease, box-shadow .12s ease;
}
.back:hover { transform:translateY(-2px); box-shadow:0 5px 0 rgba(196,155,110,.2); }
.back:active { transform:translateY(2px); box-shadow:0 1px 0 rgba(196,155,110,.18); }

/* ★★ T289 ― ★上の帯の「◀ ゲームを選ぶ」の 見えない 押し代（★T118 の 型）★★
   ★ わけ … ★この ボタンは **12画面ずっと 出ている ただ1つの ボタン**。
            ★★T288 で 数えたら 高さ **38px**で、★44px に **6px** 足りて いません。
   ★ 直しかた … ★**見た目 38px の まま。★的だけ 44px。**★帯は 1pxも 伸びません
                （★となりの `.quit-btn` が 44px なので、★帯の 高さは もともと 44px 分 あります）。
   ★ はみ出す 先 … ★上下に **3px ずつ**。★12画面 ぜんぶで 押せる ものは いません【★T289 で 数えた】。
   ⚠️★ よこには 広げない（`left:0;right:0`）―― ★右どなりは `.brand`（★ハッピーと 題）です。
   ⚠️★ `.topbar` で しぼって います。★この本に `.card.back` は 今 いませんが、
        ★★ふせた 札が あとから 増えても 巻きこまない ように（★T275 の しくじりを 先に ふさぐ）。 */
/* ⚠️★★ z-index:0 は 飾りでは ありません（★T289 で 写真の 画素が 教えて くれた）★★
   ★ `position:relative` だけを 足すと、★この ボタンは **あとから 塗られる 側**に 移ります。
     ★★すると 下の 卓（`.board-wrap`）の **丸かどの ふちの 色が ±1 だけ ずれ**、
        ★★★写真の 画素が **27画素** 鳴きました【★実測・ホールデム 812×375 ほか 5画面】。
   ★ ★目では 見えない ずれ（255段階の 1）ですが、★**0で ない ものを 0とは 書きません**。
     ★★`z-index:0` を 足すと **0画素**に 戻り、★的は 44px の まま でした【★実測】。
   ⚠️★ `z-index:2` では **直りません**（★27画素の まま）。★0 で ある ことに 意味が あります。 */
.topbar .back { position:relative; z-index:0; }
.topbar .back::after {
  content:''; position:absolute; left:0; right:0;
  top:50%; height:44px; transform:translateY(-50%);
}
.back:focus-visible, .act-btn:focus-visible,
.next-hand:focus-visible, .over-btn:focus-visible, .raise-ok:focus-visible,
.step-btn:focus-visible, .dev-btn:focus-visible {
  outline:4px solid var(--pink-deep); outline-offset:3px;
}
.brand span { text-shadow:0 2px 0 rgba(255,255,255,.85); }
.tape { box-shadow:0 3px 0 rgba(196,155,110,.14); }

/* ── 場：大富豪と 同じ 木わく＋みどりの ラシャ ──
   わく本体を 木目に して、ラシャは ::before で 内がわに しく
   （HTMLは 変えずに 2そう作りに できる）。 */
.board-wrap {
  padding:24px 12px 14px;
  border:5px solid var(--wood-dark); border-radius:26px;
  background:linear-gradient(135deg,#6b3d1e,#bf7a34 17%,#6d3f1f 33%,#c08139 50%,#66391b 73%,#b86e2a);
  box-shadow:0 7px 0 rgba(86,53,38,.28);
}
.board-wrap::before {
  content:''; position:absolute; inset:9px; z-index:0; border-radius:15px;
  border:3px solid #3f863f;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 2px,transparent 2px 8px), var(--felt);
  box-shadow:inset 0 0 20px #4c9d51;
}
.board-wrap > * { position:relative; z-index:1; }
/* 角の クローバー（かざり。ことばでは ないので 足してよい） */
.board-wrap::after {
  content:'♣'; position:absolute; z-index:1; right:11px; bottom:6px;
  font-size:16px; color:#F6D69B; opacity:.75; transform:rotate(150deg); pointer-events:none;
}

/* ポット：金の コインを 1まい そえる（「まん中の 数字が もらえる コイン」を 絵で いう） */
.pot {
  display:flex; align-items:center; gap:7px;
  box-shadow:0 3px 0 rgba(122,82,5,.2);
}
.pot::before {
  content:''; flex:0 0 auto; width:15px; height:15px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #FFE690, #F1A426 70%, #C9840F);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.5), 0 1px 0 rgba(122,82,5,.35);
}

/* ── ロボットの 席：いま 番の人が 息づかいで わかる ── */
.seat { transition:border-color .15s ease, background .15s ease, opacity .2s ease; }
.seat.is-turn { animation:turnPulse 1.5s ease-in-out infinite; }
@keyframes turnPulse {
  0%, 100% { box-shadow:0 4px 0 rgba(233,79,138,.18); }
  50%      { box-shadow:0 4px 0 rgba(233,79,138,.18), 0 0 0 6px rgba(255,140,184,.22); }
}

/* ── 進み具合バー：今いる ところに 影を つけて 立たせる ── */
.steps { box-shadow:0 3px 0 rgba(196,155,110,.14); }
.step.now { box-shadow:0 2px 0 var(--pink-dark); }

/* ============================================================
   ③ 役の強さの 一覧（T54で ポーカーから 持ちこみ）
      ※ 今の役の名札（③）と 光る5枚（④）の 仕上げは T54 で 撤去した。
   ============================================================ */
.ranks-toggle {
  box-shadow:0 3px 0 rgba(196,155,110,.14);
  transition:transform .1s ease, box-shadow .1s ease, border-color .12s ease;
}
.ranks-toggle:hover { transform:translateY(-1px); }
.ranks-toggle:active { transform:translateY(2px); box-shadow:none; }
.ranks-toggle:focus-visible { outline:4px solid var(--pink-deep); outline-offset:3px; }
.ranks-box {
  border-radius:18px;
  box-shadow:0 4px 0 rgba(196,155,110,.14);
  animation:notePop .3s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes notePop {
  0%   { opacity:0; transform:scale(.85) translateY(4px); }
  100% { opacity:1; transform:none; }
}
.ranks-list { gap:3px; }
.ranks-row { padding:5px 8px; }
.ranks-row:nth-child(even) { background:#FFFBF2; }   /* 1行おきの しましま */
.ranks-no {
  flex:0 0 40px; padding:2px 0; border-radius:999px;
  background:#FFF5D8; border:2px solid #F3D98A; color:#7D6321;
  font-size:11px; line-height:1.4;
}
/* 上位3役は 金の ふだ ＝「上に あるほど 強い」を 絵でも いう */
.ranks-row:nth-child(-n+3) .ranks-no {
  background:linear-gradient(180deg,#FFF3B0,#FFE071);
  border-color:var(--gold); color:#7A5205;
}
/* 今の役の 行（コーダの 印は 消さない・上から 塗り直して 立たせる） */
.ranks-row.is-me {
  background:var(--pink-soft); border-color:var(--pink);
  box-shadow:0 2px 0 rgba(233,79,138,.18);
}
.ranks-row.is-me .ranks-no {
  background:var(--pink); border-color:var(--pink-deep); color:#fff;
}
.ranks-row.is-me .ranks-name { color:var(--pink-dark); }

/* ============================================================
   ② かけの 5ボタン ―― 役割の色（ブラックジャックの 色分けが 手本）
   ============================================================ */
.act-btn {
  border:4px solid #fff; border-radius:20px; min-height:60px;
  transition:transform .1s ease, box-shadow .1s ease;
}
.act-btn b { font-size:17px; }
.act-btn:hover { border-color:#fff; transform:translateY(-2px); }
.act-btn:active { transform:translateY(3px); }

/* 降りる ＝ あお灰色（席を立つ・冷たい色は これだけ） */
.act-btn.is-fold {
  background:linear-gradient(180deg,#AFC3D6,var(--blue-deep));
  color:#fff; box-shadow:0 5px 0 var(--blue-dark), 0 9px 14px rgba(95,116,136,.2);
}
.act-btn.is-fold small { color:#EAF1F7; }
.act-btn.is-fold:active { box-shadow:0 2px 0 var(--blue-dark); }

/* かけない・合わせる ＝ ピンク（「続ける」の 主役。2つは 同時に 出ないので 同じ席の色） */
.act-btn[data-act="check"], .act-btn.is-call {
  background:linear-gradient(180deg,var(--pink),var(--pink-deep));
  border-color:#fff; color:#fff;
  box-shadow:0 5px 0 var(--pink-dark), 0 9px 14px rgba(196,58,115,.22);
}
.act-btn[data-act="check"] small, .act-btn.is-call small { color:#FFE6F0; }
.act-btn[data-act="check"]:active, .act-btn.is-call:active { box-shadow:0 2px 0 var(--pink-dark); }

/* 上げる ＝ きいろ（もっと 出す。ブラックジャックの「カードをひく」と 同じ 役割の色） */
.act-btn.is-raise {
  background:linear-gradient(180deg,#FFD86B,#F0A21E);
  color:#6B4405; box-shadow:0 5px 0 var(--gold-dark), 0 9px 14px rgba(209,140,18,.22);
}
.act-btn.is-raise small { color:#8A5A08; }
.act-btn.is-raise:active { box-shadow:0 2px 0 var(--gold-dark); }

/* ぜんぶかける ＝ むらさき（画面で ここにしか ない色 ＝ 大勝負だと 一目で わかる） */
.act-btn.is-allin {
  background:linear-gradient(180deg,var(--purple),var(--purple-deep));
  color:#fff; box-shadow:0 5px 0 var(--purple-dark), 0 9px 14px rgba(139,87,206,.24);
}
.act-btn.is-allin small { color:#F3E8FF; }
.act-btn.is-allin:active { box-shadow:0 2px 0 var(--purple-dark); }

/* レイズパネル・つぎのハンドへ も 同じ 手ざわりに */
.step-btn { transition:transform .1s ease, box-shadow .1s ease; }
.step-btn:active { transform:translateY(2px); }
.raise-ok { box-shadow:0 4px 0 #A66B0A; transition:transform .1s ease, box-shadow .1s ease; }
.raise-ok:active { transform:translateY(3px); box-shadow:0 1px 0 #A66B0A; }
.next-hand {
  border:4px solid #fff;
  box-shadow:0 6px 0 var(--pink-dark), 0 10px 16px rgba(196,58,115,.22);
  transition:transform .1s ease, box-shadow .1s ease;
  animation:nextBreath 2.6s ease-in-out 1.2s infinite;
}
.next-hand:active { transform:translateY(3px); box-shadow:0 2px 0 var(--pink-dark); animation:none; }
@keyframes nextBreath {
  0%, 88%, 100% { transform:none; }
  94%           { transform:scale(1.02); }
}

/* ============================================================
   ⑤ 決着 ―― 勝った5枚が 順に 光る（ブラックジャックの 紙ふぶきの
      考え方 ＝ よろこびは 出すが、数字と 矢印の じゃまは しない）
      .hidden が 外れた しゅんかんに アニメが 再スタートする ので JS いらず。
   ============================================================ */
.showdown {
  border-width:4px;
  box-shadow:0 6px 0 rgba(241,164,38,.2), 0 12px 22px rgba(241,164,38,.14);
  animation:sdIn .32s cubic-bezier(.2,.9,.3,1.15);
}
@keyframes sdIn {
  from { opacity:0; transform:translateY(10px) scale(.97); }
  to   { opacity:1; transform:none; }
}
.sd-title { font-size:21px; letter-spacing:1px; text-shadow:0 2px 0 var(--gold-soft); }

/* 勝った行（👑）―― 大富豪の 1位の 行と 同じ 金の グラデーション */
.sd-row { position:relative; }
.sd-row.is-win {
  background:linear-gradient(180deg,#FFF3B0,#FFE071);
  border:3px solid var(--gold);
  box-shadow:0 3px 0 rgba(196,155,110,.26);
}
.sd-row.is-win .sd-who { font-size:15px; color:#8A5A08; }
.sd-row.is-win::after {
  content:'✨'; position:absolute; right:9px; top:-11px; font-size:17px; pointer-events:none;
  animation:sparkIn .7s ease-out both .45s;
}
@keyframes sparkIn {
  0%   { opacity:0; transform:scale(.4) rotate(-18deg); }
  55%  { opacity:1; transform:scale(1.2) rotate(6deg); }
  100% { opacity:1; transform:scale(1) rotate(0); }
}

/* もらった コイン ＝ みどりの ふだ／±0 ＝ うすい ふだ */
.sd-gain {
  padding:2px 10px; border-radius:999px; font-size:13px;
  background:var(--mint-soft); border:2px solid var(--mint); color:#1F6B32;
}
.sd-gain.is-zero { background:#F1EDF5; border-color:#E0D8E8; color:#a396ac; }

/* ★ 勝った5枚が 左から 順に 光る（0.5秒 × ずらし ＝ ぜんぶで 1秒たらず） */
.sd-row.is-win .card.is-mini {
  border-color:var(--gold);
  box-shadow:0 0 0 2px var(--gold-soft), 1px 2px 2px rgba(49,41,42,.25);
  animation:winCard .5s ease-out backwards;
}
.sd-row.is-win .sd-slot:nth-child(1) .card.is-mini { animation-delay:.08s; }
.sd-row.is-win .sd-slot:nth-child(2) .card.is-mini { animation-delay:.16s; }
.sd-row.is-win .sd-slot:nth-child(3) .card.is-mini { animation-delay:.24s; }
.sd-row.is-win .sd-slot:nth-child(4) .card.is-mini { animation-delay:.32s; }
.sd-row.is-win .sd-slot:nth-child(5) .card.is-mini { animation-delay:.40s; }
@keyframes winCard {
  0%   { opacity:.5; transform:translateY(6px); }
  55%  { opacity:1; transform:translateY(-4px);
         box-shadow:0 0 0 3px var(--gold-soft), 0 0 14px rgba(241,164,38,.85); }
  100% { opacity:1; transform:none; }
}

/* ⚠️ 決め手の ▲（キッカーの 説明の 全部）は、光りより 上に ―― ピンクの わくを 最後に 勝たせる */
.sd-row.is-win .card.is-mini.is-deciding,
.card.is-mini.is-deciding {
  border-color:var(--pink-deep);
  box-shadow:0 0 0 3px var(--pink-soft), 1px 2px 2px rgba(49,41,42,.3);
}

/* ── ゲームオーバー：責めない・やわらかく（ブラックジャックと 同じ 考え） ── */
.over-box { box-shadow:0 5px 0 rgba(233,79,138,.14); }
.over-btn {
  border:4px solid #fff;
  box-shadow:0 5px 0 var(--pink-dark), 0 9px 14px rgba(196,58,115,.22);
  transition:transform .1s ease, box-shadow .1s ease;
}
.over-btn:active { transform:translateY(3px); box-shadow:0 2px 0 var(--pink-dark); }

/* ============================================================
   ① ハッピー ―― 名ふだ＋ふきだしの 2まいしっぽ（既存3本と 同じ 見せ方）
   ============================================================ */
.happy-row { align-items:flex-end; }
.happy-wrap { position:relative; flex:0 0 auto; width:64px; text-align:center; padding-bottom:7px; }
.happy-cat {
  width:100%; height:48px; display:block;
  animation:happyBob 3s ease-in-out infinite;
  filter:drop-shadow(0 4px 4px rgba(150,110,70,.22));
}
@keyframes happyBob {
  0%, 100% { transform:translateY(0) rotate(0); }
  50%      { transform:translateY(-4px) rotate(-1.5deg); }
}
.happy-name {
  position:absolute; left:50%; bottom:-2px; transform:translateX(-50%);
  z-index:2; margin:0; padding:0 7px;
  font-size:10.5px; font-weight:900; line-height:1.7; letter-spacing:-.02em;
  color:var(--pink-dark); background:var(--white);
  border:2px solid var(--pink); border-radius:999px;
  white-space:nowrap; box-shadow:0 2px 0 rgba(196,155,110,.18); pointer-events:none;
}
.happy-bubble {
  margin-bottom:9px;
  border-color:var(--pink); color:var(--pink-dark); font-size:14px;
  box-shadow:0 3px 0 rgba(196,155,110,.18);
}
.happy-bubble::before {
  left:-16px; border-width:8px 16px 8px 0;
  border-color:transparent var(--pink) transparent transparent;
}
.happy-bubble::after {
  content:''; position:absolute; left:-10px; top:50%; transform:translateY(-50%);
  border-style:solid; border-width:5px 11px 5px 0;
  border-color:transparent #fff transparent transparent;
}

/* ── 実況・考え中 ── */
.table-log { box-shadow:0 3px 0 rgba(196,155,110,.14); }

/* ※ 設定パネルの 仕上げ（.settings／.set-btn）は T54 で 撤去した */

/* ── たしかめ用：たたんである（details）。遊ぶ人の 目に 入りにくく ── */
.devbox { background:#F5F2F9; border-color:#DFD5EA; opacity:.85; }
.devbox:hover, .devbox[open] { opacity:1; }
.devbox > summary.dev-heading {
  cursor:pointer; list-style:none; margin:0; user-select:none;
  color:#8f81a6; font-size:12px;
}
.devbox > summary.dev-heading::-webkit-details-marker { display:none; }
.devbox > summary.dev-heading::before { content:'▸ '; }
.devbox[open] > summary.dev-heading::before { content:'▾ '; }
.devbox[open] > summary.dev-heading { margin-bottom:7px; }

/* ── せまい画面（スマホ・375px）────────────────── */
@media (max-width:560px) {
  body { background-size:100% 118px; }
  .board-wrap { padding:20px 8px 10px; border-width:4px; border-radius:18px; }
  .board-wrap::before { inset:7px; border-width:2px; border-radius:11px; }
  .board-wrap::after { font-size:13px; right:8px; bottom:4px; }
  .pot { font-size:13.5px; padding:4px 14px; }
  .pot::before { width:13px; height:13px; }
  .act-btn { min-height:56px; border-width:3px; border-radius:17px; }
  .act-btn b { font-size:15.5px; }
  .act-coins { font-size:13px; padding:4px 12px; }
  .act-coins::before { width:12px; height:12px; }
  .ranks-no { flex-basis:36px; font-size:10px; }
  .ranks-name { font-size:12.5px; }
  .ranks-desc { font-size:11px; }
  .happy-wrap { width:56px; }
  .happy-cat { height:42px; }
  .happy-name { font-size:9.5px; }
  .happy-bubble { font-size:12.5px; }
  .sd-title { font-size:18px; }
  .sd-row.is-win .sd-who { font-size:13.5px; }
  .sd-gain { font-size:12px; padding:1px 8px; }
  .next-hand { border-width:3px; }
  .over-btn { border-width:3px; }
}

/* 動きが にがてな人には 動かさない（OSの せっていに したがう） */
@media (prefers-reduced-motion:reduce) {
  .happy-cat, .seat.is-turn, .next-hand,
  .sd-row.is-win .card.is-mini, .sd-row.is-win::after,
  .showdown, .ranks-box { animation:none !important; }
}

/* ============================================================
   ★ かけたコインの 山（T56・社長指示「テーブルに いくら かけたか 絵で」）
   ------------------------------------------------------------
   つみ方：コイン10枚で 柱1本。柱を よこに ならべる。
           100枚 ＝ 柱10本で 満杯。それより 多くても 絵は ふえない。
           数字（絵の となり）は いつも 本当の 枚数を 出す。
   ・0枚の ときは 山を 出さない（絵も 数字も 出ない）。
   ・コイン1枚の 大きさは いつも 同じ。ふえたら 柱が 横に のびる
     ＝「多いほど 山が 大きい」が くずれない。せまい ときは 柱どうしが
     かさなる（伏せ札 .seat-back と 同じ 手）。かさね方は 見た目の係（index.html）が 決める。
   ・色は ポットの 金まる（.pot::before）と 同じ 金いろ ＝ 画面の 色を ふやさない。
   ・光らせない・点滅させない（設計図 §5.5「強調は 画面に 1種類だけ」＝
     強調は「すてる？」の えらび だけ）。
   ・4人の コインは ぜんぶ 同じ 大きさ・同じ かさね方。ならべて くらべる ため。
   ============================================================ */
.chips {
  --chip-w:16px;                            /* コイン1枚の 横はば（見た目の係が 入れなおす）*/
  --chip-pitch:10px;                        /* 柱と 柱の あいだ（同上）*/
  --chip-h:calc(var(--chip-w) * .44);       /* よこから 見た コイン ＝ ひらたい だ円 */
  --chip-step:calc(var(--chip-w) * .2);     /* 1枚 かさねるごとに 上へ ずらす 分 */
  display:flex; align-items:flex-end; justify-content:center;
  gap:5px; max-width:100%; margin:3px 0 0;
}
.chips-pile {
  display:flex; align-items:flex-end; flex:0 0 auto;
  height:calc(var(--chip-step) * 9 + var(--chip-h));   /* 柱1本ぶん（10枚）の 高さ */
}
/* 柱1本。左の 柱に 少し かさねる（マイナスの マージン）*/
.chip-col {
  position:relative; flex:0 0 auto; width:var(--chip-w); height:100%;
  margin-left:calc(var(--chip-pitch) - var(--chip-w));
}
.chip-col:first-child { margin-left:0; }
.chip {
  position:absolute; left:0; right:0; height:var(--chip-h); border-radius:50%;
  background:radial-gradient(ellipse at 34% 28%, #FFE690, #F1A426 68%, #C9840F);
  /* ふち：下に こい線・左に うすい線 ＝ 柱が かさなっても
     「まるい コインが 何枚も ある」ことが 見わけられる（伏せ札の 重ね方と 同じ 考え）*/
  box-shadow:0 1px 0 rgba(150,98,12,.85), -1px 0 0 rgba(150,98,12,.5),
             inset 0 0 0 1px rgba(255,255,255,.5);
}
/* 絵の となりの 数字（社長指示）。ことばは そえない ―― 数字だけ。 */
.chips-num { flex:0 0 auto; font-size:11px; font-weight:900; color:#5a4110; line-height:1; }

/* まん中の ポット ―― いちばん 大きく つもる ところ。緑の ラシャの 上に のる */
.chips-slot { display:flex; justify-content:center; margin:0 0 8px; }
.chips-slot:empty { display:none; }
.chips.is-pot { margin:0; }
.chips.is-pot .chips-num { font-size:16px; color:#fffbe9; text-shadow:0 2px 0 rgba(63,38,16,.55); }

/* 自分の ぶんは 「あなたの手札」の 帯の 中に */
.chips.is-me { margin:0; }

/* つまれた しゅんかんだけ、ごく 小さく 落ちる（設計図 §5.5：動きは ひかえめに）*/
@keyframes chipDrop { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:none; } }
.chip.is-new { animation:chipDrop .18s ease-out both; }
@media (prefers-reduced-motion:reduce) { .chip.is-new { animation:none; } }

/* ============================================================
   ★ T57 ―― 画面を けずって シンプルに（社長指示・2026-08-19）― 🎨アト
   ------------------------------------------------------------
   ⚠️ ポーカー（../poker/style.css）と 中身を 完全に そろえてある。
      片方を 直したら もう片方も 同じに 直すこと（操作感の 統一・先週の 約束）。

   なぜ：「他社の ポーカー画面くらい シンプルに したい。
          スライド（スクロール）しないで 遊びたい」（社長）。
          けずる前は たて 1238px。パソコン（900px）でも スクロールが 要った。
   やったのは「消す・動かす・つめる」の 3つだけ。
     ・画面の ことばは 1文字も 変えていない（消す・動かすだけ）
     ・game.js ／ poker-core.js には 1バイトも さわっていない
     ・id・class名も 変えていない（game.js が さがすため）

   ① 消す（4つ）―― どれも DOMは 残して 見た目だけ 消す。
      game.js が $('tape') $('steps') $('btnPlay') を 起動時に さがすので、
      要素ごと 取ると ゲームが 止まる。
        .tape   … コインは かけボタンの 上に もう 出ている
        .steps  … 場の カードが ふえれば 分かる
        .devbox … お客さんに 見せる 物では ない（消しわすれ）
                  ※ HOLDEM.autoPlay() などの 命令は そのまま 生きている
        ふきだしの 行 … 下の 実況欄と 口が 2つ あった
                  → ハッピーの かおは 実況欄の 中へ 引っこし（index.html）
   ② 動かす：役の強さの 一覧（.ranks）を 画面の 一番下へ（index.html）
   ③ 席の 重複：「出した ◯」を 隠す（コインの 山＋数字が 役目を する）
   ④ かけの ボタンは かならず 横1行。折り返さない（320pxでも）
   ⑤ すきまを つめる（部品は 減らさず、あいだの 余白だけ 小さく）
   ============================================================ */

/* ── ① 消す（DOMは 残す・見た目だけ 消す）────────────── */
.tape,
.steps,
.devbox { display:none !important; }

/* 自分の ふだの「出した ◯」も 同じ 理由で 隠す
   （印は index.html の 見た目せんようの 係が 付ける）*/
.me-tag.is-dup { display:none !important; }

/* ── ③ 席の「出した ◯」―― コインの 山が その役目を する ──
   ⚠️ 要素は 残す。index.html の コインの 係が この 行の
      すぐ下に コインの 山を さしこんでいる。 */
.seat-bet { display:none !important; }

/* ── ハッピー ＋ 実況 ＝ ひとつの メッセージ欄 ───────────
   白い 角丸の 箱は 1つだけ。左に ハッピーの かお、
   右の 1行目が ハッピーの セリフ、その下が 実況3行。 */
.log-row {
  display:flex; align-items:center; gap:9px;
  margin:7px 0 0; padding:5px 13px 6px;
  background:var(--white); border:3px solid var(--pink-soft); border-radius:18px;
  box-shadow:0 3px 0 rgba(196,155,110,.14);
}
.log-row .happy-wrap { position:relative; flex:0 0 auto; width:52px; text-align:center; padding-bottom:6px; }
.log-row .happy-cat  { width:100%; height:40px; display:block; }
.log-body { flex:1 1 auto; min-width:0; }

/* セリフ ―― ふきだしの わく・しっぽは 消す（かこいは 外の 箱 1つ） */
.log-row .happy-bubble {
  margin:0 0 3px; padding:0;
  background:none; border:0; box-shadow:none; border-radius:0;
  font-size:14px; font-weight:900; color:var(--pink-dark);
}
.log-row .happy-bubble::before,
.log-row .happy-bubble::after { content:none; display:none; }

/* 実況 ―― 外の 箱に 入ったので、自分の わく・背景は 消す */
.log-row .table-log {
  margin:0; padding:0;
  background:none; border:0; box-shadow:none; border-radius:0;
}

/* ── ④ かけの ボタン ―― かならず 横1行 ─────────────
   同時に 出るのは 最大4つ（チェックと コールは 同時に 出ない）。
   4つで 組んで、5つ 出ても くずれない。
   下の 小さい 日本語（社長指示・T54）は 残す ―― 字を 小さく、
   余白を つめて 入れる。押しやすさ（44px以上）は 落とさない。 */
.act-row {
  display:flex; flex-wrap:nowrap; gap:6px; align-items:stretch;
}
.act-btn {
  flex:1 1 0; min-width:0; min-height:52px;
  padding:6px 5px; gap:1px; border-width:3px; border-radius:16px;
}
.act-btn b     { font-size:clamp(13px, 2.4vw, 17px); line-height:1.15; }
.act-btn small { font-size:clamp(9.5px, 1.35vw, 11.5px); line-height:1.18; }

/* ── ⑤ すきまを つめる（部品は 減らさない・余白だけ）──────── */
.app-shell   { padding:10px 14px 10px; }
.topbar      { margin-bottom:7px; }
.seats       { padding:0 0 5px; }
.board-wrap  { padding:18px 12px 8px; }
.pot         { margin:0 auto 6px; }
.chips-slot  { margin:0 0 5px; }
.mine        { margin-top:7px; padding:5px 13px 7px; }
.act         { margin-top:7px; }
.act-coins   { margin:0 0 6px; }
.ranks       { margin-top:7px; }

/* ── せまい画面（スマホ）―― 1行の まま つめる ───────────── */
@media (max-width:560px) {
  .app-shell { padding:8px 10px 12px; }
  .act-btn   { min-height:50px; padding:5px 3px; border-width:3px; border-radius:14px; }
  .act-row   { gap:5px; }
  .log-row   { gap:7px; padding:5px 10px 6px; }
  .log-row .happy-wrap { width:46px; }
  .log-row .happy-cat  { height:36px; }
  .log-row .happy-bubble { font-size:12.5px; }
}
@media (max-width:380px) {
  .act-row { gap:4px; }
  .act-btn { padding:5px 2px; }
}

/* ============================================================
   ここから下：T59 ― レイズの パネルを「浮かせる」 🎨アト
   ------------------------------------------------------------
   何が おきていたか：
     「レイズ ▾」を おすと パネルが ボタンの 下に つながって 出るので、
     ページが 180px のびて、「決定」が 画面の 外へ 落ちていた。
     ＝ スクロールしないと 決められない（社長の 一番の 要望が こわれる）。
   どう 直したか（＝ パネルを 浮かせる）：
     パネルを 流れから 外して（position:absolute）、かけボタンの すぐ上に 出す。
     ページの 高さは 1pxも 動かない ＝ T57の 高さ（833px／872px）の まま。
     「決定」は 画面の 中に いる ボタンの 上に 出るので、かならず 見える。
   とじる 道（社長指示）：
     「レイズ ▾」は パネルの 下に 出たまま 生きている。
     もう一度 おせば とじる ―― 前と 同じ 道を 消していない。
   ⚠️ さわったのは この CSS と、パネルを 置く 外側の 器（index.html）だけ。
      game.js・poker-core.js／id・class名／画面の ことば は 1文字も 変えていない。
   ============================================================ */

/* 器（index.html で 足した .act-stack）―― 浮かせる ときの 基準点 */
.act-stack { position:relative; }

.raise-panel {
  /* ① ページを おし広げない ―― 流れから 外して ボタンの すぐ上へ */
  position:absolute; left:0; right:0; bottom:calc(100% + 8px); z-index:40;
  margin:0;
  /* ② うすく する ―― 見出し｜数の 増減｜合計の 文｜決定 を 横1行に たたむ */
  padding:8px 12px 9px;
  display:grid; align-items:center; gap:4px 10px;
  grid-template-columns:auto auto minmax(0,1fr) minmax(128px,170px);
  grid-template-areas:"title step note ok";
  /* ③ 浮いて 見える ように 影を 深く（下の 画面から うき上がらせる） */
  box-shadow:0 6px 0 rgba(196,155,110,.22), 0 14px 28px rgba(122,82,5,.18);
  animation:raise-pop .16s ease-out;
}
.raise-panel .raise-title   { grid-area:title; margin:0; white-space:nowrap; }
.raise-panel .raise-stepper { grid-area:step; }
.raise-panel .raise-note    { grid-area:note; margin:0; }
.raise-panel .raise-ok      { grid-area:ok;   margin:0; }

/* ボタンから ぽんと 出る 感じ（.hidden が 外れた しゅんかんに 動く ので JS いらず）*/
@keyframes raise-pop {
  from { opacity:0; transform:translateY(9px) scale(.985); }
  to   { opacity:1; transform:none; }
}

/* ── ちゅうくらいの 画面：2行に する（横1行だと 数の 増減が つぶれる）── */
@media (max-width:640px) {
  .raise-panel {
    padding:8px 10px 9px; gap:5px 9px;
    grid-template-columns:minmax(0,1fr) minmax(112px,150px);
    grid-template-areas:
      "title note"
      "step  ok";
  }
  .raise-panel .raise-title { text-align:left; }
}

/* ── せまい画面（スマホ）：たてに つむ。横スクロールを ぜったいに 作らない ──
   すきま（gap）と 余白だけ つめて 低くする ―― 浮かせる パネルは
   低いほど 手札を かくさない。字の 大きさ・ことばは 変えていない。 */
@media (max-width:470px) {
  .raise-panel {
    padding:6px 9px 8px; gap:3px;
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:
      "title"
      "step"
      "note"
      "ok";
  }
  .raise-panel .raise-title { text-align:center; white-space:normal; }
}

@media (prefers-reduced-motion:reduce) {
  .raise-panel { animation:none; }
}

/* ============================================================
   ★★★ T277 ―「↻ さいしょから」（★アトの 型・T273 §2 ／ 設計図 追記⑩）★★★
   ------------------------------------------------------------
   ★ 置き場所 … ★上の帯の いちばん 右。★はじめの 画面が 無い 本なので、
                ★★出し入れ しません（★いつも 出たまま）。
   ★ 大きさ  … ★指の的 44×44。
   ★ はみ出し … ★この本の 帯は `.back` の 38px で 決まります【実測・13画面 とも 38px】。
                ★44 − 38 ＝ ★**6px** が はみ出します。
                ★★はじめは **下に** 返しました（margin-bottom:-6px）。★ところが
                   ★写真の 画素が 鳴きました ―― ★**96/880画素**。
                   ★★下に あったのは ★ロボットの 席の 箱の **右上の 丸い かど**でした。
                ★★★→ ★**上に 返す ことに しました**（margin-top:-6px）。
                   ★上には 空が 8〜10px あります【★実測 tb.y＝8／10】ので、
                   ★★はみ出しは そこに 収まり、★下には 1pxも 出ません。
                   ★★★帯も 1pxも のびません（★外まわり ＝ 44−6 ＝ 38px ＝ .back と 同じ）。
                ⚠️★ margin-**bottom** を マイナスに すると **下**に、
                     ★margin-**top** を マイナスに すると **上**に はみ出します。
                     ★★同じ「−6px」でも 向きが 逆です。
   ★ 色      … ★うすみどり（★20本の 上の帯で 空いて いた 唯一の 色）。
   ⚠️★ position:relative; z-index:2 が 無いと 指の的が 36〜42px に 減ります。
   ============================================================ */
.quit-btn {
  position:relative; z-index:2;
  order:99; flex:0 0 auto; align-self:flex-start; margin-top:-6px;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px; padding:0 10px;
  background:#B7EDC9; border:3px solid #2F7D4C; border-radius:999px;
  color:#22633F; font-family:inherit; font-size:11.5px; font-weight:900; line-height:1;
  white-space:nowrap; cursor:pointer;
  box-shadow:0 3px 0 rgba(47,125,76,.22);
  transition:transform .12s ease, box-shadow .12s ease;
}
.quit-btn .quit-icon { margin-right:4px; }
/* ★★ T281 ― ★↻ を 字では なく **絵（インラインSVG）**で 描く（★アトの 型・T279）★★
   ★ わけ：★`↻` の 形を 決めて いるのは ★その端末の フォントで、★私たちには 直せません。
     ★★実測：★字の ときは **9.77×11.5px**で、★★やじりが **1画素も 出て いません**でした。
   ★ ★外部フォント 0・画像ファイル 0・通信 0（★SVG は HTML の 中）。
   ★ ★`display:none` の 決まりは そのまま 効きます（★下の @media は 1行も 触って いません）。 */
.quit-btn svg.quit-icon { width:16px; height:16px; flex:0 0 auto; pointer-events:none; }
.quit-btn .qi-arc { fill:none; stroke:currentColor; stroke-width:3.2; stroke-linecap:round; }
.quit-btn .qi-tip { fill:currentColor; stroke:none; }
.quit-btn:hover  { transform:translateY(-2px); box-shadow:0 5px 0 rgba(47,125,76,.24); }
.quit-btn:active { transform:translateY(2px); box-shadow:0 1px 0 rgba(47,125,76,.22); }
.quit-btn:focus-visible { outline:4px solid var(--pink-deep); outline-offset:3px; }

/* ★★ はば 520px 以下は「◀ ゲームを選ぶ」を「◀」だけに します（★社長のお決め②）★★ */
@media (max-width:520px) {
  .back .back-word { display:none; }
  .back { min-width:44px; justify-content:center; padding:0 10px; }
}

/* ⚠️★★ この本だけの 手当て ―― ★題が 長い（「テキサス・ホールデム」10字）★★
   ★ 上の帯に 4つめが 増えた ぶん、★せまい 画面では 題が 入りきりません。
     ★★数えた 結果【実測】：★390×844 で 題に 使える はばは 122px、
        ★★★中身は 181px（★ハッピーの 顔 34 ＋ すきま 7 ＋ 字 140）。
        ★★このままだと「テキサス・ホー…」と ★**点々で 切れます**。
   ★ 手当て（★いたみの 小さい ほうから）：
     ★ ①上の帯の ハッピーの 顔を 消す（★−41px）
        ★★★ハッピーは 消えません ―― ★実況の ふきだし（.log-row）に ★絵も 名札も
           ★★そのまま 出て います。★ハーツが ≦360px で やっている 形と 同じ。
     ★ ②ボタンの 字を 1段 下げる（★11.5 → 10.5px・★すきま 10 → 6px）
        ★★指の的は 44×44 の ままです。
   ★ ★はば 561px 以上では ①②とも かかりません（★顔も 字の 大きさも そのまま）。

   ⚠️★★★ T284 ―「★↻ を 落とす」を **やめました**（★2026-09-13・社長のお決め「1. 直す」）★★★
   ★ ★★もと：★ここには もう 1行、★`.quit-btn .quit-icon` を **消す** 決まりが ありました。
       ★★それが ★**兄弟2本（ホールデム・ポーカー）の 見た目を 割って いた** もとです
       ★★（★T282・アト実測：★同じ「さいしょから」の 字で、★★片方は はだかの丸、★片方は しるしつき）。
   ★ ★★なぜ 外して 大丈夫か【★T282・T284 実測・★11画面＋底】：
       ★・★しるしを 戻すと ボタンは ★**77.3 → 97.3px（＋20px）**。
       ★・★題の 器は その ぶん 縮んで ★**320px で 142.67px ／ 390px で 155.67px**。
       ★・★題の 中身は ★**129px**（★①で ねこの顔を 消して いる ため）。
       ★★★→ ★**器 ＞ 中身 が 13.67px 残ります。★点々は 出ません**【★実測】。
   ★ ★★①（ねこの顔）は **戻しません**（★社長のお決め・代金4・T273）。
       ★★★顔を 戻すと 中身が 129 → 170px に なり、★そこで はじめて 切れます【★T282 実測】。
       ★★ハッピー自身は 消えて いません ―― ★実況の ふきだし（.log-row）に 絵も 名札も 出ます（§9.5）。
   ★ ★★しるしの 大きさは ★**どの はばでも 16×16px の 1つだけ**に しました。
       ★★★＝ ★**たての 線が 1本 消えました。**★線が 無ければ、★CSS と JS が ずれる ことも ありません
          （★追記⑥ 決まり2・★T264 の 教え：★線は CSS と JS の 2か所に ある）。
       ★★見張りは `HOLDEM.verify()`（game.js）が ★**CSS の 中の「落とす 決まり」を 数えて**います。 */
@media (max-width:560px) {
  .brand-cat { display:none; }
  .quit-btn { font-size:10.5px; padding:0 6px; }
}

/* ============================================================
   ★T293 ― 見えない 押し代（指の的だけ 44px に する）
   ------------------------------------------------------------
   ★ お手本：T118（フリーセルの `.tool::after`）／T289（アト・19個）／T291（コーダ・15個）
   ★ `::after` は **ならびに 入りません**。だから
     ★★見た目の 箱は 1pxも 伸びません（★実測で 確かめて います）。
   ★ `z-index:0` は T289 §3-② の わな（★`position:relative` だけを 足すと
     ★遠くの 丸かどが 色1つぶん ずれる）を 起こさない ため。
   ★★ `<select>` には この 手は **効きません**（★T293 §2・実測）。
      ★Chrome は select の `::after` を **1画素も 描きません**。だから
      ★つよさ・速さの プルダウン 10個は、ここでは 直して いません。
   ============================================================ */

/* ★ 42px。★上下 各 0.5px 要る。
   ★ 上の となりまで 109〜112px・下は となり なし【実測・12画面】。 */
/* ★★ わな（★T293）：position:relative だけを 足すと、★上の 行（.act）の 影が
   ★ この ボタンの 上ぶちに かかって いた ぶんが 消えて、★**6,132画素が 28/255 ずれました**。
   ★ → ★**.act にも 位置づけを 与えて、★描く 順番を もとに 戻して います。**
   ★ ★これで 写真の 画素は **0**（★実測・12画面）。 */
.act { position:relative; z-index:1; }
.ranks-toggle { position:relative; z-index:0; }
.ranks-toggle::after {
  content:''; position:absolute; left:0; right:0;
  top:50%; height:44px; transform:translateY(-50%);
}

/* ============================================================
   ★★★ T297 ―― ★上の帯を 画面に くっつける（★🎨アト・2026-09-15）★★★
   ★ ★社長裁定「★1. 直して、そのまま 公開」。★お手本は ★ブラックジャック（★T279・★私自身）と
     ★ ★七並べ（★T285・コーダ）。★★この かたまりは **ホールデム 1本だけ**。
   ------------------------------------------------------------
   ★ ★直す前【★アト実測・T297-01・★追記⑥の 12画面・★本物の 指で 下へ すべらせた】：
     ★ ★★**12画面中 10画面**で「◀ ゲームを選ぶ」も「↻ さいしょから」も 画面の 上へ 消え、
       ★ ★★まん中も 押せません でした（★いちばん ひどいのは 568×272 の 上 **−567px**）。
     ★ ★鳴かなかった 2画面（★375×812・390×844）は ★**1pxも すべらない**画面です
       ★ ★（★＝ ★穴が 無いのでは なく、★すべる ところが ない）。

   ★★★ この本で 気を つけた ところ ★★★
   ★ ①★七並べの わな（★`.app-shell{overflow:hidden}` が あると `sticky` は 1pxも 効かない）
     ★ ★→ ★**この本の `.app-shell` に overflow は 1つも ありません**【★実測 `visible/visible`】。
       ★ ★★だから `clip` に 替える 必要は ありません。★1文字も 触って いません。
   ★ ②★`body` には `overflow-x:hidden` が あります（★435行）。★★これは **viewport へ 伝わる**
     ★ ★決まりなので body 自身は `visible` の まま ―― ★`sticky` は ふつうに 効きます
     ★ ★★（★ブラックジャックも 同じ 形で 12画面とも 効いて います【★T297-00 実測】）。
   ★ ③★止める 位置は `top:0` では なく ★**6px**。
     ★ ★わけ：★「↻ さいしょから」は 44px の 的を 取る ため `margin-top:-6px` で
       ★ ★**帯（38px）から 上に 6px はみ出して います**【★実測・12画面とも 6px】。
       ★ ★★`top:0` で 止めると その 6px が 画面の 外に 出ます。
     ★ ★代金は 6px ですが ★**器の 上の よはく（8〜10px）の 中**なので、
       ★ ★★卓も 席も 札も チップも かけの ボタンも **1pxも 動きません**。
   ★ ④★`z-index` は **20**。★この本の 中身の いちばん 上は 3（`.board-ribbon`）なので 帯が 勝ち、
     ★ ★かけの パネル（`.raise-panel` ＝ **40**）には 負けます ―― ★★かぶせ窓は 帯の 上のまま。
   ------------------------------------------------------------ */

/* ★ `.app-shell{padding-top}` の 写し。★★ずれたら 見張り（`HOLDEM.verify()`）が 鳴きます。 */
:root { --bar-pad-top:10px; --bar-over:6px; --bar-h:38px; }
@media (max-width:560px) { :root { --bar-pad-top:8px; } }

.topbar { position:sticky; top:var(--bar-over); z-index:20; }

/* ★ 空と **まったく 同じ** ふた。★指は 取らず（pointer-events:none）、
   ★ ★帯の 中身より うしろ（z-index:-1）。★下の はしは 帯の 下（★すそ 0 ―― ★七並べ T285 の
   ★ ★★「すそを 4〜8px 付けたら すべって いない ときに 中身を 8px 隠した」を くり返さない ため）。
   ★ ★よこは **画面の はしから はし**まで（★`50% - 50vw`）。★★器（max-width:940px）より
     ★ ★広い パソコンの 画面でも 左右が クリーム色に なりません。
     ★ ★★`body{overflow-x:hidden}` が あるので、★よこに すべる ものは 出ません【★実測】。
   ★ ★色は body（★435〜439行）と **1文字も 同じ 書き方**。★ふたの 上はしは すべって いない とき
     ★ ★ちょうど 文書の 0px に 来るので、★★色の ゆらし（ディザ）まで ふくめて そろいます。 */
.topbar::before {
  content:''; position:absolute; z-index:-1; pointer-events:none;
  top:calc(-1 * var(--bar-pad-top)); bottom:0;
  left:calc(50% - 50vw); right:calc(50% - 50vw);
  background-color:#fff7e8;
  background-image:linear-gradient(180deg,#BCEBF0 0%,#D9F2F6 100%);
  background-repeat:no-repeat;
  background-size:100% 172px;
}
/* ★ body の 769〜771行と そろえる（★せまい画面では 空が 118px）*/
@media (max-width:560px) { .topbar::before { background-size:100% 118px; } }

/* ★ ブラウザが 自分で 送る すべり（★focus や scrollIntoView）に「★帯の ぶん 空けろ」と 言う。
   ★ ★部品は 0個 増えません（★T279 と 同じ 手）。 */
html { scroll-padding-top:calc(var(--bar-over) + var(--bar-h) + 4px); }

/* ============================================================
   ★★★ T314 ―― ホールデムを 良くする（💻コーダ・2026-09-26・社長のご指示）★★★
   ------------------------------------------------------------
   ① はじめの 画面「何ハンド 遊ぶ？」（★大富豪・セブンブリッジと 同じ 家族 ＝ 白い 角丸の 箱＋大きい ピンクの ボタン）
   ② 結果の 箱 ―― ★卓の 上に 重ねる。★画面に くっつける（position:fixed）。
      ★★下の 段（.rs-foot）に「つぎの ハンドへ ▶」を ★いつも 出す ―― ★スクロール 無しで 押せる。
      ★★中身が 入りきらない 小さい 画面では ★中身（.rs-scroll）だけ 箱の 中で すべる。
   ③ 降りた 人の 札も 開く（★game.js）。★ここは その 見せ方。
   ★ 上の帯（z-index:20・T297）より 下に 置く（z-index:15）＝ ★「◀」「↻ やめる」は 箱が 出て いても 押せる。
     ★ 箱の 上はしは ★帯の 下（★くっついた 帯 6＋38＝44px・★くっつく 前 10＋38＝48px）より 下の 50px。
   ★ たての 線は ★1本だけ 足した：`(min-width:561px) and (max-height:480px)`（★横向きの 低い 画面）。
     ★ 13画面で 数えた【★計算】―― ★横向き 7つ（812×375〜568×272・たて 272〜428）は ★ぜんぶ 入る／
       ★たて向き 5つ（はば 320〜390）と PC（1280×800）は ★ぜんぶ 外。★線の すぐ そばに 画面は ない。
       ★★JS には この 線を 書いて いない（★CSS 1か所きり・追記⑥ 決まり2）。
   ★ 見た目の 仕上げは 🎨アトへ（★部品ごとに 名前を 分けて あります）。
   ⚠️ 上の帯の `sticky`（T297）・「↻」の SVG（T281）・T284 の 直しには 1文字も さわって いません。
   ============================================================ */

/* ── ① はじめの 画面 ─────────────────────────── */
body.is-setup .seats,
body.is-setup .board-wrap,
body.is-setup .mine,
body.is-setup .log-row,
body.is-setup .act,
body.is-setup .stage-chip { display:none !important; }

.setup { display:flex; flex-direction:column; align-items:center; gap:8px; padding:4px 0 2px; }
.setup-card {
  width:min(560px,100%); text-align:center;
  background:var(--white); border:5px solid #FFD9E8; border-radius:28px;
  padding:16px 16px 14px;
  box-shadow:0 8px 0 rgba(196,58,115,.12), 0 14px 24px rgba(150,110,70,.12);
}
.setup-eyebrow { margin:0; color:#ff759d; font-weight:900; font-size:14px; }
.setup-name {
  margin:2px 0 0; font-size:30px; font-weight:900; line-height:1.2; letter-spacing:1px;
  color:var(--pink-deep); text-shadow:0 3px 0 #B33068, 0 5px 0 #FFE3EF;
  word-break:keep-all;   /* ★折れる なら「テキサス・｜ホールデム」の <wbr> だけで（★「ホー｜ルデム」に しない）*/
}
.setup-intro { margin:7px 0 12px; font-size:14px; font-weight:700; color:#6a5a72; word-break:auto-phrase; }
.setup-block { background:var(--cream); border:3px solid #F6E4C0; border-radius:20px; padding:10px 9px 11px; }
.setup-q { margin:0 0 12px; font-weight:900; font-size:15px; color:#8a6a4e; }
.hands-row { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.hands-btn {
  position:relative; min-width:44px; min-height:64px; padding:8px 2px 6px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  background:var(--white); border:3px solid var(--pink-soft); border-radius:16px;
  color:var(--pink-dark); font-family:inherit; cursor:pointer;
  box-shadow:0 3px 0 rgba(233,79,138,.14);
  transition:transform .1s ease, box-shadow .1s ease;
}
.hands-btn b     { font-size:22px; font-weight:900; line-height:1; }
.hands-btn small { font-size:10px; font-weight:900; line-height:1.3; }
.hands-btn em    { font-style:normal; font-size:10px; font-weight:700; color:#957c86; line-height:1.2; }
.hands-btn:hover { transform:translateY(-2px); border-color:var(--pink); }
.hands-btn[aria-pressed="true"] {
  background:linear-gradient(180deg,var(--pink),var(--pink-deep)); border-color:#fff; color:#fff;
  box-shadow:0 4px 0 var(--pink-dark), 0 0 0 3px #FFD3E5;
}
.hands-btn[aria-pressed="true"] em { color:#FFE6F0; }
.hands-tag {
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  padding:0 6px; border-radius:999px; line-height:1.45;
  background:var(--gold-soft); border:2px solid var(--gold); color:#7a5205;
  font-size:9.5px; font-weight:900; white-space:nowrap; pointer-events:none;
}
.start-button {
  margin-top:14px; width:100%; min-height:56px; display:grid; gap:1px; padding:9px 18px 8px;
  background:linear-gradient(180deg,var(--pink),var(--pink-deep)); border:4px solid #fff; border-radius:50px;
  color:#fff; font-family:inherit; font-weight:900; font-size:20px; cursor:pointer;
  box-shadow:0 6px 0 var(--pink-dark), 0 12px 18px rgba(196,58,115,.22);
  transition:transform .1s ease, box-shadow .1s ease;
}
.start-button small { font-size:11.5px; font-weight:700; color:#FFE6F0; }
.start-button:hover  { transform:translateY(-2px); }
.start-button:active { transform:translateY(4px); box-shadow:0 2px 0 var(--pink-dark); }
.setup-tip { margin:10px 0 0; font-size:12.5px; font-weight:700; color:#896c71; word-break:auto-phrase; }
.setup-tip b { color:var(--gold-dark); }
.hands-btn:focus-visible, .start-button:focus-visible,
.btn-home:focus-visible { outline:4px solid var(--pink-deep); outline-offset:3px; }

/* ハッピー（§9.5）―― ふきだしが 上・顔が 下（★大富豪の はじめの 画面と 同じ ならび） */
.setup-happy { display:flex; flex-direction:column; align-items:center; }
.setup-bubble {
  order:-1; position:relative; margin:0 0 9px; padding:5px 14px; border-radius:999px;
  background:var(--white); border:3px solid var(--pink); color:var(--pink-dark);
  font-size:13px; font-weight:900; white-space:nowrap; box-shadow:0 3px 0 rgba(196,155,110,.18);
}
.setup-bubble::after {
  content:''; position:absolute; left:50%; bottom:-9px; transform:translateX(-50%);
  border-style:solid; border-width:8px 7px 0; border-color:var(--pink) transparent transparent;
}
.setup-cat { width:64px; height:48px; filter:drop-shadow(0 4px 4px rgba(150,110,70,.22)); animation:happyBob 3s ease-in-out infinite; }
.setup-happy-name {
  margin:-4px 0 0; padding:0 8px; border-radius:999px; line-height:1.7;
  background:var(--white); border:2px solid var(--pink); color:var(--pink-dark);
  font-size:10.5px; font-weight:900;
}

@media (max-width:380px) {
  .setup-card { padding:14px 10px 12px; border-width:4px; }
  .setup-name { font-size:26px; }
  .setup-intro { font-size:13px; }
  .hands-row { gap:4px; }
  .hands-btn b { font-size:19px; }
  .start-button { font-size:18px; }
}
/* ★ 横向きの 低い 画面：★箱を 左右 2つに 分ける（★たてを 使いきらない ため）*/
@media (min-width:561px) and (max-height:480px) {
  .setup { flex-direction:row; align-items:center; justify-content:center; gap:10px; padding:0; }
  .setup-card {
    width:min(760px,100%); padding:10px 14px 10px; border-width:4px; border-radius:22px;
    display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); column-gap:14px; align-items:center;
    grid-template-areas:"eyebrow block" "name block" "intro start" "tip start";
  }
  .setup-eyebrow { grid-area:eyebrow; font-size:12px; }
  .setup-name    { grid-area:name; font-size:22px; }
  .setup-intro   { grid-area:intro; margin:4px 0 0; font-size:12px; }
  .setup-tip     { grid-area:tip; margin:4px 0 0; font-size:11.5px; }
  .setup-block   { grid-area:block; padding:6px 8px 8px; }
  .setup-q       { margin:0 0 10px; font-size:13px; }
  .hands-btn     { min-height:54px; padding:6px 2px 4px; }
  .hands-btn b   { font-size:19px; }
  .start-button  { grid-area:start; margin-top:8px; min-height:50px; font-size:17px; padding:6px 14px 6px; }
  .setup-happy   { flex:0 0 auto; }
  .setup-bubble  { font-size:11.5px; padding:4px 10px; }
  .setup-cat     { width:52px; height:39px; }
}
/* ★★ T368 ―「何ハンド 遊ぶ？」が はば 660px 以下の 横向きで となりと 重なって いた（★追記⑯ B）★★
   ★ わけ … ★5つの ボタンは 見た目 44px（min-width）なのに、★列の はばが 33.6px しか なく（★568×320・568×272）
     ★★となりと **4.4px 重なって** 指の的が 39〜40px に なって いた【★T367 実測】。★640×360 でも 41.9px の 列で 重なる 計算。
   ★ 直しかた … ★左の 字の 列を 細く して ★右の 箱に はばを 回す（★.85:1.15 → .52:1）・★箱の すきまを 少し 詰める。
     ★→ ★列 44.9px・すきま 3px・★重なり 0【★実測】。★箱の 高さは 1pxも 変わらない（★214.1px の まま・下 269px）。
     ★左の 字は 折れ方が 変わらない（★名前・説明・ヒントの 行数 同じ【★実測 568×320／640×360】）。
   ★ たての 線は 足して いない（★はばの 線 660px を 1本 だけ。★JS の matchMedia は この 線を 使って いない）。 */
@media (min-width:561px) and (max-width:660px) and (max-height:480px) {
  .setup-card  { padding:10px 10px; column-gap:8px; grid-template-columns:minmax(0,.52fr) minmax(0,1fr); }
  .setup-block { padding:6px 6px 8px; }
  .hands-row   { gap:3px; }
  /* ★「トラン｜プ！」と 言葉の まん中で 折れない ように（★分かち書きの すきまで 折る・字は 11.5px） */
  .setup-eyebrow { font-size:11.5px; word-break:keep-all; }
}

/* ── ★ 何ハンドめ（★コインの ふだの 右・同じ 行）──────── */
.act-info { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 6px; }
.act-info .act-coins { margin:0; }
.hand-count {
  flex:0 0 auto; margin:0; padding:5px 13px; border-radius:999px;
  background:var(--white); border:3px solid var(--pink-soft); color:var(--pink-dark);
  font-size:13px; font-weight:900; white-space:nowrap;
  box-shadow:0 3px 0 rgba(196,155,110,.14);
}
@media (max-width:560px) { .hand-count { font-size:12px; padding:4px 11px; } }

/* ── ② 結果の 箱 ──────────────────────────────── */
.result-layer {
  position:fixed; inset:0; z-index:15;
  display:flex; justify-content:center; align-items:flex-start;
  padding:calc(var(--bar-over) + var(--bar-h) + 6px) 8px 8px;
  background:rgba(255,247,232,.62);
}
.result-card {
  width:min(100%,600px); max-height:100%;
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--white); border:4px solid var(--gold); border-radius:22px;
  box-shadow:0 6px 0 rgba(241,164,38,.22), 0 16px 30px rgba(122,82,5,.18);
  animation:rsIn .28s cubic-bezier(.2,.9,.3,1.15);
}
@keyframes rsIn { from { opacity:0; transform:translateY(10px) scale(.97); } to { opacity:1; transform:none; } }
.rs-scroll { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:9px 11px 8px; }
.rs-foot { flex:0 0 auto; padding:8px 11px 10px; background:#FFFBF0; border-top:3px dashed #F6E4C0; }

/* いちばん 上：★ハッピーが しゃべる */
.rs-top { display:flex; align-items:center; gap:8px; }
.rs-happy { position:relative; flex:0 0 auto; width:48px; padding-bottom:6px; text-align:center; }
.rs-cat { width:48px; height:36px; display:block; }
.rs-happy-name {
  position:absolute; left:50%; bottom:-2px; transform:translateX(-50%); margin:0; padding:0 5px;
  background:var(--white); border:2px solid var(--pink); border-radius:999px;
  color:var(--pink-dark); font-size:9px; font-weight:900; line-height:1.6; white-space:nowrap;
}
.rs-top-text { flex:1 1 auto; min-width:0; }
.rs-say  { margin:0; font-size:17px; font-weight:900; color:var(--pink-dark); line-height:1.3; word-break:keep-all; overflow-wrap:anywhere; }
.rs-lead { margin:1px 0 0; font-size:12.5px; font-weight:900; color:#7a5205; text-align:left; line-height:1.35; word-break:keep-all; overflow-wrap:anywhere; }

/* 場の 5枚（★みどりの 小さい 卓） */
.rs-board-box {
  margin:8px 0 7px; padding:5px 8px 7px; text-align:center;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 2px,transparent 2px 8px), var(--felt);
  border:3px solid #3f863f; border-radius:14px;
}
.rs-label {
  display:inline-block; margin:0 0 5px; padding:0 10px; border-radius:999px;
  background:#ffe681; border:2px solid #996d40; color:#75513c; font-size:10.5px; font-weight:900; line-height:1.6;
}
.rs-board { display:flex; justify-content:center; gap:4px; }
.rs-board .card.is-mini { --mini-w:34px; }
.card.is-unopened { opacity:.5; filter:saturate(.5); }
.rs-board-note { margin:5px 0 0; font-size:10.5px; font-weight:900; color:#fffbe9; text-shadow:0 1px 0 rgba(63,38,16,.5); word-break:auto-phrase; }

/* 4人の 行 */
.rs-rows { display:flex; flex-direction:column; gap:5px; }
.rs-row {
  display:flex; align-items:center; gap:8px; padding:5px 8px;
  background:#fffdf5; border:2px solid #f0e3d0; border-radius:14px;
}
.rs-row.is-win { background:linear-gradient(180deg,#FFF3B0,#FFE071); border-color:var(--gold); box-shadow:0 3px 0 rgba(196,155,110,.26); }
.rs-row.is-out { background:#f7f4fa; border-color:#e3dcea; }
.rs-cards { flex:0 0 auto; display:flex; gap:3px; }
.rs-cards .card.is-mini { --mini-w:34px; }
.rs-body { flex:1 1 auto; min-width:0; }
.rs-head { margin:0; display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.rs-who  { font-size:13.5px; font-weight:900; color:#5c4a68; white-space:nowrap; }
.rs-row.is-win .rs-who { color:#8A5A08; }
/* ★あなたの 行（★ピンクの 名ふだ ＋ 左の ピンクの 線 ＝ ひと目で 分かる）*/
.rs-row.is-me { border-color:var(--pink); box-shadow:inset 5px 0 0 var(--pink); }
.rs-row.is-me .rs-who { padding:0 8px; border-radius:999px; background:var(--pink); color:#fff; }
.rs-out-tag { padding:0 7px; border-radius:999px; background:#e9e4ee; color:#7c7186; font-size:10.5px; font-weight:900; line-height:1.6; white-space:nowrap; }
.rs-gain { margin-left:auto; padding:0 9px; border-radius:999px; font-size:12.5px; font-weight:900; line-height:1.6; white-space:nowrap; border:2px solid transparent; }
.rs-gain.is-plus  { background:var(--mint-soft); border-color:var(--mint); color:#1F6B32; }
.rs-gain.is-minus { background:var(--pink-soft); border-color:#FFB3CF; color:var(--pink-dark); }
.rs-gain.is-zero  { background:#F1EDF5; border-color:#E0D8E8; color:#8b7d95; }
.rs-hand { margin:2px 0 0; font-size:12px; line-height:1.3; }
.rs-hand b { font-size:13.5px; font-weight:900; color:#7a5205; margin-right:4px; }
.rs-hand small { font-size:11px; font-weight:700; color:#93743a; }
.rs-hand small.rs-if { margin-right:4px; color:#8b7d95; }
.rs-row.is-out .rs-hand b { color:#8b7d95; }
.rs-mark { margin:1px 0 0; font-size:11px; font-weight:900; color:var(--pink-deep); }
.rs-pots { margin:6px 0 0; }
.rs-pots:empty { display:none; }

/* 下の 段：★ボタン（★いつも 見える）*/
.rs-foot .next-hand {
  word-break:keep-all; overflow-wrap:anywhere;
  display:grid; place-items:center; gap:0; width:100%; min-height:52px; margin:0; padding:6px 12px;
  font-family:inherit; font-size:17px; line-height:1.2;
}
.rs-foot .next-hand small { font-size:11px; font-weight:700; color:#FFE6F0; }
.rs-foot .next-hand.is-final { background:linear-gradient(180deg,#FFD86B,#F0A21E); color:#6B4405; box-shadow:0 5px 0 var(--gold-dark), 0 9px 14px rgba(209,140,18,.22); }
.rs-foot .next-hand.is-final small { color:#8A5A08; }
.rs-foot .over-box { margin:0 0 7px; padding:5px 10px 6px; }
.rs-foot .over-title { margin:0; font-size:16px; }
.rs-foot .over-note { margin:0; font-size:12px; }

/* 最後の 結果 */
.final-coin { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:4px 10px; margin:9px 0 4px; font-weight:900; }
.final-was   { font-size:13px; color:#8b7d95; }
.final-arrow { font-size:16px; color:#c7b5a0; }
.final-to    { font-size:14px; color:#7a5205; }
.final-to b  { font-size:28px; }
.final-diff  { padding:1px 11px; border-radius:999px; font-size:15px; border:2px solid transparent; }
.final-diff.is-plus  { background:var(--mint-soft); border-color:var(--mint); color:#1F6B32; }
.final-diff.is-minus { background:var(--pink-soft); border-color:#FFB3CF; color:var(--pink-dark); }
.final-diff.is-zero  { background:#F1EDF5; border-color:#E0D8E8; color:#8b7d95; }
.final-rank { list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; }
.fr-row { display:flex; align-items:center; flex-wrap:wrap; row-gap:2px; gap:8px; padding:5px 10px; border-radius:12px; background:#fffdf5; border:2px solid #f0e3d0; }
.fr-row.is-top { background:linear-gradient(180deg,#FFF3B0,#FFE071); border-color:var(--gold); }
.fr-rank  { flex:0 0 auto; min-width:38px; text-align:center; padding:0 6px; border-radius:999px; background:#FFF5D8; border:2px solid #F3D98A; color:#7D6321; font-size:12px; font-weight:900; line-height:1.6; }
.fr-name  { font-size:14px; font-weight:900; color:#5c4a68; white-space:nowrap; }
.fr-row.is-me { border-color:var(--pink); box-shadow:inset 5px 0 0 var(--pink); }
.fr-row.is-me .fr-name { padding:0 8px; border-radius:999px; background:var(--pink); color:#fff; }
.fr-coins { font-size:11.5px; font-weight:700; color:#8b7d95; white-space:nowrap; }
.fr-net   { margin-left:auto; padding:0 9px; border-radius:999px; font-size:13px; font-weight:900; line-height:1.6; white-space:nowrap; border:2px solid transparent; }
.fr-net.is-plus  { background:var(--mint-soft); border-color:var(--mint); color:#1F6B32; }
.fr-net.is-minus { background:var(--pink-soft); border-color:#FFB3CF; color:var(--pink-dark); }
.fr-net.is-zero  { background:#F1EDF5; border-color:#E0D8E8; color:#8b7d95; }
.final-note { margin:7px 0 0; text-align:center; font-size:11.5px; font-weight:700; color:#8b7d95; }
.final-actions { display:flex; gap:8px; }
.final-actions .btn-again { flex:1.4 1 0; }
.btn-home {
  flex:1 1 0; display:flex; align-items:center; justify-content:center; min-height:52px; padding:0 8px;
  background:var(--white); border:3px solid var(--pink-soft); border-radius:18px;
  color:var(--pink-dark); font-size:14px; font-weight:900; text-decoration:none; white-space:nowrap;
  box-shadow:0 4px 0 rgba(196,155,110,.18);
}

@media (max-width:380px) {
  .rs-scroll { padding:8px 8px 7px; }
  .rs-foot { padding:7px 8px 8px; }
  .rs-row { gap:6px; padding:5px 6px; }
  .rs-cards .card.is-mini, .rs-board .card.is-mini { --mini-w:31px; }
  .rs-say { font-size:15.5px; }
  .rs-who { font-size:12.5px; }
  .rs-hand b { font-size:12.5px; }
  .fr-coins { display:none; }
}

/* ★ たて向きで 低い 画面（★320×568・320×480・320×454）：★箱の 中を ひとまわり 詰める。
   ★ 線は「(max-width:560px) and (max-height:600px)」 ―― ★13画面で 数えた【★計算】：★入るのは たて 454〜568 の 3つだけ、
     ★375×812・390×844（たて 812〜844）と 横向き（はば 568〜926）は 外。★600px の そばに 画面は ない（★568 と 812）。 */
@media (max-width:560px) and (max-height:600px) {
  .result-layer { padding-left:6px; padding-right:6px; padding-bottom:6px; }
  .rs-scroll { padding:6px 8px 6px; }
  .rs-happy { width:40px; }
  .rs-cat { width:40px; height:30px; }
  .rs-say { font-size:14.5px; }
  .rs-lead { font-size:11.5px; }
  .rs-board-box { margin:5px 0 5px; padding:3px 6px 5px; border-width:2px; }
  .rs-label { margin:0 0 3px; font-size:9.5px; }
  .rs-board-note { margin-top:3px; font-size:9.5px; }
  .rs-board .card.is-mini, .rs-cards .card.is-mini { --mini-w:28px; }
  .rs-rows { gap:4px; }
  .rs-row { padding:3px 6px; }
  .rs-hand { line-height:1.25; }
  .rs-gain, .rs-out-tag, .rs-row.is-me .rs-who { line-height:1.45; }
  .rs-foot { padding:6px 8px 7px; }
  .rs-foot .next-hand { min-height:48px; }
  .rs-foot .over-box { margin-bottom:5px; padding:3px 8px 4px; }
}

/* ★ 横向きの 低い 画面：★ボタンの 段を 右はしの 柱に（★たてを 中身に 回す）。
   ★ 中身は ★左に ハッピー・場の 5枚／★右に 4人（★1人 1行・うすく）。 */
@media (min-width:561px) and (max-height:480px) {
  .result-card { width:min(100%,900px); border-width:3px; border-radius:18px; flex-direction:row; }
  .rs-scroll {
    display:grid; grid-template-columns:minmax(140px,.7fr) minmax(0,1.5fr); column-gap:8px; align-content:start;
    grid-template-areas:"top rows" "board rows" "pots rows";
    padding:6px 8px 6px;
  }
  .rs-top { grid-area:top; align-self:start; gap:5px; }
  .rs-happy { width:40px; }
  .rs-cat { width:40px; height:30px; }
  .rs-board-box { grid-area:board; margin:5px 0 0; padding:3px 5px 5px; border-width:2px; }
  .rs-label { margin:0 0 3px; font-size:9.5px; }
  .rs-board { gap:2px; }
  .rs-board-note { font-size:9.5px; margin-top:3px; }
  .rs-pots { grid-area:pots; }
  .rs-rows { grid-area:rows; gap:4px; align-content:start; }
  .rs-row { padding:3px 6px; gap:6px; }
  .rs-board .card.is-mini { --mini-w:24px; }
  .rs-cards .card.is-mini { --mini-w:24px; }
  .rs-who { font-size:12.5px; }
  .rs-gain { font-size:11.5px; }
  .rs-hand b { font-size:12.5px; }
  .rs-hand small { font-size:10px; }
  .rs-hand { margin-top:1px; line-height:1.25; }
  .rs-gain, .rs-out-tag { line-height:1.45; }
  .rs-row.is-me .rs-who { line-height:1.45; }
  .rs-hand small.rs-if { margin-right:3px; }
  .rs-hand b { margin-right:3px; }
  .rs-say { font-size:14px; }
  .rs-lead { font-size:11px; }
  .rs-foot {
    flex:0 0 clamp(132px,22%,190px); display:flex; flex-direction:column; justify-content:flex-end; gap:6px;
    padding:8px 8px; border-top:0; border-left:3px dashed #F6E4C0;
  }
  .rs-foot .next-hand { min-height:52px; font-size:15px; padding:4px 8px; word-break:keep-all; }
  .rs-foot .next-hand small { font-size:10.5px; }
  .rs-foot .over-box { margin:0; padding:4px 6px; }
  .rs-foot .over-title { font-size:14px; }
  .rs-foot .over-note { font-size:10.5px; }
  .final-actions { gap:6px; }
  .final-actions .btn-again, .btn-home { flex:0 0 auto; }
  .final-card .rs-scroll { grid-template-areas:"top rows" "coin rows" "note rows"; }
  .final-card .final-coin { grid-area:coin; }
  .final-card .final-note { grid-area:note; }
  .final-card .final-rank { grid-area:rows; margin:0; }
  /* ★ 右の 柱は せまい ―― ★コインの 数（左に 大きく 出て いる）は 行から 外して ★1行に たもつ【★T314 写真：568×272 で「＋35枚」が 右へ 切れた】*/
  .final-card .fr-row { flex-wrap:nowrap; padding:4px 8px; }
  .final-card .fr-coins { display:none; }
  .btn-home { min-height:46px; }
}

@media (prefers-reduced-motion:reduce) {
  .result-card, .setup-cat { animation:none !important; }
}

/* ★T314：数の まとまりを 折らない（結果の 箱の 見出し）*/
.nb { white-space:nowrap; }

/* ============================================================
   ★★ T314-2 ―― ★コインが 0 を 割っても マイナスの まま 続く（社長のお決め）
   ★ マイナスの 字は ★ピンク（★オリジナルラビット・ナボコフの アトの 決め：★赤は こわい ので 使わない）。
   ★ 字の 形は「−1,234」（★「借金」の 字は 出さない）。★game.js の fmt() と is-minus が 付ける。
   ============================================================ */
.seat-coin.is-minus,
.me-coin.is-minus,
.act-coins.is-minus,
.fr-coins.is-minus,
.final-to.is-minus { color:var(--pink-dark); }
.me-coin.is-minus, .act-coins.is-minus { background:var(--pink-soft); border-color:#FFB3CF; }
/* ============================================================
   ★★ T315 ―― 見た目の 仕上げ（🎨アト・2026-09-26）
   ------------------------------------------------------------
   ① 結果の 箱を ★20本の 家族に そろえる：★うすい むらさきの 幕（rgba(70,60,82,.42)）＋
      ★白い 角丸＋★うすい ピンクの ふち（★はじめの 画面の 箱と 同じ #FFD9E8）。
      ★金の ふちを やめた ぶん、★「勝った 人の 金の 行」が 箱の 中で いちばん 目立つ。
   ② ハッピーが ★しゃべって いる 形に（★ゲーム中の ふきだしと 同じ ピンクの ふち＋しっぽ）。
   ③ 開かなかった 場の 札 ＝ ★卓の「？」の わくと 同じ ★白い 点線。★5枚 ぜんぶ うすい ときも
      ★「点線 ＝ 開かなかった」と ★1枚だけで 分かる。★説明の 行にも 同じ 点線の 小さな 札を 添える。
   ④ はじめの 画面の 説明 2行が ★重なって いた（★line-height が normal ＝ 字の 高さ ほど）。
   ★ たての 線・よこの 線は ★1本も 足して いない（★T314 と 同じ 線を そのまま 使う）。
   ★ 上の帯（sticky・T297）・「↻」の SVG（T281）には さわって いない。
   ============================================================ */

/* ① 家族の 形 */
.result-layer { background:rgba(70,60,82,.42); animation:rsVeil .2s ease-out; }
@keyframes rsVeil { from { background:rgba(70,60,82,0); } to { background:rgba(70,60,82,.42); } }
.result-card {
  border-color:#FFD9E8; border-radius:24px;
  box-shadow:0 8px 0 rgba(196,58,115,.16), 0 16px 30px rgba(70,60,82,.22);
}
.rs-foot { background:#FFF8FB; border-top-color:#FFD9E8; }

/* ② ハッピーが しゃべる */
.rs-cat { animation:happyBob 3s ease-in-out infinite; filter:drop-shadow(0 3px 3px rgba(150,110,70,.22)); }
.rs-top-text { padding-left:9px; }
.rs-say {
  position:relative; display:inline-block; max-width:100%; box-sizing:border-box;
  padding:3px 11px 4px; background:var(--white);
  border:3px solid var(--pink); border-radius:14px;
  box-shadow:0 3px 0 rgba(196,155,110,.16);
}
.rs-say::before {
  content:''; position:absolute; left:-12px; top:50%; transform:translateY(-50%);
  border-style:solid; border-width:7px 12px 7px 0;
  border-color:transparent var(--pink) transparent transparent;
}
.rs-lead { margin-top:4px; padding-left:2px; }

/* 勝った 人の 行は ★金の まま 少し 強く（★箱の ふちが 金で なく なった ぶん、ここだけが 金）*/
.rs-row.is-win, .fr-row.is-top { border-width:3px; }

/* ③ 開かなかった 場の 札（★卓の「？」の わくと 同じ 白い 点線）*/
.rs-board .card.is-unopened {
  opacity:1; filter:none;
  background:rgba(255,255,255,.28); border:2px dashed #fff; box-shadow:none;
}
.rs-board .card.is-unopened .face-img,
.rs-board .card.is-unopened .fallback { opacity:.45; }
/* ★開いた 札と 開かなかった 札の 間を 少し あける（★ひとかたまりに 見えない ように）*/
.rs-board .card:not(.is-unopened) + .card.is-unopened { margin-left:7px; }
.rs-board-note {
  display:inline-flex; align-items:center; gap:5px; max-width:100%; box-sizing:border-box;
  margin-top:6px; padding:2px 9px 2px 5px; border-radius:10px;
  background:rgba(38,92,40,.42); color:#fff; font-size:11px; line-height:1.35;
  text-shadow:0 1px 0 rgba(30,60,20,.45); text-align:left;
}
.rs-board-note::before {
  content:''; flex:0 0 auto; width:9px; height:13px; border-radius:2px;
  border:1.5px dashed #fff; background:rgba(255,255,255,.28);
}

/* ④ はじめの 画面：★説明の 行が 重ならない ように */
.setup-intro, .setup-tip { line-height:1.45; }

@media (max-width:380px) {
  .rs-say { padding:2px 9px 3px; }
}
@media (max-width:560px) and (max-height:600px) {
  /* ★たての 低い 画面は ★4人の 行を 1つでも 多く 見せたい ―― ★ふきだし・説明の 行は 細く */
  .rs-say { padding:0 7px 1px; border-width:2px; border-radius:11px; }
  .rs-say::before { left:-10px; border-width:6px 10px 6px 0; }
  .rs-top-text { padding-left:7px; }
  .rs-lead { margin-top:1px; }
  .rs-row.is-win { border-width:2px; }
  .rs-board-note { margin-top:3px; font-size:10px; line-height:1.25; padding:1px 7px 1px 4px; }
  .rs-board-note::before { width:7px; height:10px; }
}
@media (min-width:561px) and (max-height:480px) {
  .result-card { border-radius:18px; }
  /* ★左の 柱は 140px ―― ★ふきだしの ふち・すきまの ぶん ハッピーと 字を ひとまわり 小さく（★「！」だけが 次の 行に 落ちない ように）*/
  .rs-top { gap:4px; }
  .rs-happy { width:34px; }
  .rs-cat { width:34px; height:26px; }
  .rs-say { font-size:13px; padding:1px 5px 2px; border-width:2px; border-radius:10px; }
  .rs-say::before { left:-8px; border-width:5px 8px 5px 0; }
  .rs-top-text { padding-left:5px; }
  .rs-lead { margin-top:2px; }
  /* ★横向きは 場の 札が 左の せまい 柱に 5枚 ならぶ ―― ★すきまは 足さない（★点線だけで 分かる）*/
  .rs-board .card:not(.is-unopened) + .card.is-unopened { margin-left:0; }
  .rs-board-note { margin-top:3px; font-size:9.5px; padding:1px 6px 1px 4px; gap:4px; }
  .rs-board-note::before { width:7px; height:10px; }
  .setup-intro, .setup-tip { line-height:1.25; }
}
@media (prefers-reduced-motion:reduce) {
  .result-layer, .rs-cat { animation:none !important; }
}

/* ============================================================
   ★★ T316-2 ①（💻コーダ・社長のお決め）―― ★2連打の 止め（1秒）の 間だけ ボタンを うすく
   ------------------------------------------------------------
   ★ 押しを 止めて いる 間（body.is-guard）は、★止めて いる ボタンを ★押せない 見た目に。
     ★ 形は ★この 本の「降りた 席」（.seat.is-folded：opacity .45 ＋ grayscale .9）と 同じ ―― ★新しい 色は 作らない。
   ★ 選ぶ 名前は game.js の GUARD_SEL と ★1文字も 同じ 並び（★ずれたら HOLDEM.verify() の ⓦ が 鳴く）。
   ★ ★止めの 長さ（1000ms）・遊びの 決まりは 変えて いない。★アトの T315 の かたまりは そのまま（★この 下に 足した）。
   ============================================================ */
body.is-guard :is(.act-btn, .next-hand, .btn-home, .start-button, .hands-btn, .quit-btn, .topbar .back, .ranks-toggle, .raise-ok, .step-btn) {
  opacity:.45; filter:grayscale(.9); cursor:default;
}