/* ============================================================
   ページワン ― 見た目（T152・コーダ）
   ------------------------------------------------------------
   ★ ここは「中身が 動く 形」までです。★仕上げは 🎨アト。
   ★ 既存16本と 同じ 色・同じ 部品の 名前で 書いて あるので、
     ★アトは いつもの ように 上から 直せます。

   ★★★ この 1本の 決まりごと（★アトへ・ここだけは 動かさないで ください）★★★
     ------------------------------------------------------------
     ① ★★強調は **1種類だけ** ―― ★`.card.is-dim`（出せない 札を 暗くする）。
        ★ ★光り（ぼかしの 太い 影・わく・色の 反転）を 足したら、★verify ④ が 鳴ります。
        ★ ★これは 設計図 §5.5「1画面に 強調は 1種類まで」そのもの です。
     ② ★★`.card` に `:hover` を 足さない ―― ★指の 端末で こびりつきます。
     ③ ★★札の 比は 419:635。★はば・たけは JS が --cw / --ch に 入れます。★上書きしない。
     ④ ★★結果の 箱は 100px 以下（--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;

  /* ★ 台の 色（★やわらかい みどり。★黒・こい グレーは 使わない ―― 設計図 §9.5）*/
  --felt:      #CFEDE4;
  --felt-in:   #E7F6F1;
  --felt-line: #A9DACB;

  /* ★ マークの 色（★8で 決めた マークの しるし）*/
  --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:    42px;
  --ch:    64px;
  --bw:    22px;
  --bh:    33px;
  --gap:    3px;
  /* ★★ T169：★`--happy` は 消しました（★盤の まん中の ネコが いなく なった ため）。
     ★ ★上の 帯の ネコの 大きさは `.talk .happy-cat` が 数で 持って います（48／64px）。 */
  --result-max:100px;
}

* { 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行**でした（実測）：
     ★ `.app-shell { max-width:1000px; margin:0 auto; }`
     ★ ★左右の あき … 1512×945 で **106px**／1920×1080 で **310px**（★実測）。
   ★★ ページワンは これが **1行も 無く**、★どの 画面でも 左右の あきは **0px** でした。
   ★★ 大富豪と 1つだけ 変えた ところ（★理由つき・社長が 決められる ように 書きます）：
     ★ ★大富豪は 1180px 以上で `max-width:1300px` に 広げます ―― ★あれは
       ★★**札を 大きく する ため**の 決まりで、★おかげで **1280×900 では 左右の あきが 0px** です（実測）。
     ★ ★ページワンの 札は もともと 100px で 頭打ち（core の W_MAX）なので、★広げる 理由が ありません。
       ★★だから 1000px の まま に しました ―― ★★1280×900 で 左右 **140px ずつ**（★大富豪は 0px）。
     ★ ★★札は 1pxも 小さく なりません：★7枚 ＋ すきま ＝ 736px 要る のに たいして、
       ★1000px の 中は **988px**（★252px あまる）。→ ★実測は 作業メモ §5。 */
.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` です（★16本で 同じ 名前を 使って います）。
   ★★ しぼらずに `.back { … }` と 書くと、★★52枚 ぜんぶの うら面に
      ★padding・角丸・影・そして **min-width:44px** が かかります。
   ★★ 私は 実際に これを やりました【T152・私の 失敗】 ――
      ★ロボットの 札（29px はば）の うら面だけが **44px** に なり、
      ★★fitTest の「押す ところが 画面外」が 60件 鳴って 気づきました。
      ★ 見た目は `.card-in { overflow:hidden }` が 隠して いたので、
        ★★目では 1つも 分かりませんでした。★見張りが 見つけました。 */
.topbar .back {
  display:flex; align-items:center; gap:2px; min-height:44px; padding:0 12px;
  border-radius:999px; background:var(--white); color:#5a7a8c;
  font-size:12.5px; font-weight:900; text-decoration:none;
  box-shadow:0 2px 0 #cfe4ea;
}
.brand { flex:1 1 auto; display:flex; align-items:center; justify-content:center; gap:6px; min-width:0; }
.brand-cat { width:30px; height:23px; flex:0 0 auto; }
.brand span { font-weight:900; font-size:16px; color:#3f5a70; white-space:nowrap; }
.howto {
  min-height:44px; padding:0 12px; border:0; border-radius:999px;
  background:var(--gold-soft); color:#8a6420; font-size:12.5px; font-weight:900;
  box-shadow:0 2px 0 #e0c25f; cursor:pointer; font-family:inherit;
}
@media (max-width:520px) {
  .topbar .back span { display:none; }
  .topbar .back { padding:0 11px; min-width:44px; justify-content:center; }
  .howto { padding:0 10px; font-size:12px; }
  .brand span { font-size:15px; }
}
@media (max-width:360px) {
  .app-shell { gap:5px; }
  .brand-cat { display:none; }
  .brand span { font-size:13px; }
}
@media (max-width:340px) { .app-shell { padding:6px 3px; } }

/* ★★★ T275 ―「↻ やめる」の 型（★アト T273 §2 の 型・★設計図 追記⑩）★★★
   ------------------------------------------------------------
   ★ 置き場所 … 上の帯の いちばん 右（★盤にも 札にも かぶらない 足場）
   ★ 大きさ  … ★指の的 44×44 を 本当に 取る。
                ★「見た目 32px ＋ 見えない 的 44px」は 下の 箱に 上書きされて
                ★効きません（★T273 §6 実測 36〜42px）。★箱そのものを 44px に する。
   ★ 返す margin … ★この本の 上の帯の たけは **44px**【T275 実測】。
                ★44 − 44 = **0** ―― ★返しは 要りません（★帯も 器も 1pxも 動かない）。
   ★ 色      … うすみどり（★20本の 帯で 唯一 空いていた 色・★T273 §2 実測）
   ★ z-index … ★飾りでは ない。★これが 無いと あとから 来る 兄弟に
                ★下ばりを 上書きされ、指の的が 36〜42px に 減ります（★T273 §4-1）。
   ------------------------------------------------------------ */
.quit-btn{
  position:relative; z-index:2;
  order:99; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px; padding:0 10px;
  margin-bottom:0;
  font-family:inherit; font-size:11.5px; font-weight:900; line-height:1;
  color:#22633F; background:#B7EDC9;
  border:3px solid #2F7D4C; border-radius:999px;
  white-space:nowrap; cursor:pointer;
}
.quit-btn .quit-icon{ margin-right:4px; }
/* ★★ T281 ― ★↻ を 字では なく **絵（インラインSVG）**で 描く（★アトの 型・T279）★★
   ★ わけ：★`↻` の 形を 決めて いるのは ★その端末の フォントで、★私たちには 直せません。
     ★★実測：★字の ときは **9.77×11.5px**で、★★やじりが **1画素も 出て いません**でした。
   ★ ★外部フォント 0・画像ファイル 0・通信 0（★SVG は HTML の 中）。
   ★ ★`display:none` の 決まりは そのまま 効きます（★下の @media は 1行も 触って いません）。 */
.quit-btn svg.quit-icon { width:16px; height:16px; flex:0 0 auto; pointer-events:none; }
.quit-btn .qi-arc { fill:none; stroke:currentColor; stroke-width:3.2; stroke-linecap:round; }
.quit-btn .qi-tip { fill:currentColor; stroke:none; }
/* ★ せまい 画面（はば 374px 以下）は 字を 1段 下げ、★↻ を 落とす（★T273 §2）*/
@media (max-width:374px){
  .quit-btn{ font-size:10.5px; padding:0 5px; }
  .quit-btn .quit-icon{ display:none; }
}



/* ── はじめの 画面 ───────────────────────── */
/* ⚠️★★★ T160 ―― ★★はみ出したら **スクロールで 届く** ように する ★★★
   ------------------------------------------------------------
   ★ トライの 実測（T153 🟡-2 → T159）：★★320×568 で ○✕ を ひらくと
     ★★**5行目「A＝もう1回」が 押せない。★★スクロールしても 届かない。**
     ★横向き（812×375）では **5つの うち 4つ**が 届きません。
   ★ ★★正体は 2つ 重なって いました【実測・T160】：
     ★ ★① `.rule-fold` は flex の 子 ―― ★★**初期値で ちぢみます**（flex-shrink:1）。
       ★ ★そこへ `overflow:hidden`（★角丸の ため）が かかって いる ので、
       ★ ★★**ちぢんだ ぶんの 中身が、そのまま 切り落とされて いました**
       ★ ★（★320×568 の 実測：★要る 313px ／ 出て いる **276px**）。
       ★ ★＝ ★中身が はみ出して いない ので、★★titleScreen は「スクロールする 必要なし」と 見ます
         （★実測：★scrollHeight 507px ＝ clientHeight 507px。★scrollTop は 0 の まま）。
     ★ ★② かりに ①を 直しても、★`justify-content:center` の ままだと
       ★ ★★**はみ出しは 上下に 半分ずつ 出ます。★上に 出た ぶんは scrollTop が 負に できず 届きません。**
   ★ ★→ ★★**①は `flex:0 0 auto`（ちぢませない）。★②は「入る ときだけ まん中」に する。**
     ★ ★②の 形は ―― ★`justify-content:flex-start` に して、
       ★ ★**いちばん 上と いちばん 下の 子に `margin:auto`** を 置きます。
       ★ ★flex の auto余白は **余りが ある ときだけ** 広がり、★★足りない ときは 0 に なる ――
       ★ ★★＝「入る ときは まん中・はみ出す ときは 上から」が 1つの 形で 書けます。
   ★ ★★見た目は 1pxも 変わりません（★入る 画面では 前と 同じ まん中ぞろえ）。→ ★実測は 作業メモ §4 */
.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）を そのまま 持ちこむ ★★★
   ------------------------------------------------------------
   ★ 数字は ぜんぶ 大富豪の 実測値です（★私の 好みで 作って いません）：
     ★ 大画面 … 白・わく 5px（うすい ピンク）・角 30px・内よはく 26/24/24・はば min(560px,100%)
     ★ 320px級 … わく 4px・角 24px・内よはく 22/15/20
   ★★ `flex:0 0 auto` は T160 の 決まり（★ちぢませない）。★囲いに 移しました。 */
.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文字で 60px。★ページワンは 5文字 なので、★囲いの はばに 合わせて 詰めます
     （★実測：320px級 の 囲いの 中は 270px ―― ★46px×5字＝230px で 40px あまる）。 */
.start-card h1 {
  margin:4px 0 0; font-size:54px; font-weight:900; letter-spacing:2px; line-height:1.1;
  color:#5a9d72; text-shadow:0 4px #285e46, 0 7px #e3ffd7;
}
.intro { margin:6px 0 16px; font-size:17px; font-weight:700; color:#5a4a63; }

/* ★★ ハッピー（★大富豪と 同じ ならび）★★
   ⚠️ ★`.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); }

/* ★★ 特別な 札の ○✕（★2本目の 例外・社長裁定 2026-08-28）★★
   ★ たたんで あります ―― ★何も 触らずに「はじめる ▶」を 押せる 形（設計図 §5.5-②）。
   ★★ T162：★囲いの 中の **ふつうの ブロック**に なりました ――
      ★T160 が つぶした「flex で ちぢんで 中身が 切り落とされる」は もう 起きません
      （★flex の 子では ないので、★flex-shrink が そもそも 効きません）。 */
.rule-fold {
  flex:0 0 auto;                      /* ★★ T160：★ちぢませない（★念のため 残す）*/
  width:100%; margin-top:14px; text-align:left;
}
/* ★ 見出しの ピル ―― ★大富豪の `.rule-fold > summary` と 同じ（★色・角・影も 同じ）*/
.rule-fold > summary {
  list-style:none; cursor:pointer; min-height:44px; display:flex; align-items:center; gap:6px;
  padding:0 14px; border-radius:14px; background:var(--pink-soft);
  font-size:14px; font-weight:900; color:var(--pink-dark);
  box-shadow:0 3px 0 #F3C9DE;
}
.rule-fold > summary::-webkit-details-marker { display:none; }
.rule-fold > summary b { font-weight:700; color:#96788a; font-size:12px; }
.rule-list { margin-top:10px; display:flex; flex-direction:column; gap:4px; }
.rule-row {
  display:grid; grid-template-columns:auto 1fr; gap:2px 8px; align-items:center;
  min-height:44px; padding:5px 8px; border-radius:12px; background:#FEFBFF;
  box-shadow:inset 0 0 0 2px #EFE6F2; cursor:pointer;
}
/* ★ ONの ものだけ 背が つく ＝ いくつ ONか ひとめで 分かる（★大富豪と 同じ 見せ方）*/
.rule-row:has(input:checked) { background:#FFF0F7; box-shadow:inset 0 0 0 2px #FFD3E5; }
.rule-row input { width:22px; height:22px; accent-color:var(--pink-deep); margin:0; }
.rule-name { font-size:13.5px; font-weight:900; color:#5a4a63; }
.rule-desc { grid-column:2; font-size:11px; font-weight:700; color:#8b7d92; line-height:1.4; }

/* ★★★ T162① ―― ★★はじめる の ボタン（★大富豪と 同じ 手ざわり）★★★
   ★ 大富豪の 実測：★はば ＝ 囲いの 中 いっぱい・字 21px（320px級 19px）・
     ★わく 白 4px・角 50px・内よはく 12/26/10・影 0 7px 0（押すと 4px 沈む）。
   ★★ 直す前の ページワンは **172px 固定**でした ―― ★中身の はばで 決まって いた ため。
      ★ ★`width:100%` に した ので、★囲いが 育つと ボタンも いっしょに 育ちます。 */
.start-button {
  margin-top:20px; 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行）――
   ★ これが 無いと「人の 勝／ち。」の ように、★★ことばの まん中で 折れます【★実測・320×568】。 */
.intro, .rule-desc, .rule-name, .rule-fold > summary, .mascot .bubble, .help-list li { word-break:auto-phrase; }

/* ★★ せまい 画面の 囲い（★大富豪の @media (max-width:650px) の 実測値 そのまま）★★
   ★ わく 5→4px・角 30→24px・内よはく 26/24/24 → 22/15/20・見出し 60→46px・ボタンの 字 21→19px
   ⚠️★★ この かたまりは **`.start-card` の 決まりより 後ろ**に 置く こと ―― ★私は はじめ
      ★上の帯の となりに 置いて しまい、★★同じ 強さでは 後ろが 勝つ ので **1つも 効きません でした**。
      ★ ★写真で 見つけました（★T162_写真：★320×568 で 見出しが「ページワ／ン」と 2行に 折れた）。 */
@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: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; }
  .rule-fold > summary { font-size:13px; padding:0 12px; }
  .rule-name { font-size:13px; }
  .rule-desc { font-size:10.5px; }
}
/* ★ 320px級 ―― ★見出しは 5文字 なので、★1行に 収まる ところまで 詰める
     （★実測：囲いの 中 274px ／ 42px × 5字 ＋ 字間 4px ＝ 214px。★60px あまる）*/
@media (max-width:340px) {
  .start-card { padding:18px 12px 16px; }
  .start-card h1 { font-size:42px; }
  .mascot { margin-top:12px; }
}

/* ★★★ T213-2① ―― ★★たけの みじかい 画面で、★ハッピーに 会える ように する ★★★
   ------------------------------------------------------------
   ★★ 何が 起きて いたか（★実測・T213-2 §1）★★
      ★ ★320×480 … ★★ハッピーが **下に 38.4px 切れて** いました（★かおも 名前も 出ない）。
        ★ ★★T211-3 で 箱が 1つ（44px）増えた ぶん で、★ちょうど 押し出されて いました
          （★箱が 1つの ころは **18.8px あまって 見えて いました**【トライ実測】）。
      ★ ★320×568 は 0px 切れ ―― ★★もともと 見えて います。★★だから **触りません**。

   ★★ なぜ `max-height:520px` で しぼるのか ★★
      ★ ★★320×568（**568px**）・375×812・1512×945 には **1つも かかりません**。
      ★ ★かかるのは 320×480（480px）と 横向き（375px）だけ ――
        ★ ★★どちらも「はじめの 画面が たてに 足りない」画面 です。
      ★ ★トライが「4画面 とも 1ビットまで 同一」を 確かめた 基準を 崩さない ため、
        ★ ★★**たけ 520px を こえる 画面には 手が 届かない 形**で 書いて います。

   ★★ 詰めた ところ（★ぜんぶ **すきま**。★字は 1つも 小さく して いません）★★
      ★ ① はじめの 画面の 内よはく 上下  6 →  2px … ★−8px
      ★ ② 囲い と ハッピーの あいだ     10 →  6px … ★−4px
      ★ ③ 囲いの 内よはく 上           18 → 12px … ★−6px
      ★ ④ 囲いの 内よはく 下           16 → 12px … ★−4px
      ★ ⑤「先に 手札を…」の 上あき      5 →  4px … ★−1px
      ★ ⑥ 説明 → 箱① の あき          14 →  8px … ★−6px
      ★ ⑦ 箱① → 箱② の あき           14 →  8px … ★−6px
      ★ ⑧ 箱② → ボタンの あき          20 → 12px … ★−8px
      ★ ⑨ ボタンの 内よはく 上下      12/10 → 9/8px … ★−3px（★`min-height:58px` に 当たって 止まる ぶん）
      ★ ⑩ 囲い → ハッピーの 上あき     12 →  6px … ★−6px
      ★ ⑪ ふきだし の 下あき           12 →  8px … ★−4px
      ★ ⑫ 「ハッピー」の 名前の 上あき   2 →  0px … ★−2px
      ★ ★★合わせて **−55px**。★要ったのは 38.4px です。
   ⚠️★★ ただし ―― ★★**余った ぶんの 半分しか 下には 来ません**。
      ★ ★`.title-screen` は 入る ように なると **上下 まん中ぞろえ**に 戻る ので、
        ★ ★★詰めた ぶんは **上と 下に 半分ずつ** 配られます（★T160 の しかけ）。
      ★ ★★実測（★足し算の 見込みでは なく、★直した あとに 測り直した 値）：
        ★ ★★はみ出し **44px → 0px**／ハッピーの 下ばしまで **あと 9px**（★ゆとりは 18px）／
          ★ ★「はじめる」の あまり **109.8px → 137px**。

   ⚠️★★ 触って いない もの ★★
      ★ ★押す ところ … ★summary 2つ(44px)・○✕ の 行(44px)・ボタン(58px) は **1pxも** 触って いません
        （★⑨は **内よはく**だけ。★`min-height:58px` に 当たって 止まる ので たけは 変わりません）
      ★ ★★字の 大きさ … ★★**1つも 変えて いません**（★見出し 42px も そのまま。★T123・T139 の 線）
      ★ ★ハッピーの かお … ★64×49 の まま（★小さく して いません）
   ⚠️★★ この かたまりは **下の `@media (max-height:430px)` より 前**に 置く こと ――
      ★ ★同じ 強さでは **後ろが 勝つ**。★横向きの 数字（T213）を 上書きして しまいます。 */
@media (max-height:520px) {
  .title-screen { padding:2px 4px; gap:6px; }
  .start-card   { padding-top:12px; padding-bottom:12px; }
  .intro        { margin-top:4px; margin-bottom:8px; }
  .rule-fold    { margin-top:8px; }
  .start-button { margin-top:12px; padding:9px 26px 8px; }
  .mascot       { margin-top:6px; }
  .mascot .bubble { margin-bottom:8px; }
  .cat-name     { margin-top:0; }
}

/* ★★★ T213 ―― ★★横向き（たけの 低い 画面）だけ、はじめの 画面を 詰める ★★★
   ------------------------------------------------------------
   ★★ 何が 起きたか：★T211-3 で たたむ 箱が 1つ 増え（★「札が ないときの 決まり」）、
      ★はじめの 画面が たてに のびました。★★812×375（横向き）で
      ★★「はじめる ▶」の 下ばしが **画面の 30.4px 下**に 出ました【★実測・T213 §1】。
      ★ ★上下が 切れて いた わけでは ありません ―― ★指で 動かせば 出ます。
        ★ ★でも 前は 動かさずに 見えて いました。★★そこへ 戻します。

   ⚠️★★ なぜ `max-height` で しぼるのか（★ここが この 直しの 芯です）★★
      ★ ★★812×375 は **はば 812px** ―― ★`@media (max-width:650px)` の 外側です。
        ★ ★だから 横向きの 画面だけが **大画面用の 大きい 数字**（★見出し 54px・
          ★内よはく 26/24）を 使って いました。★★これが 30px の 正体です。
      ★ ★`max-height:430px` は ―― ★320×568（568px）・320×480（**480px**）の
        ★ ★**どちらにも 1つも かかりません**。★★たての 2画面は 1pxも 動きません
          （★実測で 前後 くらべずみ ―― ★作業メモ §3）。
      ★ ★この 会社で いちばん よくある 失敗が「★横向きを 直して たてを 壊す」なので、
        ★ ★★はじめから **たてに 触れない 形**で 書いて います。

   ★★ 詰めた ところと 量（★ぜんぶ **すきま**です。★→ 作業メモ §2 の 表）★★
      ★ ① 囲いの 内よはく 上   26 → 14px … ★−12px
      ★ ② 見出し「ページワン」 54 → 44px … ★−11px（★たけ 59.4 → 48.4）
      ★ ③ 見出しの 上あき       4 →  2px … ★ −2px
      ★ ④「先に 手札を…」の 上  6 →  4px … ★ −2px
      ★ ⑤ 説明 → 箱① の あき  16 → 12px … ★ −4px
      ★ ⑥ 箱① → 箱② の あき   14 → 10px … ★ −4px
      ★ ⑦ 箱② → ボタンの あき  20 → 12px … ★ −8px
      ★ ★★合わせて **−45px**。★★要るのは 30.4px なので、★14.6px の 余りが 出ます。
      ★ ★★（★下の 内よはくも 24 → 14px。★これは ボタンの 見え方には 効きませんが、
         ★ ★はみ出し ぜんたいを 213 → 148px に 減らします）

   ★★ 触って いない もの（★わざと 残した もの）★★
      ★ ★押す ところの 44px … ★summary 2つ・○✕ の 行・ボタン(63px) は **1pxも** 触って いません
        （★T182 の「わくを 太らせると 的が 痩せる」を くり返さない ため、★わくも 太らせて いません）
      ★ ★ハッピー … ★消して いません。★大きさも 前の まま（76×58）。
        ★ ★（★横向きでは 前から ボタンの さらに 下 ―― ★動かさないと 見えない のは 直す前と 同じ）
      ★ ★あそびかたの 3行 … ★別の ダイアログ なので、★この かたまりは かすりも しません */
@media (max-height:430px) {
  .title-screen { padding:4px 4px; gap:8px; }
  /* ★左右の 24px は そのまま ―― ★詰めたのは **たて だけ**。
     ★★T213-2：★14 → 10px（★−8px）。★ハッピーが よこへ 抜けた ので、
       ★ ★★横向きの はみ出しが **8px → 0px** に なります（★囲いの 下の かどが 切れなく なる）。 */
  .start-card   { padding:10px 24px; }
  .start-card h1 { font-size:44px; margin-top:2px; letter-spacing:1px; }
  .intro        { margin:4px 0 12px; }
  .rule-fold    { margin-top:10px; }
  .start-button { margin-top:12px; }
  .mascot       { margin-top:10px; }
}

/* ★★★ T213-2② ―― ★★横向きは ハッピーを 囲いの **よこ** に 置く ★★★
   ------------------------------------------------------------
   ★★ なぜ 320×480 と 別の 形に したのか（★社長の 問い「1つの形で 両方 直すか」への 答え）★★
      ★ ★★空いて いる **向きが 逆**だから です。★数字を 並べます【実測・T213-2 §1】：

        | 画面      | ★よこの あき | ★たての はみ出し |
        |-----------|-------------|-----------------|
        | 320×480   | ★★**8px**   | ★44px           |
        | 812×375   | ★★**240px** | ★148px          |

      ★ ★320×480 は **よこに 8px しか 空いて いません**。★★ここで よこ置きを すると
        ★ ★囲いが 220px まで 痩せます ―― ★★見出しも ボタンも ○✕ も 壊れます。
        ★ ★→ ★★たてを 詰める しか ない（★T213-2①）。
      ★ ★812×375 は **たてが 0px**（★囲い 309.4px ＝ 画面 309px）で、★よこが 240px 空いて いる。
        ★ ★→ ★★よこに 置く しか ない。★たてを これ以上 詰めると 字が 小さく なります。
      ★ ★★＝「1つの 形」に すると、★★どちらかが 必ず 壊れます。★別々に します。

   ★★ これで たての ならびから ハッピーが **抜けます**（★121px ＋ あき）――
      ★ ★★だから T213 の「はじめる の あまり 14.6px」は **1pxも 減りません**（★§2 で 前後 実測）。

   ⚠️★★ `min-width:600px` が 要る 理由 ★★
      ★ ★たけが 低くても はばが 無い 画面（★例：480×400）で よこ置きに すると、
        ★ ★★上の 320×480 と 同じ こと（囲いが 痩せる）が 起きます。★はばで しぼります。
      ★ ★600px なら … ★中は 592px。★囲い 0 1 560px は **ちぢめる** ので
        ★ ★★592 − 12(あき) − 200(ハッピー) ＝ **380px** まで 下がって 収まります。
        ★ ★★横スクロールは 出ません（★§2 で 4画面 実測 0）。

   ⚠️★★ T160 の しかけを 壊さない ための 2行 ★★
      ★ ★`.title-screen > :first-child{margin-top:auto}` / `:last-child{margin-bottom:auto}` は
        ★ ★たてならび用の しかけ（★入る ときは まん中・はみ出す ときは 上から）。
      ★ ★★よこならびに すると、★これが **たて方向の 寄せ**に 化けて、
        ★ ★★囲いが **画面の 下**に 押しつけられます（★私が 1回 やりました）。
      ★ ★→ ★★どちらも 0 に もどして、★`align-items:safe center` に 任せます。
        ★ ★★`safe` は「入る ときは まん中・はみ出す ときは 上から」―― ★T160 と **同じ 意味**です。
        ★ ★（★これが 効かない ブラウザでは 上ぞろえに なる ＝ ★はみ出しは 下に 出る ＝ ★指で 届く）*/
@media (max-height:430px) and (min-width:600px) {
  .title-screen { flex-direction:row; align-items:safe center; justify-content:center; gap:12px; }
  .title-screen > :first-child { margin-top:0; }
  .title-screen > :last-child  { margin-bottom:0; }
  .start-card { flex:0 1 560px; width:auto; min-width:0; }
  .mascot     { flex:0 1 200px; min-width:0; margin-top:0; }
}

/* ── 遊ぶ 画面 ──────────────────────────── */
/* ★★ T169：★`column` を 足しました ―― ★上に ハッピーの 帯、下に 盤（`.stage`）の 2段。
   ★ ★（★T162 まで 子は `.stage` 1つ だけ だったので、★向きが 要りませんでした）
   ⚠️★★ `position:relative` も **必ず** 要ります ―― ★★私は これを 1回 忘れました【T169・実測】。
      ★ ★横向きでは 帯を `position:absolute` で 浮かせます。★ここが positioned で ないと、
        ★ ★ブラウザは **画面ぜんたい** を 親に 選び、★帯の top:0 が **窓の てっぺん** に なります。
      ★ ★★実測：★ひとことが 142px（★台の 上ばし ＝ 直す前と 同じ 場所）から
        ★★**84px**（★ロボットの 札の 上）へ **58px 上に 飛びました**。
      ★ ★見つけた 目：★`t169_yoko.cjs` で 帯の 上を 直に 読んだ ら **0**（★盤の 上は 58）でした。 */
.play-screen { position:relative; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }

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

   | ★写した もの      | ★大富豪【実測】                    | ★ページワン（ここ）  |
   |--------------------|------------------------------------|----------------------|
   | ネコの 器の はば   | 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行**【実測】―― ★18px の まま 写すと
       ★★しっぽの 先（36px）が ふきだし（32px）から 4px 下に はみ出します。
     ★ → ★★まん中ぞろえ（`top:calc(50% - 9px)`）。★★大きさは 1pxも 変えて いません。

   ⚠️★★ たけは **数で 書く**（★`height:auto` に しない）★★ ―― ★T167 §2 回り道③【実測】
     ★ ★`<svg class="happy-cat">` には viewBox が ありません（★中身は `<use>` で 呼ぶ だけ）。
       ★ ★大きさの 手がかりが 無いので、★ブラウザは SVG の 決まりの **150px** を たけに 使い、
         ★★ハーツでは 盤が 150px 短く なり、★320×480 の 札が 39 → **23px** に 縮みました。
     ★ → ★★48 × 112/150 ＝ 35.84 → **36px** ／ 64 × 112/150 ＝ 47.79 → **48px**。
   ============================================================ */
.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; }
/* ★ 名札は 流れの 中（★大富豪は 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; white-space:nowrap;
}
/* ★ しっぽは 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）★★
   ------------------------------------------------------------
   ★ ★なぜ 並びに 置けないか【実測】：★横向きの 盤は **309px**、★必要な たては **307px**
     ―― ★★余りは **2px** しか ありません（★すきまは すでに 下ばりの 8px）。
     ★ ★帯（57px）を 並びに 入れると、★★札が **66px → 51px** まで 縮みます。
       ★ ★★66px は T162 で 社長に 見て いただいた 数字 です。★動かしません。
   ★ → ★★ネコは 出さず（★横向きは 直す前から 出て いません ―― ★`geo.happyShow` が false）、
     ★ ★ひとことだけを **直す前と 同じ 場所**（★台の 上ばし）に 浮かべます（★たけ 0）。
   ★ ★上ばしの y は JS が 入れます（`layout()` の `flat`）―― ★台の 位置は 札の たけで
     ★ 決まる ので、★CSS だけでは 書けません。
   ⚠️★ ★T167（ハーツ）で 私は ここを `display:none` と 書き、★★横向きで ひとことを
      ★ **まるごと 消しました**。★★同じ 失敗を くり返さない ように、★ここは 消さずに 浮かせます。
   ============================================================ */
@media (max-height:430px) {
  .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:96%;
    padding:4px 12px; border:0; border-radius:999px;
    background:var(--white); color:#5a4a63; font-size:11.5px; font-weight:900;
    line-height:normal;
    box-shadow:0 2px 0 #e6dcc9; white-space:nowrap;
  }
  .talk .banner::before, .talk .banner::after { display:none; }
}
/* ★★★ T162② ―― ★★器の 色を「みどり」から「うすい クリーム」に 戻しました ★★★
   ★ 理由：★みどりの 上に みどりの 台を 置くと、★★台が 見えません
     ―― ★★社長の「どれが "場" なのか 分かる ように」が 成り立ちません。
   ★ 大富豪も 同じ 作りです：★★ページは クリーム（#fff7e8）、★台だけが みどり。
   ★ ★みどりを 1色 減らした ぶん、★台の みどりが 画面で ただ 1つの みどりに なります。 */
.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② ―― ★★場の 台（★大富豪の `.table-wrap` を そのまま 写した もの）★★★
   ------------------------------------------------------------
   ★ 木の わく（外）＋ みどりの ラシャ（中）の 2枚がさね。★色・柄・影は 大富豪の 実測値 そのまま。
   ★★ 大きさは JS が 入れます（--felt-bd / --felt-pad / --felt-in ／ top と height）――
      ★ 理由：★台の たては「札の たけ」で 決まる のに、★札の たけは
        ★★画面の たてで 決まる（core の pickLayout）から です。
   ⚠️★ **指は 1つも 当たりません**（pointer-events:none）。★飾りの 1枚 です。
   ⚠️★ 影は `0 6px 0`（★ぼかし 0）―― ★verify ④ の「光り」には なりません
      （★そもそも セレクタに `.card` が 入って いないので 見張りの 対象外ですが、
        ★★中身でも 光らせて いない ことを ここに 書いて おきます）。 */
.felt-table {
  /* ★ 左右の あき ―― ★大富豪は 6px（320px級）／8px（375px級）【実測】。
     ★ ここは `.middle` の 内よはくの 箱いっぱい（＝ 器の はし）なので、★2px 分だけ 内に 入れて そろえます。 */
  position:absolute; left:2px; right:2px; 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; }
.bot { position:absolute; top:0; bottom:0; }
/* ★ ロボットの 名前 ―― ★T162 で 器が うすい クリームに なった ので、字を こく しました。
   ★ ★色の 濃さの 差（コントラスト比・【計算】・★下じきの 色から 出した もの）：
     ★ T162の 前 #5f8a7c ／ みどりの 器 #CFEDE4 … ★**3.05:1**（★もともと 足りて いません でした）
     ★ T162の 後 #5f8a7c ／ うすい 器 #E5F7F9 … ★3.48:1（★まだ 足りない）
     ★ ★いま  #3F6B5D ／ うすい 器 #E5F7F9 … ★★**5.44:1**（★4.5:1 の 線を こえます） */
.bot-name {
  position:absolute; left:0; right:0; bottom:0; text-align:center;
  font-size:10px; font-weight:900; color:#3F6B5D; line-height:14px;
}

.middle { position:absolute; left:0; right:0; pointer-events:none; }
/* ★★ T169：★ここに あった `.happy-spot`（★ネコを 盤の まん中に 大きく 置く）と
   ★ `.say`（★台の 上に 出る 小さな 丸い ふきだし）は **消しました**。
   ★ ★引っこし先は 上の 「ハッピーの 帯」（`.talk`）です。
   ★ ★★横向きの ときだけ、★`.talk .banner` が 直す前と 同じ 見た目・同じ 場所に 戻ります
     （→ ★上の `@media (max-height:430px)`）。 */

/* ★★ 8で 決めた マークの しるし（★場札が 8の ときだけ 出る・ルル §9）★★
   ★ これは **絵札では ありません**。★新しい 絵は 1枚も 足して いません。 */
.suit-now {
  position:absolute; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--white);
  box-shadow:0 2px 0 #cfe4ea; z-index:55;
  font-size:calc(var(--cw) * .34); font-weight:900; line-height:1;
}
.suit-now.m0, .suit-now.m3 { color:var(--m-black); }
.suit-now.m1, .suit-now.m2 { color:var(--m-red); }

/* ── 札 ─────────────────────────────────── */
.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),
             filter .16s ease, opacity .16s 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つの 強調 ―― ★出せない 札を 暗くする ★★★
   ★ 光らせません。★色も 変えません。★★引き算 だけ です（ルル §8-a）。
   ⚠️★ アトへ：★ここに 光りを 足すと、★verify ④ が すぐ 鳴ります。★足さないで ください。 */
.card.is-dim { filter:brightness(.62) saturate(.55); }

/* ★★ 山札の 場所の「空の わく」（T155・🔴-1）★★
   ★ 山札が 0枚に なっても、★ここを 押せば 引けます（★中で まぜ直します）。
   ★★ 大事：★opacity が 0 の ときも **指は ちゃんと 当たります**。
      ★ ＝ ★見た目だけを 出し入れして いて、★★押せるのは いつでも です。
   ⚠️★ アトへ：★ここに 光り（ぼかしの 影）を 足さないで ください（★verify ④ が 鳴ります）。 */
.card.is-slot {
  box-sizing:border-box; opacity:0; transition:opacity .18s ease;
  border-radius:calc(var(--cw) * .1);
  border:2px dashed rgba(120,140,160,.45);
  background:rgba(255,255,255,.30);
}
.card.is-slot.is-empty { opacity:1; }

/* ★ 出せない 所を 押した ―― ★ぷるっと ゆれる だけ（★「そこは ちがうよ」）*/
.card.is-no { animation:shakeNo .16s ease-in-out; }
@keyframes shakeNo {
  0%,100% { margin-left:0; } 25% { margin-left:-4px; } 75% { margin-left:4px; }
}
.cards.no-move .card { transition:none !important; }

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

/* ── ★★8の マーク選び（★この 1本の 芯。★絶対に 自動化しない）── */
.suit-pick {
  position:absolute; left:50%; top:50%; transform:translateX(-50%);
  z-index:80; padding:10px 12px; border-radius:18px;
  background:var(--white); box-shadow:0 4px 0 #dfe9e6, 0 0 0 3px var(--pink-soft);
  text-align:center;
}
.suit-pick-lead { margin:0 0 6px; font-size:13px; font-weight:900; color:#5a4a63; }
.suit-row { display:flex; gap:8px; }
.suit-btn {
  width:52px; height:52px; min-width:44px; min-height:44px;
  border:0; border-radius:14px; background:#f4faf8; cursor:pointer; font-family:inherit;
  font-size:26px; font-weight:900; line-height:1; box-shadow:0 3px 0 #d7e6e1;
  display:flex; align-items:center; justify-content:center;
}
.suit-btn:active { transform:translateY(2px); box-shadow:0 1px 0 #d7e6e1; }
.suit-btn.s0 b, .suit-btn.s3 b { color:var(--m-black); }
.suit-btn.s1 b, .suit-btn.s2 b { color:var(--m-red); }
@media (max-width:360px) { .suit-btn { width:46px; height:46px; font-size:22px; } }

/* ── ハッピーの うごき ──────────────────── */
@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; 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:26px; }
.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; white-space:nowrap; }
.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; }

/* ★★★ T276 ―― ★結果の 箱の「◀ ゲームを選ぶ」（★社長のお決め・2026-09-13）★★★
   ------------------------------------------------------------
   ★ ★行き先は `href="../"`（★ほかの 18本と 同じ ―― ★まとめサイトへ）。
   ★ ★★色は **白ぬき（わく線）**。★となりの 2つと 見分けが つく ように 3つとも ちがう 顔に します：
     ★ ★・「もう1回 ▶」  … ★ピンクで うめる
     ★ ★・「決まりを 変える」… ★うすみどりで うめる（#eaf3f1）
     ★ ★・★**「◀ ゲームを選ぶ」… 白ぬき ＋ わく線 2px**
   ★ ★★この 白ぬきは、★この本の 上の帯の「◀」と **同じ 顔**です（★同じ 行き先 だから）。
     ★ ★T273 §5 の 失敗（★大富豪で「やめる」と「◀」が 同じ 白・同じ 字色・同じ 丸みで
       ★ ★アトの目でも 見分けが つかなかった）を くり返さない ため、★わく線で 分けます。 */
.dialog-ok.home {
  background:var(--white); color:#5a7a8c;
  border:2px solid #cfe4ea; box-shadow:0 3px 0 #cfe4ea;
  white-space:nowrap;
}
.dialog-ok.home:active { box-shadow:0 1px 0 #cfe4ea; }
.dialog-ok.home b { font-weight:900; }

/* ★★ せまい 画面の 手当て ―― ★★足す前に 数えました【実測・T276】★★
   ★ 結果の 箱の 中の あき と、★3つが 要る はば：
   ┌─────────┬────────┬──────────────┬───────────────┐
   │ 画面        │ あき   │ 3つ 全部 字あり │ 3つめが「◀」だけ │
   ├─────────┼────────┼──────────────┼───────────────┤
   │ 320（3画面）│ 276px  │ 349.7 ★−73.7  │ 263  ★+13.0   │
   │ 375×812     │ 329px  │ 349.7 ★−20.7  │ 263  ★+66.0   │
   │ 390×844     │ 343px  │ 349.7 ★−6.7   │ 263  ★+80.0   │
   │ 568〜926    │ 396px  │ 349.7 ★+46.3  │ 263  ★+133.0  │
   └─────────┴────────┴──────────────┴───────────────┘
   ★ →★①はば520px 以下は 内よはくを 14px → 8px（★3つで 36px 返る）
        ★ ★375 で 15.3px、★390 で 29.3px 残って **字が 全部 出ます**。
   ★ →★②はば374px 以下（★320の 3画面）だけ、★字を「◀」に たたむ。
        ★ ★★36px 返しても なお **37.7px 足りない** ので、★ここは たたむ しか ありません。
        ★ ★★これは この本の 上の帯が すでに やって いる こと（★`.topbar .back span` は 520px 以下で 消える）。
        ★ ★★★代金：★はば374px 以下では「ゲームを選ぶ」の 字が 消え、★「◀」だけ に なります
          ★ ★（★設計図 追記⑩ の「手当て」欄 そのもの ―― ★コネクトフォー ⑬⑭ と 同じ 形）。
   ⚠️★ 520 と 374 の 線は、★★追記⑥ の 11画面の どれも またぎません
      ★（★はばは 320／375／390／568／667／736／812／844／926 ―― ★374 は 320と375の 間、
        ★ ★520 は 390と568の 間）。 */
@media (max-width:520px) {
  .result-row .dialog-ok { padding:0 8px; }
}
/* ★★ ③ ―― ★★あきが いちばん 細いのは 375×812 でした【★実測】★★
   ★ ★内よはくを 8px に した だけだと、★★3つ とも 残りが **5.0〜5.6px** しか ありません。
   ★ ★★字の 3.6% です ―― ★★★字の かたちが ちがう 端末（★ヒラギノ丸ゴ が 入って いる iPhone など）
     ★ ★では 折れる かも しれません。★★私の PC 1台の 数字を「大丈夫」と 読んでは いけない。
   ★ →★はば440px 以下だけ 字を 14px → **13px**（★会社の 床 11px より 上）。
     ★ ★★これで 375 の 残りが **12.5px（★字の 9.0%）**に なります【★実測】。
   ⚠️★ 440 の 線も 11画面を またぎません（★390 と 568 の 間）。 */
@media (max-width:440px) {
  .result-row .dialog-ok { font-size:13px; }
}
@media (max-width:374px) {
  .result-row .dialog-ok.home span { display:none; }
  .result-row .dialog-ok.home { padding:0 10px; }
}
.result-box.is-locked .result-row { pointer-events:none; opacity:.4; }
.result-box.is-locked .dialog-ok { box-shadow:none; transform:translateY(3px); }

/* ── 遊び方 ─────────────────────────────── */
dialog#helpDialog {
  border:0; border-radius:20px; padding:16px 16px 14px; max-width:min(92vw, 420px);
  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.75; }
.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 ― はじめの 画面：★「はじめる ▶」と ハッピーが 画面の 下に 出て いた（★verify ㉑㉒・本物）★★★
   ------------------------------------------------------------
   ★ 直す前【★T367 verify・★T368 で 測り直し】：
     ★320×454 … ハッピーが 10px 下（★入れ物 393px／中身 405px）
     ★568×320 … はじめる 27px 下・ハッピー 160px 下／★568×272 … はじめる 75px 下・ハッピー 208px 下
     ★わけ：★よこ向きで ハッピーを よこに 置く 線（T213-2②）が **はば 600px 以上**。★568 は たてに 積んだ まま だった。
   ★ 直しかた（★字は 1つも 消さない・押す ところの 44px は 触らない）：
     ⑴ ★たて 470px 以下の たて向き（★320×454）… ★からっぽの すきまを 12px 集める（★ハッピーの 上 6→2・ふきだしの 下 8→4・はじめるの 上 12→8）
     ⑵ ★たて 330px 以下・はば 560px 以上の よこ向き（★568×320・568×272）… ★ハッピーを 白い 箱の 右へ・★大見出し 44→32px・すきまを 詰める
     ⑶ ★たて 300px 以下（★568×272）… ★さらに「はじめる ▶」を ○✕ の 2つの 箱の **上**へ（★見る 順だけ。★○✕ は すべらせれば 届く）
   ★ 結果【★実測】：★320×454 ハッピーの 下 446（★入れ物 448）／★568×320 はじめる の 下 293・ハッピー 238（★入れ物 312）／
       ★568×272 はじめる の 下 190・ハッピー 214（★入れ物 264）。
   ★ たての 線を 3本 足した（★470・330・300）―― ★JS の matchMedia は `(max-height:430px)` の 1本だけ（★前から ある 線・★今回の 3本は JS に 出て こない）【★grep】。
   ============================================================ */
@media (orientation:portrait) and (max-height:470px) {
  .mascot { margin-top:2px; }
  .mascot .bubble { margin-bottom:4px; }
  .start-button { margin-top:8px; }
}
@media (orientation:landscape) and (max-height:330px) and (min-width:560px) {
  .title-screen { flex-direction:row; align-items:flex-start; justify-content:center; gap:10px; padding:2px 4px; }
  .title-screen > :first-child { margin-top:0; }
  .title-screen > :last-child  { margin-bottom:0; align-self:center; }
  .start-card { flex:0 1 430px; width:auto; min-width:0; padding:6px 16px 6px; display:flex; flex-direction:column; }
  .eyebrow { font-size:11.5px; }
  .start-card h1 { font-size:32px; margin-top:0; text-shadow:0 3px #285e46, 0 5px #e3ffd7; }
  .intro { margin:2px 0 6px; font-size:13.5px; }
  .rule-fold { margin-top:5px; }
  .start-button { margin-top:7px; min-height:50px; padding:6px 20px 6px; font-size:18px; }
  .mascot { flex:0 0 112px; margin-top:0; }
  .mascot .bubble { font-size:12px; padding:5px 9px; border-width:2px; margin-bottom:8px; }
}
@media (orientation:landscape) and (max-height:300px) and (min-width:560px) {
  .start-card .start-button { order:-1; margin:2px 0 4px; }
  .start-card .eyebrow, .start-card h1, .start-card .intro { order:-2; }
}