/* ============================================================
   セブンブリッジ ― 見た目（T174・コーダ）
   ------------------------------------------------------------
   ★ ここは「中身が 動く 形」までです。★仕上げは 🎨アト。
   ★ 既存18本と 同じ 色・同じ 部品の 名前で 書いて あるので、★アトは いつもの ように 上から 直せます。
   ★ 見た目の もとは **ページワン T162／T163 ＝ ハーツ T167**（＝ 大富豪の 形）：
     ★ 白い 囲い（.start-card）・場の 台（木わく＋みどりの ラシャ）・左右の 余白・上の 帯の 小さい ハッピー。

   ★★★ この 1本の 決まりごと（★アトへ・ここだけは 動かさないで ください）★★★
     ------------------------------------------------------------
     ① ★★★★ 2026-08-31・T180 ―― ★★ここは 設計図「追記②の 例外」で 書きかわりました ★★★★
        ★ ★→ 設計図 §5.5「⚠️★★ 追記②の 例外：**セブンブリッジだけ『出せる組を さがして 光らせる』**」
            （★2026-08-31・社長裁定）を **必ず 先に 読んで ください**。
        ★ ★★強調は **2種類** です：
          ★ ★`.card.is-play` … ★★青いわく ＝ ★★いま 場に 出せる 札（★機械が さがして 出します）
          ★ ★`.card.is-pick` … ★ピンクのわく ＝ ★人が 押して えらんだ 札（★指の 返事）
        ⚠️★★ ★**これは 決まり違反では ありません。★消しに 来ないで ください。**
          ★ ★★verify ⑤ は いま「★★青いわくが **出て いるか**」を 見張って います（★前と 逆）。
        ★ ★どちらも **outline** で 書いて あります ―― ★box-shadow で 書くと
          ★「広がり 2px 以上 ＝ 光り」に なって しまう から です（★ページワン T152 の 決まり）。
        ⚠️★★ ★`.is-play` に `transform` を 足さないで ください ―― ★★となりの 札との 重なりが 変わり、
          ★ ★点の まる（`.pt`）が かくれます（★verify ⑰-2・T179 が 鳴ります）。
     ② ★★`.card` に `:hover` を 足さない ―― ★指の 端末で こびりつきます。
     ③ ★★札の 比は 419:635。★はば・たけは JS が --cw/--ch/--bw/--pw/--tw に 入れます。★上書きしない。
     ④ ★★`.pt`（★札の すみの 点）は **消さないで ください** ―― ★これが あそびかたを 4行 減らして います
        （★ルル §2-2）。★★7の「0」が いちばん 目立つ ように するのは アトの 仕事 です。
     ⑤ ★★結果の 箱は `--result-max` 以下。★手札に かぶらせない。
   ============================================================ */

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

  /* ★★ T180 ―― ★「いま 出せる」の 青（★社長指示②③④）★★
     ★ ★#1E7FC8 と 白 … ★色の 濃さの 差 **4.86:1**（★4.5:1 の 線を こえます）【計算】 */
  --blue:      #37A6EE;
  --blue-deep: #1E7FC8;
  --blue-dark: #14609B;
  --blue-soft: #DCF0FF;

  --m-black:   #3D3550;
  --m-red:     #E2506A;

  --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;

  /* ★ JS が 入れなおす 値（★はじめの 値は 320×568 の もの）*/
  --cw:    60px;   /* ★ 自分の 札 */
  --ch:    91px;
  --bw:    20px;   /* ★ ロボットの 裏札 */
  --bh:    30px;
  --pw:    45px;   /* ★ 山・すて札 */
  --ph:    68px;
  --tw:    43px;   /* ★★ 場の 札（★組の 数で 変わります）*/
  --th:    65px;
  --gap:    4px;
  --result-max:220px;
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; }
body {
  margin:0; overflow:hidden;
  font-family:var(--font-main);
  color:var(--ink);
  background:linear-gradient(180deg, var(--sky) 0%, #E8F7F3 46%, var(--cream) 100%);
  -webkit-user-select:none; user-select:none;
}
.hidden { display:none !important; }
.sprite-defs { position:absolute; width:0; height:0; overflow:hidden; }

/* ★★ 左右の 余白（★ページワン T162③・将来の 広告のため・社長指示）★★
   ★ 大富豪から 写した 正体は たった 1行：`max-width:1000px; margin-inline:auto;` */
.app-shell {
  height:100%; height:100dvh;
  width:100%; max-width:1000px; margin-inline:auto;
  display:flex; flex-direction:column; gap:6px;
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
}

/* ── 上の帯 ─────────────────────────────── */
.topbar { flex:0 0 auto; display:flex; align-items:center; gap:6px; min-height:44px; }
/* ⚠️★★ `.back` は **かならず .topbar で しぼる** こと ―― ★札の うら面の 絵も `img.back` です
   （★ページワン T152 で 60件の 誤りの もとに なりました）。 */
.topbar .back {
  display:flex; align-items:center; gap:2px; min-height:44px; padding:0 12px;
  border-radius:999px; background:var(--white); color:#5a7a8c;
  font-size:12.5px; font-weight:900; text-decoration:none;
  box-shadow:0 2px 0 #cfe4ea;
}
.brand { flex:1 1 auto; display:flex; align-items:center; justify-content:center; gap:6px; min-width:0; }
.brand-cat { width:30px; height:23px; flex:0 0 auto; }
.brand span { font-weight:900; font-size:16px; color:#3f5a70; white-space:nowrap; }
.howto {
  min-height:44px; padding:0 12px; border:0; border-radius:999px;
  background:var(--gold-soft); color:#8a6420; font-size:12.5px; font-weight:900;
  box-shadow:0 2px 0 #e0c25f; cursor:pointer; font-family:inherit;
}
@media (max-width:520px) {
  .topbar .back span { display:none; }
  .topbar .back { padding:0 11px; min-width:44px; justify-content:center; }
  .howto { padding:0 10px; font-size:12px; }
  .brand span { font-size:15px; }
}
@media (max-width:360px) {
  .app-shell { gap:5px; }
  .brand-cat { display:none; }
  .brand span { font-size:13px; }
}
@media (max-width:340px) { .app-shell { padding:6px 3px; } }

/* ★★★ T275 ―「↻ やめる」の 型（★アト T273 §2 の 型・★設計図 追記⑩）★★★
   ------------------------------------------------------------
   ★ 置き場所 … 上の帯の いちばん 右（★盤にも 札にも かぶらない 足場）
   ★ 大きさ  … ★指の的 44×44 を 本当に 取る。
                ★「見た目 32px ＋ 見えない 的 44px」は 下の 箱に 上書きされて
                ★効きません（★T273 §6 実測 36〜42px）。★箱そのものを 44px に する。
   ★ 返す margin … ★この本の 上の帯の たけは **44px**【T275 実測】。
                ★44 − 44 = **0** ―― ★返しは 要りません（★帯も 器も 1pxも 動かない）。
   ★ 色      … うすみどり（★20本の 帯で 唯一 空いていた 色・★T273 §2 実測）
   ★ z-index … ★飾りでは ない。★これが 無いと あとから 来る 兄弟に
                ★下ばりを 上書きされ、指の的が 36〜42px に 減ります（★T273 §4-1）。
   ------------------------------------------------------------ */
.quit-btn{
  position:relative; z-index:2;
  order:99; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px; padding:0 10px;
  margin-bottom:0;
  font-family:inherit; font-size:11.5px; font-weight:900; line-height:1;
  color:#22633F; background:#B7EDC9;
  border:3px solid #2F7D4C; border-radius:999px;
  white-space:nowrap; cursor:pointer;
}
.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; }
/* ★ せまい 画面（はば 374px 以下）は 字を 1段 下げ、★↻ を 落とす（★T273 §2）*/
@media (max-width:374px){
  .quit-btn{ font-size:10.5px; padding:0 5px; }
  .quit-btn .quit-icon{ display:none; }
}


/* ── はじめの 画面 ───────────────────────── */
/* ⚠️★★ T160 の 決まり ―― ★はみ出したら **スクロールで 届く** ように する ★★
   ★ `justify-content:center` の ままだと、上に 出た ぶんは どうやっても 届きません。 */
.title-screen {
  flex:1 1 auto; min-height:0; overflow:auto;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:10px;
  text-align:center; padding:6px 4px;
}
.title-screen > :first-child { margin-top:auto; }
.title-screen > :last-child { margin-bottom:auto; }

/* ★ 白い 囲い（★大富豪 ＝ ページワン T162① ＝ ハーツ の 実測値 そのまま）*/
.start-card {
  flex:0 0 auto;
  position:relative; width:min(560px, 100%); text-align:center;
  background:var(--white); border:5px solid #FFD9E8; border-radius:30px;
  padding:26px 24px 24px;
  box-shadow:0 4px 0 rgba(196,155,110,.18), 0 10px 22px rgba(150,110,70,.14);
}
.eyebrow { margin:0; font-size:15px; font-weight:900; color:#ff759d; }
/* ★ 大見出し ―― ★8文字 なので ハーツ（3文字・58px）より 小さく します */
.start-card h1 {
  margin:4px 0 0; font-size:40px; font-weight:900; letter-spacing:1px; line-height:1.12;
  color:#E9607F; text-shadow:0 4px #9E2A47, 0 7px #FFE0E8;
}
.intro { margin:6px 0 16px; font-size:16px; font-weight:700; color:#5a4a63; }

/* ★★ つよさの えらび（★1ゲームにつき 選ばせるのは 1つまで・設計図 追記①）★★ */
.level-pick {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 10px;
  max-width:100%; margin:0 auto; padding:7px 10px;
  background:var(--cream); border:3px solid var(--gold-soft); border-radius:20px;
}
.level-pick-name { font-size:13px; font-weight:900; color:#7a5205; white-space:nowrap; }
.level-select {
  max-width:100%; min-height:44px; padding:5px 10px;
  background:var(--white); border:3px solid var(--gold); border-radius:999px;
  color:var(--ink); font-family:inherit; font-size:15px; font-weight:900; cursor:pointer;
}
.level-select:focus-visible { outline:3px solid var(--pink); outline-offset:2px; }

.start-button {
  margin-top:18px; width:100%; min-height:63px;
  padding:12px 26px 10px; border:4px solid #fff; border-radius:50px;
  background:linear-gradient(180deg, var(--pink), var(--pink-deep));
  color:#fff; font-family:inherit; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:1px;
  font-size:21px; font-weight:900;
  box-shadow:0 7px 0 var(--pink-dark), 0 12px 18px rgba(196,58,115,.26);
  transition:transform .1s ease, box-shadow .1s ease;
}
.start-button small { font-size:11.5px; font-weight:700; color:#ffe6f0; }
.start-button:active { transform:translateY(4px); box-shadow:0 2px 0 var(--pink-dark); }

/* ★★ つづきから（★合計が しまって ある ときだけ 出ます）★★
   ★ はじめて 開いた 人には **ボタンは 1つ しか ありません**（設計図 §5.5-②）。 */
.sub-button {
  margin-top:10px; width:100%; min-height:46px; padding:5px 16px;
  border:3px solid #cfe4ea; border-radius:999px; background:#eaf3f1;
  color:#5a7a8c; font-family:inherit; font-size:14.5px; font-weight:900; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:0; line-height:1.25;
}
.sub-button small { font-weight:700; color:#7b95a3; font-size:11px; }
.sub-button:active { transform:translateY(2px); }

.mascot { flex:0 0 auto; margin-top:16px; display:flex; flex-direction:column; align-items:center; }
.mascot .bubble {
  position:relative; margin:0 0 12px; padding:7px 14px; border-radius:18px;
  background:var(--white); border:3px solid var(--pink);
  font-size:14px; font-weight:900; color:var(--pink-dark); line-height:1.3;
  box-shadow:0 3px 0 rgba(196,155,110,.18);
}
.mascot .bubble::before, .mascot .bubble::after { content:''; position:absolute; left:50%; width:0; height:0; border-style:solid; }
.mascot .bubble::before { bottom:-14px; margin-left:-6px; border-width:14px 11px 0 0; border-color:var(--pink) transparent transparent transparent; }
.mascot .bubble::after  { bottom:-9px;  margin-left:-4px; border-width:10px 8px 0 0;  border-color:#fff transparent transparent transparent; }
.mascot .happy-cat { width:76px; height:58px; }
.cat-name { margin:2px 0 0; font-size:11px; font-weight:900; color:var(--pink-dark); }

.intro, .mascot .bubble, .help-list li, .help-note, .result-say { word-break:auto-phrase; }

/* ⚠️★ この かたまりは **`.start-card` の 決まりより 後ろ**に 置く こと（★ページワン T162 の 失敗）*/
@media (max-width:650px) {
  .start-card { border-width:4px; border-radius:24px; padding:22px 15px 20px; }
  .start-card h1 { font-size:33px; letter-spacing:0; }
  .eyebrow { font-size:13.5px; }
  .intro { font-size:14.5px; margin:5px 0 14px; }
  .start-button { font-size:19px; min-height:58px; }
  .mascot .bubble { font-size:12.5px; padding:6px 11px; border-width:2px; }
  .mascot .happy-cat { width:64px; height:49px; }
  .level-pick-name { font-size:12.5px; }
  .level-select { font-size:14px; }
}
@media (max-width:340px) {
  .start-card { padding:18px 12px 16px; }
  .start-card h1 { font-size:29px; }
  .mascot { margin-top:12px; }
}

/* ── 遊ぶ 画面 ──────────────────────────── */
.play-screen { position:relative; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }

/* ============================================================
   ★★ ハッピーの 帯（★T167・社長指示「大富豪みたいに 統一して ほしい」の 数字を そのまま）★★
   ★ ネコの 器 … 48px（はば 650px 以下）／64px ／ ふきだし … flex:1・わく 3px ピンク・かど 18px
   ★ 字 … 12px（520px 以下）／13px／17px（1180×850 以上）
   ⚠️★ たけは **数で 書く**（★`height:auto` に しない）―― ★viewBox が 無い ので
      ★ブラウザが 150px を 使い、★盤が 150px 短く なります（★ハーツ T167 の 回り道③）。
   ============================================================ */
.talk {
  flex:0 0 auto; display:flex; align-items:flex-start; gap:10px;
  padding:0 2px 6px; min-width:0;
}
.talk .cat-wrap { width:64px; flex:0 0 auto; text-align:center; }
.talk .happy-cat { width:64px; height:48px; display:block; margin:0 auto; }
.talk .cat-name {
  margin:1px 0 0; font-size:10.5px; font-weight:900; line-height:14px;
  color:var(--pink-dark); white-space:nowrap;
}
/* ★★★★ T269（2026-09-12・🎨アト）―― ★★たて向きの ふきだしに **しっぽを 出しました** ★★★★
   ★ ★★社長の お決め（★「1. しっぽを 出す」）。★見つけたのは T267 の ついで です：
     ★ ★★下の `::before`／`::after`（★しっぽの 三角）は **ずっと 書いて あったのに**、
       ★ ★この 決まりの `overflow:hidden` が、★★箱の 外に 出る しっぽを **まるごと 切って いました**。
     ★ ★★★直したのは **1語** ―― `hidden` → `visible`。★★（★よこ向きは 下の @media で hidden の まま）
   ★ ★★測った こと【★T269 実測・13画面・★同じ game.js・★同じ ことば】
     ★ ★・しっぽの ピンクの 画素（★ふきだしの 左 17px）… ★たて 6画面 **2/544 → 76/544**
       ★ ★（★390×844・375×812・1280×850 は 1 → 73）／ ★★よこ 7画面 **0 → 0**（★出して いません）
     ★ ★・★★**器（.stage）も 自分の 札も 13画面 とも 1pxも 変わりません**（★社長の 条件）
       ★ ★理由：★しっぽは `position:absolute` の 三角 ―― ★★並びの たけを 1pxも 食いません。
     ★ ★・かぶり … ★ふきだし本体 0/31・★★しっぽ自身も **0/31**（★札・名前・点の帯・山・すて札・ボタン）
     ★ ★・★★しっぽが かくす ハッピー … ★★★**0画素**（★しっぽの 四角の 中に ネコの オレンジは 0）。
       ★ ★とがった 先の 左 6px には ひげが **14画素**（★1280×850 は 5）―― ★★指す先に ハッピーが います。
     ★ ★・★★★写真を 1画素ずつ くらべた さ分は、★**ぜんぶ しっぽの 四角の 中**。★★外は **0画素**（★13画面）。
       ★ ★★＝ ★`overflow:hidden` が 切って いたのは **しっぽ だけ**でした（★ほかに 何も 出て きません）。
   ⚠️★★★ ★**`text-overflow:ellipsis` を ここから 消さないで ください。**
     ★ ★下の @media（よこ向き）は これを **この 決まりから もらって** います。★消すと よこ向きの
       ★ ★「…」が 効かなく なります（★たて向きでは 字が 折り返す ので、もともと 出番が ありません）。
   ⚠️★★★ ★**しっぽの 場所を 測る 人へ ―― `left` は わくの 内がわ（padding box）から です。**
     ★ ★`position:absolute` の 親は `position:relative` の **padding box**。★わく 3px を 足さないと
       ★ ★四角が 3px ずれます。★★★私は T269 で これを まちがえ、★白い `::after` が ピンクの わくを
       ★ ★塗る 24画素を「★しっぽの 外に 何か 出た」と 数えて しまいました（★本当は しっぽ 自身）。
     ★ ★★正しい 四角 … ★左 `ふきだしのx + 3 - 17`、★右 `ふきだしのx + 3 + 1`、★たけ 18px。 */
.talk .banner {
  position:relative; flex:1 1 auto; min-width:0; margin:0; padding:8px 13px;
  background:var(--white); border:3px solid var(--pink); border-radius:18px;
  color:var(--ink); font-size:13px; font-weight:900; line-height:1.35;
  box-shadow:0 3px 0 rgba(196,155,110,.18);
  overflow:visible; text-overflow:ellipsis;
}
.talk .banner::before, .talk .banner::after {
  content:''; position:absolute; width:0; height:0; border-style:solid;
}
.talk .banner::before {
  left:-17px; top:calc(50% - 9px);
  border-width:9px 17px 9px 0; border-color:transparent var(--pink) transparent transparent;
}
.talk .banner::after {
  left:-11px; top:calc(50% - 6px);
  border-width:6px 12px 6px 0; border-color:transparent #fff transparent transparent;
}
@media (max-width:650px) {
  .talk .cat-wrap { width:48px; }
  .talk .happy-cat { width:48px; height:36px; }
  .talk .banner { padding:5px 10px; }
}
@media (max-width:520px) { .talk .banner { font-size:12px; } }
@media (min-width:1180px) and (min-height:850px) { .talk .banner { font-size:17px; } }
/* ★★ たての 低い 画面（★横向き）―― ★帯を **並びから 外します**（★たけ 0）★★
   ⚠️★ `display:none` に しては いけません ―― ★横向きで ひとことが まるごと 消えます
      （★ハーツ T167 の 回り道④。★★それは 直しでは なく こわし です）。
   ★★★ T263（2026-09-12・★★社長の お決め）―― ★この 線を **420px → 440px** に 動かしました。★★★
   ★ ★★理由：★420px では ★★926×428（★追記⑥ の 最優先の 画面）が この 枠に **入らず**、
     ★ ★ハッピーの 帯が 並びの 中に 残って 器を 69px 食べて いました。
     ★ ★★＝ ★最優先の 画面が いちばん 札の 小さい 画面に なって いました
     ★ ★（★★812×375 より たてが 53px 大きいのに、★器は 16px 小さい：★309 → 293）。
   ★ ★★440px に すると 926×428 の 自分の 札が ★★**36×55 → 48×73px（＋33%）**に なります【★T263 実測】。
   ★ ⚠️★★**代わりに 926×428 では ハッピーの 絵が 消えます**（★ふきだしと ことばは 残ります）。
     ★ ★★これは 設計図 §9.5「★ハッピーは どの ページにも」の **例外**で、
     ★ ★★★社長が ご承知の うえで お決めに なった もの です（★秘書アイが 設計図に 記録）。
   ★ ★★この 線を また 動かす 前に ―― ★★追記⑥ の 決まり2（★線が 検査する画面を またがないか 数える）。
     ★ ★★440px の すぐ 上下に あるのは ★**428（★入る）**と ★**454（★入らない）**。★★どちらからも 12px・14px 離れて います。
     ★ ★★421〜439px の 実在の 画面は ★**1つも ありません**【★T263 実測・追記⑥ の 11画面】。 */
@media (max-height:440px) {
  .play-screen > .talk {
    position:absolute; left:0; right:0; top:0; height:0;
    display:block; padding:0; pointer-events:none; z-index:60; text-align:center;
  }
  .talk .cat-wrap { display:none; }
  /* ★★★★ T267（2026-09-12・🎨アト）―― ★★ピンクのわくを **2px 戻しました** ★★★★
     ★ ★★社長の お決め（★「1. 戻す」）。★もとは 🧪トライの T265 の 感想 です：
       ★ ★「★ふきだしは 1度も 消えず、★言うことも たて向きと 1文字も 同じ。★★でも
         ★ ★★『まんがの ふきだし』から『上の お知らせ帯』に 変わったので、
         ★ ★★★ハッピーが 喋って いるようには 読めません」
     ★ ★★T263 で わくを 0 に したのは **たけを 削る ため**でした（★帯を 並びから 外す ついでに）。
       ★ ★★でも この 帯は `position:absolute`（★上の `.play-screen > .talk` が たけ 0）―― ★★つまり
         ★ ★★★**わくを 足しても 並びの たけは 1pxも 増えません。★札は 1pxも 減りません**【★T267 実測】。
     ★ ★★太さ **2px** ―— ★たて向きの ふきだしは 3px ですが、★ここは 字が 11.5px と 小さく、
       ★ ★3px だと わくが 字に 近づいて うるさく なります。★2px で「ふきだし」に 読めます。
     ⚠️★ ★**しっぽ（`::before`/`::after`）は 出しません** ―― ★この 画面では ネコの 絵が 消えて
       ★ ★いるので、★しっぽの 先に **誰も いません**。★★指す先の 無い しっぽは ただの とげ です。
     ★ ★★★ここは T269 で 決着しました（★★下の 話は もう 済んで います）★★★
       ★ ★T267 は「★たて向きの ふきだしにも しっぽが 1本も 描かれて いない」（★ピンク 2/544）と
         ★ ★数えて、★原因が 上の `.talk .banner` の `overflow:hidden` だと つきとめ、
         ★ ★★**社長の お決め待ち**に して いました。
       ★ ★★→ ★**T269 で 社長が「1. しっぽを 出す」と お決めに なり、★出しました**
         ★ ★（★上の `.talk .banner` の 書き置きに 数字が あります。★たて 2/544 → **76/544**）。
       ★ ★★★**よこ向き（ここ）は T267 の 判断の まま ―― ★しっぽは 出しません。**
         ★ ★理由は 上の ⚠️ と 同じ（★ネコの 絵が 無い ＝ 指す先が いない）。★★実測でも
         ★ ★★よこ 7画面 とも しっぽの ピンクは **0 → 0** です【★T269 実測】。
     ⚠️★★ ★**わくを 3px 以上に しないで ください**（★字 11.5px との つりあい）。
     ★ ★★かぶりは いま ★**ことば 31通り とも 0px²**（★13画面）【★T267 実測】。
       ★ ★★正直に：★すきま（padding）を 12px → **240px** まで 広げて 試しても ★★かぶりは 0 の まま でした
         ★ ★（★ふきだしの たての 場所に、★ロボットの 札も 点の帯も 無い ため）【★T267 実測】。
         ★ ★★＝ ★「かぶるから 広げるな」では ありません ―― ★**広げる 理由が ない**だけ です。 */
  .talk .banner {
    position:absolute; left:50%; transform:translateX(-50%);
    display:inline-block; flex:none; width:auto; max-width:92%;
    padding:4px 12px; border:2px solid var(--pink); border-radius:999px;
    background:var(--white); color:#5a4a63; font-size:11.5px; font-weight:900;
    line-height:normal;
    box-shadow:0 2px 0 #e6dcc9; white-space:nowrap;
    /* ★★★ T269 ―― ★この 1行が **よこ向きの「…」**を 守って います ★★★
       ★ ★上の `.talk .banner` を `overflow:visible` に した ので（★たて向きに しっぽを 出す ため）、
         ★ ★ここで **よこ向きだけ hidden に 戻し** ます。★★よこ向きは `white-space:nowrap` な ので、
         ★ ★これが 無いと 長い ことばが ふきだしの **外へ ずるずる 出ます**。
       ★ ★★実測：★この 行を 消すと ―― ★926×428 で **墨 50画素**・★568×320 で **46画素**が
         ★ ★ふきだしの 右の 外に もれます（★★同じ おびを 短い字／長い字 で 2回 数えた さ引き）。
       ★ ★★★しっぽは ここでは 下の `display:none` でも 止まって います ―― ★**止めるものが 2つ**。
         ★ ★片方だけ 外しても 出て きません【★T269 実測・壊し⑨は 1件も 鳴かず】。 */
    overflow:hidden;
  }
  .talk .banner::before, .talk .banner::after { display:none; }
}

/* ★ 器は うすい クリーム ―― ★みどりの 上に みどりの 台を 置くと 台が 見えません
     （★ページワン T162② の 直し。★大富豪も 同じ 作り）。 */
/* ⚠️★★★ `z-index:0` と `isolation:isolate` は **2つ とも 消さないで ください**★★★
   　【★コーダの 失敗⑥・T174 作業メモ §5 ／★★「z-index:0 も」は T178 §7-2・T181 §8-3 の 持ち越しを
   　 ★T182 で 足しました ―― ★★下の 1行は もともと `isolation` しか 書いて いませんでした。
   　 ★★「isolation は 残したから 大丈夫」と 思って `z-index:0` を 消すと、★★積みかさねの もとが
   　 ★ 消えて 事故に なります。★★片方だけ 残す のは ダメ です】★★★
   ★ ★これが 無いと ―― ★★札の かさなり順（★手札は 500番台・えらんだ 札は 700番）が
     ★ **画面 ぜんたいの かさなり順**と 混ざり、★★結果の 箱（120番）より 前に 出ます。
   ★ ★実際に 起きました：★1回 おわりの 点の 表の 上に、★★場の 札が 重なって 読めませんでした。
     ★ ★★見張り（verify ⑪）は 大きさ しか 見て いなかった ので 鳴りませんでした ――
       ★ ★★写真を 見て 見つけました。★いまは ⑪ が **前に 出て いるか** も 数えます。
   ★ ★ハーツで 起きなかったのは、★あちらの 札の 番号が 70番までだった から です（★たまたま）。 */
.stage {
  position:relative; flex:1 1 auto; min-height:0;
  z-index:0; isolation:isolate;
  border-radius:18px; padding:0 4px;
  background:linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,253,245,.85) 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.75);
  overflow:hidden;
  touch-action:none;
}

/* ★★ 場の 台（★大富豪 ＝ ページワン T162② の `.felt-table` を そのまま）★★
   ⚠️★ **指は 1つも 当たりません**（pointer-events:none）。★飾りの 1枚 です。
   ⚠️★ 影は `0 6px 0`（★ぼかし 0）―― ★verify ④ の「光り」には なりません。 */
.felt-table {
  position:absolute; z-index:0; pointer-events:none;
  border:var(--felt-bd, 4px) solid #412817;
  border-radius:calc(var(--felt-bd, 4px) * 4);
  padding:var(--felt-pad, 7px);
  background:linear-gradient(135deg,#6b3d1e,#bf7a34 17%,#6d3f1f 33%,#c08139 50%,#66391b 73%,#b86e2a);
  box-shadow:0 6px 0 rgba(86,53,38,.28);
}
.felt-table > i {
  display:block; width:100%; height:100%;
  border:var(--felt-in, 2px) solid #3f863f;
  border-radius:calc(var(--felt-bd, 4px) * 3);
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 2px, transparent 2px 8px), #82ce84;
  box-shadow:inset 0 0 20px #4c9d51;
}
.felt-table::before, .felt-table::after {
  content:'♣'; position:absolute; z-index:2; color:#F6D69B; opacity:.75;
  font-size:calc(var(--cw) * .22); line-height:1;
}
.felt-table::before { left:5px; top:3px; }
.felt-table::after  { right:5px; bottom:1px; transform:rotate(150deg); }

/* ── ロボット3人 ─────────────────────────── */
.zone { position:absolute; left:0; right:0; pointer-events:none; }
.bot { position:absolute; }
/* ★ うすい クリームの 器の 上なので 字を こく します。
   ★ #3F6B5D ／ #E5F7F9 … ★色の 濃さの 差 **5.44:1**（★4.5:1 の 線を こえます）【計算】*/
.bot-name {
  position:absolute; left:-8px; right:-8px; text-align:center;
  font-size:10px; font-weight:900; color:#3F6B5D; line-height:15px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ★★ 山 と すて札（★指の 的。★飾りでは ありません）★★
   ★ ★中身が 無い ときも 場所が 分かる ように、うっすら わくを 残します。 */
.spot {
  position:absolute; z-index:2;
  width:var(--pw); height:var(--ph);
  border-radius:calc(var(--pw) * .1);
  border:2px dashed rgba(255,255,255,.85);
  background:rgba(255,255,255,.28);
  box-shadow:inset 0 0 0 2px rgba(120,150,160,.18);
}
/* ★★★ 指の 的を **見た目より 大きく** する（★44px は 会社の 決まり）★★★
   ------------------------------------------------------------
   ⚠️★★ 横向き（812×375）で 山・すて札が **29×44px** に なりました【★実測・T174】。
      ★ ★★44px を 13px 割って います ―― ★山は **毎手番 必ず 押す ところ** です。
   ★ ★★絵を 大きく すると 盤の たてを 食います（★札が 39→35px に 縮む）。
     ★ → ★★**当たりだけ 外へ 10px 広げます**（★見た目は 1pxも 変えて いません）。
   ★ ★★verify ⑩ が「まん中から 何px 外まで 当たるか」を **本物の 指で** 数えます。
   ⚠️★ **8px では 足りませんでした**【★実測】―― ★`inset` は **わくの 内がわ**から 数えるので、
      ★ ★わく 2px ぶん 目減りして 29 − 4 + 16 ＝ **41px**。★10px にして 45px です。
      ★ ★★式で 決めず、★見張りに 数えさせて 見つけました。

   ★★★★ T262（2026-09-12・🎨アト）―― ★★4方向を **別々**に しました ★★★★
   ★ ★★きっかけ：★★★横向きの 3画面で 見張り ⑩ が 鳴って いました【★実測・コーダ T260 §9】。
     │ ★★926×428 …… ★**42×47px**（★1画面ぶん あたり NG 2）
     │ ★★568×320 …… ★**36×43px**（★同 NG 2）
     │ ★★568×272 …… ★**24×29px**（★同 NG 2 ―― ★★これは 直せません。→ 下の ⚠️）
   ★ ★★なぜ ぐるり 同じ（inset）では 足りないか ―― ★★のばせる 量が **4方向で ちがう** から です
     ★ 【★ぜんぶ 実測・t262_todoku.cjs。★★何に ぶつかって 止まるかまで 数えました】：
     │ ★**外がわ**（★山の 左・すて札の 右）… ★ボタンが **14px** 先に いる（`--act-x` ／ `--act-x2`）
     │ ★★**内がわ**（★山↔すて札の あいだ）… ★すきまは **22px**（`gapP` の 下ばり・game.js 321行め）
     │ ★　　　→ ★★2つの 当たりが かさならない 上限は **13px ずつ**（★22 ＋ わく 4 ＝ 26 ÷ 2）
     │ ★**上**（★場の 台のがわ）… ★★**何も ぶつかりません**（★台・点の帯は pointer-events:none）
     │ ★**下**（★手札のがわ）… ★★**手札の 札が 勝ちます**（★z-index 500番台 ＞ .spot の 2）
     │ ★　　　→ ★★★下を いくら のばしても 1pxも 増えません。★だから **上に 逃がします**
   ★ ★★＝ ★内がわ 13px・★外がわ 16px・★下 10px・★★上は 足りない ぶんだけ（`--hit-up`）。
   ⚠️★★ ★**13px を こえないで ください**（★内がわ）―― ★★となりの 的を 食べます。
   ⚠️★★ ★**16px を こえないで ください**（★外がわ）―― ★★ボタンの 下に もぐります。
   ⚠️★★★ ★★見張りは「44pxに 届いて いるか」しか 見て いません ―― ★★★この 4つの 数が
      ★ ★★どこまで のばせるかは、★★**game.js の 14px と 22px が 決めて います**。
      ★ ★★あちらが 変わったら、★ここも 数え直す こと。 */
.spot {
  /* ★ 上に 足す 量 ―― ★★たてが 44px に 届くまで（★下は 手札に 止められる ため）
     ★ ★下の 届き ＝ ph/2 ＋ すきま。★上の 届き ＝ ph/2 ＋ ここ。★合わせて 44px に します。 */
  --hit-up: max(10px, calc(47px - var(--ph, 45px)));
}
.spot::after {
  content:''; position:absolute; border-radius:inherit;
  top:calc(-1 * var(--hit-up)); bottom:-10px;
  left:-13px; right:-13px;
}
/* ★ 外がわ（★ボタンの すぐ 手前まで）―― ★内がわは 13px の まま */
.spot[data-spot="stock"]::after   { left:-16px; }
.spot[data-spot="discard"]::after { right:-16px; }

/* ★★ 点の 帯 ―― ★何回目 ／ 合計 ★★
   ⚠️★ アトへ：★ここに `font-size` を 決め打ちで 書かないで ください
      ―― ★★大きい 画面で 字が 育たなく なります（★トライ T166 §7-2・verify ㉑ が 鳴ります）。
   ★ ★下の 10.5px / 9px は **JS が 動かなかった ときの 保険** です。 */
.score-band {
  position:absolute; left:4px; right:4px; z-index:40; pointer-events:none;
  display:grid; grid-template-columns:auto repeat(4, 1fr);
  align-content:center; gap:1px 2px;
  padding:2px 4px; border-radius:12px;
  background:rgba(255,255,255,.72); box-shadow:inset 0 0 0 2px rgba(255,255,255,.9);
  font-weight:900; color:#5a6b78;
  font-size:var(--sb-num, 10.5px);
  line-height:calc(var(--sb-num, 10.5px) * 1.2);
}
.score-band b { font-weight:900; color:#93a3ae; text-align:right; padding-right:2px; white-space:nowrap; }
.score-band i { font-style:normal; text-align:center; color:#43596b; }
.score-band .sb-name {
  color:#3F6B5D; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:var(--sb-name, 9px);
  line-height:calc(var(--sb-name, 9px) * 1.25);
}
.score-band .sb-me { color:var(--pink-dark); }

/* ── 札 ─────────────────────────────────── */
.cards { position:absolute; inset:0; }
.card {
  position:absolute; width:var(--cw); height:var(--ch);
  transition:left .24s cubic-bezier(.35,.02,.28,1), top .24s cubic-bezier(.35,.02,.28,1),
             width .18s ease, height .18s ease, transform .14s ease, opacity .2s ease;
  will-change:left, top;
}
.card.is-bot  { width:var(--bw); height:var(--bh); }
.card.is-pile { width:var(--pw); height:var(--ph); }
.card.is-tbl  { width:var(--tw); height:var(--th); }
.card-in {
  position:absolute; inset:0; border-radius:calc(var(--cw) * .1); overflow:hidden;
  background:var(--white); box-shadow:0 1px 2px rgba(40,30,50,.28);
}
.card.is-bot .card-in  { border-radius:calc(var(--bw) * .12); }
.card.is-tbl .card-in  { border-radius:calc(var(--tw) * .1); }
.card.is-pile .card-in { border-radius:calc(var(--pw) * .1); }
.card img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:fill;
  display:block; pointer-events:none;
}
.card .face { opacity:1; }
.card.is-down .face { opacity:0; }
.card.is-down .back { opacity:1; }
.card .back { opacity:0; }

/* ============================================================
   ★★★ 札の すみの 点（★ルル §2-2 ―― ★これで あそびかたが 4行 減りました）★★★
   ------------------------------------------------------------
   ★ 7＝0／A＝20／J・Q・K＝10／ジョーカー＝50。★★出て いるのは **事実 だけ** です。
   ★ ★出すのは ★**自分の 手札** と ★**すて札の 一番上** だけ ――
     ★ ★点は「手元に のこったら つく」もの。★★場に 出た 札は もう 点に なりません。
   ⚠️★ アトへ：★★7の「0」が いちばん 目立つ ように するのは あなたの 仕事です（★ルル §18 アト③）。
      ★ ★ここでは まず「読める・絵を かくさない」だけを 作って あります。

   ★★★ T179（🎨アト・2026-08-31）★★ 右下 → **左下** に 移しました ★★★
     ★ ★**理由**：★手札は 左から 右へ ならび、★**あとの 札が 上に 重なります**（→ `spotOf('me')`）。
       ★ ★＝ ★★かくれるのは いつも **右**。★点を 右下に 置くと、★となりの 札に 食べられます。
     ★ ★**実測（T179・同じ 8枚の 手札・面で 数えた 見え率）**：
       ★ ★右下だった とき … ★375×812 で **11,11,11,0,11,11,11,100 %**（★読める 1/8）
       ★ ★★★ジョーカーの「50」は **0%** ―― ★1度も 見えて いませんでした。
       ★ ★左下に した 後 … ★10サイズ とも **100%**（★読める 8/8）。
     ★ ★**入る ことの 裏づけ**【実測】：★見えて いる はば ÷ まるの はば は
       ★ ★320×568 で 35 ÷ 28、★375×812 で 40 ÷ 32、★414×896 で 45 ÷ 36 ―― ★どれも 入ります。
     ★ ★**左下を かくす ことに なる もの**＝ ★トランプの「さかさまの 数字」。
       ★ ★★上の 数字（左上）は そのまま 残る ので、★何の 札かは 読めなく なりません【実測 8/8】。
     ⚠️★ **戻さないで ください。**★戻すと verify ⑰-2 が 鳴ります（★T179 で 足しました）。
   ============================================================ */
.card .pt {
  position:absolute; left:2px; bottom:1px; z-index:3;
  min-width:calc(var(--cw) * .30);
  padding:0 calc(var(--cw) * .05);
  border-radius:calc(var(--cw) * .16);
  background:rgba(70,60,82,.86); color:#fff;
  font-size:calc(var(--cw) * .26); font-weight:900; line-height:calc(var(--cw) * .36);
  text-align:center; letter-spacing:-.5px; pointer-events:none;
}
/* ★ 裏向き・ロボットの 札・場の 札には 出しません */
.card.is-down .pt, .card.is-bot .pt, .card.is-tbl .pt { display:none; }
.card.is-pile .pt {
  min-width:calc(var(--pw) * .30); padding:0 calc(var(--pw) * .05);
  border-radius:calc(var(--pw) * .16);
  font-size:calc(var(--pw) * .26); line-height:calc(var(--pw) * .36);
}

/* ★★★★ 強調① ―― ★★青いわく ＝「いま 場に 出せる 札」★★★★
   ------------------------------------------------------------
   ★ ★★設計図「追記②の 例外」（2026-08-31・社長裁定）で **足した** ものです。
     ★ ★★消さないで ください。★verify ⑤ が「出て いるか」を 見張って います。
   ★ ★出る 数【実測・T180・3000試合】：★1手番 あたり **0.51枚**。
     ★ ★★77.7% の 手番は **0枚**（＝ ふだんの 画面は 前と 同じ 静かさ）。
     ★ ★手札 ぜんぶが 青に なるのは **0.5%** だけ。
   ⚠️★★ `outline-offset` は **内がわ（マイナス）** の まま。★外へ 出すと となりの 札を かくします。
   ⚠️★★ `transform` を 足さない こと（★重なりが 変わる → ★verify ⑰-2 が 鳴ります）。 */
/* ⚠️★★★★ ここで 1回 つまずきました【★私の 失敗①・T180・作業メモ §6】★★★★
   ★ ★はじめ `.card.is-play` に **outline** を 書きました（★`.is-pick` と 同じ 書き方）。
     ★ ★★computed style は 「6px solid rgb(30,127,200)」で 正しいのに、★★**1本も 見えません でした。**
   ★ ★理由：★`.card-in` が `position:absolute; inset:0` ＋ **白い 背景**で、★★内がわに 引いた
     ★ ★outline を **上から ぬりつぶして いた** から です。
   ★ ★★`.is-pick` が 見えて いるのは、★`transform` を 持って いて 積みかさねの もとに なる から
     ―― ★★つまり **たまたま** でした。★私は それを「同じ 書き方だから 大丈夫」と 思って いました。
   ★ ★★写真を 見なければ 気づけません でした（★verify は 6px と 答えて いた）。
   ⚠️★★ ★**2回目も つまずきました**【★私の 失敗②・同じ 日】――
     ★ ★つぎに `.card-in` の **内がわの 影**（inset box-shadow）で 引きました。
     ★ ★★computed style は「rgb(30,127,200) 0 0 0 7.5px inset」で 正しいのに、★★また 見えません。
     ★ ★理由：★内がわの 影は **背景の 上・中身の 下** に 引かれます。
       ★ ★★`.card .face` は `position:absolute; inset:0` の **絵** ―― ★影を ぜんぶ 覆って いました。
     ★ ★★2回とも「computed style が 正しい」で 止まって いたら 出荷して いました。
       ★ ★→ ★★**写真を 見る**。★これが T174 で 私が 書いた「私の 目には 穴が あります」の 実物 です。
   ★ → ★★3回目 ―― ★**わく 専用の 1枚**（`::after`）を 絵の 上に かぶせます。
     ★ ★`z-index:2` … ★絵（z-index なし）より 上、★★点の まる（`.pt`＝z-index:3）より 下。
       ★ ★★＝ ★青いわくが 点の まるを かくしません（★verify ⑰-2 が 守られます）。
     ★ ★`border` なので box-shadow の「光り」判定にも かかりません。 */
/* ⚠️★★★★ わくの「下限」を 2px より 太く しないで ください【★T182・🎨アト】★★★★
   ★ ★★下限（`max(◯px, …)`）が 効くのは **小さい 3サイズ だけ** です ――
     ★ ★★812×375・667×375（★横向き スマホ）と 320×480。★ほかの 7サイズは `--cw * .075`
       ★ ★（＝ ★札の はばの **7.5%**）の 方が 大きいので、★下限を 動かしても 1pxも 変わりません。
   ★ ★★その 3サイズで 何が 起きて いたか【★実測・写真の 画素・T181 トライ §4 → T182 で 数え直し】：
     ┌ ★わくが 札の はばの **10.3〜13.8%** に なる（★設計は 7.5%。★★1.4〜1.8倍 太い）
     └ ★★→ ★札の 左上の **字**（J・Q・K・10）を 上ぬり して 消す
   ★ ★★食べられた 墨の 割合（★812×375・★同じ 手札を 下限だけ 変えて 撮った もの）：
     │            ★前（4/3/4px）   ★後（2px）
     │ ★手札        ★35.7%    →    ★★10.2%
     │ ★★場の札      ★★65.2%   →    ★★26.1%   ←★★いちばん ひどかった のは ここ
     │ ★すて札      ★36.2%    →    ★★ 6.4%   ←★★④の 2択で 人が いちばん 読みたい 1枚
     ★ ★★場の札が いちばん ひどい 理由：★場の 札は 重ねて 並ぶ ので、★見えて いるのは
       ★ ★★左の 細い ひとすじ だけ。★そこに 3px の わくが 両がわから 入ると、
       ★ ★★ひとすじの ほとんどが 青に なります（★★どの 札か 読めません）。
   ★ ★★わくは 2px でも はっきり 見えます【★実測・写真の 画素】――
     ★ ★812×375 で 帯の 青が 2126画素（★4px のとき 4251画素）。★★0では ありません。
     ★ ★★1倍（本当の 大きさ）の 写真で 見くらべても、★どちらも 一目で「青い 札」と 分かります。
   ★ ★★44px の 的は 1pxも 動きません** ―― ★ここは `::after` の **飾りの 1枚**で
     ★ ★`pointer-events:none`。★★コーダの 失敗③（`.spot` の わくを 太らせて 44→42px に した）
       ★ ★とは **別の 場所** です【★実測・10サイズ・T182 §4】。
   ★ ★★見張り ⑰-3 が 見て います**（★わくが 札の はばの 8% を こえたら 鳴る）。
     ★ ★★`max(4px` に 戻すと、★★3サイズ とも その場で 鳴ります【★実測・T182 §5】。 */
/* ★★★★ T204-3（2026-09-02・社長ご指示）―― ★★わくは **ピンク系**に なりました ★★★★
   ★ ★社長：「わくの 色を ピンク系に して『場に出す』と そろえる」
   ★ ★★色は `--pink-dark` #C43A73 ―― ★★「場に出す」ボタンの **下がわと 同じ 値** です
     ★ ★（★ボタンは `--pink-deep → --pink-dark`）。★「そろえる」を いちばん 素直に とった 形。
   ⚠️★★★ ★★代金は 小さく ありません。★★数えて あります【★実測・写真の 画素・3サイズ】★★★
     │ ★★**札の 絵の 中に、★わくの 色と まぎれる 画素が どれだけ あるか**（★ΔRGB 60 以内）
     │ ★★  青 #1E7FC8 …… ★★赤い札 **0.00%** ／ 黒い札 **0.00%**（★★トランプに 青い インクは 無い）
     │ ★★  ピンク #C43A73 … ★★赤い札 **1.6〜2.6%** ／ 黒い札 0.0〜0.5%
     │ ★★**わくの 帯 ↔ その 札の 中で いちばん 近い 色**
     │ ★★  青 …… **117〜121**　／　★★ピンク …… ★★**20.6〜98.5**（★★赤い札で いちばん 縮む）
     ★ ★★＝ ★★赤い 札（ハート・ダイヤ）の 上では、★★青より **2〜6倍 まぎれやすい**。
     ★ ★★これは 社長に 数字で お返しして あります（★★logs/T204_すてるの色_アト.md §T204-3）。
   ⚠️★★ ★**太さ（border-width）は 1pxも 変えて いません** ―― ★T182 の 線（★下限 2px）も、
     ★ ★★見張り ⑰-3（★札の はばの 8%）も そのまま です。★★色だけ 差しかえて います。
   ⚠️★★★ ★★ハッピーが「**青い** わくの 札が 出せるよ！」と 言った ままです（`SAY.blue`）。
     ★ ★★言葉は `sevenbridge-game.js` ＝ ★★コーダの 持ちもの。★★出す 前に かならず 直す こと。 */
/* ★★★★ T262（2026-09-12・🎨アト）―― ★★下限 `max(2px, …)` を **消しました** ★★★★
   ★ ★★きっかけ：★★★横向きの 3画面で 見張り ⑰-3 が 鳴って いました【★実測】――
     │ ★★568×320 … ★場の札 **10.0%**（★はば 20px に 2px）・★すて札 **9.5%**（★21px に 2px）
     │ ★★568×272 … ★手札 **16.7%**（12px）・場の札 **14.3%**（14px）・すて札 **22.2%**（9px）
   ★ ★★＝ ★★T182 で 入れた 下限 **2px** が、★★札の はばが **26.7px を 下回る** 画面で
     ★ ★★8% を こえて いました（★2 ÷ 0.075 ＝ 26.7px）。★★T182 の ときの 10画面には
       ★ ★★26.7px より 細い 札が 1枚も なく、★★★穴が 無かったのでは なく 出会って いなかった だけ です。
   ★ ★★直し方：★★**下限を 書くのを やめました**（★`max(2px, …)` → ★`7.5%` だけ）。
   ★ ★★なぜ 下限が 要らないか ―― ★★★ブラウザ自身が **1px を 下ばりに して います**【★実測】。
     ★ ★★`border-width` は 描く ときに 整数pxに 切りさげられ、★0より 大きければ **1px は 必ず 残る**。
     ★ ★★3通り（★A `max(2px,…)` ／ B `clamp(…,1.5px,…)` ／ C 下限なし）を
       ★ ★★**使い捨ての フォルダに 本を 写して** 12画面で 測ったら ―― ★★★B と C は
         ★ ★**12画面 ぜんぶ 1pxも ちがいません** でした（★`t262_waku_結果.json`）。
         ★ ★★＝ ★1.5px と 書いても 1px に なる。★★書いても うそに なる ので 消しました。
   ★ ★★いま 描かれる 太さ【★実測・12画面・dpr1】：★★手札 2〜5px（5.1〜7.1%）・場の札 1〜4px
     ★（3.8〜7.4%）・すて札 1〜4px（4.8〜7.4%）★★―― ★★**8% の 線を 1画面も こえません**。
     ★ ★★変わったのは 2画面だけ：★568×320 の 場/すて 2px → **1px**、★568×272 の 3か所 2px → 1px。
   ⚠️★★★ ★**568×272 だけは まだ 鳴ります**（★手札 8.3%・すて札 11.1%）★★★
      ★ ★★これは **直せません** ―― ★★1px より 細い 線は 引けず、★★9px の 札に 1px は 11.1% です。
      ★ ★★札が 9〜12px に なる のは `fallbackLayout`（core の 保険）に 落ちた とき だけ。→ T262 作業メモ §5。
   ⚠️★★ ★**`max(2px, …)` に 戻さないで ください。**★★戻すと 568×320・568×272 で その場で 鳴ります。
   ⚠️★★ ★**7.5% を 上げないで ください。**★★8% を こえると 札の 左上の 字
      ★（★J・Q・K・10）を 上ぬり して 消します【★T181 §4 トライ → T182 で 数え直した もの】。 */
.card.is-play { z-index:640; }
.card.is-play .card-in::after {
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  border:calc(var(--cw) * .075) solid var(--pink-dark);
  border-radius:inherit;
}
.card.is-tbl.is-play .card-in::after  { border-width:calc(var(--tw) * .075); }
.card.is-pile.is-play .card-in::after { border-width:calc(var(--pw) * .075); }
/* ★ すて札の 台にも 青いわく（★「この 1枚が もらえる」の 的）
   ⚠️★★★ **わくの 太さ（border-width）を 変えては いけません**【★私の 失敗③・T180】★★★
      ★ ★はじめ `border:3px` と 書きました。★★指の 的が **44 → 42px** に なりました。
      ★ ★理由：★上の `.spot::after { inset:-10px }` は **わくの 内がわ**から 数えます ――
        ★ ★★わくを 1px 太らせる ごとに、★当たりが 左右 1pxずつ **やせます**
          （★この ファイルの 上の 方に、★T174 の 人が すでに そう 書いて いました）。
      ★ ★★私は それを 読んで いながら 踏みました。★verify ⑩ が 拾って くれました。
      ★ → ★太さは **2px の まま**。★こさは **内がわの 影**で 出します（★寸法を 1pxも 動かしません）。 */
.spot.is-play {
  border-style:solid; border-color:var(--pink-dark);
  background:rgba(196,58,115,.18);
  box-shadow:inset 0 0 0 3px var(--pink-dark);
}

/* ★★★ 強調② ―― ★人が 押して えらんだ 札（★指の 返事）★★★
   ⚠️★ `box-shadow` では なく `outline` で 書いて あります ――
      ★verify ④ は 札の box-shadow の「広がり 2px 以上」を 光りと 見なす ので、
      ★★わくを box-shadow で 書くと 自分で 鳴らして しまいます。
   ★ ★★青と 見わけが つくように、★こちらは **持ち上げます**（★色だけに 頼らない）。

   ⚠️★★★★ T204-3 ―― ★★★**この `outline` は、★実際には 1本も 描かれて いません**【★実測】★★★★
     ★ ★★えらんだ けれど 出せない 札の ふちを ぐるり 数えました ―― ★★ピンク（#E94F8A）に
       ★ ★近い 画素は ★**1.7%（320×568）／0.7%（812×375）**、★いちばん 近い もので ΔRGB **46〜48**。
       ★ ★★その 46 は **わくでは なく、★札に 刷られた 赤い インク**でした。
     ★ ★★computed style は `3px solid rgb(233,79,138)` と 答えます ―― ★★それでも 写真に 写りません。
       ★ ★★T180 で コーダが 2回 踏んだ 穴と **同じ もの** です
         ★（★`.card-in` が `position:absolute; inset:0` ＋ 白い 背景で 上ぬり する）。
       ★ ★★この 本で これが 起きたのは ★★5回目 です。
     ★ ★★＝ ★★いま「えらんだ」を 見せて いるのは **持ち上げ（−14%）だけ** です。
     ⚠️★★★ ★★**直す ときは、★先に わくの 色を 決め直して ください。**
       ★ ★★いま わくは #C43A73（★出せる）・★ここは #E94F8A（★えらんだ）―― ★★ΔRGB は **48.4** しか
         ★ ★ありません【計算】。★★このまま 見える ように すると、★★2つの 強調が 見分けられなく なります。
       ★ ★★（★青だった ころは ΔRGB **217.6** ありました）★★これは コーダ・社長に お渡しずみ です。 */
.card.is-pick {
  outline:3px solid var(--pink-deep); outline-offset:-3px;
  border-radius:calc(var(--cw) * .1);
  transform:translateY(-14%);
  z-index:700;
}

/* ★★ 自動で 引いた 1枚（★T180・社長指示①）★★
   ★ ★アイの ご注文：「★引いた 札が 何だったかは、人に はっきり 見せて ください（★一瞬で 消さない）」。
   ★ ★★色は 足しません ―― ★**持ち上げる だけ**（★強調の 色を 3つに しない ため）。
   ★ ★次に 人が 何か した 瞬間に 外れます（★時間で 消しません）。 */
.card.is-new { transform:translateY(-8%); z-index:660; }
.card.is-new .card-in { animation:newPop .38s ease-out; }
@keyframes newPop { 0% { transform:scale(.82); } 60% { transform:scale(1.06); } 100% { transform:scale(1); } }

/* ★ 運んで いる 札（★指の 下。★情報では なく 手ざわり です）*/
.card.is-drag {
  transition:none !important;
  z-index:900;
  transform:scale(1.06);
  filter:drop-shadow(0 6px 6px rgba(60,40,30,.35));
}

/* ★ 置けない ところに 落とした ―― ★ぷるっと ゆれる だけ（★「そこは ちがうよ」）
   ★ ★★どこなら 置けるかは 1文字も 教えません（★スパイダー T73 と 同じ 線）。 */
.card.is-no { animation:shakeNo .16s ease-in-out; }
@keyframes shakeNo {
  0%,100% { margin-left:0; } 25% { margin-left:-4px; } 75% { margin-left:4px; }
}
.cards.no-move .card { transition:none !important; }

.card .fallback {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:calc(var(--cw) * .3); font-weight:900; color:#3D3550; background:var(--white);
}
.card .fallback.red { color:#c0392b; }

/* ============================================================
   ★★★ 2つの ボタン（★T180・社長指示③④⑤）★★★
   ------------------------------------------------------------
   ★ ★★置き場は **山・すて札の 左と 右**（★JS が `--act-*` に 入れます）。
     ★ ★★台にも 手札にも かぶりません ―― ★かぶると verify ⑬ の「場の 組に 指が 届かない」が 鳴ります。
     ★ ★山・すて札の 当たり（±10px）からも 4px 以上 はなして あります【実測・verify ⑩】。
   ★ ★★たけ **46px**（★44px は 会社の 決まり）。★はばは 320px の 画面で **80px**【計算】。
   ★ ★★押せない ときも **消しません** ―― ★灰色に して「いま 押せない」と 見せます
     （★社長指示⑤。★大富豪の「出す・パスする」が 手本）。
   ⚠️★★★★ T204-2（2026-09-02・社長ご指示）―― ★★2つの ボタンの 色は **入れ替わりました** ★★★★
     ★ ★社長：「★『すてる』と『場に出す』の ボタンの 色を ★★逆に して ほしい。
       ★ ★★暖色の方が ポジティブな アクション（★手札を 多く 減らせる）な 感じが するので」
     ★ ★★＝ ★★**右「場に出す」＝ 暖色（ピンク）／ 左「すてる」＝ 寒色（水色）**。
     ★ ★★色が 言って いるのは「押せる／押せない」だけでは ありません ――
       ★ ★★**その 手が どれくらい 前に すすむか**（★出す ＝ 何枚も 減る／すてる ＝ 1枚）です。
     ⚠️★ ★**戻さないで ください。**★どちらも「押せる とき だけ」色が つきます（★T204・社長ご指示）。
       ★ ★★白や うすい 灰に 戻すと、★まわりの クリーム色（252,252,245）に 溶けます【実測・ΔRGB 10.9】。
     ⚠️★★ ★**下の T204-2 の 表が 線です。**★★「場に出す」を いまより 目立たせない こと。
   ============================================================ */
.act-btn {
  position:absolute; z-index:800;
  left:var(--act-x, 0px); top:var(--act-y, 0px);
  width:var(--act-w, 80px); height:46px; padding:0 4px;
  border:3px solid #fff; border-radius:999px;
  font-family:inherit; font-size:var(--act-f, 14px); font-weight:900; line-height:1;
  cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* ★★★★ 右「場に出す」＝ **暖色**（★T204-2・社長ご指示）★★★★
   ★ ★★色は `--pink-deep → --pink-dark`（★もとから ある 会社の ピンク）。
     ★ ★3Dの 段 `#922954` だけ 新しい 値ですが、★★色あい 335.4° ＝ `--pink` の 家族 です。
   ★ ★★白い 字との 濃さの 差 **3.53:1（上）〜 5.00:1（下）**【計算】。
     ★ ★★入れ替える 前の 青（#37A6EE→#1E7FC8）は **2.67 〜 4.26:1** でした ―― ★★字は 読みやすく なって います。
   ⚠️★★ ★**いまより こく しないで ください。**★★目立ち（★まわりの 地との ΔRGB）は
     ★ ★★**213**（★320×568）。★入れ替える 前の 青は 225.8 でした ―― ★★ほぼ 同じに そろえて あります。
     ★ ★★ここを 上げると「出せる」では なく「★出せ」に なります（★設計図 追記②・大富豪 T116）。 */
.act-btn.is-go {
  left:var(--act-x2, 0px);
  background:linear-gradient(180deg, var(--pink-deep), var(--pink-dark));
  color:#fff; box-shadow:0 4px 0 #922954, 0 7px 12px rgba(146,41,84,.22);
}
/* ★★★★ T204（★2026-09-02 の 午前）―― ★★この 回で 分かった こと（★★消さないで ください）★★★★
   ------------------------------------------------------------
   ★ ★社長：「★捨てるの ボタンが 押せる とき 押せない ときの ★★色が 似て いるので、
     ★ ★★押せる ときの すてるは 色を 付けて ほしい」
   ★ ★★（★色を どちらに するかは、★この あと T204-2 で 入れ替わりました。★下の 2つの 決まりが 正）

   ★★ ① ★★白い ボタンは ダメ です ―― ★「似て いる」以前に **見えて いません** でした ★★
     ┌ ★押せる ＝ 白（255,255,255）　★押せない ＝ 薄い 灰（233,238,240）
     ├ ★★2つの 差は **ΔRGB 31.6・明るさ比 1.17**（★となりの ボタンは 205・2.65 ＝ ★6.5倍の 差）
     └ ★★★白と、★まわりの 地（**クリーム色 252,252,245**）の 差は ―― ★★**ΔRGB 10.9**
       ★ ★★＝ ★★ボタンとして そもそも 浮いて いません でした【★ぜんぶ 実測・写真の 画素】。
     ⚠️★ ★★どちらの ボタンも **白・うすい 灰に 戻さないで ください。**

   ★★ ② ★★うすすぎる 色も ダメ です（★★私が 1度 やりかけました）★★
     ★ ★#FFE3EF（★とても うすい ピンク）で 試したら ―― ★★押せる↔押せない が **ΔRGB 24.6**。
       ★ ★★**白（31.6）より 下がって いました。**★色みが 少し 付いた だけ でした。
     ★ ★★線：★★押せる↔押せない は **ΔRGB 60 以上** を 目安に（★いま すてる 74.3／出す 198.9）。

   ★★ ③ ★★§5.5「1画面の 強調は 1種類まで」と ぶつからない 理由（★★T204-2 でも 同じ）★★
     ★ ★★これは **ボタンの 状態表示**で、★盤の ヒントでは ありません
       ―― ★★大富豪 T100（★社長裁定）で 同じ 判断が 出て います：
         ★ ★「青は『押せる／押せない』の 状態表示。★出せる札の 金色とは 役わりが ちがう ので、
           ★ ★§5.5『強調は 1種類まで』には 数えない」。
     ★ ★★置き場も 別 です ―― ★青いわくは **札の 上**、★ボタンは **山・すて札の 左右**。
       ★ ★★場の 台には かかりません（★verify ⑬ が 見張って います）。
       ★ ★★いちばん 近づいた ときで 3px【★実測・320×568・260手番 追いこんで いちばん 近い もの】。
       ⚠️★ ★★正直に：★札を **2枚以上 えらぶ**と、★持ち上がった（`is-pick` の translateY）札の 四角が
         ★ ★★ボタンの 四角と 触れる ことが あります。★★これは T180 から 同じ です。

   ★★ ④ ★★寸法は 1pxも 動いて いません（★T204・T204-2 とも）★★
     ★ ★変えたのは `background` `color` `box-shadow` の 3つ だけ。
       ★ ★★どれも 箱の 大きさを 変えない 性質 です（★box-shadow は 場所を 取りません）。
       ★ ★★＝ ★44px の 的も、★ボタンの 字の はば（★見張り ⑯-3）も そのまま【★実測・8サイズ】。

   ⚠️★★★ ⑤ ★★★**この 4行を 見張って いる verify は 1つも ありません**【★実測・T204 §8】★★★
     ★ ★★白に 戻しても・青に 戻しても・押せない ボタンを 同じ 色に しても、★★NG は 0 の まま です。
     ★ ★★守って いるのは この コメント だけ です ―― ★★コーダに 見張りを お願いして あります。 */
/* ★★★★ T204-2 ―― ★★左「すてる」＝ **寒色**（★社長ご指示で 入れ替え）★★★★
   ------------------------------------------------------------
   ★ ★★色は「`--blue` を 白で うすめた もの」＋「その こい 端」だけ です【計算・色相】：
     ★ ★★#AFDBF8（203.8°）／#9BD3F7（203.5°）／字 #0E4A78（206.0°）／段 `--blue`（203.6°）
   ★ ★★字と 地の 濃さの 差 **5.75:1（下）〜 6.6:1（上）**【計算】。

   ★★ 入れ替えて 何が どう なったか【★実測・同じ 盤・CSS だけ 差しかえ・320×568】★★
     │                        ★T204（前）      ★★T204-2（後）
     │ ★「すてる」押せる↔押せない   67.7      →  ★★**74.3**（★★少し 良く なりました）
     │ ★「場に出す」押せる↔押せない  204.6      →  ★★**198.9**（★ほぼ 同じ）
     │ ★★「場に出す」の 目立ち      225.8      →  ★★**213**（★ほぼ 同じ ＝「出せ」に なって いません）
     │ ★「すてる」の 目立ち         78.8      →  ★★**96.8**
     │ ★★出すは すてるの            2.9倍     →  ★★**2.2倍**（★出すが 上 のまま）

   ⚠️★★★★ ★★正直に ―― ★★これで **青いわくと ボタンの つながりが 切れました** ★★★★
     ★ ★★青いわく（`.card.is-play` ＝ #1E7FC8）は「★この 札は **場に 出せる**」の 意味 です。
     ★ ★★T204 まで、★その 青は 右の「場に出す」ボタンと 同じ 色 でした。
     ★ ★★いまは ―― ★★**寒色は 左の「すてる」の 側に 移りました。**
       │ ★★「すてる」の 色あい 203.5° ／ 青いわく 205.8° … ★★**へだたり 2.3°**（★同じ 家族）
       │ ★「場に出す」の 色あい 337.0° ／ 青いわく 205.8° … ★へだたり 131.2°
       ★ ★★＝ ★★**「出せる」の 青が 指す ボタンが、★画面から なくなりました。**
     ★ ★★明るさでは はなして あります（★ΔRGB 165.7。★★同じ 青の ままなら 34.1 でした ―― ★A案で 測って 捨てました）。
     ★ ★★これは 社長が ご存じの うえでの お決め です（★2026-09-02）。★★社員は 勝手に 戻さない こと。
     ★ ★★戻したく なったら ―― ★★必ず 社長に 相談する。 */
.act-btn.is-sub {
  background:linear-gradient(180deg, #AFDBF8, #9BD3F7);
  color:#0E4A78;
  box-shadow:0 4px 0 var(--blue);
}
.act-btn:not(:disabled):active { transform:translateY(3px); }
.act-btn.is-go:not(:disabled):active  { box-shadow:0 1px 0 #922954; }
.act-btn.is-sub:not(:disabled):active { box-shadow:0 1px 0 var(--blue); }
/* ★★ 押せない ―― ★消さずに「押せない」と 見せる（★社長指示⑤）*/
.act-btn:disabled {
  cursor:default; background:#e9eef0; color:#a9b7bf;
  border-color:#f4f7f8; box-shadow:none; opacity:1;
}

/* ── ハッピーの うごき ──────────────────── */
@keyframes happyJump { 0%,100% { transform:translateY(0); } 40% { transform:translateY(-10%); } }
.happy-cat.is-jump { animation:happyJump .5s ease-in-out 3; }

/* ── 点の 画面 ／ 勝ち・負けの 画面 ───────────── */
.result-wrap {
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:center; justify-content:center;
  background:rgba(70,60,82,.30); padding:10px;
}
.result-box {
  width:min(94vw, 420px); max-height:var(--result-max);
  padding:8px 12px 10px; border-radius:18px; background:var(--white);
  box-shadow:0 6px 0 #e0d3c2; display:flex; flex-direction:column; gap:6px;
  overflow:hidden;
}
@keyframes resultIn { 0% { transform:scale(.86); opacity:0; } 100% { transform:scale(1); opacity:1; } }
.result-wrap:not(.hidden) .result-box { animation:resultIn .22s ease-out; }
.result-head { display:flex; align-items:center; gap:8px; min-height:24px; }
.result-title { margin:0; flex:0 0 auto; font-size:18px; font-weight:900; line-height:1.15; color:var(--pink-dark); white-space:nowrap; }
.result-title.is-quiet { color:#7f8fa0; }
.result-say { margin:0; flex:1 1 auto; min-width:0; font-size:11.5px; font-weight:900; color:#6b7b88;
  overflow:hidden; text-overflow:ellipsis; }
.result-score {
  display:grid; grid-template-columns:auto repeat(4, 1fr); gap:1px 4px;
  font-size:11px; font-weight:900; line-height:15px; color:#5a6b78;
}
.result-score b { font-weight:900; color:#93a3ae; text-align:right; padding-right:2px; white-space:nowrap; }
.result-score i { font-style:normal; text-align:center; color:#43596b; }
.result-score .sb-out { color:var(--pink-dark); }
.result-score .sb-name { color:#3F6B5D; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.result-score .sb-me { color:var(--pink-dark); }
.result-box .level-pick { margin:0 auto; padding:2px 8px; border-width:2px; }
.result-box .level-pick .level-select { min-height:44px; font-size:14px; }
.result-row { display:flex; gap:8px; transition:opacity .16s ease-out; }
.dialog-ok {
  flex:1 1 auto; min-height:44px; padding:0 14px; border:0; border-radius:999px;
  background:var(--pink); color:#fff; font-family:inherit; font-size:14px; font-weight:900;
  cursor:pointer; box-shadow:0 3px 0 var(--pink-dark);
  display:flex; align-items:center; justify-content:center; text-decoration:none;
}
.dialog-ok:active { transform:translateY(2px); box-shadow:0 1px 0 var(--pink-dark); }
.dialog-ok.alt { background:#eaf3f1; color:#5a7a8c; box-shadow:0 3px 0 #cfe4ea; }
.dialog-ok.alt:active { box-shadow:0 1px 0 #cfe4ea; }
.result-box.is-locked .result-row,
.result-box.is-locked .level-pick { pointer-events:none; opacity:.4; }
.result-box.is-locked .dialog-ok { box-shadow:none; transform:translateY(3px); }

/* ── 遊び方 ─────────────────────────────── */
dialog#helpDialog {
  border:0; border-radius:20px; padding:16px 16px 14px; max-width:min(92vw, 430px);
  max-height:86vh; overflow:auto;
  background:var(--white); color:var(--ink); font-family:inherit; position:relative;
  box-shadow:0 8px 0 #e0d3c2;
}
dialog#helpDialog::backdrop { background:rgba(70,60,82,.34); }
dialog#helpDialog h2 { margin:0 0 6px; font-size:17px; font-weight:900; color:var(--pink-dark); }
.dialog-lead { margin:0 0 8px; font-size:13px; font-weight:900; color:#5a4a63; }
.help-list { margin:0 0 8px; padding-left:1.2em; font-size:12.5px; font-weight:700; line-height:1.7; }
.help-note { margin:0 0 10px; font-size:11.5px; font-weight:700; color:#7d8c99; line-height:1.6; }
/* ★★★★ T267（2026-09-12・🎨アト）―― ★★× を **スクロールしても 消えない** 形に ★★★★
   ------------------------------------------------------------
   ★ ★★きっかけ（★💻コーダの 実測。★🧪トライの 見立ての 訂正）：
     ★ ★「★`.close-dialog` は `position:absolute` で ★★スクロールする 箱（`dialog#helpDialog`）の
       ★ ★★**中**に いるので、★下まで 送ると ★★★× は top −165px ＝ 箱の 外に 出て 消えます。
       ★ ★★★＝ ★上に いれば × が 見えて「分かった！」が 見えない、★下に いけば 逆」
   ★ ★★直し方 ―― ★`absolute` を **`sticky`** に しました。★★社長の お決め（★「1. 直す」）。
   ★ ★★★寸法・見た目は **1pxも 変えて いません**（★44×44px・右 8px・上 8px の まま）【★T267 実測】。
     ★ ★どうやって 1pxも 動かさずに 流れの 中へ 入れたか（★3つ 組で 1つ）：
       │ ★① `display:block` ＋ `margin-left:auto` … ★★右はしへ（★`right:8px` の 代わり）
       │ ★② `margin-bottom:-44px` ………… ★★**たけを 器に 数えさせない**
       │ ★　　→ ★次の `<h2>` は 前と **同じ y** から 始まります。★★中身の たけは ±0px。
       │ ★　　　（★ここを 0 に すると 中身が 44px 伸び、★568×320 で 読めない 行が 増えます）
       │ ★③ `top:0` ＋ `transform:translate(8px,-8px)` … ★★器の 上ばり（`padding:16px`）を
       │ ★　　★8px に 引き直す。★★止まった ときも 上から 8px の まま です。
   ⚠️★★★ ★**`top` は `0` です。★★`16px` と 書かないで ください**【★T267 で 1度 まちがえました】★★★
     ★ ★★sticky の 基準は ★**器の 上ばりの 内がわ**（★ここでは 16px 下）―― ★`top:16px` と 書くと
       ★ ★★16 ＋ 16 ＝ **32px** 下に なり、★★★× が いまより 16px 下がります【★実測：24px ↔ 8px】。
       ★ ★★computed style は どちらも「16px」と 答えます。★★数字を 見て 気づけません でした ――
         ★ ★★**×の 場所を 座標で 測って** 気づきました。
   ★ ★★字の 上に 出る 理由 ―― ★`sticky` は「★**位置づけ された もの**」なので、★流れの 中の 字より
     ★ ★**あとで 塗られます**。★`z-index` は 要りません。
     ⚠️★★ ★★**ここで 1つ 白状します**【★T267】：★はじめ 私は `z-index:5` を 書き、
       ★ ★「★これが 無いと 字が ×の 上に 出る」と コメントにも 書きました。★★★測ったら ちがいました ――
       ★ ★★`z-index:5` を 消しても ★**4画面 とも 写真が 1画素も 変わりません**（★丸の 中の 墨 38→38・48→48）。
       ★ ★★＝ ★**私の 書いた 理由が うそ でした。**★だから 行ごと 消しました。
       ★ ★★（★float で 書いた ばあいは 話が ちがう かも しれませんが、★★**それは 測って いません**。
         ★ ★★測って いない ことを 理由に 書かない ―― ★T267 で 自分が 踏んだ わな です）
   ⚠️★★ ★**`position:absolute` に 戻さないで ください。**★★戻すと 下に 送った とき ×が 消えます。
   ⚠️★★ ★**`margin-bottom:-44px` を 消さないで ください。**★★中身が 44px 伸びます。
   ⚠️★★★ ★★代金（★正直に）：★下へ 送って いる あいだ、★★×の 丸（44×44px）が
      ★ ★右上の 字を かくします。★★かくれる 墨は ★**多くて 127画素**（★320×480 の 送り55。
      ★ ★★13画面 × 送り 5か所 ＝ 53こま を ★**丸の 中だけ** 数えた 中の いちばん 大きい もの。
      ★ ★★丸の 中は 1520画素 なので ★**8.4%**）【★T267 実測・写真の 画素】。
      ★ ★★＝ ★**かな 2文字ぶん**くらい。★「いつでも 閉じられる」を 取って、★これを 渡しました。
      ⚠️★ ★★数え方を 1度 まちがえました ―― ★はじめ「★後」の 写真の 丸の 中を 数えて いて、
        ★ ★★それは **×の 字 そのもの**でした（★#7d8c99 も 墨に 入ります）。★★正しくは
        ★ ★★「★前」の 写真の、★後で ×が 止まる 場所 を 数える（★→ `t267_sumi2.cjs`）。
   ★ ★★効き（★13画面 × 送り 5か所 ＝ 53こま）【★T267 実測】：
      ★ ★★×が 見えない こま ―― ★**40/53 → ★★★0/53**。
      ★ ★★送り 0 での ×の 場所は ★**13画面 とも 前と 1pxも 同じ**（★y が 全部 一致）。 */
.close-dialog {
  position:sticky; top:0; z-index:2;   /* ★T366：あとから 塗られる 題の 帯（z-index:1）より 上に（★外すと ×が 帯の 下に もぐる・見張りの 丁）*/
  display:block; width:44px; height:44px; margin:0 0 -44px auto;
  transform:translate(8px, -8px);
  border:0; border-radius:50%;
  background:#f1f5f4; color:#7d8c99; font-size:18px; font-weight:900; cursor:pointer; font-family:inherit;
}

/* ★T366（2026-10-04・🎨アト）―― 題（h2）を「×の 帯」に しました
   ★ T267 の 型（× だけ sticky）は、★送ると ×の 丸が 右はしの 字に かかりました
     ★（★麻雀17歩 320px の 点の 表で「12,000」「親」・T364 F5／T365）。★5本 同じ 型で 同じ ことが 起きます。
   ★ 直し方：★題を sticky の 白い 帯に して ×の 下に 敷く。★中身は 帯の 下に もぐる ので、★×は 字に かからない。
     ★ 帯の たけ 52px ＝ 上 8px ＋ × 44px（★×の 場所・大きさは T267 の まま 1pxも 変えて いない）。
     ★ top は -16px（★器の 上ばり 16px ぶん。★sticky は 上ばりの 内がわが 基準 ―― T267 の わな）。
     ★ margin-top は -60px（★× の margin-bottom -44px と 重なって 1つに なる ―― ★-60 ＝ -(× 44 ＋ 上ばり 16)。
       ★ -16px と 書くと -44 に のまれて 帯が 16px 下から 始まり、★送り0 だけ 題と × が ずれる【★実測】）。
     ★ z-index：帯 1・× 2（★帯は あとから 塗られる ので、× に 2 が 無いと 帯の 下に もぐる）。
     ★ この本だけ 題は 左よせ（★前から）。★`dialog#helpDialog h2` より 強く する ため `#helpDialog` を 付けた。
   ★ 代金：★送って いる あいだ、箱の 上 52px は 題で ふさがる（★この本の 568×272 で 読める たけ 約234→182px）。
     ★ 題の 字が 小さい（17px）ので、中身の はじまりは 前より 約30px 下がる。★いちばん 上でも いちばん 下でも ★帯の 下に 残る 字は 0。
   ★ 見張り：verify の「㊲ あそびかたの × が 字に かからない（T366）」。 */
#helpDialog .close-dialog + h2 {
  position:sticky; top:-16px; z-index:1;
  box-sizing:border-box; min-height:52px; margin:-60px -16px 6px; padding:8px 60px 0 16px;
  line-height:44px; background:var(--white);
  box-shadow:0 3px 0 rgba(196,58,115,.10);
}
#helpDialog { scroll-padding-top:58px; }

/* ── ★測る ときは 動きを 止める（★会社で 4回 かかった わな）── */
body.measuring *, body.measuring *::before, body.measuring *::after {
  transition:none !important; animation:none !important;
}