/* ============================================================
   ヨット ― 見た目（T193・💻コーダ）
   ------------------------------------------------------------
   ★ ここは「中身が 動く 形」までです。★仕上げは 🎨アト。
   ★ 見た目の もとは **大富豪 ＝ ページワン T162 ＝ ハーツ T167 ＝ セブンブリッジ T174**：
     ★ 白い 囲い（.start-card）・左右の 余白・上の 帯の 小さい ハッピー（48×36px）。
   ★ ★★この 1本には **場の 台（felt）が ありません** ―― ★札を 置く 場が ない ので。
     ★ ★かわりに「13の 役の 表」が 盤 です（★ルル §11-1：★これは 解説では なく 書きこむ 場所）。

   ★★★ この 1本の 決まりごと（★🎨アトへ・ここだけは 動かさないで ください）★★★
     ------------------------------------------------------------
     ① ★★★ 強調は **1種類だけ** ―― ★`.die.is-keep`（★青わく ＝ 人が えらんだ サイコロ）。
        ★ ★★★のこすと よい サイコロを 光らせない（★ルル §5-4：★−19.85ポイント。★いちばん 重い 罪）。
        ★ ★★★点の 高い マスを 光らせない・色を 変えない・上に 動かさない（★−12.07）。
        ★ ★★★0点に なる マスを **先に 暗くしない**（★あきらめの えらびを 奪います）。
          ★ ★→ ★★`.cell.is-open` は **点が 0でも 1点でも 50点でも まったく 同じ 見た目**。
            ★ ★★見張り（verify.js ⑫）が、★実際に 画素を くらべて 数えて います。
     ② ★★ 役の ならびを **動かさない**（★点の 高い 順に 並べかえるのも 追記② 違反）。
     ③ ★★ サイコロは **CSSの 丸**。★絵を 足さない（★足す絵 0枚・通信 0件）。
     ④ ★★ ボタンの 入れもの（.btn-row）の たけは **決め打ち** ――
        ★ ★ふり直しが 0回に なって ボタンが 消えても、★★表が 1pxも 動きません。
     ⑤ ★★ 指の 的は 44px（★T122 の 会社の 線）。★サイコロ 1個は 44px を 割りません。
     ★ ★★→ ★「転がり」を 足す ところは、★★この ファイルの いちばん 下に あります。
   ============================================================ */

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

  --pip:       #3D3550;   /* ★ サイコロの 目（丸）*/

  --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 の もの）*/
  --cell-h:  32px;   /* ★ 表の 1マスの たけ */
  --cell-f:  12px;   /* ★ 役の 名前の 字 */
  --cell-n:  13px;   /* ★ 点の 字 */
  --die:     52px;   /* ★ サイコロ 1個 */
  --die-gap:  6px;
  --sheet-gap:2px;
}

* { 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③・将来の 広告のため・社長指示）★★ */
.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; }
.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 の 型・★設計図 追記⑩）★★★
   ------------------------------------------------------------
   ★ 置き場所 … 上の帯の いちばん 右（★12マスの 表にも サイコロにも かぶらない 足場）
   ★ 返す margin … ★この本の 上の帯の たけは **44px**【T275 実測】。
                ★44 − 44 = **0** ―― ★返しは 要りません（★帯も 器も 1pxも 動かない）。
   ★ 色      … うすみどり（★20本の 帯で 唯一 空いていた 色・★T273 §2 実測）
   ★ z-index … ★飾りでは ない（★T273 §4-1）。

   ★★★ この本だけ ―― ★★ボタンの 中に 小さい字を 1行 ★★★
     ★ ★社長の お決め②は「★**聞かない**」。★確認の 箱は 作りません（★部品は 0個 増えません）。
     ★ ★★ただし ―― ★★本当に 積み上げが 消えるのは **ヨットと ブラックジャックの 2本だけ**
       ★ ★（★この本は しまうのが「さいこう点」1つ だけ。★12回の 途中で やめると、
       ★ ★  その試合の 12マスの 表は 残りません）【★ルル T272 実測】。
     ★ ★★→ ★**押す 前に 分かる** ように、★ボタンの 中に 小さい字を 1行 入れました。
     ★ ★★字の 大きさは **11px ＝ 会社の 床**（★§9.6・T123/T139）。★下げて いません。
     ★ ★★たけ：11.5 ＋ すきま2 ＋ 11 ＝ 24.5px ＋ わく6px = 30.5px < 44px
       ★ ★  → ★**44px の 型は 1pxも 崩れません**【T275 実測】。
   ------------------------------------------------------------ */
.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 8px;
  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; }
/* ★ 小さい字の ある 形（★この本と ブラックジャックだけ）*/
.quit-btn.has-note{ flex-direction:column; gap:2px; }
.quit-btn .quit-main{ display:inline-flex; align-items:center; }
.quit-btn .quit-note{ font-size:11px; font-weight:800; line-height:1; }
/* ★ せまい 画面（はば 374px 以下）は 字を 1段 下げ、★↻ を 落とす（★T273 §2）
   ★ ★小さい字は **11px の まま**（★会社の 床。★ここを 下げない）*/
@media (max-width:374px){
  .quit-btn{ font-size:10.5px; padding:0 5px; }
  .quit-btn .quit-icon{ display:none; }
}

/* ── はじめの 画面 ───────────────────────── */
/* ⚠️★★ T160 の 決まり ―― ★はみ出したら **スクロールで 届く** ように する */
.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; }

.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; }
/* ★ 大見出し ―― ★3文字 なので ハーツ（3文字・58px）と 同じ 大きさに できます */
.start-card h1 {
  margin:4px 0 0; font-size:56px; 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: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つ だけ。★★まだ 遊んで いない 人には 出ません）★★ */
.best-line {
  margin:12px 0 0; font-size:13.5px; font-weight:900; color:#7a5205;
}
.best-line b { font-size:17px; color:var(--pink-dark); }

.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:46px; letter-spacing:1px; }
  .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; }
  .best-line { font-size:12.5px; margin-top:10px; }
}
@media (max-width:340px) {
  .start-card { padding:18px 12px 16px; }
  .start-card h1 { font-size:40px; }
  .mascot { margin-top:12px; }
}

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

/* ★★ ハッピーの 帯（★T167・社長指示「大富豪みたいに 統一して ほしい」の 数字を そのまま）★★
   ★ ネコの 器 … 48×36px（はば 650px 以下）／64×48px
   ⚠️★ たけは **数で 書く**（★`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;
}
.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;
}
.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; } }

/* ── 盤（★2つの 器）─────────────────────────
   ★ たての 画面 … 上から そのまま 縦に ならぶ
   ★ ★★横向きの 画面（★812×375 など）… ★左右に ならぶ（→ この ファイルの 下の @media）
   ─────────────────────────────────────── */
.stage { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:5px; }
.pane-a { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:4px; }
.pane-b { flex:0 0 auto; display:flex; flex-direction:column; gap:5px; }

/* ★ じぶんの 点と、あと 何回 */
.me-band {
  flex:0 0 auto; display:flex; align-items:center; gap:8px; min-height:30px;
  padding:3px 12px; border-radius:999px;
  background:var(--white); box-shadow:0 2px 0 #e4d3c6;
}
.me-name { font-size:12.5px; font-weight:900; color:var(--pink-dark); white-space:nowrap; }
.me-pt   { flex:1 1 auto; font-size:20px; font-weight:900; color:var(--ink); line-height:1.1; }
.me-pt::after { content:'点'; font-size:11px; margin-left:2px; color:#8f8199; }
.me-turn { font-size:12px; font-weight:900; color:#7a8b96; white-space:nowrap; }

/* ★★★ 13の 役の 表（★2列×7行 ＝ 14マス）★★★ */
.sheet {
  flex:1 1 auto; min-height:0;
  display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:var(--cell-h);
  gap:var(--sheet-gap);
  align-content:start;
}
/* ⚠️★★★ ここが この 1本の いちばん 大事な 数行 です ★★★
   ★ ★★空いて いる 14マスは、★★点が 0でも 50でも **まったく 同じ 見た目**。
     ★ ★色・こさ・ふとさ・大きさ・かげ ―― ★1つも 変えて いません。
   ★ ★★見張り（verify.js ⑫）が、★★本当に 画素を くらべて 数えて います
     ―― ★「0点の マスだけ 暗い」を 足すと、その場で 鳴ります。 */
.cell {
  display:flex; align-items:center; gap:4px; min-width:0;
  padding:0 7px; border:0; border-radius:10px;
  background:var(--white); box-shadow:0 2px 0 #e4d3c6;
  font-family:inherit; color:var(--ink); text-align:left; cursor:pointer;
  overflow:hidden;
}
/* ⚠️★★★ T227（🎨アト）―― ★★字の 床は **11px**（★`max()` で 下から 支えます）★★★
   ★ ★もとは `font-size:var(--cell-f)` だけ でした。★★`--cell-f` は JS が
     ★ `Math.max(10, cellH × 0.40)` で 入れて います ―― ★★★床が **10px**。
   ★ ★★追記⑥ の 9画面を 数えたら、★**320×480・320×454 の 2画面**（★＋底 568×272）で
     ★ ★★ちょうど その 床に 落ちて いました【実測】。★★10px の カタカナは 私には 読めません。
   ★ ★★JS（`layout()`）は コーダの 持ちもの なので、★**CSS の 側から 支えます**。
     ★ ★→ ★11px に しても 1マス 23px の 中に 入り、★★役名は 1つも 切れません【★9画面 実測】。 */
.cell-name {
  flex:1 1 auto; min-width:0; font-size:max(11px, var(--cell-f)); font-weight:900;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.3px;
}
.cell-pt {
  flex:0 0 auto; font-size:var(--cell-n); font-weight:900; line-height:1;
  min-width:2.1em; text-align:right; font-variant-numeric:tabular-nums;
}
/* ★ まだ 書いて いない マス（★押せる）―― ★点は 少し うすい 字で「いま 書いたら 何点か」 */
.cell.is-open .cell-pt { color:#5a7a8c; }
.cell.is-open:active { transform:translateY(2px); box-shadow:0 0 0 #e4d3c6; }
/* ★ もう 書いた マス（★押せない ―― ★決まり5「同じ 役は 1回だけ」が 説明 0行に なります）*/
.cell.is-done {
  background:#f0eef3; box-shadow:none; cursor:default; color:#8d8397;
}
.cell.is-done .cell-pt { color:var(--pink-dark); }
/* ★ 自分の 番では ない とき（★押せない）*/
.cell:disabled { cursor:default; }
.cell.is-open:disabled { opacity:.72; }
/* ★★ 14マス目 ＝「1〜6の 合計 ◯／63」（★役では ない ので 押せません）★★
   ★ ★★これが 35点ボーナスの 決まりを、★表の かたち だけで 見せて います（★説明 0行）。 */
.cell.is-bonus {
  background:var(--cream); box-shadow:inset 0 0 0 2px var(--gold-soft); cursor:default;
}
.cell.is-bonus .cell-name { color:#7a5205; }
.cell.is-bonus .cell-pt { color:#7a5205; min-width:3.4em; }
.cell.is-bonus.is-got { box-shadow:inset 0 0 0 2px var(--gold); }
.cell.is-bonus.is-got .cell-pt { color:var(--pink-dark); }

/* ★ ロボット3人の 点（★1行）*/
.bot-band {
  flex:0 0 auto; display:flex; gap:4px; min-height:28px;
  font-size:11.5px; font-weight:900;
}
.bot-cell {
  flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center; gap:4px;
  padding:0 4px; border-radius:8px; background:rgba(255,255,255,.72); color:#5a7a8c;
  overflow:hidden; white-space:nowrap;
}
.bot-cell b { font-size:14px; color:#43596b; font-variant-numeric:tabular-nums; }
/* ★ いま 手番の ロボット（★だれの 番かは 見えて いる 事実。★手を 教えて いません）*/
.bot-cell.is-turn { background:var(--gold-soft); color:#7a5205; }
.bot-cell.is-turn b { color:#7a5205; }

/* ============================================================
   ★★★ サイコロ 5個（★CSSの 丸。★絵は 0枚・通信 0件）★★★
   ------------------------------------------------------------
   ★ ★3×3の ますに 丸を 置くだけ（★ルル §6-1）：
     ★ 1 … まん中 1個　　　4 … 四すみ 4個
     ★ 2 … ななめ 2個　　　5 … 四すみ ＋ まん中
     ★ 3 … ななめ 3個　　　6 … たて 3個 × よこ 2列
   ★ ★1個 52px（★320px の 画面）。★★44px の 会社の 線の 上 です（★T122）。
   ============================================================ */
.dice-row {
  flex:0 0 auto; display:flex; justify-content:center; align-items:center;
  gap:var(--die-gap); min-height:calc(var(--die) + 8px);
}
/* ⚠️★★★★ ここで 2回 つまずきました【★私の 失敗③④・T193】★★★★
   ★ ★★① `padding:12%` と 書いて いました。★★サイコロが 57px → **75px** に ふくらみ、
     ★ ★5個が 画面から はみ出しました。
     ★ ★理由：★★**％の 内よはくは、自分の はばでは なく「入れものの はば」から 数えます。**
       ★ ★入れものは `.dice-row`（314px）―― ★12% ＝ **37.7px**。★左右で 75.4px。
       ★ ★`box-sizing:border-box` でも、★中身が 入らなければ 箱の ほうが ふくらみます。
     ★ ★→ ★★`calc(var(--die) * .12)` に しました（★自分の 大きさから 数える）。
   ★ ★★② `.pip` を `width:100%` と 書いて いました。★★丸が **0×0px**。★1つも 見えません。
     ★ ★理由：★★`1fr` の ますの 大きさは「中身」から 決まり、
       ★ ★その 中身の 100% は また ますの 大きさ ―― ★★ぐるぐる回って 0に なります。
     ★ ★→ ★★丸の 大きさを **px で** 決めました。
   ★ ★★★どちらも computed style は「12%」「100%」と 正しく 答えて いました。
     ★ ★★写真を 見なければ 気づけません でした（★セブンブリッジ T180 の 失敗①② と 同じ 形）。 */
.die {
  width:var(--die); height:var(--die); flex:0 0 auto;
  padding:calc(var(--die) * .12); border:0; border-radius:22%;
  background:var(--white); box-shadow:0 3px 0 #d9cec6, 0 5px 8px rgba(120,90,70,.13);
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); grid-template-rows:repeat(3, minmax(0,1fr));
  cursor:pointer; font-family:inherit;
}
.die .pip {
  width:calc(var(--die) * .17); height:calc(var(--die) * .17);
  border-radius:50%; background:var(--pip);
  align-self:center; justify-self:center;
}
.die:disabled { cursor:default; }
/* ★★★ 強調（★1画面に 1種類だけ）―― ★人が「のこす」と えらんだ サイコロ ★★★
   ⚠️★★ `box-shadow` の 広がりでは なく **わく**で 書いて あります
      ―― ★ページワン T152 の 決まり（★広がり 2px 以上 ＝ 光り）に かからない ように。
   ⚠️★★ ★★これを「のこすと 良い サイコロ」に つけないで ください。
      ★ ★★人が 押した サイコロに だけ つきます（★verify ⑪ が 本物の 指で 数えて います）。 */
.die.is-keep {
  box-shadow:inset 0 0 0 max(3px, calc(var(--die) * .075)) var(--blue-deep), 0 3px 0 #b9d6ea;
  background:var(--blue-soft);
}
/* ★ ふり直せない ときの サイコロ（★押しても 何も 起きない ―― ★色は 変えません）*/
.die.is-quiet { box-shadow:0 2px 0 #ded5cd; }

/* ★★ ふり直す ボタン（★ルル §5-3：★文字が「あと◯回」と 言う ＝ 説明 0行）★★
   ⚠️★★ 入れものの たけは **決め打ち 54px**。★★ボタンが 消えても 表が 1pxも 動きません。 */
.btn-row { flex:0 0 auto; height:54px; display:flex; align-items:center; justify-content:center; }
.roll-btn {
  min-width:min(240px, 76%); min-height:48px; padding:0 22px;
  border:3px solid #fff; border-radius:999px;
  background:linear-gradient(180deg, var(--blue), var(--blue-deep));
  color:#fff; font-family:inherit; font-size:16px; font-weight:900; line-height:1;
  cursor:pointer; white-space:nowrap;
  box-shadow:0 5px 0 var(--blue-dark), 0 8px 12px rgba(20,96,155,.22);
}
.roll-btn:active { transform:translateY(3px); box-shadow:0 2px 0 var(--blue-dark); }
.roll-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:min(88vh, 340px);
  padding:10px 12px 12px; border-radius:18px; background:var(--white);
  box-shadow:0 6px 0 #e0d3c2; display:flex; flex-direction:column; gap:7px;
  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:19px; 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:1fr auto; gap:2px 8px;
  font-size:13px; font-weight:900; line-height:20px; color:#5a6b78;
}
.result-score .rs-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.result-score .rs-pt { text-align:right; color:#43596b; font-variant-numeric:tabular-nums; }
.result-score .rs-me .rs-name, .result-score .rs-me .rs-pt { color:var(--pink-dark); }
.result-score .rs-best { grid-column:1 / -1; font-size:11.5px; color:#7a5205; }
.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; }
.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; }

/* ── 遊び方 ─────────────────────────────── */
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;
}

/* ============================================================
   ★★ 横向きの 画面（★812×375・667×375）★★
   ★ ★たてが 足りない ので ―― ★①ハッピーの 帯を 出さない ★②左右に 分ける
     ★ ★★どちらも「見えなく なる」だけ で、★★触る ところは 1つも 消えません（★追記③）。
   ============================================================ */
@media (max-height:460px) {
  .talk { display:none; }
  .app-shell { gap:4px; padding-top:5px; }
  .topbar { min-height:44px; }
}
@media (max-height:460px) and (min-width:560px) {
  .stage { flex-direction:row; gap:8px; align-items:stretch; }
  .pane-a { flex:1 1 56%; min-width:0; }
  .pane-b { flex:1 1 44%; min-width:0; justify-content:center; gap:8px; }
}

/* ============================================================
   ★★★★ 転がり（★🎨アト T194）★★★★
   ------------------------------------------------------------
   ★ ★ルル T192 §6-2：★★「絵は 頼みません。★かわりに 転がりを 頼みます ――
     ★ ★★1試合で 最大 39回 見る 動きです」。★★20本で いちばん 回数の 多い 動き です。
   ★ ★★コーダ T193 が 用意して くれた もの（★JS は 1行も 直して いません）：
     ★ ① ★ふり直した サイコロにだけ `.is-roll`（★620ms後に 外れます）
     ★ ② ★`--roll-i`（0〜4）＝ ★ならびの 番号（★★出た 目とは 関係が ありません）
     ★ ③ ★`YACHT.geo()` が「1個 何px か」を 返します

   ★★★ 何を する 動きか ―― ★★「とび込む → 着地して つぶれる → はねる → ぴたっ」
     ★ ★★1個ずつ 55msずつ ずれて 止まります。★★5個目が 止まった ときが「出た！」の 瞬間 です。

   ★★★ 数で 決めた ところ【★ぜんぶ 実測・320×568 で 本物を 測って】
     ★ ★・★★1個の 動く 時間 ＝ **270ms**（★コーダの 上限 320ms の 中）
     ★ ★・★★5個 ぜんぶ 止まるまで ＝ **490ms**（★55ms × 4 ＋ 270ms）
         ★ ★★ルルが 見た 転がりの 持ち時間は **1200ms**。★★その 41% で 終わります。
         ★ ★★そして `onRoll()` は `busy` を 立てません ―― ★★動いて いる 間も 押せます（★実測ずみ）。
     ★ ★・★★大きさの 上限は「となりの サイコロに 当たらない」で 決めました。
         ★ ★となりとの まん中どうしは **63px**（★サイコロ 57 ＋ すきま 6）。
         ★ ★かたむけた 四角の よこ半分 ＝ `28.5 ×(sx·cosθ ＋ sy·sinθ)`。
         ★ ★★どの コマも **31.5px 未満**に なるように 数を えらんで あります【計算＋実測で 確認】。
     ★ ★・★★上下の 逃げ場は **9px しか ありません**（★上は ロボットの 点の 帯、下は ふり直す ボタン）。
         ★ ★→ ★★5つの 画面で 37コマ ずつ 測った、★★いちばん きわどい 値【実測】：
           ★ ★★となりとの すきま **4.5px**（1280×800）／★上の 帯まで **3.7px**（1280×800）
           ★ ★★下の ボタンまで **8.6px**（1280×800）／★画面の はし **4.9px**（320×568）
           ★ ★★ぜんぶ プラス。★しかも これは「5個 とも 同時に 動いた 場合」の 値 です
             ★ ★（★本当は 55msずつ ずれるので、★もっと 空きます）。
     ★ ★・★★つぶれる とき だけ 下に ずらして あります（`translateY 5%`）。
         ★ ★→ ★★下の 線が 動きません ＝ ★「机の 上で つぶれた」に 見えます（★上下に ふくらむと ただの 点滅）。

   ★★★ さわって いない ところ（★わざと）
     ★ ★・★★色を 1つも 動かして いません（★`box-shadow`・`background` は 手つかず）。
         ★ ★★理由：★★動きの 途中で サイコロを 押すと `.is-keep` が 付きます。
         ★ ★★その とき 動きが 色を 上書きすると、★★青わくが 消えます（★verify ①-2 が 鳴る）。
         ★ ★★＝ ★★`transform` だけに するのは 見た目の 好みでは なく、**壊さない ため** です。
     ★ ★・★★出た 目で 動きを 変えて いません（★`[data-v]` を 1回も 使って いません）。
         ★ ★★5個 とも まったく 同じ 動き ―― ★★どれを のこすと 得かを 1ミリも 言いません。
   ============================================================ */
/* ★★★ 回すのは「小さく なって いる あいだ」だけ ―― ★★これが この 動きの 一番の 決まり です。
   ★ ★理由（★数で）：★★となりとの すきまは **どの 画面でも 6px の まま**で、
     ★ ★サイコロだけが 47 → 57 → 64 → 78px と 太ります。
     ★ ★★かたむけた 四角の はばは `die × s ×(cosθ＋sinθ)`。★θが 4度 あるだけで
       ★ ★78px の サイコロは よこに **5.1px** ふとり、★★6px の すきまを ほぼ 食べます【計算】。
   ★ ★→ ★★`s ×(cosθ＋sinθ) ≦ 1` を 守る ＝ ★★かたむけても 元の 四角より 大きく ならない。
     ★ ★0% は .64×1.337＝**0.856**／★18% は .86×1.144＝**0.984**。★どちらも 1未満 です【計算】。
     ★ ★★（★はじめ 0% を `.70` に して いました ＝ **0.936**。★1未満 でしたが ぎりぎり すぎて、
       ★ ★★PC（78px）で 上の 帯に 1px 食い込みました。★→ ★下の コメントに 顛末を 書いて あります）
   ★ ★★32%より あと は 回しません（★回転 0度）。★のこりは たて・よこの つぶれ だけ で 見せます。 */
@keyframes dieRoll {
  /* ★ とび込む（★小さく かたむいて 空中に いる）
     ⚠️★ ★はじめ `-16% / .70` に して いました。★★1280×800 で ロボットの 帯に **1px** 食い込みました。
       ★ ★★私の 計算が まちがって いました ―― ★「たては .70倍だから 小さい」と 思って いたのに、
         ★ ★★26度 かたむけた 四角の **たての はば は .70×(cos26＋sin26)＝.94倍** です【計算】。
         ★ ★★78px なら 73px。★★ほとんど 縮んで いませんでした。
       ★ ★→ ★★`.64` に 小さく して、★うかせる ぶんを `-13%` に へらしました。 */
  0%   { transform:translate3d(0,-13%,0) rotate(-26deg) scale(.64,.64);
         animation-timing-function:cubic-bezier(.22,.66,.36,1); }
  /* ★ かたむきを もどしながら 落ちる */
  18%  { transform:translate3d(0, -6%,0) rotate( -9deg) scale(.86,.84);
         animation-timing-function:cubic-bezier(.4,0,.5,1); }
  /* ★ 着地 ―― ★★下の 線を そろえた まま つぶれる（★上下に ふくらませると ただの 点滅に なります）*/
  32%  { transform:translate3d(0,  5%,0) rotate(  0deg) scale(1.02,.91);
         animation-timing-function:cubic-bezier(.32,0,.28,1); }
  /* ★ はねる（★のびて、少しだけ うく）
     ⚠️★ ★はじめ `-8% / 1.05` に して いました。★★1280×800（★サイコロ 78px）で
       ★ ★★ロボットの 点の 帯に **1px** 食い込みました【実測 −1.0px】。
       ★ ★上に 出る 量は `(たてのばし−1)/2 ＋ うかせる ぶん` ＝ サイコロの **10.5%** ―― ★78pxでは 8.2px。
       ★ ★→ ★★`-5% / 1.035`（★6.75%＝5.3px）に して、★★どの 画面でも 帯に 当たらなく なりました。 */
  56%  { transform:translate3d(0, -5%,0) rotate(  0deg) scale(.97,1.035);
         animation-timing-function:cubic-bezier(.55,.04,.7,.5); }
  /* ★ 2回目の 小さい 着地 */
  78%  { transform:translate3d(0,1.5%,0) rotate(  0deg) scale(1.02,.98);
         animation-timing-function:cubic-bezier(.25,.6,.3,1); }
  /* ★ ぴたっ */
  100% { transform:translate3d(0,   0,0) rotate(  0deg) scale(1,1); }
}
.die.is-roll {
  animation:dieRoll 270ms both;
  animation-delay:calc(var(--roll-i, 0) * 55ms);
}

/* ── ★★動きを へらして いる 人にも 遊べる ように（★`prefers-reduced-motion`）──
   ★ ★★この 会社では 初めて 出て きた 話 なので、★どう したか 書いて おきます。

   ★ ★★消しません。★★小さく します。
     ★ ★理由：★★この 動きは かざり では なく **「どの サイコロが ふり直されたか」の 返事** です。
       ★ ★★まるごと 消すと、★のこした 2個と ふり直した 3個の 見分けが つかなく なります
       ★ ★★（★ルル §6-2②「のこした ぶんは 動かない ―― ★これが そのまま 説明に なります」）。
     ★ ★→ ★★**ぐるぐる 回る・とび回る のを ぜんぶ やめて**、★大きさが 1回 もどるだけ に します。
       ★ ★★回転 0度・上下 0px・ずれ 0ms・140ms。★★目が まわる 動きは 1つも のこって いません。 */
@media (prefers-reduced-motion: reduce) {
  @keyframes dieRollQuiet {
    0%   { transform:scale(.90); }
    100% { transform:scale(1); }
  }
  .die.is-roll {
    animation-name:dieRollQuiet;
    animation-duration:140ms;
    animation-delay:0s;
    animation-timing-function:ease-out;
  }
  .happy-cat.is-jump { animation-iteration-count:1; }
  .result-wrap:not(.hidden) .result-box { animation:none; }
}

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

/* ════════════════════════════════════════════════════════════
   ★★★★ T226 で 画面に 出た もの ―― ★🎨アトが 仕上げました（★T227・2026-09-05）★★★★
   ------------------------------------------------------------
   ★ ★★💻コーダが「とりあえず 読める 形」まで 作って くれた 3つ（★①空きマス ②ロボットの 帯
     ★ ★③役の 説明）を、★★追記⑥ の 9画面 ぜんぶで 測って から 仕上げました。
   ★ ★★足した 決まりで **画面の たてで 分ける もの（`max-height`）は 1本も ありません**。
     ★ ★はばの 線を 1本だけ 引きました（★412px）―― ★★下の §3 に 数えた 結果を 書いて います。
   ════════════════════════════════════════════════════════════ */

/* ★ ① 空きマス ―― ★★T231 で **消しました**（★💻コーダの 引きつぎ §8-2）★★
   ★ ★T230 で 空きマス（`@blank`）そのものが 無く なって います
     ★ ―― ★★`.is-blank-cell` は もう 1度も 付きません【★`yacht-game.js`・`index.html` を 実測・0件】。
   ★ ★★1度も 通らない 決まりを 残すのは、★★★「見張って いる ふり」と 同じ かたち です。 */

/* ════════════════════════════════════════════════════════════
   ★★★ §1 ―― ★★「いま だれの 番か」を、★★★サイコロの 場所で 言う（★社長の ご指摘⑤）
   ------------------------------------------------------------
   ★ ★★私が 写真を 見て いちばん 困った ところ です【★T227・前_320x568_C1.png】：
     ★ ★★★ロボットが ふって いる 最中の 画面は、★★人の 手番と **ほとんど 同じ 絵** でした。
       ★ ★サイコロは 同じ 場所・青わくも 同じ 色（★これは ルルの 決め。★正しい）。
       ★ ★★＝ ★★★はじめて 来た 人には「★自分が 押したの？」に 見えます。
   ★ ★★どう したか ―― ★**新しい 色を 作らず**、★★もう 画面に ある 金色を **のばしました**：
     ★ ★ロボットの 帯（`.bot-cell.is-turn` ＝ もとから 金色）と、★★その 下の サイコロの 台を
       ★ ★★ひと続きの「ロボットの 場所」に 見せます。★★人の 手番では 台は 出ません。
   ★ ★★★これが「強調は 1種類まで」（★§5.5）に ぶつからない 理由：
     ★ ★★青わく ＝ **えらび**（★人が 決める もの）／★金 ＝ **番**（★決める もの では ない）。
     ★ ★★そして 2つは **同じ 画面に 並びません** ―― ★金が 出て いる あいだ、人は 押せません。
   ★ ★★★字は 1文字も 足して いません（★§5.5「説明は 足すより 減らす」）。
   ════════════════════════════════════════════════════════════ */
.bot-band { min-height:30px; }
.bot-cell {
  gap:6px; padding:0 8px;
  transition:background-color .18s ease, box-shadow .18s ease, color .18s ease;
}
/* ★ いま ロボットの 番（★もとから ある 金色を、★★わく で すこし 強く しました）*/
.bot-cell.is-turn { box-shadow:inset 0 0 0 2px var(--gold); }

/* ★★ ロボットが 何を 書いたか（★0.7秒 だけ 出ます）★★
   ★ ★★T226 では 出て いる あいだ 名前（「ロボット」）を 引っこめて いました
     ★ ★―― ★★「はばが 足りない かも」でした。★★★数えたら 足りて いました【実測】：
       ★ ★★いちばん せまい 568×320 の 帯 **241px** に 対して、
         ★ ★★名前 ＋ 点 ＋「S.ストレート 30点」（★いちばん 長い 役）で **163px**。
     ★ ★→ ★★名前を 出した ままに しました。★★★だれが 何を 書いたかが、1行で 続けて 読めます。
   ★ ★★白い 丸わく（★チップ）に したのは、★★「たった今 起きた こと」に 見せる ため です。 */
/* ⚠️★★★ ★★丸わくは `.has-move` が ついた ときだけ ―― ★★★私の 失敗①（★写真で 見つけました）
   ★ ★はじめ `.bot-cell .bot-move` に 書いて いました。★★字が 空の ときも 内よはくが 残り、
     ★ ★★★白い 丸が 1つ、★点の 右に 浮いて いました【★後_320x568_C1.png・★18px】。
   ★ ★★大きさ（getBoundingClientRect）でも 字の 中身でも 出ません ―― ★★写真だけが 教えました。
     ★ ★★＝ ★「印は 見て いるが 出た 絵は 見て いない」の 6つ目。★★私は これで 2度目 です
       ★ ★（★1度目は ハーツ T220 の 順位の 重なり）。★★見張り ㊳-2 が 空の 丸を 数えます。 */
.bot-cell .bot-name { flex:0 0 auto; }
.bot-cell .bot-move {
  flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:12px; font-weight:900; color:#7a5205;
}
.bot-cell.has-move .bot-move {
  padding:1px 9px 2px; border-radius:999px;
  background:var(--white); box-shadow:0 1px 0 #E3C583;
}

/* ★★★ ロボットの サイコロの 台 ★★★
   ⚠️★★ `:has()` が 使えない 古い 見る道具では、★★この 1かたまり が **まるごと 落ちます**。
      ★ ★★そのとき 残るのは 上の 金色の 帯（★どの 見る道具でも 出ます）―― ★★下の 線が 消えません。
      ★ ★★＝ ★わざと 2段に して あります（★上の 線：台／★下の 線：帯）。
   ★ ★大きさは 1pxも 変えて いません（★色 だけ）―― ★★サイコロも ボタンも 動きません。 */
.dice-row { border-radius:18px; transition:background-color .2s ease, box-shadow .2s ease; }
.bot-band:has(.bot-cell.is-turn) + .dice-row {
  background:#FFF7E3;
  box-shadow:inset 0 0 0 2px var(--gold-soft);
}

/* ════════════════════════════════════════════════════════════
   ★★ §2 ―― ★★はじめの 画面（★社長の ご指摘④・★「盤が さみしく ないか」）
   ------------------------------------------------------------
   ★ ★★T226 から、★押す 前は サイコロが **1つも 出て いません**（★丸 0個）。★★これは 正しい。
   ★ ★★ただ ―― ★白い 四角が 5つ 並ぶ だけ で、★★「ここに サイコロが 出る」と 分かりません でした。
   ★ ★→ ★★**うすい 点線の 場所じるし**に しました（★★丸は 0個 のまま。★1つも 描きません）。
     ★ ★★「まだ 何も 出て いない」と「ここに 出る」を、★同時に 言う 形 です。
   ⚠️★★ ★★ここに 目（丸）を 1つでも 出したら ④ が 死にます ―― ★見張り ⑬ が 数えて います。 */
.die[data-v=""], .die:not([data-v]) {
  background:#FFFDF6;
  box-shadow:inset 0 0 0 2px #F0E3CE, 0 2px 0 #e8ded4;
}

/* ════════════════════════════════════════════════════════════
   ★★★ §3 ―― ★役の 説明（★社長の ご指摘⑥。★お手本は ブラックジャック）
   ------------------------------------------------------------
   ★ ★★コーダの 引きつぎ ④：「★320×454 で 行が 2つに 折れ、点が 1行目の 右に 来ます」。
     ★ ★★数えました ―― ★★★はば 320 の 3画面で **8行中 7行が 2行に 折れて** いました【実測】。
       ★ ★折れる こと 自体は 悪く ありません。★★悪いのは **折れかたが 毎行 ちがう** ことでした
         ★ ★（★flex-wrap は 入る ところまで 詰める ので、★点が 1行目の 右・2行目の 右・
           ★ ★行の まん中 と、★★行ごとに 場所が 変わります）。
   ★ ★★どう したか ―― ★**ならびを 決め打ちに** しました（`grid`）：
     ★ ★せまい 画面 … ★★1行目「★役の 名前 …………… 点」／★2行目「★説明」
     ★ ★広い 画面 … ★★1行「★役の 名前 ／ 説明 ／ 点」（★★もとから 折れて いません）
     ★ ★★どちらでも **点は かならず 右はし**。★★目が 縦に 落ちて 読めます（★ブラックジャックの .glist と 同じ 考え）。
   ★ ★★字を 11.5 → **12.5px** に しました（★ブラックジャックの 説明は 13px）。
   ★ ★★点は 金色の 丸わく（★盤の「◯／63」の マスと 同じ 色 ―― ★★見た 目が つながります）。

   ⚠️★★★ ★★はばで 分ける 線を **1本** 引きました（★412px）。★追記⑥ の 決まり2 のとおり 数えます：
     ★ ★9画面の はば … ★320・320・812・667・844・736・926・320・568（★＋底 568）
     ★ ★★★どれも またぎません。★下がわの いちばん 近い 画面が **320**（★92px 下）、
       ★ ★★上がわの いちばん 近い 画面が **568**（★156px 上）―― ★★両側とも 余裕が あります。
     ★ ★★なぜ 412px か：★窓の はばは `min(92vw, 430px)`。★★1行に 収めるには 説明の 字が
       ★ ★★372px 要ります【実測】―― ★92vw が それを こえる のが **はば 413px から** です。
   ════════════════════════════════════════════════════════════ */
.cat-help { margin:0 0 10px; }
.cat-help > summary {
  cursor:pointer; list-style:none; min-height:44px; display:flex; align-items:center; gap:6px;
  padding:0 12px; border-radius:12px; background:var(--cream);
  box-shadow:inset 0 0 0 2px var(--gold-soft);
  font-size:12.5px; font-weight:900; color:#7a5205;
}
.cat-help > summary::-webkit-details-marker { display:none; }
/* ★ 開く・閉じる が 分かる しるし（★字では なく かたち。★§9.6 に かかりません）*/
.cat-help > summary::after {
  content:'▼'; margin-left:auto; font-size:10px; color:#B8934A;
  transition:transform .18s ease;
}
.cat-help[open] > summary::after { transform:rotate(180deg); }
.cat-help[open] > summary { margin-bottom:6px; }

.cat-list {
  margin:0; padding:0; list-style:none;
  font-size:12.5px; font-weight:700; line-height:1.5; color:var(--ink);
}
/* ★★ せまい 画面（★はば 412px 以下）… ★1行目「名前 ／ 点」・2行目「説明」 */
.cat-list li {
  display:grid; grid-template-columns:1fr auto;
  column-gap:8px; row-gap:1px; align-items:baseline;
  padding:5px 8px 6px; border-radius:10px;
}
.cat-list li:nth-child(odd) { background:#FFF7E8; }
.cat-list .cat-nm { grid-column:1; grid-row:1; font-weight:900; color:var(--pink-dark); }
.cat-list .cat-ds { grid-column:1 / -1; grid-row:2; min-width:0; }
.cat-list .cat-pt {
  grid-column:2; grid-row:1; justify-self:end;
  padding:1px 8px 2px; border-radius:999px; background:var(--gold-soft);
  font-style:normal; font-size:11.5px; font-weight:900; color:#7a5205; white-space:nowrap;
}
/* ★★ 広い 画面（★はば 413px 以上）… ★1行に ならべます（★もとから 折れて いません）*/
@media (min-width:413px) {
  .cat-list li { grid-template-columns:auto 1fr auto; }
  .cat-list .cat-ds { grid-column:2; grid-row:1; }
  .cat-list .cat-pt { grid-column:3; grid-row:1; }
}

/* ============================================================
   ★★★★ T227-2／T227-3 ―― ★★はじめの 画面が「低い 画面」で 縮みません（★🎨アト）
   ------------------------------------------------------------
   ★ ★★トライ T228 §7-🔴-1：★**568×272（★実在の 底）で「はじめる」が 2px しか 見えず、
     ★ ★★★指で 押せません** ―― ★★遊びを 始められません。
     ★ ★★（★T226 の 控え ＝ 出荷ずみの すがた でも 1pxも 同じ。★★もとから です）
   ★ ★★T227-3（★★★社長の お決め・2026-09-05）：★線を **300px → 330px** に 上げました。
     ★ ★★★理由は ★568×320（★追記⑥ の 9画面の 1つ）の「はじめる」が **43px** ―― ★会社の 線 44px に
     ★ ★★★1px 足りなかった から です（★T227-2 §T2-6 で 数を 出し、★社長が 道A を お決めに なりました）。

   ★★★ 線を どこに 引くか ―― ★★★たてを **1pxずつ** 変えて 実測しました（`t2273_sweep.cjs`）
     ★ ★・はば 568：★たて **301〜320px** で 帯が 44px を 割る（★320 で 43px・★321 で 44px）
     ★ ★・はば 320：★たて **301〜308px** で 割る
     ★ ★★→ ★★壊れて いる 帯は **301〜320**。★★★330 は その すぐ 上 ―― ★★1本で ぜんぶ 覆います。

   ★★★ 線が 9画面の どれも「またいで いない」ことの 数え（★追記⑥ 決まり2）
     ★ ★・9画面の たて … 568・480・375・375・390・414・428・454・**320**
     ★ ★・`max-height:330px` が 入れる もの … ★★**320（568×320）だけ**。★★★あとの 8つは ぜんぶ 375 以上。
     ★ ★  ★★下の いちばん 近い 画面 **320**（★10px 下）／★上の いちばん 近い 画面 **375**（★45px 上）
     ★ ★  ★★＝ ★★★どの 画面の 上にも 乗って いません（★またぎ 0件）。
     ★ ★・`min-width:560px`  … ★★もとから この ファイルに ある 線（`@media (max-height:460px)
     ★ ★   and (min-width:560px)`）の **使い回し**。★★新しい 数を 増やして いません。
     ★ ★・★★この かたまりの `max-height` の 線は **1本**。★はばの 線は **0本**。

   ★★★ 何を したか ―― ★★消したのは 1つ、★あとは **並べ替え** だけ
     ★ ★①`.eyebrow`（★大見出しの 上の 小さい 1行「サイコロを ふって 点を のばそう！」）
     ★ ★  ★→ ★★★まったく 同じ 言葉が ハッピーの ふきだしに 出て います（★重なり）。
     ★ ★②つよさの えらび と はじめる を **左右に ならべた**（★遊ぶ 画面の 横ならびと 同じ 考え）
     ★ ★③ハッピーを **囲いの 横に 置いた**（★★消して いません ―― ★§9.5 は 守られます）

   ★★★ 触る ところは **1つも 消して いません**（★大きさも 44px を 割りません）
     ★ ★・ゲームを選ぶ 44px ／ ？遊び方 44px ／ つよさ 44px ／ ★★はじめる **57px**
     ★ ★・★★568×320 の「はじめる」… ★★★43px → **50px**【実測・T227-3】
   ============================================================ */
@media (max-height:330px) {
  /* ★ 詰める（★静かに。★★注意書きは 1文字も 出しません ―― ★追記③）*/
  .title-screen { padding:2px 4px; gap:8px; }
  .start-card {
    margin-block:auto;              /* ★上下 まん中へ（★あふれたら 0に なり、上から 巻けます）*/
    padding:10px 13px 11px; border-width:3px; border-radius:20px;
  }
  .eyebrow { display:none; }        /* ★★同じ 言葉が ハッピーの ふきだしに あります */
  .start-card h1 { margin:0; font-size:34px; letter-spacing:0; text-shadow:0 3px #9E2A47, 0 5px #FFE0E8; }
  .intro { margin:3px 0 8px; font-size:11.5px; }

  /* ⚠️★ `.level-pick` は **おわりの 画面（.result-box）にも あります** ――
     ★ ★★だから かならず `.start-card` の 中 に かぎります（★はみ出させない）*/
  .start-card .level-pick { padding:3px 8px; border-width:2px; gap:2px 8px; }
  .start-card .level-pick-name { font-size:11px; }
  .start-card .level-select { min-height:44px; padding:3px 9px; font-size:13px; border-width:2px; }

  .start-button {
    margin-top:8px; min-height:48px; padding:7px 12px 6px;
    border-width:3px; border-radius:40px; font-size:17px;
    box-shadow:0 5px 0 var(--pink-dark), 0 8px 12px rgba(196,58,115,.24);
  }
  /* ★★ 小さい 字が 2行に なる とき、★★★「12回で」の まん中で 折らない
     ★ ★（`keep-all` ＝ ★★すきま の ところ でしか 折りません。★写真で 見つけました）
     ⚠️★★★ 字の 床は **11px**。★★★これは 私が T227 §2-2 で 引いた 線 です ――
     ★ ★★★「10px の カタカナは、私には 読めません」。★★ここでも 割りません。 */
  .start-button small { font-size:11px; line-height:1.3; word-break:keep-all; }
  .best-line { margin:6px 0 0; font-size:11px; }
  .best-line b { font-size:13px; }

  .mascot { margin-top:10px; }
  .mascot .bubble { font-size:11px; padding:5px 9px; margin-bottom:10px; border-width:2px; }
  .mascot .happy-cat { width:52px; height:40px; }
  /* ★ `.cat-name` は もとから 11px。★★下げません（★字の 床）*/
}

/* ★★ 横に 広い ぶんを 使って ―― ★★①囲いの 中を 左右 2つに ★★②ハッピーを 囲いの 横に
   ★ ★（★`min-width:560px` は ★★遊ぶ 画面の 横ならびで もう 使って いる 線 の 使い回し）*/
@media (max-height:330px) and (min-width:560px) {
  .title-screen { flex-direction:row; align-items:center; justify-content:center; gap:10px; }
  .title-screen > :first-child { margin-top:0; }   /* ★ 横ならびでは たての auto は 要りません */
  .title-screen > :last-child  { margin-bottom:0; }

  .start-card {
    flex:1 1 auto; width:auto; max-width:none; margin-block:0;
    display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr);
    column-gap:14px; align-items:center;
  }
  /* ★★ 上の 段 ＝「ヨット ／ つよさ」・★★下の 段 ＝ ★★★はじめる（★横 いっぱい）
     ★ ★★大きい ボタンに した ので、★★小さい 字が **1行**に 入ります（★写真で 見つけました）*/
  .start-card h1 { grid-column:1; grid-row:1; align-self:center; }
  .intro         { grid-column:1; grid-row:2; margin:2px 0 0; align-self:start; }
  .start-card .level-pick { grid-column:2; grid-row:1 / span 2; align-self:center; }
  .start-button  { grid-column:1 / -1; grid-row:3; margin:9px 0 0; }
  .best-line     { grid-column:1 / -1; grid-row:4; }

  .mascot { flex:0 0 auto; min-width:0; margin:0; }
}

/* ════════════════════════════════════════════════════════════
   ★★★★ T230 ―― ★💻コーダが 足した かたまり（★★🎨アトへ 引きつぎます）★★★★
   ------------------------------------------------------------
   ★ ★社長の ご指摘 ①②③ を 入れる ために、★★★「とりあえず 読める 形」まで だけ 作りました。
     ★ ★★飾りは 0個 です。★★`yacht.css` の 持ち主は アトさん です。
   ★ ★★足した 決まりで **画面の たてで 分ける もの（`max-height`）は 1本も ありません**
     ★ ★（★★追記⑥ の 決まり2 ―― ★9画面の どれかを またぐ 心配が はじめから ありません）。
     ★ ★★はばの 線（`min-width`）も **1本も 足して いません**。
   ★ ★★数えて あります【★9画面 ＋ 底 の 10通り・★実測】：
     ★ ★・役名が 切れた マス … ★**0個**（★字は 1pxも 小さく して いません）
     ★ ★・1マスの あまり（★いちばん せまい 320×568）… ★**7.9px**
   ════════════════════════════════════════════════════════════ */

/* ★★★ ① 1マスの 中の 3つ目 ＝ ロボットの 点（★社長の ご指摘①）★★★
   ★ ★★ならびは 「役名 → あなたの 点 → ロボットの 点」。
     ★ ★★上の 帯（`.me-band`）の ならびと 同じ です ―― ★★★説明を 0行に する ため。
   ⚠️★ ★★点の 器を **2.1em → 1.6em** に しました。
      ★ ★★1マスに 入る 数は 多くて 2けた です（★いちばん 大きい 役 ＝ ヨット 50点）。
        ★ ★★2.1em は 2けたの 数字（★16pxで 24.3px）に 対して **33.6px** ―― ★9.3px 空いて いました。
      ★ ★★★これで、★字を 1pxも 小さく せずに 3つ目が 入りました【★10画面 実測】。
   ⚠️★ ★★色は「読める」だけ に して あります（★★アトさん、ここは 決めて ください）。
      ★ ★★あなたの 点 … いまの まま／★ロボットの 点 … すこし うすい 字。
      ★ ★★★「光る・色が 変わる」強調では ありません（★§5.5：強調は 1画面に 1種類まで ＝ 青わく）。 */
.cell-pt { min-width:1.6em; }
.cell-bp {
  flex:0 0 auto; font-size:var(--cell-n); font-weight:900; line-height:1;
  min-width:1.6em; text-align:right; font-variant-numeric:tabular-nums;
  /* ⚠️★★★ 色は **読める こと** で 決めました（★飾りでは ありません）★★★
     ★ ★はじめ #9aa7b3 に して いました ―― ★★へだたり **2.46／2.13**。
       ★ ★★★写真を 見て 気づき、★測ったら 会社の 線（4.5）を 大きく 割って いました。
       ★ ★★私の ㉑ は 字の 大きさは 数えて いましたが、★★★へだたりを 数えて いません でした。
     ★ ★★いま：★★#6b6472 …… ★空きマス **5.69**／★書いたマス **4.94**【実測】。
     ★ ★★あなたの 点（★青みの #5a7a8c ／ ★ピンクの #c43a73）と **色あいが ちがう** ものを
       ★ ★えらんで います（★むらさき寄りの ねずみ色）。★★アトさん、ここは 決めなおして ください。 */
  color:#6b6472;
}
.cell.is-done .cell-bp { color:#6b6472; }

/* ★★★ ② ボーナスの 行 ―― ★★2列 ぶち抜き（★社長の ご指摘③）★★★
   ★ ★★決まりの 文（「1〜6の 合計が 63点 以上で ＋35点」）を 入れる ため です。
     ★ ★★1列（★320pxで 中身 142px）だと、★★14pxの 字で **6文字**しか 入りません【実測】。
   ★ ★★行の 数は **7行の まま** です（★12の 役 6行 ＋ この 行）。
     ★ ★★T226 に あった 空きマス（`.is-blank-cell`）は 消えました ―― ★役目が 無くなった ため。
   ⚠️★★★ ★★ここの 覚え書きは **まちがって いました**（★💻コーダ T235 §6-1 の お指し・★🎨アト T236 で 直し）★★★
      ★ ★もと：「★点の 器は ほかの マスと そろえて います（★1〜6の 合計は 多くて **2けた**）」
      ★ ★★★正 ：★★1〜6の 合計は **105点まで** ＝ ★★★**3けた**
        ★ ★（★5＋10＋15＋20＋25＋30 ＝ 105。★★コーダが 7,776通りの 出目 × 12の 役を 核から 数え直した 値）
      ★ ★★→ ★★★器（1.5em）は 3けたに 足りて いません。★ここは **いまも 切れます**。
        ★ ★★アイさんの お指図で、★★ボーナスの 行の 切れは **今日は 直して いません**
          ★ ★（★60万回に 0回 ―― ★★人が 見る ことは ほぼ ありません）。★★★消さずに 残します。
      ★ ★★（★842行の「★1マスに 入る 数は 多くて 2けた ＝ ヨット 50点」は ★★正しい ので 触って いません）*/
.cell.is-bonus { grid-column:1 / -1; }
.cell.is-bonus .cell-pt { min-width:1.6em; }
.cell.is-bonus .cell-bp { min-width:1.6em; color:#6b6472; }

/* ★★★ ③ 上の 帯 ―― ★あなた ｜ ロボット ｜ 何回目（★社長の ご指摘②）★★★
   ★ ★社長：「★『あなた 28点』の 右（★チョイスの 上あたり）に…」
   ⚠️★★ ★★たけを 増やして いません（★`min-height:30px` の まま）。
      ★ ★★★増えると、★表の 1マスが その ぶん 削れます（★★私は 測る 道具で 1度 やりました ――
        ★ ★★帯が 30→50px に なり、★1マスが 34→31px に 落ちて いました）。
   ★ ★★`.me-pt` は もとは `flex:1 1 auto`（★のこりを ぜんぶ 取る）でした。
     ★ ★★2つ 並ぶ ので、★★「のこりを 取る」のは **右はしの 何回目の 手前** に 移します。 */
.me-pt { flex:0 0 auto; }
/* ★★★ ロボットの 色を **1つ**に そろえます ★★★
   ★ ★★上の 帯の「ロボット ◯点」と、★表の 中の ロボットの 点を **同じ 色**に します。
     ★ ★★★これで「この 色は ロボットの もの」が、★説明 0行で 分かります
       ★ ★（★社長：「フォーダイス 28点が プレイヤーが とった 28点だと 分かるように」）。
   ⚠️★ ★★アトさん：★★ここは 見た目の 決め です。★★★もっと 良い 分け方が あれば 変えて ください
      ★ ★（★私の 案：★①ロボットの 列に うすい 台 ②細い しきり ③2行の 見出し＝1行 14pxの 代金）。 */
.me-name.bot { color:#6b6472; }
.me-pt.bot   { color:#6b6472; }
.me-pt.bot::after { color:#8f8199; }
.me-turn { flex:1 1 auto; text-align:right; }

/* ════════════════════════════════════════════════════════════
   ★★★★ T231 ―― ★🎨アト ／ ★★「1マスの 2つの 数字」を 見分ける ★★★★
   ------------------------------------------------------------
   ★ ★★💻コーダの お問い（★T230 §8-1）への おこたえ です。
     ★ ★★★案は ①うすい台 ②細いしきり ③2行の 見出し でした ―― ★★①③を 落とし、★②を 採りました。
       ★ ★★ただし ②の 代金（★1〜2px／マス）は 払って いません。★★★はば 0px で 引けました。

   ★ ★★なぜ ①（★ロボットの 点に うすい 台）を 落としたか【★写真・`zoom_kouho_B_css.png`】
     ★ ★・★★書いた マス（`.is-done`）の 地は `#f0eef3` ―― ★★★台が そこで **消えます**。
       ★ ★ ＝ ★★いちばん 要る ところ（★2けたが 並ぶ「4の目 8 12」）で いちばん 効きません。
     ★ ★・★台に 載せると 字を 濃く しないと 読めません（★★#5f5869 まで 落ちました）――
       ★ ★ ★★★すると **ロボットの 点が 画面で いちばん 濃い 数字**に なります。★逆立ちです。
     ★ ★・★「―」の マスにも 台が 出ます（★13マス中 9マス）―― ★★何も 無い ところが 目立ちます。

   ★ ★★なぜ ③（★2行の 見出し）を 落としたか【★写真・`zoom_kouho_C_css.png`】
     ★ ★・★★★見出しは「どちらが 先か」を 言いますが、★★「どこで 数字が 切れるか」を 言いません。
       ★ ★ ★実測：★「8 12」の すきまは **7.4px の まま**（★1pxも 変わりません）。★★病気が 残ります。
     ★ ★・★そのうえ ★★320×568 で **ボーナスの 行が 下の 帯と 重なりました**（★写真）――
       ★ ★ ★★14px は「1マス 2px」では 済みませんでした。

   ★ ★★なぜ 線なのか（★★病気の 名前は「すきまが そろって いない」）【★★実測】
     ★ ★・ロボットの 点が **1けた**の とき … すきま **17.4〜23.4px**
     ★ ★・ロボットの 点が **2けた**の とき … すきま ★★**7.4px**（★★★3分の1 に なります）
     ★ ★・ボーナスの 行 …………………………… ★★**4.9〜5.6px**（★★★いちばん せまい）
     ★ ★ ＝ ★★目は「18px 空いたら 別の 数字」と 覚え、★★★そこへ 7.4px が 来て「812」に 読めます。
     ★ ★ ★★★線を 引けば、★すきまが いくつでも **切れ目は いつも 同じ 場所** です。

   ⚠️★ ★★はばの 代金は **＋0.8px／マス**（★★コーダの ②の 見立て 1〜2px より 小さい）。
      ★ ★★★線そのものは `position:absolute` なので **0px**。★足したのは 4px の すきま だけで、
        ★ ★点の 器を 1.6em → **1.5em**（★2けたの 字は 1.39em）に 詰めて **3.2px 返して** います。
      ★ ★★実測の 余裕：★役のマスに 足せるのは **8px まで**（★320×568）―― ★★7.2px 残ります。

   ⚠️★ ★★§5.5「強調は 1画面に 1種類まで」に **当たりません**。
      ★ ★★★線は 13マス ぜんぶに いつも 出ます ―― ★★点いたり 消えたり しません。
        ★ ★＝ ★これは 強調（★どこかを 目立たせる）では なく、★★★入れもの（★表の 罫）です。
      ★ ★★この 画面の 強調は いまも **青わく 1種類だけ** です。

   ⚠️★ ★★字は 1pxも 変えて いません。★色も 1つも 変えて いません（★コーダの #6b6472 の まま）。
      ★ ★★へだたりは 前と ぴったり 同じ です（★書いたマス 4.94 ／ 空きマス 5.69）。
   ════════════════════════════════════════════════════════════ */

/* ★★★ ① 点の 器を 詰めて、★その ぶんを すきまに 回す（★★はばの 代金 ＋0.8px）★★★
   ★ ★★1.6em ＝ 25.6px（★16px の とき）。★2けたの 字は **22.2px** ―― ★3.4px 空いて いました。
     ★ ★★1.5em ＝ 24px。★★まだ 1.8px 残ります（★★★11px の 画面でも 1.2px 残ります【実測】）。
   ★ ★★これは コーダの 1.6em を **もう1回 詰めた** ものです ―― ★★ふえて いません。 */
.cell-pt, .cell-bp,
.cell.is-bonus .cell-pt, .cell.is-bonus .cell-bp { min-width:1.5em; }
.cell-bp { margin-left:4px; }

/* ★★★ ② たての 線 ―― ★★★カードの 上から 下まで（★はば 0px）★★★
   ★ ★★`position:absolute` なので、★★★ならびを 1pxも 動かしません。
     ★ ★`.cell` は `overflow:hidden` なので、★角の 丸みで きれいに 切られます。
   ★ ★★`right:-5.65px` の 出どころ【★実測】：
     ★ ★ ★点の 字の 右はし → 4px（マスの gap）＋ 4px（上の margin）＋ 1.8px（ロボットの 器の あそび）
     ★ ★ ★★＝ 9.8px の 通り道。★★★その まん中（4.9px）に 線の まん中を 置きます。
     ★ ★ ★→ ★★あなたの 字から **4.15px**、★ロボットの 字から **4.15px**（★2けた どうしの とき）。
   ⚠️★★★ ★★線を **`.cell` に** 付けて います。★★★`.cell-pt` の 中では ありません ★★★
      ★ ★★私は 1度 `.cell-pt::after` に 書きました。★★★見張りが すぐ 鳴りました（★NG 25件）：
        ★ ★ ★「1の目 の 点が 切れて います（要 30px ／ 有 24px）」―― ★★★私の T227 ⑯ 自身 です。
      ★ ★★わけ：★はみ出して 置いた 子は、★★★親の `scrollWidth` を 太らせます
        ★ ★（★24px の 器 ＋ 5.65px ＝ 30px）。★★見た目は 正しいのに、★★★数が 嘘に なって いました。
      ★ ★→ ★**`.cell` に 付け、`top:0;bottom:0` に しました** ―― ★★はみ出しが たて・よこ とも **0**。
        ★ ★★あわせて 1マスの たけ ぴったりに なります（★23〜45px の どの 画面でも）。
   ★ ★★`right` の 出どころ：★マスの 右はし から
     ★ ★ 7px（マスの 内よはく）＋ 1.5×点の字（ロボットの 器）＋ 4px（margin）＋ 4px（gap）− 4.9px（★通り道の まん中）
     ★ ★ ★＝ ★`9.35px + 1.5 × var(--cell-n)`（★★線の はば 1.5px の 半分を 引いて あります）。 */
.cell { position:relative; }
.cell::after {
  content:''; position:absolute; top:0; bottom:0;
  right:calc(9.35px + 1.5 * var(--cell-n));
  width:1.5px; background:rgba(107,100,114,.45);
}

/* ★★★ ③ 上の 帯にも **同じ 線**（★★★これが 見出しの 代わり・★はば 0px）★★★
   ★ ★★社長の ご指摘② で、★帯は もう「あなた 36点 ロボット 25点」と 言って います。
     ★ ★★★そこに 表と 同じ 線を 引くと、★★決まりが **1つ**に なります：
       ★ ★ ★★★「線の 右は ロボットの もの」―― ★帯で 1回 覚えて、★表で 13回 使います。
   ★ ★★★言葉は 1つも 足して いません（★§5.5「説明は 足すより 減らす」）。
   ★ ★`overflow:hidden` は、★線が 帯の 丸みから はみ出さない ため（★字は 1つも 切れません【実測】）。 */
.me-band { overflow:hidden; }
.me-name.bot { position:relative; }
.me-name.bot::before {
  content:''; position:absolute; left:-4.75px; top:-6px; bottom:-6px;
  width:1.5px; border-radius:1px; background:rgba(107,100,114,.45);
}

/* ════════════════════════════════════════════════════════════
   ★★★★ T233 ―― ★🎨アト ／ ★★★字の 大きさを「たけ」だけで 決めない ★★★★
   ------------------------------------------------------------
   ★★★ 💻コーダの 見つけもの（T230-2 §T2-6）：
     ★ ★★「★★たて向きの ふつうの スマホを、★私たちは 1台も 測って いません でした」
     ★ ★★★`390×844`（★いちばん 多い スマホ）で ★★NG 5。★`375×812` で ★NG 6。

   ★★★ ① ★★社長の お見立ては 当たって いました ―― ★★★「詰める」話では ありません
     ★ ★★社長：「★はば 390 は 320 より 70px 広い ―― ★★詰めるのでは なく、
       ★ ★★★広さが 使えて いない はず です。★先に そこを 疑って ください」
     ★ ★★★数えました。★★広さは 使えて いました ―― ★★★★使いすぎて いたのは **字** でした。

     | ★画面 | ★1マス はば×たけ | ★★はば÷たけ | ★名前の 字 | ★F ÷ 表のはば |
     |---|---|---|---|---|
     | ★320×568 | ★156×34 | ★**4.59** | ★14px | ★0.04459 |
     | ★736×414 | ★199.5×43 | ★4.64 | ★17px | ★0.04239 |
     | ★926×428 | ★252.7×45 | ★5.62 | ★18px | ★0.03547 |
     | ★**390×844** | ★★**188×64** | ★★★**2.94** | ★★**19px** | ★★**0.05026** |
     | ★**375×812** | ★★**180.5×64** | ★★★**2.82** | ★★**19px** | ★★**0.05234** |

     ★ ★★★＝ ★★いままで 測った 10画面の 1マスは、★★★どれも **たけの 4.59倍 いじょう 横長**でした。
       ★ ★★新しい 2画面だけ **2.8倍** ―― ★★★まったく ちがう かたち です。
     ★ ★★はばは 32px 増えました（156→188）。★★★でも 字は 5px 増えました（14→19）――
       ★ ★★★はばは ＋20%、★字は ＋36%。★★字の ほうが 速く 太りました。

   ★★★ ② ★★★なぜ そう なるか ―― ★★★★これが「決め打ちの 線」の **もう1つの かたち** です
     ★ ★`yacht-game.js` の `layout()`（★💻コーダの 持ちもの・★私は 触りません）：
       ```
       ★ --cell-f = max(10, min(19, cellH × 0.40))     ← ★★★たけ だけ
       ★ --cell-n = max(11, min(23, cellH × 0.46))     ← ★★★たけ だけ
       ```
     ★ ★★★字の 大きさが、★★1マスの **たけ からしか** 決まって いません。
       ★ ★★たて向きの スマホは たけが 844px ―― ★1マスが 64px（★天井）に なり、
         ★ ★★字も 19/23px（★天井）に なります。★★★はばは 1回も 見て いません。
     ★ ★★★9画面の ときは これで 通って いました ―― ★★**たまたま** です：
       ★ ★★せまい 画面（320）は いつも 低く（454〜568）、★高い マス（40〜45px）は
         ★ ★いつも 広い 画面（736〜926）でした。★★★せまくて 高い が **1つも 無かった**。
     ★ ★★★＝ ★★★これは `@media` の 線では ありません。★★でも 同じ 病気 です ――
       ★ ★★★**2つ ある ものを、1つしか 見て いない 式**。★★★20本 ぜんぶに あります（→ 作業メモ §5）。

   ★★★ ③ ★★どう したか ―― ★★★**はばの 側からも 天井を かける**（★線は 1本も 引いて いません）
     ★ ★★`cqw`（★★入れものの はばの 1%）で かけます ―― ★★★`@media` の 決め打ちでは ないので、
       ★ ★★★**またぐ 画面が 原理的に ありません**（★★11画面の あいだの どの はばでも 続いて います）。
     ★ ★★天井の 数は、★★★いままでの 10画面が **1pxも 変わらない** ところに 置きました【★実測】：
       ★ ★★・F ÷ 表のはば の いちばん 大きい 値 ＝ **0.04459**（★320×568）→ ★天井 **4.55cqw**（★+2.0%）
       ★ ★★・N ÷ 表のはば の いちばん 大きい 値 ＝ **0.05096**（★320×568）→ ★天井 **5.2cqw**（★+2.0%）
     ★ ★★★＝ ★★★**11画面＋底 の どこでも、字は 1pxも 小さく なって いません。**
       ★ ★★変わるのは 新しい 2画面 だけ で、★そこでも 19 → 17.4px ――
         ★ ★★★いま 出荷ずみの 320×568（14px）より **まだ 大きい** です。
       ★ ★★＝ ★★★「字を 小さくして 詰める」（★私の T123・T139 の 下の線）に **当たりません**。

   ⚠️★★★ ④ ★★★線（T231）を 道づれに しない ―― ★★ここで 1度 落ちました（→ 作業メモ §6-1）
     ★ ★`.cell::after` の 場所は `1.5 × var(--cell-n)` で 決めて いました。
       ★ ★★字だけ 天井を かけると、★★★器は 縮むのに 線は 元の 場所の まま。
     ★ ★★★わざと その 姿を 作って 測りました【★実測・`t233s_zure.cjs`】：
       ★ ★ ★★線が 字から **5.02px（390×844）／ 6.19px（375×812）** ずれます
       ★ ★ ―― ★★★2px しか ない「線と 字の すきま」を 食いつぶして、★線が 数字に 重なります。
     ⚠️★ ★★★ここで もう1つ 学びました ―― ★★「列の 中の ずれ」は **0px の まま** です。
        ★ ★★ずれは 13マス ぜんぶに 同じだけ かかる ので、★★★T231 の ㉕ の
          ★ ★「そろって いるか」の 目には **1pxも 映りません**。
        ★ ★★★＝ ★そろって いる ことと、★正しい ところに ある ことは、別の 話 でした。
     ★ ★→ ★★**`--n2` を 1つ 作り、★器も 線も 同じ 値から 引きます**（★★食いちがい 0px）。
       ★ ★★そして ★★★見張り ㉗-2 が、★★変数では なく **本当に 出て いる 字**と 突き合わせます。

   ⚠️★★★ ⑤ ★★古い 見る道具（`cqw` が 無い）では ―― ★★**この かたまりが まるごと 落ちます**
     ★ ★`@supports` で 囲って あります。★★落ちた ときに 残るのは **T231 までの 姿**
       ★ ★（★＝ ★いま 出荷ずみの もの）―― ★★★9画面は そのまま 正しく 出ます。
     ★ ★★`:has()` の かたまり（→ 上の §1）と 同じ 2段の 作り です。
   ════════════════════════════════════════════════════════════ */

/* ★★★ ① 下の 段 ―― ★★どの 見る道具でも 通る 値（★T231 までと 1文字も 同じ 中身）★★★ */
.cell { --f2:max(11px, var(--cell-f)); --n2:var(--cell-n); }

/* ★★★ ② 上の 段 ―― ★★★はばの 側からの 天井（★`cqw` が 使える ときだけ）★★★ */
@supports (width:1cqw) {
  /* ★ 表を「はかる 入れもの」に します。
     ⚠️★ ★`.sheet` は たての ならびの 中の 子なので、★★はばは **中身から 決まって いません**
        ★ ★（★`align-items:stretch` で 親いっぱい）―― ★★`inline-size` の 囲いこみは 安全 です。
     ⚠️★ ★★`.cell::after`（★T231 の 線）の 置きどころは `.cell`（`position:relative`）の まま。
        ★ ★★★囲いこみで 動きません【★実測・ずれ 0px】。 */
  .sheet { container-type:inline-size; }
  .cell {
    --f2:max(11px, min(var(--cell-f), 4.55cqw));
    --n2:min(var(--cell-n), 5.2cqw);
  }
}

/* ★★★ ③ 字と 器と 線 ―― ★★★3つ とも **同じ 値**から 引きます ★★★
   ★ ★★どれか 1つでも 元の `--cell-f` / `--cell-n` の ままだと、★★★線が ずれます（→ 上の ④）。
   ★ ★★見張り ㉗-2 が、★★★「線の 場所」と「本当に 出て いる 字」を 突き合わせて 数えて います。 */
.cell-name { font-size:var(--f2); }
.cell-pt, .cell-bp { font-size:var(--n2); }
.cell::after { right:calc(9.35px + 1.5 * var(--n2)); }

/* ════════════════════════════════════════════════════════════
   ★★★★ T237 ―― ★🎨アト ／ ★★上の 帯 ①字の 床 ②広い ときだけ 社長の 絵 ★★★★
   ------------------------------------------------------------
   ★★★ ★社長の お決め（2026-09-06・2つ）
     ★ ★①★★**字は 10.5px まで 下げてよい**（★会社の 床 11px を 0.5px 下回る ―― ★社長が 承知の 上で）
     ★ ★②★★**広い 画面だけ 社長の 絵**（★帯を まん中で 分け、★両がわに 回数）。★せまい 画面は 今の 形。

   ★★★ ① ★★何を 直したか ―― ★★★「12回目 / 12回」の「回」が 消えて いました
     ★ ★せまい 5画面（★320×568／320×480／320×454／568×320／568×272）で 帯が **25〜32px** あふれ、
       ★ ★`overflow:hidden` に 食われて 最後の 字が 見えて いません でした【★T235・T236 実測】。
     ★ ★★直し方は T233 と 同じ ―― ★★★**はばの 側からも 天井を かける**（`cqw`）。
       ★ ★★`@media` の 決め打ちでは ない ので、★★★またぐ 画面が 原理的に ありません。

   ★★★ ② ★★下の 止め（`max(10.5px, …)`）は **式の 約束** です ―― ★測って 願うのでは なく
     ★ ★★T236 の 案③ は `min(11px, 3.416cqw)` だけ でした。★★★測ったら ―― ★★「点」の 字が
       ★ ★★★**9.664px** に なって いました（★568×320・568×272）。★★社長の 床を 割って います。
     ⚠️★ ★★★私の 目（T236 ㉙）は それを **見つけられません でした**。★わけ：
        ★ ★★`.me-pt::after` は `getComputedStyle(el)` に 出ません ―― ★★★`(el,'::after')` で
          ★ ★聞かないと 出ない。★私は `.me-name` `.me-pt` `.me-turn` の **3つしか 聞いて いません** でした。
        ★ ★★★＝ ★「数えて いる つもりで、数えて いない ものが あった」【★T237 §5-1 に 書きました】。
     ★ ★→ ★★★**ぜんぶの 字に `max(10.5px, …)` を かけました**。★これで 床は **式が 守ります**。

   ★★★ ③ ★★★すきま（gap）の 決まりは **入れて いません** ―― ★理由が あります
     ⚠️★ ★★T236 の 案③ には `.me-band{ gap:min(8px, 2.484cqw) }` が ありました。
        ★ ★★★入れものは **自分自身を 測れません**。★`.me-band` じしんの 宣言の 中の `cqw` は、
          ★ ★★上の 入れもの（★無ければ **画面の はば**）で 決まります。
        ★ ★★★測りました【★T237-I 実測】：★568×320 では ―― ★画面から なら 8px／★帯から なら 7.027px。
          ★ ★★出た すきまは **8px** ＝ ★★★**画面**を 見て いました。
        ★ ★★ところが 線（`.me-name.bot::before`）は `.me-band` の **子** なので、★★帯を 見ます。
          ★ ★★★＝ ★すきまは 画面・線は 帯 ―― ★★食いちがい、★線が すきまの まん中から
            ★ ★★**0.373〜0.487px ずれて** いました（★5画面）。★★★T233 ④ と 同じ 病気 です。
     ★ ★→ ★★すきまの 決まりも 線の 決まりも **足しません**。★★★T231 の `gap:8px` ／ `left:-4.75px`
       ★ ★を そのまま 生かします。★★実測：★★★線の ずれ **0px ／ 12画面**・★すきま **8px ／ 12画面**。

   ★★★ ④ ★★わり算の もと は **330**（★T236 の 322 から 上げました）
     ★ ★★「あふれ はじめる 帯の はば」で えらんで います【★実測】：
       ★ ★★・322 … 304px（★★実在の 底 306.89px の **2.89px** 下）
       ★ ★★・**330 … 298px（★★底の 8.89px 下）**  ←★★これに しました
       ★ ★★・336 … 296px（★ただし 天井が 効きはじめる はばが 336px に 上がり、
       ★ ★　　　　★★★いま 通って いる 667×375（★中身 338.33px）に **2.33px** まで 近づきます）
     ★ ★★★＝ ★★下（★あふれ）にも 上（★いま 通って いる 画面）にも 8px いじょう 空く ところ。

   ★★★ ⑤ ★★★線 428px ―― ★★どこで 社長の 絵に 切りかわるか
     ★ ★★これは「入る／入らない」で 引いた 線 です（★端末の 大きさから 引いた 線 では ありません）：
       ★ ★★・★社長の 絵が **切れずに 入る** いちばん せまい はば … ★★**406px**（★帯の 中身の はこ）
       ★ ★★　（★★★左右 とも「12回目 / 12回」―― ★いちばん 長い 字で 測って います）
       ★ ★★・★線 …………………………………………………… ★★**428px**（★★その **22px** 上）
       ★ ★★・★線の すぐ 上の 画面（844×390）… 437.44px（★+9.44px）
       ★ ★★・★線の すぐ 下の 画面（812×375）… 419.52px（★−8.48px）
     ★ ★★★この 線は、★★どの はばでも **こわしません**【★実測・はば 280〜760px の 481通り】：
       ★ ★★線の 下 … いまの 形（★★もう 通って います）／★線の 上 … 社長の 絵（★406px から 入る）
       ★ ★★★＝ ★★★ハーツの「420px」と ちがい、★**穴が 開く 側が ありません**。
     ⚠️★ ★★★812×375（★419.52px）も **物理的には 入ります**（★406px から 入る ので）。
        ★ ★★入れなかったのは ―― ★社長が 名ざしで「844×390 と 926×428 の 2つ」と お決めに なった ことと、
        ★ ★★★線を 下げると 入る 下ばし（406px）との 余裕が 22px → 13.5px に 減る ため。
        ★ ★★3画面に したい ときは `428px` を **413px** に するだけ です（★数は 出して あります）。

   ⚠️★★★ ⑥ ★★「あなた側の 回数」は **まだ 出ません** ―― ★★★`index.html` に 器が 1つ 要ります
      ★ ★★社長：「★器が 入るまでは 出なくて けっこう。★★形だけ 先に 作って ください」
      ★ ★★★ここに ある `.me-turn-l` の 決まりは、★★器（`<span class="me-turn me-turn-l" id="meTurnL">`）が
        ★ ★入った 日に **そのまま 効きます**（★★動く ことは 12画面で 確かめて あります）。
      ★ ★★それまでは `.me-pt:not(.bot)` が のこりを 取って、★★★帯を 分ける **形だけ** 出します
        ★ ★（★★線の 場所：★今日 39.3%／40.3% → ★★★器が 入ると 49.2%／49.3% ＝ ほぼ まん中）。
      ★ ★★`:not(:has(.me-turn-l))` は ―― ★★器が 入った 瞬間に この 仮の 形を **自分で 引っこめる**
        ★ ★ため です（★★★2つ 並んで 場所を 取り合う のを 防ぎます）。
      ⚠️★ ★★💻コーダへ：★器を 足す ときは **JS で 左右 とも 書きかえて ください**。
         ★ ★★★私が 測る ときに 器だけ 入れたら、★左は はじめの「1回目 / 12回」の まま でした ――
           ★ ★★右が「12回目」の 横で 左が「1回目」は、★★★出ないより 悪い です。

   ⚠️★★★ ⑦ ★★古い 見る道具では ―― ★★このかたまりは **まるごと 落ちます**
      ★ ★`@supports (width:1cqw)` で 囲って あります。★★落ちた ときに 残るのは **T231 までの 姿**。
      ★ ★★`.me-turn-l{display:none}` は 外に 出して ある ので、★★★器が 入った あとに
        ★ ★古い 道具で 見ても「左の 回数が 出っぱなし」に なりません（★いまの 形に 戻る だけ）。
      ★ ★★`:has()` が 無い 道具では ⑥の 仮の 形が 出ません（★★器が 入った あとは それが 正しい）。
   ════════════════════════════════════════════════════════════ */

/* ★★★ ① 帯の 字 ―― ★上は はばからの 天井、★★下は 10.5px で 止める ★★★
   ★ ★★★「点」（`.me-pt::after`）を 忘れない こと ―― ★ここが 今日 いちばん 小さい 字 です。 */
@supports (width:1cqw) {
  .me-band { container-type:inline-size; }
  .me-name      { font-size:max(10.5px, min(12.5px, 3.7879cqw)); }
  .me-pt        { font-size:max(10.5px, min(20px,   6.0606cqw)); }
  .me-pt::after { font-size:max(10.5px, min(11px,   3.3333cqw)); }
  .me-turn      { font-size:max(10.5px, min(12px,   3.6364cqw)); }
}

/* ★★★ ② 広い ときだけ 社長の 絵（★帯を まん中で 分ける）★★★ */
.me-turn-l { display:none; }
@supports (width:1cqw) {
  @container (min-width:428px) {
    .me-turn-l { display:block; }
    .me-band:not(:has(.me-turn-l)) .me-pt:not(.bot) { flex:1 1 auto; }
  }
}

/* ════════════════════════════════════════════════════════════
   ★★★★ T240 ―― ★🎨アト ／ ★★帯の 分かれ目を、★表の 分かれ目に そろえる ★★★★
   ------------------------------------------------------------
   ★★★ ★社長の お指し（2026-09-06・★赤い 線を 引いた 絵を くださいました）
     ★ ★「★★あなたと ロボットの 総得点が **黒線**で 分かれちゃってる から、
       ★ ★★そうじゃ なくて **境目を 赤線で 統一**して ほしい。
       ★ ★★★そうしたら、★上から下まで きれいに 赤線で 分かれる でしょ？」
     ★ ★★★＝ ★帯の たての 線を、★★表の 列の 分かれ目と **同じ x** に する。

   ★★★ ① ★★何が ずれて いたか【★実測・T240-A／D】
     ★ ★★★表の 分かれ目は、★どの 画面でも **帯の まん中** です
       ★ ★（★`.sheet` は `1fr 1fr` ＋ すきま 2px ―― ★すきまの まん中 ＝ 中身の まん中。
       ★ ★★帯と 表は 同じ 親（`.pane-a`）の 子で 同じ はば。★帯の よはくは 左右 とも 12px）。
       ★ ★★★12画面 ＋ PC で **帯の まん中 ＝ 表の 分かれ目**（★ちがい 0px）を 数えて あります。
     ★ ★★ところが 帯の 線は ―― ★★★社長の 絵の とき **49.21%／49.28%**（★★−3.641px／−3.625px）。
     ⚠️★ ★★★もっと 悪い ことに、★線は **点の けたで 動いて** いました【★実測・5通りの 点】：
        ★ ★★あなた 0／ロボット 0 … −3.641px　★あなた 5／ロボット 50 … **−11.234px**
        ★ ★★あなた 50／ロボット 5 … ＋3.953px　★あなた 345／ロボット 5 … **＋11.563px**
        ★ ★★★＝ ★遊んで いる 最中に、★線が **22.797px 動きます**（★社長が ご覧に なった 3.641px は
          ★ ★その 22.797px の 中の **1枚**でした）。

   ★★★ ② ★★なぜ ずれるのか（★★★病気の 名前は「左右の 半分が 同じ はばで ない」）
     ★ ★帯は ならびの 器（flex）で、★左は「あなた／点／回数」、★右は「ロボット／点／回数」。
     ★ ★★のこりを 取って いたのは **両はしの 回数**（`.me-turn{flex:1 1 auto}`）で、
       ★ ★★★2つは **同じだけ** ふとります。★★だから 左右の 差は そのまま 残ります：
       ★ ★★・名前 …「あなた」37.5px ／「ロボット」44.766px ―― ★★差 **7.266px**
       ★ ★★・点 …… ★けたで 変わる（★「0」26.2px 〜「345」58.594px）―― ★★差 **最大 32.4px**
       ★ ★★★＝ ★差の **半分**だけ、★線が まん中から ずれます（★7.266 ÷ 2 ＝ 3.633px）。

   ★★★ ③ ★★どう 直したか ―― ★★★**左右の 半分を、同じ はばに する**（★線は 動かして いません）
     ★ ★★★線（`.me-name.bot::before`・`left:-4.75px`）は **1文字も 触って いません**。
       ★ ★★線は いまも「すきま 8px の ぴったり まん中」に あります（★T231 の まま）。
       ★ ★★★動かしたのは **中身の ならび方**だけ です。
     ★ ★★・`.me-name{min-width:4em}` … ★★名前の 器を **左右 同じ**に する。
       ★ ★★★なぜ **4em** か：★★全角の 字は どの 書体でも **1em が 天井**【★トライ T239 §3-3】。
         ★ ★「ロボット」は 4字 ＝ ★★どの 書体でも **4em を こえません**。
         ★ ★★★＝ ★決め打ちの px では なく、★**字の 決まりから 出した 数**です
           ★ ★（★この 機械の BIZ UDPGothic では 3.581em。★iPhone の 丸ゴでは もっと 4em に 近い ―― ★★どちらでも 入ります）。
     ★ ★★・`.me-pt{flex:1 1 0}` … ★★のこりを 取るのを **点の 器**に 移す。
       ★ ★★★`flex-basis:0` なので、★2つの 点の 器は **いつも 同じ はば**に なります
         ★ ★（★★けたが ちがっても ―― ★これが「点の けたで 動く」を 止めます）。
     ★ ★★・`.me-turn{flex:0 0 auto}` … ★回数は ふとらない（★のこりを 取り合わない）。
       ★ ★★★見た目は 前と 同じ です：★数字は 名前の すぐ 右、★回数は 半分の 右はし。
         ★ ★★あいだの すき間の 出どころが「回数の 器」から「点の 器」に 移った だけ。

   ★★★ ④ ★★★どこに 効かせて いるか ―― ★**線を 1本も 足して いません**
     ★ ★★すでに ある `@container (min-width:428px)`（★社長の 絵の 切りかえ）の 中に 入れて あります。
       ★ ★★★新しい `@media` も `min-width` も **0本**（★追記⑥ の 決まり2）。
     ★ ★★★実測【★T240-E・★はばを 1pxずつ 総なめ・★横 461通り ＋ たて 461通り】：
       ★ ★★・★社長の 絵が 出る はば …… ★★ずれ **最大 0px**（★横 273通り・たて 297通り とも）
       ★ ★★・★あふれ ……………………… ★★**0通り**（★実在の 底 306.89px より 上で）
       ★ ★★・★字の 床（10.5px）割れ … ★★**0通り**
       ★ ★★・★切りかえ ………………… ★中身 427.9px → **428.5px**（★★線は 動いて いません）

   ⚠️★★★ ⑤ ★★せまい 画面（★1本の ならび）では、★★★そろえられません ―― ★数で 申し上げます
      ★ ★★社長の 絵が 出ない 10画面では、★帯は「1本の ならび」で **左右の 半分が ありません**。
        ★ ★★★そこで 線を まん中に 動かすと ―― ★右がわ（★ロボット／点／12回目 / 12回）が
          ★ ★**半分の はばに 入りません**【★実測・T240-B】：
        ★ ★★・568×272（★実在の 底）… ★右の 最小 178.86px ／ 半分 137.45px ―― ★★**41.41px 足りない**
        ★ ★★・320×568 ………………… ★右の 最小 181.09px ／ 半分 141.00px ―― ★★**40.09px 足りない**
        ★ ★★・390×844（★いちばん 多い スマホ）… ★★**29.72px 足りない**
        ★ ★★★＝ ★入れるには 字を 10.5px より 下げる しか なく、★★社長の お決めと ぶつかります。
      ★ ★★→ ★**せまい 10画面は 1pxも 触って いません**【★実測：★前と 後で 数が ぴったり 同じ】。
        ★ ★★そこでの 線は いまも「★この 右は ロボットの もの」を 言う しるし です（★T231 ③）。
   ════════════════════════════════════════════════════════════ */

@supports (width:1cqw) {
  @container (min-width:428px) {
    .me-band:has(.me-turn-l) .me-name { min-width:4em; }
    .me-band:has(.me-turn-l) .me-pt   { flex:1 1 0; }
    .me-band:has(.me-turn-l) .me-turn { flex:0 0 auto; }
  }
}

/* ════════════════════════════════════════════════════════════
   ★★★★ T240-2 ―― ★🎨アト ／ ★★せまい 10画面でも 赤線を 1本に ★★★★
   ------------------------------------------------------------
   ★★★ ★社長の お決め（2026-09-06・★T240 の 3つの 道から「3」）
     ★ ★「★★せまい 画面でも 赤線を そろえる。★★★字を 10.5px より 下げてよい」
     ★ ★★アイさんの 線：★★★8px を 下回るなら 手を止めて 返すこと。
     ★ ★★★→ ★下げた 先は **8.00px**（★下回って いません・→ ⑤の 表）。

   ★★★ ① ★★なぜ せまい 画面では そろわなかったのか（★★★形の 話 です）
     ★ ★★せまい 画面（★帯の 中身 428px 未満）の 帯は、★★左の 回数（`#meTurnL`）が 出ません。
       ★ ★★★＝ ★左は「あなた・点」の 2つ、★右は「ロボット・点・回数」の 3つ。
     ★ ★★線は `.me-name.bot` の 手前の すきまの まん中 に あります。★★そこを まん中に 置くには
       ★ ★★★**左の かたまりと 右の かたまりが 同じ はば** で なければ なりません
       ★ ★（★算しました：★5つの 子・4つの すきま でも 6つの 子・5つの すきま でも、
       ★ ★★条件は 1つ ―― ★★★左のかたまり ＝ 右のかたまり）。
     ★ ★★★右には 回数が ある ぶん、★左が **回数 ＋ すきま 1つ ぶん 足りません**。
       ★ ★★どんな `flex` の 割りふりでも これは 埋まりません
       ★ ★（★★のばす 割合を 決めても、★★★その式に 中身の はばが 残って しまう）。

   ★★★ ② ★★どう 直したか ―― ★★★「回数の 場所」を 左にも あける（★字は 出さない）
     ★ ★★・`.me-turn{ min-width:var(--obi-uw) }` … ★★回数の 器を **いつも 同じ はば** に する。
       ★ ★★★これで 回数が「1回目」でも「12回目」でも **線が 動きません**。
     ★ ★★・`.me-pt:not(.bot){ margin-right:calc(var(--obi-uw) + 8px) }`
       ★ ★★★… ★左の 点の あとに、★★**その 器 ＋ すきま 1つ** ぶんの 場所を あける。
       ★ ★ ＝ ★★左と 右が **かならず 同じ はば** に なります。
     ★ ★★・`.me-name{min-width:4em}`／`.me-pt{flex:1 1 0}` … ★T240 と 同じ（★広い 画面の 直しを
       ★ ★★せまい 画面にも 広げただけ。★★★新しい 考え方では ありません）。
     ⚠️★ ★★★`#meTurnL` は **せまい 画面では 出しません**（★★線 428px は 1文字も 触って いません）。
        ★ ★★出して しまえば 形は そろいますが、★★★それは 428px の 切りかえを 消す こと です。

   ★★★ ③ ★★`7.15` は どこから 来たか（★★★決め打ちの px では ありません）
     ★ ★★「12回目 / 12回」の はばを、★★16の 書体で **1px あたり** 数えました【★T240-2 A・実測】：
       ★ ★★・スタック（`--font-main`）の 11書体の いちばん 太いの … ★★**6.9653**（Meiryo）
       ★ ★★・BIZ UDPGothic（★いま この 機械が 出して いる）… ★6.9463
       ★ ★★・ヒラギノ丸ゴ ProN ／ M PLUS Rounded 1c ／ Noto Sans JP … ★6.279
       ★ ★★★→ ★**7.15** は いちばん 太い 6.9653 の **＋2.65%**。
     ★ ★★大きさで 1px あたりが 変わらない ことも 見ました（★8px でも 20px でも 同じ 値）。
     ⚠️★ ★★★MS Gothic（★スタックに 入って いません）だけ **7.3333**（★8px では 7.75）――
        ★ ★★もし 出たら 器から はみ出て 線が ずれます。★★★見張り ㉛-2 が 鳴ります。

   ★★★ ④ ★★字の 決め方 ―― ★★★T233 の `cqw` の まま、★かたむきを 変えただけ
     ★ ★★式は `max(8px, min(天井, a×cqw ＋ b))`。★★★`@media` の 決め打ちは **0本**。
     ★ ★★2つの 点を 通る まっすぐ です：
       ★ ★★・★帯の 中身 **282.891px**（★★実在の 底 568×272）で ―― ★名前 8 ／ 点 9.1 ／「点」8 ／ 回数 8
       ★ ★★・★帯の 中身 **428px**（★切りかえの 線）で ―― ★12.3775 ／ 19.804 ／ 10.892 ／ 11.882
     ★ ★★★なぜ この 2点か：★★要る はばも 使える はばも **どちらも はばに まっすぐ** なので、
       ★ ★★★のこりも まっすぐ に なります ―― ★★両はしを 押さえれば、★間は ぜんぶ 押さえられます。
       ★ ★★のこりは **1.50px**（★両はし とも）―― ★★★これは【計算】です（★§③の 1px あたりから）。
       ★ ★★★その 計算の 裏取り【★実測】：★★あふれ はじめるのは 帯の 中身 **277px** の ところ。
         ★ ★★実在の 底は **282.891px**（★568×272）―― ★★★5.9px 上 です
         ★ ★（★手を 入れる 前の あふれ はじめは 275px。★★2px ぶん だけ せまく なりました）。
     ★ ★★★428px より 上（★社長の 絵）は **1文字も 変えて いません**（★12.5 / 20 / 11 / 12 の まま）。

   ⚠️★★★ ⑤ ★★どこまで 下げたか【★実測・→ `logs/T240_2_計測どうぐ_アト/ato.json`】
      ★ ★★| 画面 | 中身 | 名前 | 点 | 「点」| 回数 | ★いちばん 小さい 字 |
      ★ ★★| 568×320・568×272 | 282.891 | 8.00 | 9.10 | 8.00 | 8.00 | ★★**8.00px** |
      ★ ★★| 320×568/480/454 | 290 | 8.21 | 9.62 | 8.14 | 8.19 | ★8.14px |
      ★ ★★| 667×375 | 338.328 | 9.67 | 13.19 | 9.11 | 9.48 | ★9.11px |
      ★ ★★| 375×812 | 339 | 9.69 | 13.24 | 9.12 | 9.50 | ★9.12px |
      ★ ★★| 390×844 | 354 | 10.15 | 14.35 | 9.42 | 9.90 | ★9.42px |
      ★ ★★| 736×414 | 376.969 | 10.84 | 16.04 | 9.88 | 10.52 | ★9.88px |
      ★ ★★| 812×375 | 419.516 | 12.12 | 19.18 | 10.72 | 11.66 | ★10.72px |
      ★ ★★| 844×390・926×428・PC | 428〜 | 12.5 | 20 | 11 | 12 | ★11px（★★前と 同じ）|
      ★ ★★★＝ ★★下がるのは **せまい 画面 だけ**。★★★8px を 下回りません。

   ⚠️★★★ ⑥ ★★💻コーダへ ―― ★★★verify.js の 決め打ちが **5か所** 合わなく なります
      ★ ★★どれも「★★床が 10.5 → 8 に 下がった」から です（★社長の お決め）。★★考え方は 1つも 変わりません。
      ★ ★★★**直した 写しを 作って、★★本当に 走らせて あります**（→ `logs/T240_2_計測どうぐ_アト/verify_patched.js`
        ★ ★／ ★作る 道具は `t2402i_patch.cjs`）。★★実測：★★★**NG 0 ／ わざと壊す 84 / 84**（★11画面＋底＋PC）。
      ★ ★①`T29.yuka = 10.5` → ★**8**
      ★ ★②㉒ の `if (t22.font[1] < 11)` → ★**< 8**（★★帯の 点の 床。★11px は 表の マスの 床 でした）
      ★ ★③(53) の なおしの 台（`HEAL28`）に 2行 足す
        ★ ★★（`.me-band .me-turn{min-width:0}` ／ `.me-band .me-pt:not(.bot){margin-right:0}`）
      ★ ★④(62) の 壊し方 `min(11px, 3.3333cqw)` → ★**`min(11px, 2.4cqw)`**（★8px の 床を 割る 値に）
      ★ ★⑤(63) の 壊し方 `font-size:8px` → ★**`7px`**（★8px は もう 床 そのもの）
      ★ ★★★`T29.sen = 428` は **そのまま**（★★私は 428px を 1文字も 触って いません）。
      ⚠️★ ★★直す 前は ―― ★NG **2〜3**（★★せまい 画面で 3）／★わざと壊す **72 / 73**。
         ★ ★★★どれも「見張りが 正しく 鳴って いる」姿 です。★★見張りを 黙らせる 直しでは ありません。

   ⚠️★★★ ⑦ ★★💻コーダが 私に 教えて くれた こと（★★★(57) が 鳴らなく なって いました）
      ★ ★★はじめ 私は `.me-pt` に `white-space:nowrap` を 付けて いません でした。
      ★ ★★★`flex:1 1 0` は 器を 縮められる ので、★足りなく なると 字が **黙って 折り返し**、
        ★ ★★帯の たけ 30px から たてに はみ出して **消えます**。
      ★ ★★★私の 数字では 見つかりません でした ―― ★★よこの あふれは **0 の まま** だから です。
      ★ ★★見つけたのは (57)「『点』を 4つに する」でした（★★私の 案では 鳴らなく なって いた）。
        ★ ★★→ ★`nowrap` を 付けて、★★足りない ときは **よこに あふれて 鳴る** 形に しました。
      ★ ★★実測：★あふれ はじめ ―― ★前 中身 275px ／ ★いま 中身 **277px**（★★実在の 底 282.891px の 5.9px 下）。
   ════════════════════════════════════════════════════════════ */

@supports (width:1cqw) {
  /* ★★★ ① 字の 大きさ（★はばから まっすぐ。★下は 8px で 止める）★★★ */
  .me-band {
    --obi-n : max(8px, min(12.5px, calc(3.01669cqw - 0.53393px)));
    --obi-p : max(8px, min(20px,   calc(7.37650cqw - 11.76767px)));
    --obi-t : max(8px, min(11px,   calc(1.99312cqw + 2.36169px)));
    --obi-u : max(8px, min(12px,   calc(2.67556cqw + 0.43095px)));
    --obi-uw: calc(var(--obi-u) * 7.15);   /* ★ 回数の 器（★いつも 同じ はば）*/
  }
  .me-name      { font-size:var(--obi-n); min-width:4em; }
  /* ⚠️★★★ `white-space:nowrap` を 忘れない こと ―― ★★★これが 無いと **黙って 折り返します** ★★★
     ★ ★★`.me-name` と `.me-turn` には もとから 付いて いますが、★`.me-pt` には ありません でした。
     ★ ★★★`flex:1 1 0` は 器を 縮められる ので、★★足りなく なると「345」と「点」の あいだで 折れます。
       ★ ★★帯は たけ 30px の まま なので、★★★折れた 字は **たてに はみ出して 消えます**。
     ⚠️★ ★★★私は これを 自分の 数字では 見つけられません でした ―― ★★★横の あふれは **0** の まま
        ★ ★だから です（★折り返しは よこには あふれません）。★★見つけたのは 💻コーダの (57) でした
        ★ ★（★「点」を 4つに して 鳴らす 目 ―― ★★私の 案では **鳴らなく なって** いました）。
     ★ ★→ ★★折り返させない。★★★足りない ときは **よこに あふれて、見張りが 鳴る**ように します。 */
  .me-pt        { font-size:var(--obi-p); flex:1 1 0; white-space:nowrap; }
  .me-pt::after { font-size:var(--obi-t); }
  .me-turn      { font-size:var(--obi-u); flex:0 0 auto; min-width:var(--obi-uw); }

  /* ★★★ ② 左にも「回数の 場所」を あける（★字は 出さない）★★★ */
  .me-pt:not(.bot) { margin-right:calc(var(--obi-uw) + 8px); }
  /* ★ 器（#meTurnL）が 抜けた 日も、★★左右は そろった ままに する（★T237 の 仮の 形を 上書き）*/
  .me-band:not(:has(.me-turn-l)) .me-pt:not(.bot) { flex:1 1 0; }

  /* ★★★ ③ 社長の 絵（★428px より 上）は **前と 1文字も 同じ** ★★★ */
  @container (min-width:428px) {
    .me-band:has(.me-turn-l) .me-name      { font-size:12.5px; }
    .me-band:has(.me-turn-l) .me-pt        { font-size:20px; }
    .me-band:has(.me-turn-l) .me-pt::after { font-size:11px; }
    .me-band:has(.me-turn-l) .me-turn      { font-size:12px; min-width:0; }
    .me-band:has(.me-turn-l) .me-pt:not(.bot) { margin-right:0; }
  }
}