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

   ★★★ この 1本の 決まりごと（★アトへ・ここだけは 動かさないで ください）★★★
     ------------------------------------------------------------
     ① ★★強調は **その ときどき 1種類だけ** ――
        ★ わたす とき … `.card.is-pick`（★選んだ 3枚に わく）
        ★ 出す とき   … `.card.is-dim`（★出せない 札を 暗くする）
        ★ ★★この 2つは **同時に 出ません**（★verify ④ が 毎回 本物で 数えます）。
        ★ ★光り（ぼかしの 太い 影・色の 反転）を 足したら、★verify ④ が 鳴ります。
        ★ ★`.is-pick` は **outline** で 書いて あります ―― ★box-shadow で 書くと
          ★「広がり 2px 以上 ＝ 光り」に なって しまう から です（★ページワン T152 の 見張りの 決まり）。
     ② ★★`.card` に `:hover` を 足さない ―― ★指の 端末で こびりつきます。
     ③ ★★札の 比は 419:635。★はば・たけは JS が --cw / --ch に 入れます。★上書きしない。
     ④ ★★結果の 箱は `--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;

  /* ★ マークの 色 */
  --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:    38px;
  --ch:    58px;
  --bw:    17px;
  --bh:    26px;
  --gap:    3px;
  --result-max:200px;
  /* ★★ T167：★`--happy`（★盤の まん中の ネコの たけ）は 消しました ――
     ★ ★ネコの 大きさは もう JS では なく **CSS が 決めます**（★大富豪と 同じ 48／64px）。 */
}

* { 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;`
   ★ ★1280×900 で 左右 140px ずつ。★札は 1pxも 小さく なりません
     （★13枚 ＋ すきま が 1000px の 中に 収まる ―― ★実測は 作業メモ）。 */
.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` です（★17本で 同じ 名前）。
   ★★ しぼらずに 書くと、★52枚 ぜんぶの うら面に min-width:44px が かかり、
      ★ロボットの 小さい 札だけが ふくらみます（★ページワン 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 … ★この本の 上の帯は min-height **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;
  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` の ままだと、はみ出しは 上下に 半分ずつ 出て、
     ★★上に 出た ぶんは scrollTop を 負に できない ので **どうやっても 届きません**。
   ★ → ★`flex-start` ＋「いちばん 上と いちばん 下の 子に margin:auto」。
     ★★ flex の auto余白は 余りが ある ときだけ 広がる ―― ★1つの 形で
        「入る ときは まん中・はみ出す ときは 上から」に なります。 */
.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; }
/* ★ 大見出し ―― ★大富豪と 同じ 立体の 縁どり（設計図 §9.5）。★3文字 なので 大きく 出せます。 */
.start-card h1 {
  margin:4px 0 0; font-size:58px; font-weight:900; letter-spacing:2px; line-height:1.1;
  color:#E9607F; text-shadow:0 4px #9E2A47, 0 7px #FFE0E8;
}
.intro { margin:6px 0 16px; font-size:17px; font-weight:700; color:#5a4a63; }

/* ★★ つよさの えらび（★1ゲームにつき 選ばせるのは 1つまで・設計図 追記①）★★
   ★ 四目・6×6リバーシと 同じ 部品・同じ 名前。★44px（会社の 基準）。 */
.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; }

/* ★ はじめる の ボタン（★大富豪 ＝ ページワン T162① と 同じ 手ざわり）*/
.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); }

/* ★ ハッピー（★大富豪・ページワンと 同じ ならび）
   ⚠️ ★`.title-screen` の **いちばん 下の 子** ―― ★T160 の margin-bottom:auto が 効きます。 */
.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); }

/* ★ 日本語の 折り返しを「ことばの きれめ」で（★大富豪と 同じ 1行）*/
.intro, .mascot .bubble, .help-list li, .help-note, .result-say { word-break:auto-phrase; }

/* ★★ せまい 画面の 囲い（★大富豪の @media (max-width:650px) の 実測値 そのまま）★★
   ⚠️★ この かたまりは **`.start-card` の 決まりより 後ろ**に 置く こと
      ―― ★同じ 強さでは 後ろが 勝つ ので、前に 置くと 1つも 効きません（★ページワン T162 の 失敗）。 */
@media (max-width:650px) {
  .start-card { border-width:4px; border-radius:24px; padding:22px 15px 20px; }
  .start-card h1 { font-size:50px; letter-spacing:1px; }
  .eyebrow { font-size:13.5px; }
  .intro { font-size:15px; 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:44px; }
  .mascot { margin-top:12px; }
}

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

/* ============================================================
   ★★★ ハッピーの 帯（★T167・社長指示「大富豪みたいに 統一して ほしい」）★★★
   ------------------------------------------------------------
   ★ ★手本は 大富豪の `.status-line > .talk`。★★下の 数字は ぜんぶ
     ★ 大富豪から **測って 写した** もの です【実測・T167 §1】 ――
     ★ ★私の 好みで 決めた 数字は 1つも ありません。

   | ★写した もの      | ★大富豪【実測】                    | ★ハーツ（ここ）      |
   |--------------------|------------------------------------|----------------------|
   | ネコの 器の はば   | 64px ／ 48px（はば 650px 以下）     | ★同じ                |
   | ふきだし           | flex:1（★横に 長い）                | ★同じ                |
   | ふきだしの わく    | 3px ピンク・かど 18px               | ★同じ                |
   | ふきだしの 内よはく| 8px 13px ／ 5px 10px（650px 以下）  | ★同じ                |
   | ふきだしの 字      | 13px ／ 12px（520以下）／17px（PC） | ★同じ                |
   | ネコと ふきだしの 間| 10px                               | ★同じ                |
   | しっぽ             | ピンク 9x17 ＋ 白 6x12 の 2まい重ね | ★同じ（★下を 見て）  |

   ⚠️★★ 1つだけ わざと ちがう ところ ―― ★**しっぽの たての 位置** ★★
     ★ 大富豪は `top:18px`（★上ぞろえ）。★★これは 中が 2行に なる ことを 見た 置き方 です。
     ★ ★ハーツの ひとことは **いつも 1行**（★いちばん 長い 文でも 1行【実測】）。
       ★ ★大富豪の 18px を そのまま 写すと、★ふきだしが 32px の とき
         ★★しっぽの 先（18＋18＝36px）が **下に 4px はみ出します**。
     ★ → ★★まん中ぞろえ（`top:calc(50% - 9px)`）に しました。★★大きさは 1pxも 変えて いません。

   ⚠️★★ たての 低い 画面（★横向き）では この 帯を **出しません** ★★
     ★ ★横向きは いまも「ハッピーを 出さない」画面 です（★直す前から）。
     ★ ★そして ★★盤の たけ 309px は verify ⑧ の 表に 書いて あります ――
       ★★1pxでも 減らすと 札が 33px から 縮み、★トライ T166 の 数字が 動きます。
   ============================================================ */
.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; }
/* ⚠️★★ たけは **数で 書く**（★`height:auto` に しない）★★ ―― ★私の 回り道③【実測】
   ★ ★大富豪の `.cat` は `width:100%; height:auto` です。★同じに 書いたら
     ★★ネコが **48×150px** に なり、★盤が 150px 短く なって
     ★★320×568 の 札が 39→38px、★320×480 が 39→**23px** まで 縮みました。
   ★ ★わけ：★ハーツの `<svg class="happy-cat">` には viewBox が ありません
     （★中身は `<use>` で 呼ぶ だけ）。★★大きさの 手がかりが ないので、
     ★ブラウザは SVG の 決まりの 150px を たけに 使います。
   ★ → ★★たけは 自分で 書きます。★★48 × 112/150 ＝ 35.84 → **36px**
     ／★64 × 112/150 ＝ 47.79 → **48px**（★112/150 は `#happy-head` の viewBox の 比）。
   ★ ★★これで かおの 大きさは **大富豪と 同じ**（★はばが 同じ ＝ 絵の 座標が 同じ）です。 */
.talk .happy-cat { width:64px; height:48px; display:block; margin:0 auto; }
/* ★ 名札は 流れの 中（★大富豪は position:absolute ―― ★あちらは 体まで 描いて いて
     ★ 下に 置く 場所が ある から です。★ハーツの 絵は **かおだけ**なので、
     ★ ★下に 出すと 盤に かぶります。★→ ★1行 ぶん（15px）を 素直に 使います。
   ★ ★これで 帯の 中身は **36 ＋ 15 ＝ 51px** ―― ★★大富豪の 51px と 同じ です【実測】。 */
.talk .cat-name {
  margin:1px 0 0; font-size:10.5px; font-weight:900; line-height:14px;
  color:var(--pink-dark); white-space:nowrap;
}
.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:hidden; text-overflow:ellipsis;
}
/* ★ しっぽは 2まい重ね（★ピンクの ふち ＋ 白い 中身）＝ 大富豪と 同じ 作り */
.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; } }
/* ★ 大富豪の「パソコンで 字を 大きく する」かたまりと **同じ 条件**（min 1180×850）*/
@media (min-width:1180px) and (min-height:850px) { .talk .banner { font-size:17px; } }
/* ============================================================
   ★★ たての 低い 画面（★横向き）―― ★帯を **並びから 外します**（★たけ 0）★★
   ------------------------------------------------------------
   ⚠️★★ ★私の 回り道④【実測】：★はじめ ここを `display:none` と 書きました。
      ★ ★★すると 横向きで ひとことが まるごと 消えました ―― ★★これは 直しでは なく **こわし** です。
        ★ ★「3枚 えらんで、左の 人に わたそう！」は、★★わたす 場面で 画面に 出て いる
          ★ **たった 1つの 案内** です。★消したら 何を すれば よいか 分かりません。
      ★ ★見つけた 目：★数字では なく **写真**（`後_812x375よこ.png` の 1枚目）でした。

   ★ ★では なぜ 帯を 並びに 置けないか【計算・実測】：
     ★ ★横向きの 盤は **309px**。★すきまは すでに 下ばりの 4px（＝ 余りが 1pxも ない）。
     ★ ★帯を 並びに 入れると 盤は 263px に なり、★★札が **33px → 26px** に 縮みます。
       ★ ★★トライ T166 が 測った 横向きの 数字が 動きます。
   ★ → ★★ネコは 出さず、★ひとことだけを **直す前と 同じ 置き方**（★台の 上ばしに 浮かべる・
     ★ ★たけ 0）に 戻します。★★これは トライが すでに 検査ずみの 形 です
       （★T166 気になる程度3：★横向きは 19px かさなる。★★「読めます」と 書かれて います）。
   ★ ★上ばしの y は JS が 入れます（`layout()` の `is-flat`）―― ★台の 位置は 札の たけで
     ★ 決まる ので、★CSS だけでは 書けません。

   ⚠️★★★ T220-2（2026-09-04・🎨アト）―― ★★この 420px の 線は **まだ 直して いません** ★★★
      ★ ★★理由：★この 線は **3か所 が 1組**で、★★2か所は `hearts-game.js`（★コーダの 持ちもの）です：
        ★ ★① ここ（★帯を 浮かせる ＋ T215-2 の「同じ 文を 2つ 出さない」）
        ★ ★② `hearts-game.js` 434行 `sayEl.style.top = flat ? geo.feltTop : ''`（★浮いた ふきだしの 置き場所）
        ★ ★③ `hearts-game.js` 3786行 見張り ㉕ の `r25.flat`（★「横向きか」の 判じ）
      ★ ★★①だけ 動かすと、★★②が 置き場所を 入れて くれず、★★★③が「ふきだしが 戻って いません」と
        ★ ★**うそを 鳴らします** ―― ★★6画面で ㉕ が 2件ずつ【★T220-2 実測・`t2202_talk.cjs`】。
      ★ ★★★いま 926×428 で 起きて いる こと【実測】：
        ★ ★★ハッピーの ふきだし（13px）と 場の 案内（34px）に **まったく 同じ 文**が 出て います
          ―― ★★T215-2 で 社長が「1 ＝ 消す」と お決めに なった もの が、★この 画面だけ 効いて いません。
        ★ ★★帯が 並びの 中に あるので 盤が **69px** 短く、★札が **31×47px**（★指の 的の 70%）。
      ★ ★★3か所 まとめて 動かすと【実測・18画面】：★★926×428 の 札が **31×47 → 43×65px（+38%）**、
        ★ ★同じ文の 2つ出しは 消え、★★NG は 0 の まま。★★決まった6画面・320×454・568×320 は **1つも 変わりません**。
      ★ ★→ ★★**コーダへ お渡しして います**（★T220-2 §6）。★★①だけ 先に 直さないで ください。

   ✅★★★ T221（★2026-09-04・💻コーダ）―― ★★3か所 まとめて 直しました ★★★
      ★ ★★アトの お渡しどおり、★★★3か所を **1文字ちがわず 同じ 文**に そろえました：
        ★ ★① ここ（`hearts.css` 336行）
        ★ ★② `hearts-game.js` `sayEl.style.top`（★浮いた ふきだしの 置き場所）
        ★ ★③ `hearts-game.js` 見張り ㉕ の `r25.flat`（★「横向きか」の 判じ）
      ★ ★★★3つは 1組です。★★1つでも ちがう 文に すると、★★②が 置き場所を 入れず
        ★ ★③が「ふきだしが 戻って いません」と **うそを 鳴らします**（★アト実測・6画面で 2件ずつ）。
      ★ ★★→ ★直すときは **かならず 3か所 いっしょに**。★見張り ㉟ が 文を まるごと 鍵に して
        ★ ★いるので、★★1文字でも ずらすと ㉟ が 鳴って 教えて くれます。
      ★★ ★T221 の 実測（★33画面 × 2場面）：
        ★ | 画面 | 前 → 後 |
        ★ |---|---|
        ★ | 926×428・932×430・883×430 | ★札 **31×47 → 43×65px（+38%）**・帯 69 → **0px**・★★同じ文の 2つ出し **消えた** |
        ★ | 1280×470 | ★札 38×58 → **50×76px** |
        ★ | 1024×460・768×460 | ★札 36×55 → **48×73px** |
        ★ | ★9画面・320×454・568×320・PC ふつう | ★★**1つも 変わりません** |
      ⚠️★ ★★見た目の 話（★アト T220-2 §6-1・★社長に お聞き中）：
        ★ ★たけ 421〜479px・はば 568px 以上 では、★★**ハッピーの かおと 名前が 出なく なります**
          ★ ★（★ふきだしは 台の 上に 浮かんで 残る ので、★ハッピーは しゃべり つづけます）。
        ★ ★★812×375 などの 横向きで **すでに そう なって いる 形**と 同じ です（★T167 から）。
   ============================================================ */
@media (max-height:420px), (max-height:479px) and (min-width:568px) {
  .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; }
  /* ★ 直す前の `.say` の 見た目 そのまま（★小さい 丸い ふきだし・しっぽ なし）*/
  .talk .banner {
    position:absolute; left:50%; transform:translateX(-50%);
    display:inline-block; flex:none; width:auto; max-width:92%;
    padding:4px 12px; border:0; border-radius:999px;
    background:var(--white); color:#5a4a63; font-size:11.5px; font-weight:900;
    /* ★ `normal` に 戻すのは わざと です ―― ★1.35 の ままだと ふきだしが
       ★ 19px → 24px に 太り、★台との かさなりが 19px → 24px に 増えます【実測】。
       ★ ★★19px は トライ T166 が 検査した 数字 です。★動かしません。 */
    line-height:normal;
    box-shadow:0 2px 0 #e6dcc9; white-space:nowrap;
  }
  .talk .banner::before, .talk .banner::after { display:none; }

  /* ============================================================
     ★★★ T215-2 ―― ★横向きだけ、★場の 案内が 出て いる 間は 上の ふきだしを 出さない ★★★
     ★★★（★社長裁定 2026-09-03「1 ＝ 消す」。★アトの 判じ・トライも 同じ 判じ）★★★
     ------------------------------------------------------------
     ★ ★何が 起きて いたか【実測・812×375】：★上の 小さい ふきだし **11.5px** の
       ★ ★**2px 下**に、★★**まったく 同じ 文**が **31px**（★★2.7倍）で 出て いました。
       ★ ★小さい ほうは 何も 足して いません ―― ★設計図 §5.5「★迷ったら 消す」。
     ★ ★なぜ 上の ふきだしが ここに 残って いたか：★横向きは ハッピーの かおを 出さない 画面 で、
       ★ ★★この ふきだしが「わたす 場面の たった 1つの 案内」だった から です（★上の 回り道④）。
       ★ ★★いま その 役は 場の 案内が 引きつぎました。★★役の なくなった 部品 です。

     ⚠️★★ 消すのは **わたす 案内が 出て いる 間だけ** です ★★
        ★ ★`.pass-guide` から `hidden` が 取れて いる 間だけ 効きます（★JS の refreshGuide）。
        ★ ★★わたし終わったら 案内は 消え、★★この 行も 効かなく なり、★ふきだしは **戻ります**
          ―― ★ハッピーは その あとも しゃべります（「ロボット1が 取った！」など）。
        ★ ★★見張り ㉕ が「出て いる間は 消える／消えたら 戻る」を 毎回 数えます。
     ⚠️★★ 消すのは **ふきだし（.banner）だけ**。★かお（.happy-cat）と 名前（.cat-name）は
        ★ ★そもそも 横向きでは `display:none`（★上の `.talk .cat-wrap`）―― ★1文字も さわって いません。
     ⚠️★★ たて（320×568・320×480）には **1pxも 効きません** ―― ★この かたまりは
        ★ ★`@media (max-height:420px)` の 中 だから です（★横向き 375px だけ）。
     ⚠️★ `:has()` が 使えない 古い ブラウザでは **何も 起きず、いまの まま**（★2つ 並ぶ）です。
        ★ ★★＝ ★壊れる 側には 倒れません。
     ============================================================ */
  .play-screen:has(#passGuide:not(.hidden)) .talk .banner { display:none; }
}
/* ★ 器は うすい クリーム ―― ★みどりの 上に みどりの 台を 置くと 台が 見えません
     （★ページワン T162② の 直し。★大富豪も 同じ 作り）。 */
.stage {
  position:relative; flex:1 1 auto; min-height:0;
  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;
}

/* ★★ 場の 台（★大富豪 ＝ ページワン T162② の `.felt-table` を そのまま）★★
   ★ 木の わく（外）＋ みどりの ラシャ（中）の 2枚がさね。
   ★ 大きさ・場所は JS が 入れます（★札の たけで 決まる ので CSS だけでは 書けない）。
   ⚠️★ **指は 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); }
.stage, .zone, .cards, .card, .card-in, .card img { touch-action:none; }

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

.middle { position:absolute; left:0; right:0; pointer-events:none; }
/* ★★ T167：★ここに あった `.happy-spot`（★ネコを 盤の まん中に 大きく 置く）と
   ★ `.say`（★台の 上に 出る 小さな 丸い ふきだし）は **消しました**。
   ★ ★引っこし先は 上の 「ハッピーの 帯」（`.talk`）です。
   ★ ★★ついでに 直った もの：★トライ T166「気になる程度3 ―― ★ふきだしが 台の 上わくに
     ★重なる（★横向き 19px・PC 15px・320×568 7px）」。★★10サイズ とも **0px** に なりました。 */

/* ★★ 点の 帯 ―― ★「この回」と「合計」を 4人ぶん ★★
   ★ 見出し ／ この回 ／ 合計 の 3行。★数だけ。★言葉は 足しません。 */
/* ★★★ T171 ―― ★字の 大きさは **JS が 帯の たけから 出します**（★社長の 決め）★★★
   ------------------------------------------------------------
   ★ トライ T166 §7-2：★★「9.5px／10.5px。★1280pxでも 大きく ならない」。
   ★ ★前は ここに `font-size:10.5px` と `@media (max-width:360px){9.5px}` が
     ★★**決め打ちで** 書いて ありました ―― ★だから 大きい 画面でも 育ちませんでした。
   ★ → ★★`--sb-num`（数の 字）と `--sb-name`（名前の 字）を JS が 入れます。
     ★ ★JS 側は「★台を 1pxも やせさせない たけ」から 逆算して います（★game.js の measure）。
   ⚠️★ アトへ：★ここに `font-size` を 決め打ちで 書き戻さないで ください
      ―― ★★大きい 画面で また 育たなく なります（★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; }
.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 .26s cubic-bezier(.35,.02,.28,1), top .26s cubic-bezier(.35,.02,.28,1),
             width .2s ease, height .2s ease, transform .14s ease, filter .16s ease, opacity .2s ease;
  will-change:left, top;
}
.card.is-bot { width:var(--bw); height:var(--bh); }
.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 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; }

/* ★★★ 強調 その1 ―― ★出す とき：★出せない 札を 暗くする ★★★
   ★ 光らせません。★色も 変えません。★★引き算 だけ です（ルル §14-1）。
   ⚠️★ アトへ：★ここに 光りを 足すと、★verify ④ が すぐ 鳴ります。 */
.card.is-dim { filter:brightness(.62) saturate(.55); }

/* ★★★ 強調 その2 ―― ★わたす とき：★選んだ 3枚（★ピラミッドの「選ぶ→わく→押す」）★★★
   ★★ `.is-dim` とは **同時に 出ません**（★わたす 間は 出せる／出せないが 無い）。
   ⚠️★ `box-shadow` では なく `outline` で 書いて あります ――
      ★verify ④ は 札の box-shadow の「広がり 2px 以上」を 光りと 見なす ので、
      ★★わくを box-shadow で 書くと 自分で 鳴らして しまいます。 */
.card.is-pick {
  outline:3px solid var(--pink-deep); outline-offset:-3px;
  border-radius:calc(var(--cw) * .1);
  transform:translateY(-14%);
  z-index:70;
}

/* ★ 出せない 所を 押した ―― ★ぷるっと ゆれる だけ（★「そこは ちがうよ」）
   ★ ★ページワン T160／T161 と 同じ 返事。★新しい 見た目は 0種類 です。 */
.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; }
/* ★ 取られて 消える 4枚（★取った 人の ところへ 飛んで、静かに 消える）*/
.card.is-gone { opacity:0; }

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

/* ── ★★わたす ボタン（★3枚 えらんだ ときだけ 出る）── */
.pass-go {
  position:absolute; left:50%; transform:translateX(-50%);
  z-index:80;
}
.pass-btn {
  min-height:48px; min-width:132px; padding:0 22px;
  border:4px solid #fff; border-radius:999px;
  background:linear-gradient(180deg, var(--pink), var(--pink-deep));
  color:#fff; font-family:inherit; font-size:17px; font-weight:900; cursor:pointer;
  box-shadow:0 5px 0 var(--pink-dark), 0 8px 14px rgba(196,58,115,.24);
}
.pass-btn:active { transform:translateY(3px); box-shadow:0 2px 0 var(--pink-dark); }

/* ============================================================
   ★★★ T215 ―― 場の「わたす 案内」の 見た目（🎨アト）★★★
   ------------------------------------------------------------
   ★ 社長：「★場に 大きく 同じ文章を 書いて、★渡す相手を 矢印で わかりやすく」（T214 の ご指摘）。
   ★ ★中身（文・矢印・出す／消す）は game.js の `refreshGuide`／`passSay`。★★ここは 見た目だけ。
   ★ ★場所（left / width / top）と **字の 大きさ（font-size）は JS の `paintGuide` が 入れます**
     ―― ★台の 大きさが 札の たけで 決まる ため。★★ここに font-size を 書き戻さないで ください。

   ★★ 決めた こと（★数字は 作業メモ T215 §2）★★
     ① ★★ハッピーの ふきだしと **同じ 器**（白・ピンクの わく 3px・かど 18px・ぼかし 0 の 影）
        ―― ★「ハッピーの 言葉が 場にも 置いて ある」と 読める ように。★★色は 1つも 足して いません。
        ★ ★前の 仮の 見た目（黒っぽい 半とうめいの 帯・白い 字）は へだたり **4.3:1** で、
          ★読める 目安 4.5:1 に 届いて いません でした【実測】。★白い 器の 上の 字は **10.9:1**。
     ② ★★たて置きに 変えました（★矢印が 上・文が 下）―― ★★文が 台の はば いっぱいに 使える ので、
        ★字が **16 → 20px**（320×568・320×480）に 育ちます。★横に 並べると 矢印の ぶん 文が 痩せます。
        ★ ★横向き（812×375）だけは たけが 66px しか ないので、★よこ並び（← 文）の まま。
     ③ ★★矢印は 文の **1.8倍**（★20px の とき 36px）・こい ピンク（--pink-dark・へだたり 5.4:1）。
        ★ ★字と 同じ 大きさ・同じ 色 だと「文の 1文字目」に 見えて、★向きの しるしに 読めません。
     ④ ★★`word-break:keep-all` ―― ★言葉の まん中で 折らない（★前は「向かい／の 人に」と 割れて いました）。
        ★ ★★これは 字を 1〜2px 小さく する 代金を 払って います（★JS が 2行に 収まる 字を えらぶ ため）。
   ⚠️★ 出て いるのは わたす 場面だけ。★札が 台に 出る ころには 消えて います（★verify ㉓）。
   ⚠️★ 指は 当たりません（pointer-events:none）。★z-index は ボタン（80）より 下・点の 帯（40）より 上。
   ============================================================ */
.pass-guide {
  position:absolute; z-index:70; pointer-events:none; box-sizing:border-box;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
  /* ★ 左右の 内よはくは 5px（★わくの 3px を ふくむ）―― ★「向かいの 人」の 回は 文が いちばん 長く
     ★ （10.9字ぶん）、★内よはくを 6px 取ると 320px で 字が 16px に 落ちます。★2px なら 17px【実測】。
     ⚠️★ ピンクの わくは `border` では なく **内がわの box-shadow** で 描いて います ――
        ★ ★JS（paintGuide）は `scrollHeight` で「ボタンまでの すきま 6px」を 残しますが、
          ★scrollHeight に border は 入りません。★border で 描くと わく 3px×2 が その 6px を 食い、
          ★★320×480 で 器の 下と「わたす ▶」の 上の すきまが **1px** に なりました【実測】。
        ★ ★内がわの 影なら 内よはくの 中に 入る ので、★6px が そのまま 残ります（★影 3px を 引いても 3px あく）。
        ★ ★代金：★320×480 で 字が 19 → 18px（−1px）。★★押す ものの まわりを あける ほうを 取りました。 */
  padding:5px 5px 5px;
  background:var(--white); border:0; border-radius:18px;
  box-shadow:inset 0 0 0 3px var(--pink), 0 3px 0 rgba(196,155,110,.18);
  color:var(--ink); font-weight:900; line-height:1.3; text-align:center;
  word-break:keep-all; overflow-wrap:normal;
}
.pass-guide-arrow {
  flex:0 0 auto; font-size:1.8em; line-height:1; font-weight:900;
  color:var(--pink-dark); -webkit-text-stroke:.04em var(--pink-dark);
}
.pass-guide-text { flex:0 1 auto; min-width:0; }
/* ============================================================
   ★ たけの 低い 画面：★よこ並び（★矢印 ← 文）。★字は JS の paintGuide が 測って 決めます
   ------------------------------------------------------------
   ★★★ T220-2（★2026-09-04・🎨アト）―― ★★この 切りかえに **1つ 足しました** ★★★

   ⚠️★ ★★もとは `@media (max-height:420px)` の 1本だけ でした。
      ★ ★★★T220 で `.rank-list` に 見つけた「★420px の 線が まちがい」と **1文字ちがわず 同じ 病気**です
        ★ ★（★見つけたのは 💻コーダ・T217-5 §4。★数字も コーダが 21画面で 出して います）。

   ★★ 何が 起きて いたか【★実測・33画面】★★
     ★ ★926×428（★iPhone 12／13 Pro Max・14 Plus を **よこ向き**）は ★★428 > 420 なので
       ★ ★★**たて並びの まま**でした。★台の 空きは 58px：
       ★ ★★たて並び ＝ 字×1.8（矢印）＋ 字×1.3（文）＋ 10 ＝ **字×3.1 ＋ 10** → ★★字は **15px** が 限界。
       ★ ★★よこ並び ＝ 字×1.6 ＋ 4 → ★★★**34px**。
     ★ ★★見張り ㉔ が 3件 鳴って いました ―― ★「字 15px（16px 未満）」＋
       ★ ★「★15px は ハッピーの ふきだし 13px の **1.3倍 未満**」。
       ★ ★★★＝ ★★T215 で 決めた「★場の 字は ふきだしの 1.3倍 以上（★同じ 大きさでは 意味が ない）」が、
         ★ ★★この 画面だけ 守られて いませんでした。★932×430・883×430 も 同じ（★各 3件）。

   ★★ なぜ `(min-width:568px)` を 付けるか【★実測・★付けないと 壊れます】★★
     ★ ★`max-height:479px` **だけ**に すると、★はば 320 の たて置きまで よこ並びに なり ――
       ★ ★★**320×454（★T220 §9-1 で 足した 3画面の 1つ）が 17px → 15px に 落ち、★★㉔ が 0件 → 3件**。
     ★ ★★＝ ★`.rank-list` と ちがって、★ここは **たけ だけでは 決められません**（★文が 折れる ため）。
       ★ ★568 は 実在の 画面の はば（★iPhone SE 初代 よこ）です ―― ★★すきまに 引いた 線では ありません。

   ★★ 前後【★実測・33画面 ×（★決まった6 ＋ 新3 ＋ まわり）】★★
     ★ ★★悪く なった 画面 **0**／★良く なった **3**（★926×428・932×430・883×430 とも ★★㉔ 3件 → 0件）
     ★ ★★決まった 6画面 … ★**案内も 札も 台も 1pxも 変わって いません**（★4画面は もとから よこ並び）
     ★ ★★568×320 の NG 8件 … ★**8 → 8**（★1件も さわって いません ―― ★社長に お聞き中の 件）
     ★ ★★盤（札の 大きさ・台の 大きさ）… ★**33画面 とも 1pxも 動いて いません**
     ★ ★おまけで 大きく なった 画面：★1280×470 24→40px／1024×460 21→40px／768×460 21→29px
   ⚠️★ ★★まだ 直って いない 画面（★★私が 増やした ものでは ありません・★前から 鳴って います）：
      ★ ★480×320（★14px・★台の 空き 30px）／★320×400（15px）／★360×420（15px）／★568×272（11px）
      ★ ★★どれも よこ並びに しても 足りません【実測】。
   ============================================================ */
@media (max-height:420px), (max-height:479px) and (min-width:568px) {
  .pass-guide { flex-direction:row; gap:.4em; padding:2px 14px; }
  .pass-guide-arrow { font-size:1.6em; }
}
/* ★ T368：★台が うんと 低い 画面（★568×272）だけの「つめた 帯」（★JS の paintGuide が `is-tight` を 付ける）。
   ★ 矢印 1.6em → 1.5em（★㉔「字の 1.5倍 以上」は ちょうど 守る）・★上下の 内よはく 2px → 1px。 */
.pass-guide.is-tight { padding-top:1px; padding-bottom:1px; }
.pass-guide.is-tight .pass-guide-arrow { font-size:1.5em; }

/* ============================================================
   ★★★ T218 ―― ★ハートブレイクの 知らせ（🎨アト）★★★
   ------------------------------------------------------------
   ★ 社長：「★ハートブレイクしたら 盤面上部に 書いてほしい。★★ただ 表示された 文章は
     ★ ★なるべく 場のトランプとは 被らないようにして（★少し 被るのは OK）」
   ★ ★中身（文・いつ 出す／消す・置き場所・字の 大きさ）は game.js の `showBreak`／`paintBreak`。
     ★ ★★ここは 見た目だけ です。★★`font-size` を ここに 書き戻さないで ください
       ―― ★JS が「台の 3分の1に 入る いちばん 大きい 字」を 1pxずつ 測って 決めて います。

   ★★ ①なぜ わたす 案内（白い 器）と 同じ 見た目に しなかったか ★★
     ★ ★★この 知らせは **札の 上に かぶさります**（★わたす 案内は かぶりません）。
       ★ ★札は 白い ので、★白い 器を 白い 札の 上に 置くと **どこまでが 知らせか 分かりません**。
     ★ ★→ ★★うすい 金（--gold-soft）に しました。★★台の みどり・札の 白・ふきだしの 白の
       ★ ★どれとも ちがう ので、★「台の 上に 置かれた 帯」と 一目で 読めます。
     ★ ★★役も ちがいます：★わたす 案内は「★これから する こと」、★こちらは「★いま 起きた こと」。
       ★ ★見た目を 分けた ほうが、★2つを 見まちがえません（★同時には 出ません ―― ★見張り ㉖）。

   ★★ ②へだたり（★読める 濃さ）★★
     ★ ★--ink（#463c52）× --gold-soft（#FFE690）＝ ★**8.36:1**【実測】。★目安 4.5:1 の 1.86倍。
     ★ ★（★白い 器 × --ink は 10.77 でしたが、★上の ①の 理由で 取りません）
     ★ ★★わく（--gold）は かざりでは なく、★★金の 帯が クリーム色の 台わくに 溶けない ための 線 です。

   ★★ ③`word-break:keep-all` ―― ★★言葉の まん中で 折らない（★コーダが 見つけて 私に 回した 1件）★★
     ★ ★直す前【実測・写真】：★320×568「ハートブレイク！ ハ ／ ートから 出せるよ」
       ★ ★★　　　　　　　　　★320×480「ハートブレイク！ ハー ／ トから 出せるよ」
     ★ ★★T215 の `.pass-guide`（「向かい ／ の 人に」）と **1文字ちがわず 同じ 病気** です。
     ★ ★代金は 0 でした ―― ★いちばん 長い ひとかたまりは「ハートブレイク！」の 8字で、
       ★ ★21px でも 168px（★器の 中は 186px）。★★字は 1pxも 小さく なって いません【実測・§3】。

   ⚠️★ わくは `border` では なく **内がわの box-shadow** です（★T215 と 同じ 理由）――
      ★ ★JS の `paintBreak` は `scrollHeight` で「台の 3分の1に 入るか」を 見ますが、
        ★scrollHeight に border は 入りません。★border で 描くと わくの ぶんだけ 器が 太り、
        ★★被りが 増えます。★内がわの 影なら 内よはくの 中に 入ります。
   ⚠️★ 指は 当たりません（pointer-events:none）。★z-index 70 ＝ わたす 案内と 同じ 段
      ★ （★ボタン 80 の 下・点の 帯 40 の 上）。★★2つが 同時に 出る 場面は ありません（★㉖）。
   ⚠️★ ★★被りは 0 に できません ―― ★場の 札は 台の たてを ほぼ ぜんぶ 使い、★札の 上の
      ★ すきまは −1〜10px です【コーダ T217 の 実測】。★★私が できるのは「深く しない」ことだけ。
      ★ ★★直す前 → 直したあと で **1つの 画面も 深く なって いません**（★§3 の 表）。
   ============================================================ */
.break-note {
  position:absolute; z-index:70; pointer-events:none; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:5px;
  border:0; border-radius:18px;
  background:var(--gold-soft);
  box-shadow:inset 0 0 0 3px var(--gold), 0 3px 0 rgba(150,110,40,.16);
  color:var(--ink); font-weight:900; line-height:1.3;
  /* ★★ ここが「ハ ／ ートから」を 止める 1行 です（★上の ③）*/
  word-break:keep-all; overflow-wrap:normal;
}

/* ── ハッピーの うごき ──────────────────── */
@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; }
.result-score i { font-style:normal; text-align:center; color:#43596b; }
.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); }

/* ============================================================
   ★★★ T218 ―― ★順位の 表（🎨アト）★★★
   ------------------------------------------------------------
   ★ 社長：「★100点に 達成したプレイヤーが いたら ゲームを 終了し、★★点数が 一番低い人を 1位とし、
     ★ ★点数の高いプレイヤーを 最下位として、★最後に 順位が 表示されるように」
   ★ ★中身（並べる 順・同じ 点は 同じ 位・いつ 出すか）は game.js の `rankRows`／`showResult`。

   ★★★ ①いちばん 先に 直したのは 見た目では なく「★★ボタンが 押し出される」でした ★★★
     ★ ★★私が 測って 見つけました【実測・6画面 とも】：
       | 画面 | ★箱の 天井 | ★中身が 要る たけ | ★「つぎへ」「やめる」 |
       |---|---|---|---|
       | 320×568 | 260px | 291px | ★★27px はみ出し・★★指で 押せない |
       | 320×480 | 249px | 291px | ★★38px はみ出し・★★押せない |
       | 812×375 | 209px | 291px | ★★82px はみ出し・★★押せない |
       | 667×375 | 209px | 291px | ★★82px はみ出し・★★押せない |
       | 844×390 | 216px | 291px | ★★75px はみ出し・★★押せない |
       | 736×414 | 233px | 291px | ★★58px はみ出し・★★押せない |
       ★ ★（★押せないの 見かた ＝ ボタンの まん中を さして、★その ボタンが 返るか）
     ★ ★★＝ ★★★100点で 終わった とき、★6画面 ぜんぶで 先へ 進めなく なって いました。
       ★ ★★これは この 1本で **4度目**の 同じ 事故 です（★㉓㉔ → T214-3 ／ ㉕ ／ ⑪ ／ ここ）。
     ★ ★なぜ 見張りが 気づかなかったか：★⑪（結果の 箱）は `match.over` を 立てないので、
       ★ ★★順位の 表が 出て いない 箱 しか 測って いませんでした。★→ ★★見張り ㉚ を 足しました。

   ★★ ②直し ―― ★★順位が 出て いる 間は、点の 表（この回／合計）を 出さない ★★
     ★ ★★理由：★順位の 表は「4人の 名前・4人の 合計・順位」を 持って います。
       ★ ★★点の 表の「合計」の 行と **同じ 数字**です。★★同じ 数字が 2つ ある だけ。
       ★ ★設計図 §5.5「★迷ったら 消す」。★★足りない たけは 82px、★点の 表は 47px＋すきま 6px。
     ★ ★★正直に：★★これで「この回（★最後の 1回で 取った 点）」は 見えなく なります。
       ★ ★★4人の 合計・順位・勝ち負けは ぜんぶ 残ります。★★★これは 社長の お決めを 仰ぐ ところ です。
       ★ ★ほかの 手も 数えました：★①横向きだけ 消す → ★同じ ゲームなのに 持ちかたで 出る ものが
         ★ ★変わる（★やめました）／★②箱の 天井を 上げる → ★★この ファイルの 決まり ④
         ★ ★「結果の 箱は --result-max 以下。★手札に かぶらせない」を 破る（★やめました）。

   ★★ ③並べ方は **画面の たけ**で 変えて います（★★向きでは ありません ―― ★T220 で 直しました）★★
     ★ ★たて 480px 以上 … ★★上から 下へ 4行（★1位が 上）。★★点の 数字が 上から 下へ 育つのが 見えます。
     ★ ★★たて 479px 以下 … ★★左から 右へ 4列（★1位が 左）。★★4行は 天井に 入りません【実測】。
     ⚠️★ ★★もとは「★横向き（max-height:420px）」でした。★★★421〜479px が どちらにも 入らず、
       ★ ★★★順位の 行が だまって 切れて いました（★T219 🟡-1 ／ ★下の @media の 書き置きに 数を 出しました）。
   ★★ ④「点が 低い 人が 1位」を 見て 分かる ように した 2つ ★★
     ★ ★① 1位の 行（列）に **うすい 金の 帯**。★★字も 少し 大きく（1.08倍）。
     ★ ★② 点に「点」を 付ける（★`.rk-pt::after`）―― ★★24点・25点・79点・106点 と 読めれば、
       ★ ★★「上に 行くほど 少ない」が 数字 そのもので 分かります。★説明の 文は 1行も 足して いません。
   ✅★ 【T218-2 で 直りました】★金の 帯は **1位の 人 ぜんぶ**に 付きます。
      ★ ★コーダが `rankRows` で 1位 ぜんぶに `rk-top` を 付け、★CSS は その 印で 選びます。
      ★ ★★位の 数字は 4人 とも 正しく 出ます（★見張り ㉘ が 数えて います）。
   ⚠️★★ 下の 3行（`flex`）は **保険** です ―― ★`:has()` が 使えない 古い ブラウザでは
      ★ ★点の 表が 消えず、★中身が 天井を 超えます。★そのとき **縮むのは 表の ほう**で、
      ★ ★★「つぎへ」「やめる」は 44px の まま 残ります（★★押せなく なる 側に 倒れません）。
   ============================================================ */
/* ★ 保険（★上の ⚠️）―― ★押す ところと 見出しは 縮ませない。★縮むのは 表の ほう */
.result-box > * { flex:0 0 auto; }
.result-box .result-score,
.result-box .rank-list { flex:0 1 auto; min-height:0; overflow:hidden; }
/* ★ 順位が 出て いる間だけ、★同じ 数字を 持つ 点の 表を 出さない */
.result-box:has(#rankList:not(.hidden)) .result-score { display:none; }

/* ⚠️★★ 色は 3回 選び直しました ―― ★★測ったら 目安 4.5:1 を 割って いたから です【実測】★★
   ★ ★① 器 --pink-soft ＋ 位 --pink-dark … ★**4.19**（★×）
   ★ ★② 1位の 帯 --gold-soft ＋ 位 --pink-dark … ★★**4.04**（★×・★★最初に 貼った 形）
   ★ ★★③ 器 --cream ＋ 位 --pink-dark … ★**4.79**（★○）／★帯 --gold-soft ＋ ぜんぶ --ink … ★**8.36**（★○）
   ★ ★★＝ ★--pink-dark（#C43A73）は **白か クリームの 上でしか** 4.5 を 越えません。
     ★ ★★金の 帯の 上では 使えない ので、★帯の 上だけ --ink に します（★色は 1つも 足して いません）。
   ★ ★★代金：★1位が「あなた」の とき、★名前の ピンクが 消えます。★★でも 名前は「あなた」と
     ★ ★書いて ある ので、★色が なくても 自分だと 分かります（★点の 帯 `.sb-me` と 同じ 考え方）。 */
.rank-list {
  display:grid; grid-template-columns:auto 1fr auto;
  gap:2px 0; margin:0; padding:4px 6px;
  border-radius:14px; background:var(--cream);
  box-shadow:inset 0 0 0 2px var(--pink-soft);
  font-size:12.5px; font-weight:900; line-height:1.3;
  align-items:center; text-align:left;
}
.rank-list > * { padding:1px 5px; min-width:0; }
.rk-place { color:var(--pink-dark); white-space:nowrap; }          /* ★ クリームの 上で 4.79 */
.rk-name  { color:#3F6B5D; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }  /* ★ 5.76 */
.rk-name.rk-me { color:var(--pink-dark); }                         /* ★ 4.79 */
.rk-pt {
  font-style:normal; color:#43596b; text-align:right; white-space:nowrap;   /* ★ 6.93 */
}
.rk-pt::after { content:'点'; margin-left:1px; font-size:.78em; }
/* ★★★ T218-2（★2026-09-04・🎨アト）―― ★★金の 帯は「上から 1行目」から「★1位の 人 ぜんぶ」へ ★★★
   ★ ★前：`.rank-list > :nth-child(-n+3)` ＝ **場所**（上から3マス）で 選んで いました。
     ★ ★★同点1位が 2人 いても 1人ぶん しか 金に ならない【★アト実測 T218】。
   ★ ★今：`.rank-list > .rk-top` ＝ **印**（★コーダが `rankRows` で 1位 ぜんぶに 付ける）で 選びます。
     ★ ★★1人＝3マス／2人＝6マス／3人＝9マス。★行が 増えても そのまま 金に なります。
   ★ ★角の 丸み も 場所から 印へ ―― ★行の 先頭は `.rk-place`、★行の おしりは `.rk-pt`。
     ★ ★★どの 行に 来ても、その 行の 端が 丸く なります（★2行目・3行目でも 帯の 形が 崩れません）。
   ★ ★色は 1つも 足して いません（★--gold-soft ＋ --ink ＝ 8.36。★上の ⚠️ のまま）。 */
.rank-list > .rk-top { background:var(--gold-soft); color:var(--ink); font-size:1.08em; }
.rank-list > .rk-place.rk-top { border-radius:9px 0 0 9px; }
.rank-list > .rk-pt.rk-top    { border-radius:0 9px 9px 0; }

/* ============================================================
   ★★★ T220（★2026-09-04・🎨アト）―― ★★この 切りかえを **420px → 479px** に 上げました ★★★
   ------------------------------------------------------------
   ★ ★もとの 書き置き：「★横向き ―― ★4行では 天井（209px）に 入らないので 4列に します」。
     ★ ★★言って いる ことは 正しい。★★★でも 線を 引いた 場所が まちがって いました。

   ★★ ①何が 起きて いたか（★トライ T219 🟡-1）★★
     ★ ★★たてが 421〜479px の 画面は、★どちらの 側にも 入りません でした ――
       ★ ★★「4列に する」には 高すぎ、★★「4行が 入る」には 低すぎる。
     ★ ★`.rank-list` は 下の 保険（`flex:0 1 auto; min-height:0; overflow:hidden`）を 持つ ので、
       ★ ★★足りない ぶんは **表だけが だまって つぶれます**（★ボタンは 生き残る）。
     ★ ★★＝ ★★**順位の 行が 上下 半分で 切れて、読めなく なって いました。**

   ★★ ②数（★はば320・1px きざみ・4通りの 点で 数えました）★★
     ★ | たて | 天井 | 表が 要る | ★切れた マス（1人／2人／3人／4人 同点）|
     ★ |---|---|---|---|
     ★ | 480 | 249 | 88〜92 | ★0／0／0／0（★★ここは さわって いません）|
     ★ | 476 | 245 | 88〜92 | ★0／0／0／★3 |
     ★ | 474 | 243 | 〃 | ★0／★3／3／3 |
     ★ | 470 | 239 | 〃 | ★★3／3／3／3 |
     ★ | **454** | 225 | 〃 | ★★3／3／3／3 ←★**iPhone SE（初代）Safari** |
     ★ | 440 | 218 | 〃 | ★★6／6／6／6 |
     ★ | 421 | 247 | 〃 | ★★6／6／6／6 |
     ★ | 420 | 246 | 46 | ★0／0／0／0（★★ここから 下は 4列 だった）|

   ★★ ③★★これは 古い 小さい 機械 だけの 話では ありません【★実測】★★
     ★ | 画面 | 何の 機械か | ★直す 前 |
     ★ |---|---|---|
     ★ | **926×428** | ★iPhone 12／13 Pro Max・14 Plus を **よこ向き** | ★★**12マス中 9マス 切れ** |
     ★ | **932×430** | ★iPhone 14／15 Pro Max ―― ★同上 | ★★**6マス 切れ** |
     ★ | 883×430 | ★同じ たけの 機械 | ★★6マス 切れ |
     ★ | 1280×470 | ★パソコンの まどを 低く した とき | ★★3マス 切れ |
     ★ ★★＝ ★★**いま いちばん 売れて いる 大きい iPhone を よこ向きに すると 切れて いました。**
       ★ ★★896×414（12/13 Pro）は 414 ≦ 420 で 助かって いて、★★428・430 が 落ちて いました。

   ★★ ④★なぜ 線が **479** か（★★480 では ない 理由）★★
     ★ ★★4行の 形が 入る いちばん 低い たては **480px**【実測・天井249 ／ 4人同点で 箱249.0】。
       ★ ★★そして 320×480 は この会社の **決まった 6画面**の 1つ で、
         ★ ★★T218 §15 の「★4人同点で あまり 0.0px」は **社長が「直さない」と お決めに なった** ところ。
     ★ ★→ ★★**480 は 1pxも 動かさない。★その 1つ 下（479）から 4列に します。**
       ★ ★★これで 6画面 は 前と **1つも 数字が 変わりません**【★実測・24通り】。
     ⚠️★ ★中身（この 中の 決まり）は **1文字も 変えて いません**。★変えたのは **420 → 479 の 数字 だけ**。
       ★ ★★だから いま 4列で 動いて いる 375・390・414 の 画面も、★前と 1つも 変わりません。

   ★★ ⑤★★正直に ―― ★まだ 残って いる ところ（★§下の 報告に 数字を 出しました）★★
     ★ ★天井が **185px より 低い** 画面では、★4列でも 入りません（★4列の 箱は 201.7px 要ります）。
       ★ ★はば320 なら たて **336px 以下**／★568×320（★iPhone SE 初代を **よこ向き**）は 天井174 で **入りません**。
     ★ ★★そこでも「つぎへ」「やめる」は 44px・箱の 中・押せる まま です（★設計図 追記③ の 線）。
     ★ ★これ以上 下げるには **つよさの えらび（52px）を 隠す**しか ありません ―― ★★機能を 1つ 消す 話 なので、
       ★ ★★**私からは 出しません。★社長の お言葉が あれば すぐ 入れます**（★T218 §15 と 同じ 立ち位置）。
   ============================================================ */
@media (max-height:479px) {
  /* ============================================================
     ★★★ T220② ―― ★★4列に した うえで、★箱の **すきまと 内よはく**も つめます ★★★
     ------------------------------------------------------------
     ★★ なぜ 要るか ―― ★★★4列に した だけでは、★まだ **重なって** いました【★実測・写真】★★
       ★ ★4列の 箱は **201.7px** 要ります。★★天井が それより 低い 画面では、
         ★ ★★表の 3行が つぶれ、★★align-items:center の せいで ★★★上下の マスが **重ね書き**に なります。
       ★ ★★★私は これを 1度 見落としました** ―― ★「マスが 表から はみ出して いないか」と
         ★ ★「マスの 中で あふれて いないか」の 2つは、★★どちらも **静か**でした。
         ★ ★★写真を 見て はじめて 分かりました（★「1位」と「あなた」が 重なって いた）。
         ★ ★→ ★測る 目に「★★同じ 列の 上下の マスが 重なって いないか」を 足しました。
       ★ | 画面 | 何の 機械か | ★天井 | ★4列に した だけ の とき |
       ★ |---|---|---|---|
       ★ | **926×428** | ★iPhone 12／13 Pro Max・14 Plus **よこ向き** | 198 | ★★**8マス 重なり** |
       ★ | **932×430** | ★iPhone 14／15 Pro Max **よこ向き** | 200 | ★★**8マス 重なり** |
       ★ | 883×430 | ★同じ たけの 機械 | 200 | ★★8マス 重なり |
       ★ ★★＝ ★★**いま いちばん 売れて いる 大きい iPhone**。★★ここを 素通り させません。

     ★★ 何を つめたか（★★消した ものは 1つも ありません）★★
       ★ | ★どこ | ★前 → 後 | ★浮いた |
       ★ |---|---|---|
       ★ | 箱の すきま（4つの かたまりの 間・3か所）| 6px → 4px | ★6px |
       ★ | 箱の 内よはく（上下）| 8+10 → 6+8 | ★4px |
       ★ | 見出しの 下の線（min-height）| 24px → 21px | ★3px |
       ★ | つよさの えらびの 内よはく（上下）| 2px → 0 | ★4px |
       ★ | 順位の 表の 内よはく（上下）| 3px → 2px | ★2px |
       ★ ★★＝ ★**19px**。★★4列の 箱は 201.7 → **182.7px**。
       ⚠️★ ★**字は 1つも 小さく して いません**（★順位 11px・見出し 18px・ボタン 14px の まま）。
         ★ ★見出しの 21px は 「勝ち！」の 18px × 行のたけ1.15 ＝ **20.7px** の 上 ―― ★min-height が
         ★ ★ただ 3px 余計だった だけ です【実測】。
       ⚠️★ ★★**押す ところは 1pxも さわって いません**（★「もう1回」「やめる」「つよさ」とも 44px）。

     ★★ ★なぜ ここ（4列の 中）に 書くか ★★
       ★ ★4列に なる ＝ ★**この 画面は たけが 足りて いない**、と CSS が すでに 言って います。
         ★ ★★つめるなら その 中。★★たけが 足りて いる 画面（480px 以上）は 1pxも さわりません
         ★ ★（★設計図 追記③「★足りて いる 画面を 小さく しない」）。
     ============================================================ */
  .result-box { gap:4px; padding:6px 12px 8px; }
  .result-head { min-height:21px; }
  .result-box .level-pick { padding:0 8px; }
  .rank-list {
    grid-template-columns:repeat(4, 1fr);
    grid-template-rows:auto auto auto;
    grid-auto-flow:column;
    gap:0 5px; padding:2px 5px; font-size:11px; line-height:1.2; text-align:center;
  }
  .rank-list > * { padding:0 2px; text-align:center; }
  .rk-pt { text-align:center; }
  /* ★ この 形では 1位を 大きく しません ―― ★行の たけは 4列で 分け合う ので、
     ★ ★1列を 大きく すると **4列 ぜんぶ**が 太り、★天井（209px）を 越えます【実測】。
     ★ ★金の 帯だけで 1位は 分かります。 */
  /* ★★ T218-2 ―― ★この 形は **列**（`grid-auto-flow:column`）なので、★1人＝たて1列。
     ★ ★行の 先頭 `.rk-place` は **上**が 丸く、★おしり `.rk-pt` は **下**が 丸い。 */
  .rank-list > .rk-top { font-size:1em; }
  .rank-list > .rk-place.rk-top { border-radius:9px 9px 0 0; }
  .rank-list > .rk-pt.rk-top    { border-radius:0 0 9px 9px; }
}

/* ============================================================
   ★★★ T221（★2026-09-04・💻コーダ）―― ★★568×320 では「つよさの えらび」を 出しません ★★★
   ------------------------------------------------------------
   ★★ ①これは **社長の お決め**です（★2026-09-04・「1」）★★
     ★ ★アト T220 §6-2 が 数字を 出し、★★「機能を 1つ 消す 話 なので 私からは 出しません」と
       ★ ★止めた もの です。★★社長が お読みに なった うえで お決めに なりました。
     ★ ★★機能は 消えて いません ―― ★★**はじめの 画面では これまでどおり えらべます**。
       ★ ★消えるのは「終わった あとの 画面」の ほうだけ です（★T168 で 足した 近道）。

   ★★ ②数（★アトの 実測 ＋ 私の 1px きざみ）★★
     ★ | ★はば568・たて | ★天井 | ★4列の 箱（素）| ★足りない | ★重なり |
     ★ |---|---|---|---|---|
     ★ | 331 | 181 | 182.7 | −1.7 | ★0（★★ぎりぎり 入って いた）|
     ★ | ★**330** | 180 | 182.7 | **2.7** | ★★**8組** ←★★ここから 下が こわれる |
     ★ | ★**320** | **174** | 182.7 | ★★**8.7** | ★★**8組** ←★★**iPhone SE 初代 よこ** |
     ★ | 272 | 148 | 182.7 | 34.7 | ★★8組 |
     ★ ★★つよさの えらびは **48px**。★★消すと 箱は 182.7 → **134.7px** ―― ★天井 174 に 入ります。

   ★★ ③★なぜ 線が **320** か（★★359 では ない 理由）★★
     ★ ★アトの 案は `max-height:359px` でした。★★私は **320** に しました。★理由は 2つ：
       ★ ★★㋐ ★社長の お決めは「★★**568×320 のときだけ**」。★320 は その 画面の たて そのもの です。
       ★ ★★㋑ ★★**331〜359px は いま 何も こわれて いません**【★実測・上の 表】。
         ★ ★そこで 消すのは、★★設計図 追記③「★まれな 最悪の ために、いつもの 画面を 小さく しない」に
           ★ ★反します（★★動いて いる 画面から 機能を 取り上げる ことに なる）。
     ★ ★★★そして 320 は **実在の 画面の たて そのもの**です（★568×320・480×320）――
       ★ ★★設計図 追記⑥ の 決まり2「★線が 9画面の どれかを またいで いないか」を 満たします。
       ★ ★★見張り ㉟ も 静かな ままです（★またいで いない ＝ 立って いる）。

   ⚠️★★ ④★正直に ―― ★★のこる すきま（★実在しない 大きさ）★★
     ★ ★★たて **321〜330px** は、★この 線では 直りません（★★重なり 8組の まま）。
       ★ ★★この 10px に 当たる 実在の 機械は 見つかって いません
         ★ （★実在の 底は 568×272。★その 上は 568×320 ―― ★アト T220 §9-2）。
       ★ ★★★もし 見つかったら、★設計図 追記⑥ の 決まり3 どおり 9画面の 表に 足して、
         ★ ★この 線を そこまで 下げます（★★数字を 1つ 変えるだけ）。

   ★★ ⑤★見張りの ほう（★下の線を いっしょに 引きました）★★
     ★ ★★`hearts-game.js` の ⑮（つよさの えらび）は「★2か所とも 44px・押せる」を 見て います。
       ★ ★★ここで 消すと、★そのままでは「★押せません」と **鳴って しまいます**。
     ★ ★→ ★★**ゆるめる かわりに、下の線を 2本 足しました**（★T221・`levelProbe`）：
       ★ ★★㋐ ★消えて いてよいのは **この 線が 当たって いる ときだけ**。
         ★ ★★当たって いない のに 消えて いたら **鳴る**。
       ★ ★★㋑ ★★当たって いる のに 消えて いなくても **鳴る**（★＝ この CSS が 消えたら 鳴る）。
       ★ ★★㋒ ★★はじめの 画面の えらびは **どの 画面でも 44px・押せる**（★1pxも ゆるめて いません）。
   ============================================================ */
@media (max-height:320px) {
  .result-box .level-pick { display:none; }
}

/* ── 遊び方 ─────────────────────────────── */
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; }
.close-dialog {
  position:absolute; right:8px; top:8px; width:44px; height:44px; border:0; border-radius:50%;
  background:#f1f5f4; color:#7d8c99; font-size:18px; font-weight:900; cursor:pointer; font-family:inherit;
}

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

/* ============================================================
   ★★ T368 ― 568×272 の はじめの 画面：★「はじめる」「つづきから」に 指で 動かしても 届かない（★verify ㉙・本物）★★
   ------------------------------------------------------------
   ★ 直す前【★実測】：★はじめの 画面の 入れ物 206px に 中身 500px ―― ★動かせる のこり 294px は 入れ物の 1倍 を こえ、
     ★「はじめる」は 下に 68px・「つづきから」は 126px 出て いた（★㉙ の 決まり：のこりは 入れ物の 1倍 まで）。
   ★ 直しかた：★たて 319px 以下・はば 470px 以上の よこ向き だけ、★ハッピーを 白い 箱の 右へ（★大富豪 A-2 と 同じ 形）・★大見出しと すきまを 詰める。
     ★線の わけ【★実測】：★直す前は 568×301〜319 でも ㉙ が 鳴って いた（★568×316 で 下に 24px）。★320 からは 鳴らない ―― ★だから 319（★320 の 1px 下）。
     ★はばは 480×272 も 同じ 病気（★直す前 ㉙ 鳴る）なので 470 から。
     ★→ ★中身 276px（★のこり 70px）・★「はじめる」は すべらせずに 見える（★下 262px／入れ物の 下 264px）【★実測】。
     ★字は 1つも 消して いない。★13画面の うち かかるのは 568×272 だけ。
   ============================================================ */
@media (orientation:landscape) and (max-height:319px) and (min-width:470px) {
  .title-screen { flex-direction:row; align-items:flex-start; justify-content:center; gap:10px; }
  .title-screen > :first-child { margin-top:0; }
  .title-screen > :last-child { margin-bottom:0; align-self:center; }
  .start-card { flex:0 1 430px; min-width:0; padding:8px 16px 10px; }
  .eyebrow { font-size:12.5px; }
  .start-card h1 { font-size:34px; margin:0; text-shadow:0 3px #9E2A47, 0 5px #FFE0E8; }
  .intro { margin:2px 0 6px; font-size:13.5px; }
  .level-pick { padding:3px 10px; }
  .start-button { margin-top:8px; min-height:50px; padding:6px 20px 6px; font-size:18px; }
  .sub-button { margin-top:6px; }
  .mascot { flex:0 0 112px; margin-top:0; }
  .mascot .bubble { font-size:12px; padding:5px 9px; border-width:2px; }
}