/* ============================================================
テキサス・ホールデム ― 第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;
}
/* ポット（まん中に あつまっている コイン・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; }
/* ※「今の役」の 名札（.hand-name）と 手札の目安（★）は T53（社長指示）で
まるごと 撤去した。復活させないこと（設計図 §5.5「二層設計の上限」）。 */
/* ── ★ 役の強さの一覧（T49 🟡2・コーダ）──────────────
中身は 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.is-used／.card.is-dim）は T53（社長指示）で 撤去した。
すてる札の 選択（is-pick）と 混ざって 両方 死ぬ、が 理由。
強調は 画面に 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; }
/* ── ★ かけの ボタン ───────────────────────────
🎨アトへ：ここは「いくら 動くか」が 読めることが 命です。
に 何を するか、に いくら 出すか が 入っています。 */
.act { margin-top:12px; }
/* T53：持っている コイン ―― ボタンの すぐ上に（社長指示）。
上の帯と 同じ 黄色の コインふだ。金のまる（.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; }
/* レイズ を おしたときの パネル（1枚きざみ・T53で 一本化） */
.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-*）は T53（社長指示）で まるごと 撤去した。
かけ方は 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-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 {
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); }
.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); }
/* ============================================================
③（T45の「今の役の名札」の 仕上げは T53 で 名札ごと 撤去。
notePop は 取りかえバッジと 役の一覧が 今も 使うので 残す）
============================================================ */
@keyframes notePop {
0% { opacity:0; transform:scale(.85) translateY(4px); }
100% { opacity:1; transform:none; }
}
/* ============================================================
④（T45の 光る5枚／うすい札 は T53 で 撤去。上の 注意書きと 同じ 理由）
============================================================ */
/* ============================================================
② かけの 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); }
/* ── たしかめ用：たたんである（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; }
.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 { animation:none !important; }
}
/* ============================================================
ここから下：ポーカー（5枚くばって 取りかえる）専用の 差分 ― 💻コーダ（T48）
------------------------------------------------------------
上は ホールデム（T45・アト仕上げずみ）の 見た目を そのまま 土台に した。
ドローで 足した 部品だけ ここに 書く。仕上げは 🎨アトが やる。
① 取りかえ枚数バッジ（.seat-swap）… ドローの ただ1つの 公開情報。消さない
② すてる札の えらび（.card.is-pick）… 大富豪の 複数枚選択と 同じ 手ざわり
③ 引いた札の うら向き（.card.is-back-me）… 1枚ずつ めくる 演出の もと
④ テーブルまん中の 山札（.deck-row）… のこり枚数と すてた枚数が 見える
⑤ 取りかえの パネル（.swap-panel）… ボタンは 1つだけ。字が 変わる
============================================================ */
/* 伏せ札が 5枚に なったぶん、少し 小さく・つめて ならべる */
.seat-back { --back-h:46px; --back-step:13px; }
/* ① 取りかえ枚数バッジ ―― ハンドが 終わるまで 消えない（T47 §6-5）。
0枚（取りかえなかった！）は いちばん こわい 情報なので 強調色。 */
.seat-swap {
margin:2px auto 0; width:max-content; max-width:100%;
padding:1px 8px; border-radius:999px;
background:#EAF4FB; border:2px solid #BFDCEE;
font-size:10.5px; font-weight:900; color:#3F6F8E;
min-height:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.seat-swap:empty { border-color:transparent; background:transparent; }
.seat-swap.is-zero {
background:var(--pink-soft); border-color:var(--pink); color:var(--pink-dark);
animation:notePop .4s cubic-bezier(.2,.9,.3,1.2);
}
.me-tag.is-swap-zero { background:var(--pink); color:#fff; }
/* ② すてる札の えらび ―― この画面で ただ1つの 強調（T53）。
浮かせて ピンクの わく ＋「すてる」の ふだ。もう1回 タップで もどる。 */
.card.is-pick {
transform:translateY(-12px);
border-color:var(--pink-deep);
box-shadow:0 0 0 3px var(--pink-soft), 0 6px 10px rgba(196,58,115,.3);
z-index:3;
}
.card.is-pick::after {
content:'すてる';
position:absolute; left:50%; bottom:4px; transform:translateX(-50%);
padding:1px 7px; border-radius:999px;
background:var(--pink-deep); color:#fff;
font-size:10px; font-weight:900; white-space:nowrap;
pointer-events:none;
}
/* 取りかえの 番だけ「タップできる」と 分かる 手ざわりに（カーソルは 下の T53改で 付ける） */
.card[data-key] { transition:transform .12s ease, box-shadow .12s ease; }
/* ③ 引いた札の うら向き（1枚ずつ めくる・T47 §6-7） */
.card.is-back-me {
background:transparent url('../cards/%E3%83%88%E3%83%A9%E3%83%B3%E3%83%97%E8%A3%8F%E8%B5%A4.png') center/cover no-repeat;
border-color:#c9a9a9;
}
.card.is-back-me .fallback { display:none; }
/* ④ テーブルまん中の 山札 */
.deck-row {
display:flex; align-items:center; justify-content:center; gap:9px;
min-height:44px;
}
.deck-back {
flex:0 0 auto; width:30px; height:calc(30px * 635 / 419);
border-radius:4px;
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;
filter:drop-shadow(1px 2px 1px rgba(49,41,42,.3));
}
.deck-note {
padding:4px 13px; border-radius:999px;
background:rgba(255,255,255,.88); border:2px solid #3f863f;
font-size:12px; font-weight:900; color:#2c6b2c; white-space:nowrap;
}
/* ⑤ 取りかえの パネル ―― ボタンは 1つ。0枚でも 押せる（T47 §5-2） */
.swap-panel {
margin-top:2px; padding:11px 12px 13px; background:#EAF7FF;
border:3px solid #8CC8E8; border-radius:18px; text-align:center;
}
.swap-title { margin:0 0 9px; font-size:13.5px; font-weight:900; color:#2F6D93; }
.swap-btn {
display:block; width:100%; min-height:56px; border-radius:18px;
background:linear-gradient(180deg,#67BDE8,#3D96C9); border:4px solid #fff; color:#fff;
font-size:17px; font-weight:900; font-family:inherit;
box-shadow:0 5px 0 #2A6E96, 0 9px 14px rgba(61,150,201,.24);
transition:transform .1s ease, box-shadow .1s ease;
}
.swap-btn:hover { transform:translateY(-2px); }
.swap-btn:active { transform:translateY(3px); box-shadow:0 2px 0 #2A6E96; }
.swap-btn:focus-visible { outline:4px solid var(--pink-deep); outline-offset:3px; }
/* 勝負の わくの 取りかえ枚数（読み合わせが できるよう 決着にも 出す） */
.sd-swap {
padding:1px 8px; border-radius:999px;
background:#EAF4FB; border:2px solid #BFDCEE;
font-size:11px; font-weight:900; color:#3F6F8E; white-space:nowrap;
}
/* 自分の手札は 5枚 ―― 取りかえで 浮く ぶんの 上の 余白を たす */
.hand { padding-top:14px; gap:6px; }
/* ── せまい画面（スマホ）───────────────────────── */
@media (max-width:560px) {
.seat-back { --back-h:34px; --back-step:10px; }
.seat-swap { font-size:9.5px; padding:1px 6px; }
.deck-back { width:24px; height:calc(24px * 635 / 419); }
.deck-note { font-size:10.5px; padding:3px 10px; }
.swap-btn { min-height:52px; font-size:15.5px; border-width:3px; }
.swap-title { font-size:12px; }
.sd-swap { font-size:10px; }
.hand { gap:4px; padding-top:12px; }
.card.is-pick { transform:translateY(-9px); }
.card.is-pick::after { font-size:9px; padding:1px 5px; }
}
@media (max-width:380px) {
.hand { gap:3px; } /* カードの 大きさは 土台の 46px のまま（5枚 ならんでも はみ出さない） */
}
@media (prefers-reduced-motion:reduce) {
.seat-swap.is-zero { animation:none !important; }
}
/* ============================================================
ここから下：ポーカーの 見た目仕上げ ― 🎨アト（T51）→ 💻コーダが T53 で 改
------------------------------------------------------------
T51の「すてる？」の 小ふだは、もともと うすい札（is-dim）に だけ
付けていた。T53（社長指示）で 光り（is-used／is-dim）を 撤去した ので、
いまは「自分の 取りかえの 番の、まだ えらんでいない 5枚 ぜんぶ」に 付ける。
・青い 点線わく ＋「すてる？」の 小ふだ ＝ えらべる札
・押すと ピンクの「すてる」（is-pick）に 変わる ―― 問いが 答えに なる
・強調（ピンク）は is-pick の 1種類だけ（設計図 §5.5「二層設計の上限」）。
青い 点線は「えらべる」の 案内で、強調では ない
検知は body:has(.swap-panel:not(.hidden))。swap-panel が 出るのは
自分の 取りかえの 番だけ なので、JSに さわらず フェーズが 分かる。
:has が ない 古い ブラウザでも、タップの 聞き耳は game.js に あるので
えらぶ こと自体は できる（小ふだが 出ないだけ）。
② 役の強さの 一覧（コーダの 最小スタイルの 仕上げ）
・順位を まるい 数字ふだに（上位3役は 金 ＝「上ほど 強い」が 絵で 分かる）
・1行おきに うすい しましま（10行を 目で たどれる ように）
・今の役の 行は ピンクの まま、順位ふだも ピンクに して 目を 引く
・開いた しゅんかんに ぽんと 出る（notePop 再利用・盤面は 動かさない）
============================================================ */
/* ── ① 自分の 取りかえの 番：まだ えらんでいない 札 ＝「えらべる札」──
青い 点線わく（取りかえパネルと おそろいの 青）。 */
body:has(.swap-panel:not(.hidden)) .card[data-key]:not(.is-pick) {
border-color:#6FAFD6;
border-style:dashed;
box-shadow:0 0 0 2px rgba(140,200,232,.35), 1px 3px 2px rgba(49,41,42,.22);
}
/* 「すてる？」の 小ふだ（えらぶと is-pick の「すてる」に 変わる） */
body:has(.swap-panel:not(.hidden)) .card[data-key]:not(.is-pick)::after {
content:'すてる？';
position:absolute; left:50%; bottom:4px; transform:translateX(-50%);
padding:1px 6px; border-radius:999px;
background:#3D96C9; color:#fff;
font-size:10px; font-weight:900; white-space:nowrap;
pointer-events:none;
}
/* タップできるのは 取りかえの 番だけ（game.js の 聞き耳と そろえる） */
body:has(.swap-panel:not(.hidden)) .card[data-key] { cursor:pointer; }
/* マウスの人へ：なでると 少し 浮く（押せる 手ざわり） */
body:has(.swap-panel:not(.hidden)) .card[data-key]:not(.is-pick):hover {
transform:translateY(-5px);
}
/* ── ② 役の強さの 一覧 ────────────────────────── */
.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);
}
.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); }
/* ── せまい画面（スマホ・375px）───────────────── */
@media (max-width:560px) {
.ranks-no { flex-basis:36px; font-size:10px; }
.ranks-name { font-size:12.5px; }
.ranks-desc { font-size:11px; }
body:has(.swap-panel:not(.hidden)) .card[data-key]:not(.is-pick)::after {
font-size:9px; padding:1px 4px; bottom:3px;
}
}
@media (prefers-reduced-motion:reduce) {
.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; }
/* ============================================================
★ T57 ―― 画面を けずって シンプルに（社長指示・2026-08-19）― 🎨アト
------------------------------------------------------------
なぜ：「他社の ポーカー画面くらい シンプルに したい。
スライド（スクロール）しないで 遊びたい」（社長）。
けずる前は たて 1203px。パソコン（900px）でも スクロールが 要った。
やったのは「消す・動かす・つめる」の 3つだけ。
・画面の ことばは 1文字も 変えていない（消す・動かすだけ）
・game.js ／ poker-core.js には 1バイトも さわっていない
・id・class名も 変えていない（game.js が さがすため）
① 消す（4つ）―― どれも DOMは 残して 見た目だけ 消す。
game.js が $('tape') $('steps') $('btnPlay') を 起動時に さがすので、
要素ごと 取ると ゲームが 止まる。
.tape … コインは かけボタンの 上に もう 出ている
.steps … 場の カードが ふえれば 分かる
.devbox … お客さんに 見せる 物では ない（消しわすれ）
※ POKER.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つ 出ても くずれない。
下の 小さい 日本語（社長指示・T53）は 残す ―― 字を 小さく、
余白を つめて 入れる。押しやすさ（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; }
.hand { padding-top:10px; } /* 取りかえで 札が 浮く ぶんの 上の 余白（ポーカーだけ）*/
/* 取りかえの パネル（ポーカーだけ。ホールデムには 無い）――
かけの ボタンより 高く なるので、ここも つめる。
押す ところは 52px ＝ 44px より 大きい まま。 */
.swap-panel { padding:9px 12px 10px; }
.swap-title { margin:0 0 7px; }
.swap-btn { min-height:52px; }
.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; }
}
@media (prefers-reduced-motion:reduce) { .chip.is-new { animation:none; } }
/* ============================================================
ここから下：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; }
}
/* ============================================================
★ T105 ―― 小さい スマホ（375×667）で たてに はみ出す のを 直す ― 🎨アト
------------------------------------------------------------
なぜ：iPhone SE の 大きさ（375×667）で 遊ぶと、ページが 823px に なり
**156px はみ出して**いた。かけの ボタンが 画面の 外に 落ちる。
375×812 と パソコン（910px）は もう 0 に なっている ―― そこは こわさない。
やり方は 社長の 指示どおり「ちぢめる」では なく「けずる（消す）」。
拡大縮小で むりやり つめる ことは していない。字の 大きさは 1つも 変えていない。
⚠️ さわったのは この CSS と index.html（コインの 積み方 1か所）だけ。
game.js ／ poker-core.js には 1バイトも さわっていない。
id・class名も 変えていない。画面の ことばは **足していない**（消しただけ）。
★ 消していない もの（社長が 名ざしで 頼んだ もの）
・コインの 絵（山）と、その となりの 数字 …… ぜんぶ 残っている
・かけの ボタンの 横1行 ……………………………… そのまま
・「役の強さを 見る」が 一番下 ………………… そのまま
・レイズの「いくら 上乗せする？」 ……………… そのまま
============================================================ */
/* ── ① 「テーブル」の ふだ を 画面から 消す ────────────────
緑の ラシャと 木わくが すでに「テーブル」と 言っている。
★ さらに：このふだは `position:absolute` と 書いてあるのに、
あとの `.board-wrap > * { position:relative }` に 負けて
**流れの 中に 26px 場所を 取って**いた（上の 余白 18px は その ごまかし）。
読み上げ（aria-labelledby）の 名前は 残す ので、字だけ 見えなく する。 */
.board-ribbon {
position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
/* ── ② 山札の 行 を 消す ──────────────────────────
「山札 のこり ◯枚 ・ すてた札 ◯枚」。
5枚くばりの 4人では くばるのは 最大 20＋20＝40枚。52枚の 山は
**ぜったいに 足りなく ならない** ので、この 数字で 何かを 決める 場面が 一度も ない。
⚠️ 要素は 残す ―― game.js の renderDeck が $('deckRow') に 書きこむ。 */
.deck-row { display:none !important; }
/* ── ③ ポットの ふだ と コインの山 を 横1行に ────────────
同じ「25」が たてに 2つ ならんでいた（ふだの 中と、コインの となり）。
よこに ならべれば 1行ぶん まるごと 浮く。数字は どちらも 消していない。 */
.board-wrap {
display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
gap:0 10px;
padding:12px 10px 10px; /* 上18・下8 の ちぐはぐ を そろえた */
}
.pot { margin:0; flex:0 0 auto; }
.chips-slot { margin:0; flex:0 1 auto; }
/* ── ④ コインの山 ―― 10枚で 1本の柱 → 5枚で 1本の柱 ────────
コインの 絵も 数字も 消していない。**山の 形を たてから よこに した**だけ。
もとは 2枚でも 25枚でも 箱が「10枚ぶんの 高さ」を 取っていた
（ポットで 52px・席で 32px ＝ 画面で いちばん 高い かざり）。
5枚で 1本に すると 高さが 半分に なり、多い人の 山が 大きい ことは
よこに のびる ことで そのまま 分かる。
⚠️ index.html の PER（柱1本ぶんの 枚数）と かならず そろえる こと。
ここが 4 なら PER は 5（4 ＝ PER − 1）。 */
.chips-pile { height:calc(var(--chip-step) * 4 + var(--chip-h)); }
/* ── ⑤ 塊と 塊の あいだ 7px → 5px ────────────────────
白い 箱の わく・背景で 区切りは ついている ので、5px でも 混ざらない。 */
.topbar { margin-bottom:5px; }
.seats { padding-bottom:0; }
.mine { margin-top:5px; }
.act { margin-top:5px; }
.ranks { margin-top:5px; }
.log-row { margin:5px 0 0; }
/* ── ⑥ ポットの コインの となりの 数字だけ 消す ────────────
③で よこ1行に した ことで、「ポット 25」の ふだの すぐ 右に
まったく 同じ「25」が ならんで しまった（同じ数字が よこに 2つ）。
★ 数字は 消えていない ―― 10px 左の ふだの 中に そのまま ある。
★ 席の コイン（ロボット3人）と 自分の コインの 数字は **そのまま 残す**。
社長が 頼んだ「かけ金を コインの絵で 見せる」の 数字は こちら。
もし「ポットの コインの となりにも 数字が ほしい」なら この 1行を 消せば 戻る。 */
.chips.is-pot .chips-num { display:none; }
/* ── ⑦ 勝負（決着）の 画面 ―― 同じ ことを 2回 言っている 所を 消す ──
決着の わくが 出ている あいだ、上の 3つは **中身が まるごと ダブっていた**：
・`.mine`（あなたの手札）… 決着の わくに 同じ5枚が ならぶ
（しかも どの札で 勝ったか の 印つき）
・`.board-wrap`（テーブル）… ポットは 配りおわって いつも「ポット 0」
・`.seats`（ロボットの席）… 決着の わくに 1人ずつ 出ている
コインの 数は 下の「コイン ◯枚」に 出たまま なので 消えない。
⚠️ 消えるのは 決着の あいだ だけ。「つぎの ハンドへ」を おせば 全部 もどる。
⚠️ これが 要らなければ、この かたまりを 消すだけで 前に もどる。 */
body:has(.showdown:not(.hidden)) .seats,
body:has(.showdown:not(.hidden)) .board-wrap,
body:has(.showdown:not(.hidden)) .mine { display:none !important; }
/* 決着の わくの 中の すきまも すこし つめる（字の 大きさは 変えていない）*/
.showdown { padding:8px 8px 9px; }
.sd-lead { margin-bottom:6px; }
.sd-rows { gap:5px; }
/* ── ⑧ 「あなたの手札」の 帯 ―― ダブっている 2つを 消す ──────
この 帯（.mine-head）は ふだ 32px だが、中の ふだが 入りきらないと
2行に 折り返して **+22px** のびる。それが 375×667 で はみ出す 犯人だった。
のびる 原因は「読まなくても 分かる 文字」2つ：
・「あなたの手札」…… すぐ 下に 表を むけた 5枚が ならんでいる。
表むきの 手札は 画面に これ 1つだけ。名ふだは 要らない。
・「コイン 190」…… **すぐ 下の「コイン 190枚」と 同じ 数字**。
社長の 指示は「コインは かけボタンの すぐ上に」なので、
残すのは 下の ほう。ここは 消す。
消した ぶん 横が 170px ほど あくので、ふだが 折り返さなく なる
＝ たてに のびない。★ 出した コインの 絵と 数字は そのまま 残っている。 */
.mine-heading { display:none; }
.me-coin { display:none; }
/* ── ⑨ 勝負（決着）の 画面 ―― 実況の 文だけ 消す（★T246-5 で 直した）───
決着の わくの 中に「勝負！」と「◯◯が △△で 勝った」が 大きく 出ている。
その すぐ 下で 実況が 同じ ことを もう一度 言っていた。★消すのは そこ だけ。
★★ T246-5（2026-09-10・🎨アト）―― ★ここは まちがって いました。
★ 元は `.log-row { display:none !important }` ＝ ★★ハッピーごと 消して いました。
★ 上の 行に「ハッピーは 上の帯に いる ので 画面から いなく ならない」と 書いて ありますが、
★★上の帯の かおは **看板の 印**で、★ふきだしで 話す 相棒では ありません。
★ そして game.js は 決着の しゅんかん、★ちゃんと ことばを 書いて いました ――
★「やったー！ コイン ◯枚！」「つぎ がんばろ！」「見せないで勝った！ かっこいい」
★「引き分け。コインを 分けたよ」「また あそぼうね」。
★★設計図 §9.5 が 例に あげている まさに その ことばが、★1度も 画面に 出て いませんでした。
★ 【実測・t246_neko2.cjs】★決着（2人）13/13画面・★決着（4人）13/13画面・
★ゲームオーバー 13/13画面 ―― ★★あわせて **39／91マス**で まるごと 消えて いた。
★（★全員 降りた 決着＝ わくが 出ない ときだけ、★前から 出て いました）
⚠️ 消えるのは 決着の あいだ の **実況の 文** だけ。「つぎの ハンドへ」で もどる。
⚠️ たけの 低い たて（320×480・320×454）では、★下の T246-5 の かたまりで
★この 行を **小さい 形**に して 場所を 借りて います。 */
body:has(.showdown:not(.hidden)) .table-log { display:none !important; }
/* ── ⑩ 実況は 3行 → 2行 ────────────────────────────
一番 上の 行は「2つ前の できごと」。もう 読みおわっている。
長い 文が 折り返すと この 帯だけで 109px まで のびて、
取りかえの 場面で また はみ出す 原因に なっていた。
⚠️ 3行 出ている ときだけ 一番 上を 消す（2行・1行の ときは そのまま）。
⚠️ game.js は さわっていない（3行 作るのは そのまま。見せるのを 2行に した）。 */
#tableLog .log-line:first-child:nth-last-child(3) { display:none; }
/* ============================================================
★ T106 ―― 320×568（いちばん 小さい スマホ）で「押せない ボタン」を なくす ― 🎨アト
------------------------------------------------------------
T105 で 375×667 は 0 に なった。のこったのが 320×568。
自動で 100ハンド 回して 464の 場面を 測った ところ、
**30回、押す ボタンが 画面の 外に 落ちて**いた：
・「つぎの ハンドへ ▶」（決着）……… いちばん 多い
・「コインを もらって もういちど ▶」（ゲームオーバー）
・「◯枚 取りかえる ▶」（取りかえ）… ★アイの 調べには 出ていなかった もう1つの 故障
はみ出す だけなら 指で スクロールできるが、押す ボタンが 出ないのは 故障。
今回も「ちぢめる」は 一度も していない ―― 字も 札も コインも 1つも 小さく していない。
**同じ ことを 2回 言っている ところ**だけを 消した。
⚠️ さわったのは この CSS だけ（index.html も 今回は さわっていない）。
game.js ／ poker-core.js ／ ほかの ゲーム ／ office/state.js には 1バイトも さわっていない。
★ 社長が 名ざしで 頼んだ もの（コインの絵と数字・ボタン横1列・
「役の強さを見る」が一番下・レイズの「いくら上乗せする？」）は 1つも 消していない。
============================================================ */
/* ── ⓐ 決着：からっぽの 1行が 9px 場所を 取っていた ────────────
「ポットは ◯つに 分かれたよ」は コインが 足りない人が いた ときだけ 出る 文。
ふだんは 中身が 空。それでも の 上の すきま 9px は 残っていた。
中身が 空の ときだけ しまう ―― 文が 出る ときは これまで どおり 出る。 */
.sd-pots:empty { display:none; }
/* ── ⓑ 決着：見出し「勝負！」を 消す ────────────────────
すぐ 下の 行が **同じ できごとを もっと くわしく** 言っている：
「勝負！」 ← 何が 起きたか だけ
「ロボット2が フラッシュで 勝った」 ← 何が 起きたか ＋ だれが ＋ 何で
2つ ならぶと、上の 1行は 読む 前から 分かっている ことの くり返し。
★ 読み上げ（見出し）としては 残す ので、字だけ 見えなく する。
⚠️ 375px 以上では 上の 帯にも「勝負」の ふだ（.stage-chip）が 出ている。
320px では その ふだが 出ない ので、下の 1行が その 役目を そのまま 引きつぐ。 */
.sd-title {
position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
/* ── ⓒ 決着：役の 名前の あとの 小さい 説明を 消す ──────────
「ツーペア2枚と2枚」の の ほう。
**同じ 画面の 一番下**「🃏 役の強さを 見る」に、同じ 説明が 全部 ならんでいる
（中身は PokerCore.HANDS の short ―― 文字どおり 同じ 文）。
1つの 画面で 2回 説明している ので、決着の ほうを 消す。
⚠️ 役の 名前（ツーペア／フラッシュ …）は 消していない。 */
#showdownBox .sd-hand small { display:none; }
/* ── ⓓ 決着：札の 下の ▲ を 消す ───────────────────────
決め手に なった 札には **ピンクの 太わく（.is-deciding）が すでに 付いている**。
その 上で 札の 下に ▲、さらに 行の 下に「▲ ここで 勝った」の 文 ―― 同じ ことが 3つ。
設計図 §5.5：「1つの 画面に、光る・色が変わる等の 強調は **1種類まで**。
2種類 あると 混ざって 両方 死ぬ（ポーカーで 実証済み）」。
★ ピンクの わくと「ここで 勝った」の 文は 残す。消すのは ▲ の 記号だけ。
⚠️ ▲ の ための すきま（min-height:13px）は **5枚 ぜんぶの 下に** 取られていた。
印が 付くのは 1枚だけ なので、4枚ぶんは いつも 空っぽの すきま だった。 */
#showdownBox .sd-arrow { display:none; }
/* ── ⓔ 決着：名前の 行から「取りかえ ◯枚」を 消す ───────────
320px では 名前の 行に「👑 ロボット1／ツーペア／取りかえ 1枚／＋30」が
ならんで **入りきらず 2行に 折り返して**いた（1人 19px × 3人 ＝ 57px）。
「取りかえ ◯枚」は **ハンドの あいだ ずっと 席の バッジに 出ていた** もの
（.seat-swap ―― T105 で 残すと 決めた 読み合いの 情報）。
決着では もう 全員の 札が 表を むいている ので、ここで もう一度 言う 必要がない。
★ 席の バッジ（遊んでいる 最中の 表示）は そのまま。消すのは 決着の わくの 中だけ。 */
#showdownBox .sd-swap { display:none; }
/* ── ⓕ 取りかえ：実況の 帯を 消す（取りかえの あいだ だけ）──────
取りかえの 画面に 出ている 実況は、**そっくり そのまま よそに ある**：
実況「取りかえの 時間だよ（0〜5枚・1回だけ）」
＝ ボタンの すぐ上「いらない札を えらんでね（0〜5枚・1回だけ）」
（かっこの 中まで 一字一句 同じ）
実況「ロボット2が 3枚 取りかえた」
＝ ロボット2の 席の バッジ「3枚 取りかえた」（一字一句 同じ）
＝ この 画面の あいだ、実況は 新しい ことを 1つも 言っていない。
★ ハッピーの ふきだしは 残す（設計図 §9.5・看板キャラは 画面から 消さない）。
⚠️ 消えるのは 取りかえの あいだ だけ。かけの 画面に もどれば 実況も もどる。 */
body:has(#swapPanel:not(.hidden)) #tableLog { display:none; }
/* ── ⓖ 実況は 2行 → 1行（T105 ⑩ の つづき）──────────────
T105 で 3行 → 2行 に した。のこった 上の 行も、**よく 見ると 席に 同じ ものが 出ている**：
実況「ロボット1が 合わせた」 ＝ ロボット1の 席「合わせた」（.seat-last）
実況「ロボット2が 上げた」 ＝ ロボット2の 席「上げた」
実況「ロボット3が 降りた」 ＝ ロボット3の 席「降りた」＋ 席ぜんたいが 灰色に なる
3人ぶんが 席に 同時に ならんでいる ので、順番を たどる ための 行は
一番 新しい 1行（.now）だけで 足りる。
⚠️ game.js は さわっていない（3行 作るのは そのまま。見せるのを 1行に した）。
⚠️ T105 の「3行 の ときだけ 上を 消す」1行は、この 行に 引きつがれる。 */
#tableLog .log-line:not(.now) { display:none; }
/* ── ⓗ 席の「からっぽの 場所取り」を やめる ────────────────
`.seat-bet`（出した額）は T57 で 画面から 消えている のに `min-height:14px`、
`.seat-last`（最後の 手）は 何も 起きていない ときも `min-height:13px` を
**中身が 無くても 取りつづけて**いた。
中身が 入れば これまで どおり 出る ―― 空の ときだけ 場所を 返す。 */
.seat-bet { min-height:0; }
.seat-last { min-height:0; }
/* ── ⓘ 指で さわる ところを 44px 以上に（T105 の のこり）────────
T105 で 見つけて 直せていなかった 2つ。設計図の「44px 以上」に 合わせる。
・「◀ ゲームを選ぶ」…… 38px
・「🃏 役の強さを 見る」… 42px
★ ただし **ふだの 見た目を 大きく すると、その ぶん 下が おされて**
せまい 画面（320×568）の はみ出しが ふえて しまう。
そこで「さわれる 場所だけ」を 44px に のばす ―― 見た目の 大きさも
ページの 高さも **1px も 変えない**。
（中の ::after は ボタンの 子ども なので、ここを 押すと ボタンが 押される）
⚠️ たてに のばす だけ。よこの となりの ボタンを ふさがない。 */
.back, .ranks-toggle { position:relative; }
.back::after, .ranks-toggle::after {
content:''; position:absolute; left:0; right:0; top:50%;
transform:translateY(-50%); height:44px;
}
/* ── ⓙ ゲームオーバー：「コイン 0枚」を 消す ──────────────
コインが 0に なった ときだけ 出る 画面。そこに ならんでいたのは：
「コイン 0枚」（かけボタンの 上の 数字）
「ゲームオーバー」
―― **同じ ことを 2回**。コインが 0だから ゲームオーバー なので、
数字の ほうは 何も 足していない。
★ 消えるのは ゲームオーバーの あいだ だけ。「コインを もらって もういちど」で もどる。
★ 遊んでいる 最中の「コイン ◯枚」（社長指示・かけボタンの すぐ上）は そのまま。 */
body:has(#overBox:not(.hidden)) .act-coins { display:none; }
/* ── ⓚ 決着：「◯◯ 降りた」だけの 行を しまう ────────────────
決着の わくには、札を 見せた 人の 行の ほかに
**降りた 人の 行**（.sd-row.is-out）が ならんでいた。中身は これだけ：
「ロボット3 降りた」（＋ 取りかえ ◯枚 ―― ⓔ で すでに 消した）
＝ 札も 役も もうけも 無い、ことば 1つだけの 行が 1人 28px。
その「降りた」は、**ハンドの あいだ ずっと 席に 出ていた**：
・席ぜんたいが 灰色に なる（.seat.is-folded）
・その 下に「降りた」の 文字（.seat-last）
＝ 決着の わくは「札を 見せ合った 人」を くらべる 場所。
降りた 人は もう 席で 見た ので、ここで もう一度 名前を 出す 必要がない。
（ⓔ「取りかえ ◯枚」と まったく 同じ 考え方 ―― 遊んでいる 最中に 出した ものは
決着で くり返さない）
★ これが 320×568 で いちばん 効いた ―― ふつうの 決着（2人が 見せ合い、
2人が 降りた）で 56px。決着の 画面が 568px に ぴったり 収まるように なった。
⚠️ 消えるのは 決着の わくの 中だけ。遊んでいる 最中の 灰色の 席と
「降りた」の 文字は そのまま。 */
#showdownBox .sd-row.is-out { display:none; }
/* ── ⓛ 決着：「▲ ここで 勝った」の 1行を しまう ────────────
決め手に なった 札には **ピンクの 太わく（.is-deciding）**が 付いている。
ⓓ で 札の 下の ▲ を 消した ので、いま 決め手を さしているのは この わく 1つ。
その 下に もう一度「▲ ここで 勝った」と 文で 書くのは、
設計図 §5.5 が 名ざしで 止めている もの ――
「1つの 画面に、光る・色が変わる等の 強調は **1種類まで**。
2種類 あると 混ざって 両方 死ぬ（ポーカーで 実証済み）」
「分かりやすいように 解説を 増やしたせいで わかりにくく なってる」（社長）。
★ ここを 消すと、**4人 ぜんぶが 札を 見せる 決着**（500ハンドに 1回くらい・
T105 で 社長が「アトに任せる」と 言った 場面）で
「つぎの ハンドへ ▶」が 画面の 中に 入る：662px → 620px。
これが 最後まで のこっていた「押せない ボタン」だった。
⚠️ 決め手の 札は ピンクの わくで 分かる（情報は 消えていない。文だけ 消した）。
⚠️ もどしたい ときは この 1行を 消すだけ。 */
#showdownBox .sd-mark { display:none; }
/* ── ⓜ 決着：「コイン ◯枚」を 決着の あいだ だけ しまう ──────────
社長の 指示は「持っている コインは **かけボタンの すぐ上**に 出す」。
決着の あいだは **かけボタンが 1つも 出ていない**（`#actButtons` は 空）ので、
この 数字は「すぐ上」に つく 相手を なくして、ただ 場所を 取っていた。
しかも 決着の わくの 自分の 行に「＋40」／「±0」＝ **その ハンドで いくら 動いたか**が
すでに 出ている。
★ これで 4人 ぜんぶが 札を 見せる 決着でも「つぎの ハンドへ ▶」が 画面の 中に 入る。
⚠️ 「つぎの ハンドへ」を おした しゅんかん、いつもの 場所に もどる。
⚠️ 遊んでいる 最中の「コイン ◯枚」も、コインの 絵と その となりの 数字も そのまま。 */
body:has(.showdown:not(.hidden)) .act-coins { display:none; }
/* ============================================================
★ T246 ―― 緑の場を「卓」にする（社長裁定・案B）＋ 横向きの 並べ方（案C）― 🎨アト
------------------------------------------------------------
社長の ご指摘：「緑色の場が 小さすぎる。実際の ポーカーは 場に いろいろ 乗っている。
リアルと 同じように 場に 置くものは 置くように」
ルルの 実測（T245）：ラシャの 内がわは たけ 26〜30px。伏せ札 1枚も 立てられない 細さ。
やったこと：
① 席（ロボット3人）・出したチップ・親の印・自分の手札を ぜんぶ ラシャの上に 乗せた
（index.html で .seats と .mine を .board-wrap の 中へ。白い箱は 消した）
② まん中に 山札の置き場（左）・ポット（まん中）・捨て札の置き場（右）
―― 束は うら向き。数字は 出さない（ルル §D）。捨て札の 中身は 💻コーダ
③ 親の印🔘 を 白い円盤「親」に（ことばは 足していない ―― 「親」は もともと 画面に ある）
④ あまった たけは 卓が もらう（ページを 伸ばさず、場だけ 大きく）
⑤ 横向き（はば 561 以上 かつ たけ 480 以下）は 3列：左＝もどる・題・実況、
まん中＝卓、右＝かけの ボタン。たてに 積まない ―― はみ出し 0 が ねらい
線：字は 1つも 小さく していない／44px の 指の的は 守る／game.js は 1バイトも さわらない
★ たけで 分ける 線は「480px」1本。追記⑥の 11画面＋底で またぐ ものは ない
（横向き 272・320・375・390・414・428 は 480 以下、たて 454・480・568・812・844 は はば 320〜390。
たて 480 は たけ の 線に 乗るが「はば 561 以上」の 条件で 外れる。式は はばと たけの 両方を 見る）。
============================================================ */
:root { --spot-h:46px; } /* 山札・捨て札の 置き場（伏せ札と 同じ 大きさ）*/
/* ── ④ ページ：たてに 積んで、あまった たけは 卓が もらう ───────── */
.app-shell {
display:flex; flex-direction:column;
min-height:100vh; min-height:100dvh;
}
.app-shell > * { flex:0 0 auto; }
.board-wrap { flex:1 0 auto; }
/* ── ① 卓：木わく＋ラシャの 中に、上辺＝席／まん中／下辺＝自分 ───── */
.board-wrap {
display:flex; flex-direction:column; flex-wrap:nowrap;
justify-content:space-between; align-items:stretch;
gap:4px;
padding:16px 14px 12px; /* ラシャの わく（inset 9 ＋ 3）の 内がわに 4px */
}
/* 席 ―― 白い箱を やめて、ラシャの上に 名ふだ・伏せ札・コインふだ・チップ */
.seats { padding:0; gap:6px; justify-content:space-evenly; align-items:flex-start; }
.seat {
position:relative; flex:1 1 0; max-width:230px; min-width:0;
padding:3px 2px 4px; border-radius:16px; border:3px solid transparent;
background:transparent; box-shadow:none;
}
.seat.is-turn { background:rgba(255,255,255,.28); border-color:var(--pink); }
.seat-name {
display:inline-block; max-width:100%; margin:0 0 2px; padding:1px 9px; border-radius:999px;
background:rgba(255,255,255,.94); color:#3f5a70;
box-shadow:0 2px 0 rgba(63,90,112,.15); overflow:hidden; text-overflow:ellipsis;
}
.seat-coin {
display:inline-block; margin:2px 0 0; padding:0 8px; border-radius:999px; line-height:1.3;
background:#fff5d8; border:2px solid #f3d98a; color:#7d6321;
}
/* 「合わせた」「小がけ」など ―― 緑の上でも 読めるよう こい字＋白の ふち */
.seat-last { color:#3b3146; text-shadow:0 0 3px #fff, 0 0 2px #fff, 0 1px 0 rgba(255,255,255,.85); }
.seats .chips { margin-top:3px; }
/* 取りかえバッジ：取りかえの 前は 中身が 空（ ）なので、ラシャの上に 空の ふだを 見せない。
「取りかえの 前か 後か」は 隠してある 進み具合バー（#steps）の 3つめの 印で 読む
（子の 5番目 ＝ 3つめの .step。now ＝ 取りかえ中／passed ＝ 取りかえ後）。
降りた席は 取りかえないので 出さない。 ⚠️ game.js は さわっていない。 */
body:not(:has(#steps > .step:nth-child(5).now)):not(:has(#steps > .step:nth-child(5).passed)) .seat-swap,
.seat.is-folded .seat-swap { display:none; }
/* ── ③ 親の印 ―― 🔘 を 白い円盤「親」に ────────────────────
ロボット：伏せ札の 右どなり（ラシャの上）。自分：出したチップの 行の 先頭。
🔘 の 文字は font-size:0 で 見せない（消していない ―― 読み上げには 残る）。 */
.seat-name .btn-mark, .me-tag.btn-mark {
display:inline-flex; align-items:center; justify-content:center;
width:22px; height:22px; padding:0; margin:0; border-radius:50%;
font-size:0; line-height:0;
background:#fff; border:2px solid var(--gold);
box-shadow:0 2px 0 rgba(122,82,5,.32), 0 0 0 2px rgba(255,255,255,.35);
}
.seat-name .btn-mark::before, .me-tag.btn-mark::before {
content:'親'; font-size:11px; font-weight:900; color:#7a5205; line-height:1;
}
.seat-name .btn-mark {
--cards-half:41px; /* 伏せ札5枚の はば の 半分（46px → 30.4 + 13×4 ＝ 82.4）*/
position:absolute; z-index:2;
top:34px; left:calc(50% + var(--cards-half) + 2px);
}
.me-tag.btn-mark { flex:0 0 auto; }
/* ── ② まん中：山札 ｜ ポット ｜ 捨て札 ─────────────────── */
.table-mid {
display:flex; align-items:center; justify-content:center; gap:12px;
min-height:var(--spot-h);
}
.pot-wrap {
flex:1 1 auto; min-width:0; max-width:320px;
display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
}
.pot-wrap .pot { margin:0; flex:0 0 auto; }
.pot-wrap .chips-slot { margin:0; flex:0 1 auto; min-width:0; }
.spot {
--spot-w:calc(var(--spot-h) * 419 / 635);
position:relative; flex:0 0 auto; width:var(--spot-w); height:var(--spot-h);
border-radius:4px;
}
/* 置き場の 線（ラシャに かいてある 印。ことばでは ない） */
.spot::before {
content:''; position:absolute; inset:-4px; border-radius:7px;
border:2px dashed rgba(255,255,255,.42);
}
.spot-deck { transform:rotate(-5deg); }
.spot-deck::before { display:none; } /* 山札は 束そのものが 置き場を 言っている。線は 空の 捨て札だけ */
.spot-discard { transform:rotate(4deg); }
/* 束の 1枚。枚数ぶん 重ねると 厚みに なる（最大 8枚ぶんの ずれ） */
.pile-card {
position:absolute; left:0; top:0; width:100%; height:100%; border-radius:4px;
background:#fff url('../cards/%E3%83%88%E3%83%A9%E3%83%B3%E3%83%97%E8%A3%8F%E8%B5%A4.png') center/cover no-repeat;
box-shadow:0 1px 0 rgba(49,41,42,.4), 0 0 0 1px rgba(255,255,255,.3);
}
.pile-card:nth-child(2) { transform:translate(1px,-1px); }
.pile-card:nth-child(3) { transform:translate(2px,-2px); }
.pile-card:nth-child(4) { transform:translate(3px,-3px); }
.pile-card:nth-child(5) { transform:translate(4px,-4px); }
.pile-card:nth-child(6) { transform:translate(5px,-5px); }
.pile-card:nth-child(7) { transform:translate(6px,-6px); }
.pile-card:nth-child(n+8) { transform:translate(7px,-7px); }
/* ── 下辺：自分の席 ―― 白い箱を やめる。出したチップ・印は 手札の すぐ上（＝ポット側） ── */
.mine { margin:0; padding:0; background:none; border:0; border-radius:0; box-shadow:none; }
.mine-head { justify-content:center; }
.me-info { justify-content:center; }
.hand { padding:10px 0 0; }
/* 取りかえの 番：かけの ボタンが 1つも 出ていない ので、「ボタンの すぐ上の コイン」は
つく相手が ない（T106 ⓜ と 同じ 理由）。その あいだだけ、自分の コインは
ロボットと 同じく ラシャの上の 自分の席（手札の すぐ上）に 出す（.me-coin ―― T105 ⑧ で
隠していた ふだ。中身は game.js が ずっと 書いている）。かけの 番に もどれば 元の 場所。
★ これで 320×568 の 取りかえ場面の はみ出し（T106 §7 で 残っていた −36）が 0 に なる。 */
body:has(#swapPanel:not(.hidden)) .act-coins { display:none; }
body:has(#swapPanel:not(.hidden)) .me-coin { display:inline-block; }
/* ── せまい画面（スマホ・たて）────────────────────────── */
@media (max-width:560px) {
:root { --spot-h:34px; }
.board-wrap { padding:10px 10px 7px; gap:3px; }
.me-tag { line-height:1.2; }
.seat-coin { line-height:1.2; }
.seats { gap:4px; }
.seat { padding:2px 1px 3px; border-width:2px; border-radius:12px; }
.seat-name { padding:0 6px; }
.seat-name .btn-mark { --cards-half:31px; width:18px; height:18px; top:26px; }
.seat-name .btn-mark::before { font-size:9.5px; }
.me-tag.btn-mark { width:20px; height:20px; }
.seat-coin { padding:0 6px; }
.table-mid { gap:8px; }
.pot-wrap { gap:8px; }
.hand { padding-top:8px; }
}
@media (max-width:380px) {
.seats { gap:3px; }
.seat { padding:2px 0 3px; }
.seat-name { padding:0 3px; max-width:none; overflow:visible; }
.seat-name .btn-mark { left:calc(50% + var(--cards-half) - 3px); }
.seat-swap { padding:1px 4px; max-width:none; overflow:visible; }
.seat-swap.is-zero { position:relative; z-index:2; padding:1px 1px; letter-spacing:-.05em; }
.hand { padding-top:4px; }
}
/* ============================================================
⑤ 案C ―― 横向き（はば 561 以上 かつ たけ 480 以下）は 3列に ならべる
------------------------------------------------------------
たてに 積むと 620px で、窓 272〜428px に 入らない（ルル実測 −182〜−338）。
左 ＝ もどる ／ 題 ／ 今どこ ／ ハッピー＋実況 ／ 役の強さ
中 ＝ 卓（上から 下まで ぜんぶ）
右 ＝ コイン ＋ かけの ボタン（たてに 4つ）／取りかえ／つぎのハンドへ
上の帯（.topbar）は display:contents で ほどいて、3つの 子を 別の マスに 置く。
レイズの パネルは 右の列から 左へ 浮かせる（卓の 上に かぶさる）。
役の一覧は 左下の ボタンから 上へ 浮かせる（2列）。
============================================================ */
@media (min-width:561px) and (max-height:480px) {
:root { --card-w:46px; --spot-h:34px; --side-l:126px; --side-r:128px; }
.seat-back { --back-h:34px; --back-step:10px; }
.app-shell {
display:grid; max-width:none;
grid-template-columns:var(--side-l) minmax(0,1fr) var(--side-r);
grid-template-rows:auto auto auto minmax(0,1fr) auto;
grid-template-areas:
"back table act"
"brand table act"
"chip table act"
"log table act"
"ranks table act";
gap:6px 8px; padding:6px 8px;
min-height:100vh; min-height:100dvh; align-items:stretch;
}
.topbar { display:contents; }
.back { grid-area:back; justify-self:start; align-self:start; padding:0 8px; }
.brand { grid-area:brand; justify-content:flex-start; }
.stage-chip { grid-area:chip; justify-self:start; align-self:start; }
.log-row {
grid-area:log; align-self:start; margin:0;
flex-direction:column; align-items:stretch; text-align:center; gap:4px; padding:5px 8px 6px;
}
.log-row .happy-wrap { margin:0 auto; }
.log-row .happy-bubble, .log-row .table-log { text-align:center; }
.ranks { grid-area:ranks; align-self:end; margin:0; position:relative; }
.ranks-toggle { padding:8px 6px; }
/* 役の一覧は ボタンから 上へ 浮かせる（ページを のばさない・2列） */
.ranks-box {
/* 窓に 貼りつける（左の列の 右どなり・下そろえ）。ボタンは 左下に 見えたまま ―― 閉じる道を ふさがない。
たけ 272 でも 上に はみ出さない（max-height は 窓から 数える） */
position:fixed; z-index:60; left:calc(var(--side-l) + 16px); right:8px; bottom:8px;
width:auto; max-width:560px; max-height:calc(100vh - 16px); overflow:auto;
margin:0; box-shadow:0 6px 0 rgba(196,155,110,.16), 0 14px 28px rgba(122,82,5,.18);
}
.ranks-list { display:grid; grid-template-columns:1fr 1fr; gap:3px 8px; }
/* 卓：上から 下まで */
.board-wrap {
grid-area:table; min-height:0; margin:0;
border-width:4px; border-radius:20px;
padding:11px 10px 9px; gap:3px;
}
.board-wrap::before { inset:7px; border-width:2px; border-radius:12px; }
.seats { gap:3px; }
.seat { padding:2px 0 3px; border-width:2px; border-radius:12px; }
.seat-name { padding:0 4px; max-width:none; overflow:visible; }
/* 取りかえバッジ「4枚 取りかえた」が 席（内がわ 80px）に ぎりぎり。切らずに 出す。
「取りかえなかった！」（9字）は 席より 広いので、字間を 少し つめて 上に 重ねる（字は 同じ 大きさ） */
.seat-swap { padding:1px 4px; max-width:none; overflow:visible; }
.seat-swap.is-zero { position:relative; z-index:2; padding:1px 1px; letter-spacing:-.05em; }
.seat-name .btn-mark { --cards-half:31px; width:18px; height:18px; top:26px; }
.seat-name .btn-mark::before { font-size:9.5px; }
.me-tag.btn-mark { width:20px; height:20px; }
.seat-coin { padding:0 6px; }
.table-mid { gap:8px; }
.pot-wrap { gap:8px; }
.hand { gap:3px; padding-top:8px; }
.card.is-pick { transform:translateY(-8px); }
/* 決着の わくは 卓と 同じ マス（同時には 出ない）。長い ときは 中で 送る */
.showdown { grid-area:table; min-height:0; max-height:calc(100vh - 10px); max-height:calc(100dvh - 10px); overflow:auto; margin:0; }
/* ↑ max-height が 無いと、決着の わくの 中身の たけが そのまま マスの たけに なり、底で 8px はみ出た【実測・案2】 */
/* 右：コイン ＋ かけの ボタン（たてに）*/
.act {
grid-area:act; align-self:end; margin:0; min-width:0;
display:flex; flex-direction:column; align-items:stretch;
}
.act-coins { margin:0 0 5px; align-self:flex-start; max-width:100%; }
.act-row { flex-direction:column; gap:5px; }
.act-btn { flex:0 0 auto; width:100%; min-height:48px; padding:4px 5px; }
.act-btn b { font-size:15px; }
.act-btn small { font-size:10px; }
.swap-panel { padding:8px 8px 9px; }
.swap-btn { min-height:48px; font-size:15px; }
.next-hand { min-height:52px; font-size:15.5px; }
.over-box { padding:10px 8px; }
/* レイズの パネル：右の列から 左（卓の上）へ 浮かせる */
.raise-panel {
left:auto; right:calc(100% + 8px); bottom:0; width:min(400px, calc(100vw - var(--side-r) - 40px));
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; white-space:normal; }
}
/* 横向きで はばに 余裕が ある ときは、左右の 列を 広く・札を 大きく */
@media (min-width:700px) and (max-height:480px) {
:root { --card-w:52px; --side-l:160px; --side-r:170px; }
.seats { gap:6px; }
.seat-name { padding:0 8px; }
.hand { gap:4px; }
}
@media (min-width:880px) and (max-height:480px) {
:root { --side-l:190px; --side-r:200px; }
.act-btn b { font-size:16px; }
}
/* たけ 320 以下（SE初代の横向き・底）：すきまだけ つめる。字も 札も 小さく しない。
今どこ（かけ①…）の ふだは 出さない ―― はば 380 以下で すでに 同じ 扱い（ボタンと
パネルが 今どこかを 言っている）。 */
@media (min-width:561px) and (max-height:320px) {
.app-shell { gap:4px 8px; padding:5px 8px; }
.stage-chip { display:none; }
.ranks-toggle { padding:6px 4px; }
.seat-name .btn-mark { left:calc(50% + var(--cards-half) - 3px); }
.board-wrap { padding:7px 8px 5px; gap:1px; }
.seat { padding:0 0 1px; }
.me-tag { line-height:1.2; }
.seat-coin { line-height:1.2; }
.chips { --chip-step:calc(var(--chip-w) * .16); }
.seat-name { margin-bottom:1px; }
.seat-cards { padding-top:1px; }
.seat-swap, .seat-coin { margin-top:1px; }
.seats .chips { margin-top:1px; }
.hand { padding-top:3px; }
.card.is-pick { transform:translateY(-6px); }
.act-row { gap:4px; }
.act-btn { min-height:46px; }
.act-coins { margin-bottom:4px; }
.log-row { padding:3px 6px 4px; gap:2px; }
}
/* 底（568×272）だけ：実況の 1行を しまう。
左の列は はば 126px で、「ロボット2が 小がけ 5 ／ ロボット3が 大がけ 10」が 4行に 折り返して
150px に なり、卓を 27px 押し出していた【実測】。この 1行の 中身は 席に 出ている
（「小がけ」「大がけ」の 字と 出したチップ ―― T106 ⓖ と 同じ 理由）。
ハッピーの ふきだしは 残す（§9.5）。★ 線は 280px：底 272 と SE横 320 の あいだで、11画面＋底の
どれにも 乗らない。 */
@media (min-width:561px) and (max-height:280px) {
#tableLog { display:none; }
/* 卓の中の 1px の すきまも 返す。ロボットの 伏せ札と 置き場は 34 → 30px（かざりの 側。
自分の 手札（押す札）は 46px の まま） */
.seat-back { --back-h:30px; --back-step:9px; }
:root { --spot-h:30px; }
.seat-name { margin-bottom:0; }
.seat-cards { padding-top:0; }
.seat-swap, .seat-coin, .seat-bet, .seat-last { margin-top:0; }
.seats .chips { margin-top:0; }
.seat-name .btn-mark { --cards-half:28px; top:22px; }
}
/* ============================================================
★ T246-2 ―― 💻コーダの 見張り（verify.js）が 見つけた 4件を 直す ― 🎨アト
------------------------------------------------------------
見つけたのは 私では ありません。コーダが 新しく 作った verify.js が
13画面 ぜんぶで 鳴らしました【実測・verify13_mae.json】：
① a.back 119×38 …… 13画面 ぜんぶ
② #btnRanks ○○×42 …… 10画面（横向きの せまい 列では 2行に 折れて 55〜59px。そこは 鳴らない）
③ .step-btn 40・43px（はば）… 4画面（320×568・320×480・320×454・375×812）
④ ★★「＋10」の まん中を さすと「決定」に 当たる … 横向き 7画面 ★これは 故障
★ ④が なぜ 起きていたか（実測・812×375）
レイズ窓は 横向きで 2列の grid：「見出し｜文」「数の増減｜決定」。
数の増減の マスは grid-template-columns の minmax(0,1fr) で **215px**。
ところが 中身（−10 −1 [数] ＋1 ＋10 ＋ すきま4つ）は **286.6px**。
minmax(0,…) は 中身より 小さく なれる ので、はみ出した ぶんが
左右に 35.8px ずつ こぼれ、右の こぼれの 上に「決定」が 乗っていた。
＝ 「＋10」は 見えているのに、まん中を 押すと「決定」が 押される。
★ 数字は 静かでした（はみ出し 0・44px 割れ 0）。**重なりは 大きさでは 出ません。**
★ 直し方の 選び方（④）
窓を 広げて 1行の まま 直すには **434px** 要る【計算：26＋287＋9＋112】。
でも 窓の はばは min(400px, 100vw − 右の列 − 40px) で、568px の 画面では
398px しか 取れない。**広げる道は 無い。** そこで 行を 分けた。
============================================================ */
/* ── ①② 押す ところの 大きさを 44px に（見た目の 箱そのものを）──────
T106 ⓘ は「::after で さわれる 場所だけ 44px に のばす」やり方でした。
さわれる 場所は たしかに 44px です【実測：±21.5px の 5点 すべて ボタンに 当たる】。
★ でも 見張りは 箱を 測ります。そして 遊ぶ人の 指も、**見えている 箱**を ねらいます。
★ 箱を 44px に して、::after は やめる ―― 見えている 大きさと さわれる 大きさを
同じに する。こうすると、あとで 誰かが 小さく したとき、見張りが ちゃんと 鳴る。
★ 代金は 0 に する：ふえた ぶん（◀ は 6px・役の強さは 2px）を
ちょうど 同じだけ 負の margin で 返す。**ページの たけは 1px も 変わらない**
（T106 ⓘ が 気にしていた「下が おされる」を、そのまま 引きつぐ）。 */
.back {
min-height:44px;
margin-block:-3px; /* 44 − 38 ＝ 6 を 上下に 返す */
}
.ranks-toggle {
display:flex; align-items:center; justify-content:center;
min-height:44px;
margin-block:-1px; /* 44 − 42 ＝ 2 を 上下に 返す */
}
/* もう 要らない ―― 箱そのものが 44px に なった。
残して おくと、箱が 小さく なっても 見張りが 鳴らない（穴が 隠れる）。 */
.back::after, .ranks-toggle::after { content:none; }
/* ── ③ レイズ窓の 数の増減：せまい 画面でも はば 44px ───────────
380px 以下では min-width:40px でした（−1・＋1 が 40px、−10 が 43px）。
320px の 画面で 入るか 数える：44＋44＋66（数の わく）＋44＋45.1 ＋ すきま4つ×6
＝ **267.1px**。マスは **276px**【実測】。8.9px あまる ―― 字も すきまも
小さく せずに 入る。 */
@media (max-width:380px) {
.step-btn { min-width:44px; }
}
/* ── ④ 横向き：「数の増減」と「決定」を 別の 行に ────────────────
1行に 並べると マス 215px に 中身 286.6px で、35.8px はみ出して
「決定」の 下に もぐって いた【実測】。行を 分けると 数の増減は
窓の はば いっぱい（374px）を もらう ―― もう こぼれない。
★ 字も ボタンの 大きさも 変えて いない。並べ方だけ。
★ 「決定」は 横いっぱいに なるので、押す ところは 逆に 大きく なる。 */
@media (min-width:561px) and (max-height:480px) {
.raise-panel {
grid-template-columns:minmax(0,1fr) minmax(112px,150px);
grid-template-areas:
"title note"
"step step"
"ok ok";
gap:4px 9px;
}
.raise-panel .raise-stepper { justify-content:center; }
}
/* ── ③の 続き ―― 「ぽん」と 出る 動きが、160ms のあいだ ボタンを 44px より
小さく していた ─────────────────────────────────────────
★ 見張りを 疑う前に、自分の 壊し方を 疑いました。
min-width:44px に した あとも、見張りは **43.3px** と 鳴りつづけました。
私の 道具は「動きが 終わってから」測るので 44.0px。見張りは 出た しゅんかんに 測る。
計算すると 44 × 0.985 ＝ 43.34 ―― raise-pop の scale(.985) と ぴったり 合いました。
★ ＝ 見張りが 早すぎたのでは なく、**出て すぐの 160ms は 本当に 43.3px** でした。
その 160ms に 指が 着いたら、44px を 割った ボタンを 押す ことに なります。
★ だから 動きの ほうを 直す：ちぢめる のを やめ、下から 上がる ＋ 消え入る だけに する。
「ぽん」と 出る 感じは 残る（translateY 9px ＋ opacity）。字も 大きさも 変えて いない。 */
@keyframes raise-pop {
from { opacity:0; transform:translateY(9px); }
to { opacity:1; transform:none; }
}
/* ============================================================
★ T246-3 ―― 決着の わくに「ふた」を する（社長のお決め「1 ＝ 直す」）― 🎨アト
------------------------------------------------------------
★ T246-2 の 私は「4人 ぜんぶが 札を 見せると **約168px はみ出す**【計算】」と 書きました。
★ 社長に「測っていない」と 見ぬかれ、★★本当に その 場面を 出して 測りました。
★ どうやって 出したか（道具 t246_yonin.cjs）
POKER.seed(S) を 種 1〜40・1種 60ハンド ＝ **2400ハンド** 回し、
「降りて いない 行」が 4つに なる ところを さがしました。
人の 手は いつも コール／チェック（T246-2 と 同じ 遊び方）。押すのは 本物の ボタン。
降りて 決着 516（21.5%）／2人 1810（75.4%）／3人 71（3.0%）／★**4人 3（0.125%）**
★ ＝ **800ハンドに 1回**（ルルの 見立て「500に1回」と 同じ けた）。
★ いちばん 早いのは **種16 の 1ハンドめ**。ここで 13画面 ぜんぶ 測りました。
★ 測った 数（直す前・yonin_mae.json）―― ★★私の【計算】は まちがって いました
| 画面 | わく | ページ | はみ | 「つぎの ハンドへ」 |
| 320×568 | 406.9 | 592 | ★ 24 | 窓の中（−35.1） |
| 320×480 | 406.9 | 592 | ★112 | ★★**窓の外 ＋52.9** |
| 320×454 | 406.9 | 592 | ★138 | ★★**窓の外 ＋78.9** |
| 横向き 5画面 | − | − | ★ 2 | 窓の中（−4） |
| 568×320・568×272・390×844・375×812・PC | − | − | 0 | 窓の中 |
★ 168px では なく **24／112／138px**。★★2画面で ボタンが 本当に 窓の外に 出ました
―― 追記③「触る所が 画面の 外に 出たら、それは 見切れでは なく **故障**」。
★ そして ★★T246-2 で 私が 書いた「1行で 直る」も まちがいでした。
`.showdown { max-height:calc(100dvh - 20px) }` は 320×454 で 434px。
でも わくに 使える たけは **268.9px** しか ありません（上の帯・かけボタン・
役の強さで 185.1px 使う）。★★あの 1行では **1pxも 直りません**。
★ 正しい 直し方 ―― 「あまった たけを わくに 渡す」を、逆に する
T246 ④ で ページは たての flex（`.app-shell`・`min-height:100dvh`）に して あり、
子は ぜんぶ `flex:0 0 auto`（ちぢまない）。だから 中身が 増えると ページが のびる。
★ 決着の あいだ だけ、
・ページの たけを **100dvh に 固定**（min-height → height）
・**決着の わく だけ** ちぢんで よい（`flex:0 1 auto` ＋ `min-height:0`）
・あふれた ぶんは **わくの 中で 送る**（`overflow:auto`）
★ ＝ 横向きに もう ある つくりと 同じ 形を、たてにも 置いただけです。
⚠️ ふだんの 画面は 1px も 小さく なりません（ちぢむのは 入りきらない ときだけ）。
⚠️ 決着の あいだ だけ。「つぎの ハンドへ」を おせば 全部 もどります。
⚠️ 字は 1px も 小さく していません。消した 情報も ありません。
★ 線は 新しく 引いて いません（追記⑥ の 決まり2）
使ったのは すでに ある 横向きの 線「はば≧561 かつ たけ≦480」の **裏返し**
―― `(max-width:560px), (min-height:481px)`。★11画面＋底＋PC の どれも またぎません。
============================================================ */
/* ── たて（＝ 横向きの 3列 では ない とき）に、ふたを する ───────── */
@media (max-width:560px), (min-height:481px) {
body:has(.showdown:not(.hidden)) .app-shell {
height:100vh; height:100dvh; min-height:0;
}
body:has(.showdown:not(.hidden)) .showdown {
flex:0 1 auto; min-height:0; overflow:auto;
}
}
/* ── 横向きの ふたが 2px 足りなかった ───────────────────────
`max-height:calc(100dvh - 10px)`（T246・style.css 約1744行）は、
`.app-shell` の 上下の 余白が **5px＋5px＝10px** の ところ（たけ≦320）に
合わせた 数でした。★たけ 321〜480 では 余白が **6px＋6px＝12px** なので、
★★2px ぶん はみ出して いました【実測：812×375 で ページ 377／窓 375】。
★ 余白と 同じ 数に そろえます。★ふだんの 画面は 変わりません。 */
@media (min-width:561px) and (max-height:480px) {
.showdown { max-height:calc(100vh - 12px); max-height:calc(100dvh - 12px); }
}
@media (min-width:561px) and (max-height:320px) {
.showdown { max-height:calc(100vh - 10px); max-height:calc(100dvh - 10px); }
}
/* ============================================================
★ T246-4 ―― レイズを 決める しゅんかん、「ポット」を 見えるように する
（社長のお決め・T246-3 §8-7 の 案）― 🎨アト
------------------------------------------------------------
★ 何が 起きて いたか（★私が 作った 穴です）
T246-2 の ④ で レイズ窓を 98 → 147px に 広げました。
その ぶん 窓が 上に のび、★たけ≦320 の 横向きで **卓の まん中「ポット ◯」を
ふさいで** いました。★直す前は 0% でした ―― ★★私が 82%・100% に しました。
★ なぜ まずいか（数）【実測・道具 t246_pot.cjs／t246_pot2.cjs】
・568×320（iPhone SE 初代の 横向き ＝ 本物の 端末）… ポットの 字が **81.9% かくれる**
・568×272（底）……………………………………………… **100% かくれる**
・★★かけ②（取りかえの あと）では、席の かけ金が 4人とも 0 に もどる ので、
★「いくら 賭かって いるか」は **ポットの 1か所 だけ** にしか 出て いません。
★ それが「レイズを 決める まさに その 瞬間」に 消えて いました。
★ 設計図 §5.5-③「画面が 教える（強さを 計算させない）」の 逆。
★ どう 直すか ―― 「下の すきま」を、窓が 開いて いる あいだ だけ 上に 詰める
卓は `justify-content:space-between` で 席・まん中・手札を 上下に 散らして います。
★ レイズ窓が 開いて いる あいだ、**手札は もともと 100% かくれて 使えない**
（＝ 卓の 下 3分の1は 死んで いる）。
★ そこで `flex-start` に して、あまった すきまを ぜんぶ 下に 集める。
★ 席は 動かず、まん中（ポット）だけが 窓の 上に 出て きます。
⚠️ 窓を とじれば ぜんぶ もどります。字は 1px も 小さく していません。
⚠️ 消した 情報は ありません。待ち時間も 1ms も 足して いません
（★`justify-content` は 動きの つかない 決まりなので、**うつり変わりは 0ms**）。
★ 線は 新しく 引いて いません（追記⑥ の 決まり2）
`(min-width:561px) and (max-height:320px)` は **すでに この ファイルに 2か所 ある** 線
（.raise-panel の 並べ方・.showdown の ふた）。★13画面の どれも またぎません
（★たけ：272・320 が 中／375 以上は 外）。
★ 直した あと（★実測・種7 の かけ①・レイズ窓を 開いた 状態）
| 画面 | ポット かくれ | コインの山 | はみ | よこ送り |
| 568×320 SE初代よこ | 81.9% → ★0% | 85.4% → 0% | 0 | なし |
| 568×272 底 | 100% → 82.6% | 100% → 85.8% | 0 | なし |
| ほかの 5つの 横向き | 0% → 0%（★1数字も 変わらない）| 0% → 0% | 0 | なし |
★★ 正直に 言う こと（★社長は これを 読んだ うえで お決めに なりました）
① ★**底（568×272）は これでも 直りません**（100% → 82.6%）。
窓 272px の うち レイズ窓が 147px（54%）。上に 残るのは 120px。
そこに 席（97.6px）＋ ポットの 行（31px）＋ すきま ＝ 130px 以上は 入りません。
★ ＝ ここは「**できません**」（追記⑤-①）。追記③ の「静かに 見切れる」に なります。
② ★**レイズを 押した しゅんかん、卓の 中身が 少し 上に 動きます**（★動く量は 作業メモに 数字）。
============================================================ */
@media (min-width:561px) and (max-height:320px) {
body:has(#raisePanel:not(.hidden)) .board-wrap { justify-content:flex-start; }
}
/* ============================================================
★ T246-5 ―― ①決着でも ハッピーを 消さない ②捨て札の 点線わく
③320×480・320×454 の はみ出し（社長のお決め「直す」）― 🎨アト
------------------------------------------------------------
★ ① は 上の ⑨（style.css 約1330行）で 直しました。ここは その 代金の 置き場です。
★★ ② 捨て札の 束の 上に 点線わくが 残る（💻コーダが 見つけて くれました・T248 §6-③）
★ 置き場の 点線は「ここに 置く」を 言う 印です。★束が 乗った あとは、
★★束そのものが「ここに 置いた」を 言って いる ので、線は 役目を 終えて います。
★ 山札（.spot-deck）は 前から 同じ 考えで 線を 消して あります（style.css 約1620行）。
★★同じ まん中の 行に、★線の ある 置き場と 無い 置き場が ならんで いたのは ちぐはぐでした。
★ 【絵で 見つけた もの】写真 `T248_写真_コーダ\e\926x428_捨て札9枚_束8.png`：
★★白い 点線が うら札の 赤の まわりに 光の わのように 出て、★★★刷りまちがいに 見えます。
⚠️ **0枚の ときは 線を 残します** ―― そこが「これから たまる 場所」だと 分かる ため。
★★ ③ たけの 低い たて 2画面（320×480・320×454）の はみ出し
★ 直す前【実測・t246_hakaru.cjs・種7】
| 画面 | かけ① | 取りかえ5枚 | かけ② | 決着 | 押すもの外 |
| 320×480 | 39 | 78 | 75 | 0 | 15.8 |
| 320×454 | 65 | 104 | 101 | 0 | 41.8 |
★ **できない こと**（★先に 書きます）
・字を 小さく する … 会社の 床は 11px（§9.6）。★9.5px は もう 床すれすれ
・情報を 消す ……… 役の強さ・コイン・かけの ボタンは どれも 遊びに 要る
・★★**緑の場を 小さく する** … 46.9%（320×480）は T246 の 成果そのもの。
★★★ここを 削ったら「場を 大きく」の お求めを 自分で こわします
★ **だから 使えるのは 余白と すきま と「実況の行の 作り」だけ**です。
★ 実況の行（.log-row）は たけ **61px**。★その うち かおが 42px（36＋名ふだの ぶん 6）。
★★この 2画面 だけ、かおを 26px に して 名ふだを しまい、実況の 文も しまいます。
★ **ハッピーは 消しません**（★§9.5・★①で 決着にも 出す ように した ばかりです）。
★ 実況の 文を しまう のは、★底（568×272）で 前から やって いる のと 同じ 手です
（style.css §3-5・T246）。★中身は 席の ふだ（「降りた」「小がけ 5」）が 言って います。
★ 線（追記⑥ の 決まり2 ―― 13画面の どれかを またがないか 数えました）
`(max-width:380px) and (max-height:480px)`
★ 当たる：320×480 ／ 320×454 ★の 2つだけ
★ 外れる：320×568(たけ568)・390×844(はば390)・375×812(たけ812)・
812×375/667×375/844×390/736×414/926×428/568×320/568×272(はば561以上)・1280×800
★ **はば 380 と たけ 480 の 線は、どちらも すでに この ファイルに ある もの**です
（`@media (max-width:380px)` 約378行 ／ `max-height:480px` 約1690行）。新しい 線では ありません。
============================================================ */
/* ── ② 捨て札：束が 乗ったら 点線わくは しまう（0枚の ときは 出す）───── */
.spot-discard:has(.pile-card)::before { display:none; }
/* ── ③ たけの 低い たて 2画面 だけ：余白と 実況の行を つめる ───────── */
@media (max-width:380px) and (max-height:480px) {
/* ページの 下の 余白（22 → 3）。★上は さわらない */
.app-shell { padding-bottom:3px; }
/* かたまりと かたまりの すきま 5 → 2 */
.topbar { margin-bottom:2px; }
.log-row { margin-top:2px; }
.act { margin-top:2px; }
.ranks { margin-top:2px; }
/* ★★ 卓（.board-wrap）には 1px も さわりません ―― ★理由は 上の 見出しに 書いた とおり、
★★緑の場を 小さく したら「場を 大きく」の お求めを 自分で こわす から。
★ 1度 木わくの 内がわを 8/6 に つめて 測ったら、★★320×454 の 緑の場が
★49.6% → 48.9% に **下がりました**【実測・sunpo_T246_5後.json】。★★戻して います。 */
/* 実況の行 ―― ★ハッピーは 残す。★小さくして、名ふだと 実況の 文を しまう */
.log-row { padding:3px 8px 4px; border-width:2px; gap:7px; }
.log-row .happy-wrap { width:34px; padding-bottom:0; }
.log-row .happy-cat { height:26px; }
.log-row .happy-name { display:none; }
.log-row .table-log { display:none; }
.log-row .happy-bubble { margin-bottom:0; }
}
/* ============================================================
★ T246-6 ―― ①レイズを 決める しゅんかん、自分の 手札を 見えるように する
②ゲームオーバーで 自分の 5枚が 消えるのを 直す
（社長のお決め「1 ＝ 直す」・🧪トライ T249 §F-1／§F-2）― 🎨アト
------------------------------------------------------------
★★ まず 数え直しました（★私の T246-2 §7-4(あ)「横向きだけ・元から」は まちがいでした）
★ 13画面・種7・かけ①・レイズ窓を 開けた ところ・★動きが 止まってから・★人が 遊ぶ 速さ
（★早送りは 使って いません。★本物の 指で「レイズ ▾」を 押して います）
★ 測り方は 2つ：①わくの かさなり（トライと 同じ 出し方）②★絵で 見る（札の 上に 35点）
★ ★2つとも ほぼ 同じ 数に なりました（★道具 t250a_kazoe.cjs）。
| 画面 | 前(T246まえ) | T246-2 | T246-4 | いま(T246-5) |
|-----------|-------------|--------|--------|--------------|
| 320×568 | 35.9 ※ | 57.4 | 57.4 | 57.4 |
| 320×480 | 35.9 ※★ | 57.4 | 57.4 | ★**100** |
| 320×454 | 35.9 ※★ | 57.4 | 57.4 | ★**100** |
| 375×812 | 35.9 ※ | 57.4 | 57.4 | 57.4 |
| 390×844 | 31.7 ※ | 50.8 | 50.8 | 50.8 |
| 812×375 | 0 ※★ | 100 | 100 | 100 |
| 667×375 | 92 ※★ | 100 | 100 | 100 |
| 844×390 | 0 ※★ | 100 | 100 | 100 |
| 736×414 | 0 ※★ | 100 | 100 | 100 |
| 926×428 | 0 ※ | 100 | 100 | 100 |
| 568×320 | 19.6 ※★ | 100 | 90.8 | 90.8 |
| 568×272 | 67.6 ※★ | 100 | 100 | 100 |
| 1280×800 | 0 | 0 | 0 | 0 |
※ …「前」は ページが **15〜314px はみ出して** いて、★★13画面中 8画面で
「レイズ ▾」が 指で 押せません でした（★印）。★★★くらべる 土台に なりません。
＝「元から こうだった」とは 言えず、「★元は もっと ひどかった」が 正しい。
★★ 正直に 書く こと（★私の 作った 穴が 1つ ありました）
★ **320×480・320×454 の 100% は、★★私の T246-5 の 直しで そうなりました**
（57.4% → 100%）。★あの とき すきまを 40px つめたので、★ボタンが 33px 上がり、
★★レイズ窓も いっしょに 33px 上がった。★手札は 3px しか 動いて いません。
★ トライの「12画面中 10画面」は、★私の 数え直しでは **13画面中 9画面**（90.8%以上）。
★★どちらにしても「横向きだけ」では ありません。★★★私が 見落として いました。
------------------------------------------------------------
★★ どう 直したか ―― 「窓を 動かす」ではなく「★卓を 上に 寄せる ＋ 窓を うすくする」
★ 先に 消した 道（★数で 落として います）
・★窓を 卓の 上（席の 上）へ 動かす … 手札は 0% に なるが、★★席が 100%・
★ポットが 43〜100% かくれる【実測・案4／案5】。★ポットは 社長が T246-4 で
「レイズを 決める まさに その 瞬間に 隠れる」と 指された ところ。★入れ替えるだけ。
・★窓を 1行に する … ★★「＋10」と「決定」が 1.8〜31.8px かぶる【実測・t250d】。
★T247 が 見つけて T246-4 で 直した 穴を、自分で 開け直す ことに なる。
★ 入れた もの（★4つ）
① 窓が 開いて いる あいだ、卓の 中身を 上に 寄せる（justify-content:flex-start）
★ T246-3 で「たけ≦320 の 横向き」だけに 入れた 手を、★13画面ぜんぶに 広げる。
★ 窓が 開いて いる あいだ、卓の 下 3分の1は どうせ 窓の 下。★そこを あける。
★ うつり変わりは 0ms（justify-content は 動きの つかない 決まり）。窓を とじれば 戻る。
② 横向き（はば700以上）：窓を 3行 → 2行（147px → **97px**）。
★ かぶりを 作らない ように「決定」の マスを 112〜132px に 決めた
―― ★数：窓 460px・中みの はば 436px。「数の増減」は 288px 要る。
436 − 132 − 9 ＝ **295px** ≥ 288 ★→ ちぢまない ＝ かぶらない【実測 0件】。
③ せまい たて（320×480・320×454）：窓を 4行 → 3行（147px → **129px**）。
★ 「見出し」と「合計の 文」を 1行に。★字は 1px も 小さく していない。
★ ★44px は 割って いない（46 → 44 ぴったり）。
④ はば 561〜699 の 横向き（667×375・SE初代よこ・底）：窓を うすく（147px → **91px**）。
★ 「決定」を 96〜104px に して「数の増減」と 同じ 行に 置いた。
384 − 104 − 6 ＝ 274px ≥ 262px ★→ かぶらない【実測 0件】。
★ 直した あと（★13画面・同じ 種7・同じ 場面・★絵で 数えた 割合）
| 画面 | 手札 いま→あと | ポット | 席 | まん中 |
|----------|---------------|--------|----|--------|
| 320×568 | 57.1 → ★**0** | 0→0 | 0→0 | 0→0 |
| 320×480 | 100 → 71.4 | 0→0 | 0→0 | 0→0 |
| 320×454 | 100 → 71.4 | 0→0 | 0→0 | 0→0 |
| 375×812 | 57.1 → ★**0** | 0→0 | 0→0 | 0→0 |
| 390×844 | 57.1 → ★**0** | 0→0 | 0→0 | 0→0 |
| 812×375 | 100 → ★**0** | 0→0 | 0→0 | 0→0 |
| 667×375 | 100 → ★**0** | ★14.3→**0** | 0→0 | ★14.3→**0** |
| 844×390 | 100 → ★**0** | 0→0 | 0→0 | 0→0 |
| 736×414 | 100 → ★**0** | 0→0 | 0→0 | 0→0 |
| 926×428 | 100 → ★**0** | 0→0 | 0→0 | 0→0 |
| 568×320 | 85.7 → 14.3 | 0→0 | 0→0 | 0→0 |
| 568×272 | 100 → 57.1 | ★85.7→**0** | 0→0 | ★85.7→**0** |
| 1280×800 | 0 → 0 | 0→0 | 0→0 | 0→0 |
★ ★9画面が **0%**（ぜんぶ 見える）。★ポットも 2画面で 直った（おまけ）。
★★ ★できない こと（追記⑤-① ―― はっきり 書きます）
★ **320×480・320×454・568×320・568×272 の 4画面は、0% に できません。**
★ 理由は 数です。★はば 320px の 窓に「数の増減」（270px）と「決定」（112px）は
★★同じ 行に 入りません（270＋112＋すきま ＝ 391px > 中み 282px）。
★ ＝ たてに 2行 要る ＝ 44＋44＋見出し18＋すきま ＝ ★**最短でも 129px**。
★ 手札を ぜんぶ 出すには **77px 以下**が 要る。★★52px 足りません。
★ 568×320／568×272 は 卓そのものが 足りない
―― 席97.6＋まん中31＋自分の席86 ＝ **214.6px** に 対し、窓の 上に 残るのは 165px。
★ ★★でも「見えない」では なくなりました：★★★13画面 × 5枚 ＝ 65マス とも
**数と マークの 角（札の 左上）が 見えます**【実測・t250h_kado.cjs・角に 9点】。
★ 見えて いる たて：320×454 は 17.7px／320×480 は 23.3px／568×272 は 26.4px／
568×320 は 62.4px（★札の たては 69.7px）。★★直す前は 9画面で 1枚も 見えず。
★ ＝ 何を 持って いるかは 読めます。★★これ以上は 字を 小さく しないと できません。
------------------------------------------------------------
★★ ② ゲームオーバーで 自分の 5枚が 消える（トライ T249 §F-2）
★ 数え直し（★種を 1〜12 まわして 33回・★絵で 見た）
★ トライは「26マス中 1マス（320×454 だけ）」。★私の 数え直しは **もっと 広い**：
| 画面 | 自分の札が かくれた 回 | かくれた 割合 | 角が 見える |
| 320×454 | ★**11 / 11回** | 85.7〜100% | ★**0/5** |
| 320×480 | ★**11 / 11回** | 28.6% | 5/5 |
| 320×568 | 0 / 11回 | 0% | 5/5 |
★ ＝ **2画面・ほぼ 毎回**（★たまたまでは ない）。★トライの 道具は 札の 9点、
★私は 35点＋角の 9点で 見たので、★320×480 の 28.6% を 拾えました。
★ なぜ：決着の わくは たてで ちぢむ（flex:0 1 auto; overflow:auto・T246-3）。
★ ゲームオーバーの わくが 下に 増える ぶん わくが さらに ちぢみ、
★★自分の 行が わくの 中で 送られて 消える（★320×454 で 87px 送る）。
★ 直し（★2つ・どちらも 情報は 消して いない）
⑤ ゲームオーバーの あいだ だけ「🃏 役の強さを 見る ▾」の ふだを しまう
★ 44px ぶん、決着の わくに たけを 渡す。★ゲームオーバーの 画面で
役の一覧を 開く 人は いない（★決着の 行が 役の名前を もう 言って いる）。
★ ⚠️ ふつうの 決着では しまいません。★「もういちど」を 押せば 戻ります。
⑥ せまい たて 2画面だけ、決着わくの すきまを つめる（★字も 札も 1px も 変えない）
★ 直した あと【実測・種1〜12・33回】
★★ 自分の札が すこしでも かくれた回：★**22/33 → 0/33**。★角は 33回とも 5/5。
------------------------------------------------------------
★ 線は 新しく またいで いません（追記⑥ の 決まり2 ―― 13画面を 数えました）
・(min-width:700px) and (max-height:480px)
★当たる：736×414・812×375・844×390・926×428
★外れる：667×375・568×320・568×272（★はば 699 以下）／たての 5つ／PC
★ **700 は すでに この ファイルに ある 線**（約1783行 min-width:700px）。
★ ★はじめ 640 に して 測ったら、★★667×375 で「役の強さを 見る ▾」の まん中が
★窓に かぶられました（★窓が 400 → 460px に 広がった ため）【実測・t249e_yubi】。
★ ＝ 667 は 左の 列（ハッピー・役）と かけの 列の あいだが **381px** しか なく、
★2行に 要る **415px** が 入らない。★だから 667 は ④の うすい 3行に する。
・(min-width:561px) and (max-width:699px) and (max-height:480px)
★当たる：667×375・568×320・568×272 の 3つだけ（★上の 裏返し）
・(max-width:380px) and (max-height:480px)
★当たる：320×480・320×454 の 2つだけ（★T246-5 で すでに ある 線）
★ さわったのは この CSS だけ。★game.js・verify.js・index.html は 1文字も 変えて いません。
★ 字は 1px も 小さく していません／44px も 割って いません／待ち時間も 1ms も 足して いません。
============================================================ */
/* ── ① 窓が 開いて いる あいだ、卓の 中身を 上に 寄せる ──────────
★ 約2041行の T246-3（たけ≦320 の 横向き だけ）を、13画面ぜんぶに 広げた もの。 */
body:has(#raisePanel:not(.hidden)) .board-wrap { justify-content:flex-start; }
/* ── ② 横向き（はば700以上）：窓を 3行 → 2行（147 → 97px）────────── */
@media (min-width:700px) and (max-height:480px) {
.raise-panel {
width:min(460px, calc(100vw - var(--side-r) - 40px));
grid-template-columns:minmax(0,1fr) minmax(112px,132px);
grid-template-areas:"title note" "step ok";
gap:4px 9px;
}
.raise-panel .raise-stepper { justify-content:center; }
}
/* ── ③ せまい たて（320×480・320×454）：窓を 4行 → 3行（147 → 129px）── */
@media (max-width:380px) and (max-height:480px) {
.raise-panel {
padding:4px 8px 5px; gap:2px 8px;
grid-template-columns:auto minmax(0,1fr);
grid-template-areas:"title note" "step step" "ok ok";
}
.raise-panel .raise-title { text-align:left; white-space:nowrap; }
.raise-panel .raise-note { text-align:right; }
.raise-panel .step-btn,
.raise-panel .raise-input,
.raise-panel .raise-ok { min-height:44px; }
}
/* ── ④ はば561〜699 の 横向き（667×375・SE初代よこ・底）：窓を うすく（147 → 91px）── */
@media (min-width:561px) and (max-width:699px) and (max-height:480px) {
.raise-panel {
padding:5px 8px 6px; gap:3px 6px;
grid-template-columns:minmax(0,1fr) minmax(96px,104px);
grid-template-areas:"title title" "note note" "step ok";
}
.raise-panel .raise-title { text-align:left; }
.raise-panel .raise-note { text-align:left; }
.raise-panel .raise-stepper { gap:4px; justify-content:center; }
.raise-panel .step-btn,
.raise-panel .raise-input,
.raise-panel .raise-ok { min-height:44px; }
}
/* ── ⑤ ゲームオーバーの あいだ だけ、役の強さの ふだを しまう ────────
★ 決着の わくに 44px 渡す ため。★ふつうの 決着では しまわない。 */
body:has(.over-box:not(.hidden)) .ranks { display:none; }
/* ── ⑥ せまい たて 2画面：決着わくの すきまだけ つめる ─────────────
★ 字も 札も 1px も 変えて いない。★余白と すきまだけ。 */
@media (max-width:380px) and (max-height:480px) {
.showdown { padding:6px 6px 7px; }
.sd-rows { gap:4px; }
.sd-row { padding:4px 5px; }
}
/* ============================================================
★★★ T277 ―「↻ さいしょから」（★アトの 型・T273 §2 ／ 設計図 追記⑩）★★★
------------------------------------------------------------
★ 置き場所 … ★上の帯の いちばん 右。★はじめの 画面が 無い 本なので、
★★出し入れ しません（★いつも 出たまま）。
★ はみ出し … ★たて向きの 帯は `.back` の 38px【実測】。★44 − 38 ＝ ★6px。
★★**上に** 返します（margin-top:-6px）。★上には 空が 8〜10px あります。
★★★下に 返すと ★ラシャ（.board-wrap）の 右上の 丸い かどに かかります
【★ホールデムで 写真の 画素が 鳴きました：96/880画素】。
⚠️★ 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; }
/* ★ はば 374px 以下は 字を 1段 下げます（★型の とおり）。
★★ T286（2026-09-13）― ★ここには もう 1行、★`.quit-btn .quit-icon` を **落とす** 決まりが ありました。
★ ★★外しました。★★★わけ：★兄弟の ホールデムは T284 で 12画面ぜんぶ 出る ように なり、
★ ★この本だけ 320px の 3画面で しるしが 消えて いました（★T282 の「兄弟が 割れて いる」）。
★ ★数えた 代金【★実測・320×568／480／454】：
★ ・★ボタン ★**77.33 → 97.33px**（★＋20px ＝ しるし16 ＋ あき4）
★ ・★題の 器 ★162.67 → **142.67px**。★題の 中身は **54px** ―― ★★余り **88.67px**。★点々も 折れも 出ません
★ ・★帯の たかさ・★卓・席・札・チップ・かけの ボタンは ★**1pxも 動きません**（★§2 の 表）
⚠️★ 落とす 決まりは もう 1本も 置きません。★★`t286KesuKimari()` が CSS を 読んで 数え、1本でも あれば 鳴きます。 */
@media (max-width:374px) {
.quit-btn { font-size:10.5px; padding:0 6px; }
}
/* ★★ はば 520px 以下は「◀ ゲームを選ぶ」を「◀」だけに します（★社長のお決め②）★★ */
@media (max-width:520px) {
.back .back-word { display:none; }
.back { min-width:44px; justify-content:center; padding:0 10px; }
}
/* ============================================================
⚠️★★★ T277 ― ★よこ向き だけは 型が **そのまま 入りません**（★T273 で 私が 書いた 所）★★★
------------------------------------------------------------
★ この本の よこ向きは `.topbar{display:contents}` ―― ★**帯が ほどけて**、
★中の 3つ（もどる／題／いま どこ）が それぞれ 別の マスに 入ります。
★ ★だから `order` も `margin-left:auto` も `align-self` も **効きません**。
★★grid-area を 書かないと、★ボタンが 勝手な マスに 置かれ、
★★★手札が −50px、★かけの ボタンが −199px 動きました【★T277 実測】。
★ どう 入れたか ―― ★**「もどる」と 同じ マスの 右はし**に 置きました。
★ ①「◀ ゲームを選ぶ」を「◀」1字に する（★コネクトフォー T274 と 同じ 手当て）
★ ②ボタンの 字を 1段 下げ、★↻ を 落とす
★ ★左の 列は 126／160／190px【実測】。★44 ＋ 79 ＝ **123px** ―― ★いちばん せまい
★★568px の 画面でも 3px あまります。★行も 列も 1つも 増えません。
★ ★代金：★よこ向きでは「ゲームを選ぶ」の 字が 見えなく なります（★社長のお決め②）。
============================================================ */
@media (min-width:561px) and (max-height:480px) {
.back .back-word { display:none; }
.back { min-width:44px; justify-content:center; padding:0 8px; }
.quit-btn {
grid-area:back; justify-self:end; align-self:start;
margin-top:0; font-size:10.5px; padding:0 6px;
}
}
/* ============================================================
★★★ T286 ― ★よこ向きでも しるしを 出す（🎨アト・2026-09-13・★社長のお決め「1. いま ポーカーも 直す」）★★★
------------------------------------------------------------
★ ★★ここに あった `.quit-btn .quit-icon{display:none}` を 外しました。
★ ★外すと ボタンが **＋20px** 太ります（★しるし16 ＋ あき4）。★★入るか どうかは 画面で 分かれます
★ 【★実測・T286・左の 列を 1pxまで 数えた】：
| ★画面 | ★左の列 | ★もどる | ★いまの ↻ | ★あいだ | ★＋20px |
|---|---|---|---|---|---|
| ★812×375・844×390・736×414 | ★160px | ★8→52 | ★91→168（77.3） | ★**39px** | ★★入る（★あと 19px） |
| ★926×428（★最優先） | ★190px | ★8→52 | ★121→198（77.3） | ★**69px** | ★★入る（★あと 49px） |
| ★**667×375・568×320・568×272** | ★**126px** | ★8→52 | ★57→134（77.3） | ★**4.67px** | ★★★**入らない ―― 15.33px たりない** |
★ ★★左の 列を 広げれば 入りますが、★★★それは 卓を 15.33px 小さく する ことです（★社長が T215 で
★ 9.6倍に された もの・★追記③）。★★だから 広げません。
★ ★もどる（◀）も 縮められません ―― ★44px は 指の 床。
★ ★★→ ★しるしを **字の となり**では なく **字の 上**に 置きました。
★ ★★ボタンの はばを 決めて いるのは **字**（59.3px）なので、
★ ★★★はばは **77.33px の まま ―― ★1pxも 太りません**。★たかさも min-height:44px の まま 44px。
★ ★中身：★しるし16 ＋ あき2 ＋ 字12 ＝ 30px。★44px の 中に おさまります。
★ ★代金：★この 3画面だけ、★しるしが 字の **上**に 出ます（★となりでは ない）。
★ ★★「◀ ゲームを選ぶ」が よこ向きで「◀」だけに なる のと 同じ 形の 手当てです（★社長のお決め②）。
⚠️★ `gap` は 使いますが `flex` の 中の gap なので、★★行も 列も 1つも 増えません。
============================================================ */
@media (min-width:561px) and (max-width:699px) and (max-height:480px) {
/* ★ あきは ★**4px** ―― ★よこ ならびの ときと 同じ 数（★`.quit-icon{margin-right:4px}`）。
★ ★はじめ 2px で 書いて、★★見張りの 床（3px）に **1px 足りず** 鳴きました【★T286 実測】。
★ ★中身は 16 ＋ 4 ＋ 11.55 ＝ **31.55px**。★min-height:44px の 中に おさまります。 */
.quit-btn { flex-direction:column; gap:4px; line-height:1.1; }
.quit-btn .quit-icon { margin-right:0; }
}
/* ============================================================
★★★ T297 ―― ★上の帯を 画面に くっつける（★🎨アト・2026-09-15）★★★
★ ★社長裁定「★1. 直して、そのまま 公開」。★お手本は ★ブラックジャック（★T279）と 七並べ（★T285）。
★★ この かたまりは **ポーカー 1本だけ**。
------------------------------------------------------------
★ ★直す前【★アト実測・T297-01・★12画面・★本物の 指で 下へ すべらせた】：
★ ★★**320×454**（★上 −25／−28px）と ★**320×480**（★「↻ さいしょから」の 上が −2px・
★ ★すべれるのは たった 4px）の **2画面**。
★ ★★⚠️トライの T296 は「★ポーカー 1画面」でした。★私の 実測は **2画面**です
★ ★（★ちがいは 320×480 の 4px。★★遊びの どこで 測るかで ページの たけが 変わる ため）。
★ ★★**少ない ほうに 合わせません。★2画面 として 直します。**
★★★ よこ向きは 帯が **ほどけて** います（★T273・T277・T286 で 私が 何度も 当たった所）★★★
★ ★`@media (min-width:561px) and (max-height:480px)` では `.topbar{display:contents}` ――
★ ★★帯の **箱が そもそも 無い**ので、★`position` も `::before` も 1つも 効きません
★ ★★（★実測：★よこ向き 7画面の 帯は **0×0px**）。
★ ★**でも、この 7画面は 直す 相手では ありません。**★実測で ★**すべる ところが 0px**
★ ★（★器が `min-height:100dvh` の grid で 画面ちょうど）＝ ★★★帯が 消える ことが 起きません。
★ ★→ ★だから この かたまりは ★**よこ向きの grid を 外した ところだけ**に かけます
★ ★（★`@media (max-width:560px), (min-height:481px)` ―― ★★1972行に すでに ある 式と
★ ★★**1文字も 同じ**。★新しい 線を 1本も 引いて いません＝追記⑥ 決まり2）。
★ ★★**入らない ところは「入らない」と 書きます。**★よこ向き 7画面は くっつけて いません。
★ ★止める 位置は ★**6px**（★「↻ さいしょから」の `margin-top:-6px`）。★器の 上の よはく 8px の 中。
★ ★`z-index` は **20**。★中身の いちばん 上は 3、★かけの パネルは 40、★役の一覧は 60 ――
★ ★★かぶせ窓は どちらも 帯の 上のまま。
------------------------------------------------------------ */
@media (max-width:560px), (min-height:481px) {
/* ★ `.app-shell{padding-top}` の 写し（★1093行 10px）。★ずれたら `POKER.verify()` が 鳴きます。 */
:root { --bar-pad-top:10px; --bar-over:6px; --bar-h:38px; }
.topbar { position:sticky; top:var(--bar-over); z-index:20; }
/* ★ 空と **まったく 同じ** ふた（★body 425〜430行の 写し）。 */
.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;
}
html { scroll-padding-top:calc(var(--bar-over) + var(--bar-h) + 4px); }
}
/* ★ ★1113行と そろえる（★せまい画面は 器の 上が 8px・空が 118px）。
★ ★`max-width:560px` は よこ向きの grid（`min-width:561px`）と 重ならないので、
★ ★ほどけた 帯に かかる ことは ありません。 */
@media (max-width:560px) {
:root { --bar-pad-top:8px; }
.topbar::before { background-size:100% 118px; }
}