/* ============================================================
   ババ抜き ― 見た目（T144・コーダ）
   ------------------------------------------------------------
   ・色・かたち・丸ゴシックは 既存15本と そろえてある（設計図 §9.5）。
   ・★札は 社長の 支給画像（設計図 §9・厳守）。★CSSでも 絵文字でも 自作しません。
     ★★この 1本は **裏面が 主役**です（ロボットの 手札は ぜんぶ 裏向き・ルル §4-2）。

   ★★ 遊びの 情報を 出す 光りは ゼロ です（ルル §7-6）★★
     ------------------------------------------------------------
     ・★置ける所の 光り … ありません（★どの 札も 引ける ＝ 光らせる 対象が ない）
     ・★ばばの 合図　　 … ★★ぜったいに 作りません（追記②違反・ルル §2-3）
     ・★「ここに 入ったよ」の 光り … ★★作りません
        ★★ここが この 1本で いちばん 間ちがえやすい 所です ――
        ★ ルルの 判断2は「★**見ていれば 追える**」であって「★教える」では ありません。
        ★ 追える ように するのは **光り** では なく **動き** です：
          ★ 札は 位置を CSS の うつり変わり（transition）で 動く ので、
            ★★組が 消えて つめる ときも「どの 札が どこへ 動いたか」が 目で 追えます。
          ★ ロボットの 手札に 入る 札は、★いつも **右はし**へ 飛びます。
        ★ ＝ 遊びの 情報を 出す 光は 1つも 足して いません。
     ・★浮く 札（指を 置いた 札）… ★これは 光では なく **操作の 返事**（しるし）。
        ★ 指の 座標だけから 出る ―― ★手札の 中身を 1つも 数えません。
     ・★ロボットの 指（○）… ★これも しるし。★★引く 札の 上で 0.6秒 止まる だけ。
        ★ 自分の 手札は 元から 表向き ＝ ★情報は 1ミリも 増えていません（ルル §2-4）。
     ・★★ふちの 光り（T145・★パソコンだけ）… ★★これも **操作の 返事** です（→ 下）。
     ★ もう1つの しるしは「負けた ときの ばば 1枚」。★それは 試合が **終わってから** 出ます。

   ★★★ T145：カーソルが 当たって いる 札の ふちを 光らせる（社長の ご指示）★★★
     ------------------------------------------------------------
     ★ 社長の 言葉：「カーソルが 当たって いる トランプの ふちを 光らせて ほしい。
       　　　　　　　 カーソルが あたって いる だけで、クリックする 前の 段階ね。★PC版だけでOK」
     ★★ これは 追記② を 破りません。★四目並べ（T131）で 通したのと 同じ 線です：

       | | ★見せない（＝ 遊びを 取り上げる）| ★見せてよい（＝ 操作の 返事）|
       |---|---|---|
       | 例 | ★どの 札が ばばか／引かれた 札の 行き先 | ★いま 指して いるのは この 札だ |
       | 遊びに 効くか | ★この1本の 20.8ポイント そのもの | ★1ミリも 効かない |

     ★★ 光らせて よいのは「いま 指して いる 1枚」だけ。
        ★ ばばの 札・引かれた 札・当たりの 札 ―― ★★1つも 光らせません。
     ★★ 中身（その 札が 何か）は 1ミリも 教えません ―― ★ふちの そとがわ だけ に 出します。

   ★★ なぜ CSS の :hover を 使わないのか（★大事）★★
     ------------------------------------------------------------
     ★ :hover は ★★指の 端末でも 鳴ります（★さわった 所に 残る「こびりつき hover」）。
       ★ 社長は「★PC版だけでOK」と 言われました。→ ★★:hover では 守れません。
     ★ だから ―― ★★JS で pointerType が 'mouse' の ときだけ .is-edge を 付けます。
       ★ ＝ 札の 部品の :hover / :active は ★これからも 0行 です（verify ⑤ が 見張ります）。
     ★ おまけに、★JS 側は 引く ときと ★★同じ hitAt() を 通します
       → ★★「光った 札」と「はなしたら 引かれる 札」が ★ぜったいに ずれません。

   ★★ 寸法の 決めごと ★★
     ・札の px は CSS では 決めません。
       babanuki-core.js の pickLayout() が 器の 実寸から 計算して
       --cw / --ch / --gap / --handh に 入れます（★T169 から --happy は ありません）。
     ・★CSS が 決めるのは「器の かたち」だけ。
       ⚠️ 下の 余白（app-shell・stage）を 動かすと、
          ルルの 寸法表（97/89/48/41/37px）が まるごと ずれます。
          ★320px で 器の はばが **306px** に なる ように 作って あります
          （320 − 左右6 ＝ 314、stage の 左右4 ＝ 306）。

   ・1512×945・1000×900・375px・320px・横向き の どれでも スクロールを 出さない。
   ・仕上げは 🎨アトが やります。部品ごとに 見出しを 入れてあります。
   ============================================================ */

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

  /* ★ 手札の 台（★札が 白っぽいので、下に うすい 色を 敷いて 形を 立たせる）*/
  --felt:      #CFEDE4;
  --felt-in:   #E7F6F1;
  --felt-line: #A9DACB;

  /* ★ ロボットの 指（○の しるし）。★光では なく 線（ルル §2-4）*/
  --finger:     #5B4A7A;
  /* ★★ T150 ―― ★輪と 輪の あいだに はさむ 白（★halo では ありません。★線 です）
     ★ なぜ 要るか【実測・写真の 画素】：★むらさき #5B4A7A は 濃いので、
       ★★ジョーカーの 黒い 線の 上では 比が 3.0 を 切って 消えます。
       ★ 白を 1本 はさむと、★★360の 向きの うち 消える 向きが 4 → 1 に 減りました。 */
  --finger-gap: rgba(255,255,255,.96);

  /* ★★ ふちの 光り（T145・★パソコンだけ）★★
     ------------------------------------------------------------
     ★★ なぜ 青か ―― ★★白を 落とした 理由が いちばん 大事です。
     ★ 支給画像「トランプ裏赤.png」を そのまま ほどいて 測りました
       （logs/T145_ババ抜き_色しらべ.cjs・★外部ライブラリ 0）【実測】：

       ★★ 裏面は「赤」では ありません ―― ★★へりは **白** です。
          ★ へりから 内がわ 8% の 帯：★★#F8F8F8 が **65.3%**（34,704px を 数えた）
          ★ まん中の 赤は #C85858（★そこには ふちの 光りは 届きません）

     ★ ＝ ★★白い ふちを 光らせると、★白い へりの 上に 白 ―― ★★1.06:1。
       ★★ T131 で アトが 落とした「金 対 黄色 ＝ 1.07:1」より **さらに 悪い** 数字です。
       ★ → ★★白は 落としました。

     ★ ふちの 光りが 本当に 乗る 4つの 相手に 対する 比【計算・WCAG】：

       | 色 | 札の へりの 白 | 台 --felt-in | 台の 線 --felt-line | 帯の 外の 水色 | いちばん 弱い |
       |---|---|---|---|---|---|
       | ★**#1B5FBF（採用）** | **5.76** | **5.49** | **3.95** | **4.74** | ★**3.95** ✅ |
       | 白 #FFFFFF | ★1.06 | 1.11 | 1.55 | 1.29 | ★1.06 ❌ |
       | 金 #F1A426 | 1.96 | 1.87 | 1.35 | 1.62 | 1.35 ❌ |
       | ピンク #E94F8A | 3.32 | 3.17 | 2.28 | 2.74 | 2.28 ❌ |
       | 緑 #43C37A | 2.12 | 2.02 | 1.46 | 1.75 | 1.46 ❌ |

     ★ 青が 混ざる 相手は 画面に ありません：
       ★ 指の むらさき --finger（#5B4A7A）とは 1.60:1 と 近い ―― ★★でも **同時に 出ません**
         （★ロボットの 番は ふちの 光り 0個。★verify ⑤ が 見張ります）。
       ★ ピンクの ボタン --pink-deep とも 同時に 出ません（★結果の 箱が 出て いる 間も 0個）。
     ⚠️★ この 色を 変える ときは、★上の 4つ とも **3.00 以上** を 保つ こと。 */
  --edge:      #1B5FBF;
  --edge-soft: rgba(27,95,191,.40);
  --edge-w:    2px;   /* ★ 輪の 太さ。★下の .card.is-edge が 札の はばから 決め直します */

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

  /* ★ 大きさは game.js（＝ core の pickLayout）が 入れる。CSS からは 決めない。 */
  --cw:    41px;   /* 札の はば */
  --ch:    62px;   /* 札の たけ（★419:635 を 守る）*/
  --gap:    3px;   /* 札と 札の 間 */
  --handh:127px;   /* 手札 1つ分の たけ */
  /* ★★ T169：★`--happy` は 消しました（★盤の まん中の ネコが いなく なった ため）。
     ★ ★上の 帯の ネコの 大きさは `.talk .happy-cat` が 数で 持って います（40／48／64px）。 */
  --handw:305px;   /* 手札 1つ分の はば */
  --lift:  10px;   /* 指を 置いた 札が 浮く 高さ */
  --result-max:100px;
}

* { box-sizing:border-box; }
html, body { height:100%; }
body {
  margin:0; min-width:320px; color:var(--ink); font-family:var(--font-main);
  background:linear-gradient(180deg,#bcebf0 0 190px,#fff7e8 190px);
  overflow:hidden;                     /* ★ スクロールは ぜったいに 出さない */
  overscroll-behavior:none;
  -webkit-text-size-adjust:100%;
  -webkit-touch-callout:none;
}
button { font-family:inherit; cursor:pointer; }
.hidden { display:none !important; }
.sprite-defs { position:absolute; width:0; height:0; overflow:hidden; }

/* ★ たて 1画面ぴったりに 積む。手札の 帯だけが のびちぢみ する。
   ⚠️ padding を 動かすと ルルの 寸法表が ずれる（→ 器の はば 306／355px）。 */
.app-shell {
  height:100vh; height:100svh;
  max-width:1500px; margin:0 auto; padding:6px 6px;
  display:flex; flex-direction:column; gap:6px;
}

/* ── 上の帯（もどる ／ 名前 ／ 遊び方）──────────────────
   ★ 遊んでいる間の ボタンは 2つだけ ―― 「◀ ゲームを選ぶ」と「？ 遊び方」（ルル §7-3）。
     ★「もどす」は 作りません ―― ★ババ抜きの もどすは「ばばを 引き直す ボタン」です。
       ★1回目から ずる（ルル §7-3）。
   ⚠️ 盤の 部品に .back という 名前を 付けない こと（★T127 の 事故）。 */
.topbar { flex:0 0 auto; display:flex; align-items:center; gap:6px; min-height:44px; }
.back {
  flex:0 0 auto; display:inline-flex; align-items:center; min-height:44px; padding:0 12px;
  background:var(--white); border:3px solid var(--pink-soft); border-radius:999px;
  color:var(--pink-dark); font-weight:900; font-size:13px; text-decoration:none; white-space:nowrap;
}
.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 {
  flex:0 0 auto; display:inline-flex; align-items:center; min-height:44px; padding:0 12px;
  background:var(--white); border:3px solid var(--pink-soft); border-radius:999px;
  color:var(--pink-dark); font-weight:900; font-size:13px; white-space:nowrap;
}

/* ★ 指で さわる 画面（520px以下）でも、押す ところは 44px 以上（会社の 基準・T62以来）*/
@media (max-width:520px) {
  .back span { display:none; }
  .back { padding:0 11px; min-height:44px; 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; }
  .howto { padding:0 8px; }
}
/* ★★ 320px で 器の はばを **306px** に する（★ルルの 寸法表の ものさし）★★
   ★ 320 − 左右3 ＝ 314 ／ .stage の 左右4 ＝ ★306px → ★札 41px（44pxの 93%）。
   ⚠️★ ここを 1px 動かすと、★札が 41px → 40px に 落ちます（★T144 で 実際に 起きました）。 */
@media (max-width:340px) {
  .app-shell { padding:6px 3px; }
}

/* ── はじめの 画面 ──────────────────────────────
   ★★ 置くものは 3つだけ ―― ハッピー ／ ひとこと ／「はじめる ▶」。
   ★★★ <select> は **1つも ありません**（社長裁定 判断4）★★★
      ★ スピード以来 6本 つづいた「つよさ 5段」が、★この1本で 初めて 途切れます。
      ★ 理由：★ババ抜きに 段が 作れないから（ルル §3-1・§3-2）――
        ★5段ぜんぶが 29.5〜29.8% で、★ばらつきは 0.3ポイント しか ありません。
      ★ 設計図 §5.5 の 例外枠（選ばせるのは 1つまで）を、★この1本では **使いません**。 */
.title-screen {
  flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  padding:20px 16px; background:var(--white); border:5px solid var(--pink-soft); border-radius:26px;
  text-align:center; box-shadow:0 7px 0 rgba(196,58,115,.10); min-height:0;
}
.title-happy { display:flex; flex-direction:column; align-items:center; gap:2px; }
.title-happy .happy-cat { width:76px; height:57px; }
.title-lead { margin:0; font-size:clamp(16px,4.2vw,22px); font-weight:900; color:#5a4a63; line-height:1.6; }
.start-button {
  display:inline-flex; flex-direction:column; align-items:center; gap:2px;
  min-width:250px; min-height:44px; padding:15px 26px; border:none; border-radius:999px;
  background:var(--pink-deep); color:#fff; box-shadow:0 6px 0 var(--pink-dark);
  font-size:20px; font-weight:900;
}
.start-button small { font-size:12px; font-weight:700; opacity:.9; }
.start-button:active { transform:translateY(3px); box-shadow:0 3px 0 var(--pink-dark); }

/* ── 遊ぶ 画面 ────────────────────────────────
   ★★ 置き場は 2か所だけ（ロボットの手札・自分の手札）＋ まん中の ハッピー（ルル §5-3）★★
     ★ すてた札の 置き場 … ★作りません（数える 必要が ない）
     ★ 枚数の 数字　　　 … ★1つも 出しません（手札を 見れば 分かる）
     ★ 山札　　　　　　　… ★ありません
   ★★ 指を 受けるのは .stage ぜんぶ です ★★
     ★ ロボットの 手札の 帯の 中で 押した ときだけ 札が 浮きます（inZone）。
     ★ 自分の 手札を 押したら ぷるっと ゆれます（「そこは 引く 所では ありません」）。 */
/* ★★ T169：★`column` を 足しました ―― ★上に ハッピーの 帯、下に 盤（`.stage`）の 2段。 */
.play-screen { position:relative; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }

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

   | ★写した もの      | ★大富豪【実測】                | ★ババ抜き（ここ）    |
   |--------------------|--------------------------------|----------------------|
   | ネコの 器の はば   | 64px ／ 48px（はば 650px 以下） | ★同じ                |
   | ネコの 置き場      | 上の帯の すぐ 下の 行           | ★同じ                |
   | 名札「ハッピー」   | あり                           | ★同じ（★流れの 中）  |
   | ★★ふきだし        | あり（flex:1・横に 長い）       | ★★**ありません**     |

   ⚠️★★ ★**ふきだしが ない のは わざと です** ★★
     ★ ★ルル §7-5：★★「遊んで いる 最中、ハッピーは 1文字も しゃべりません」。
       ★ ★空の ふきだしを 置いても、★中身が 入る ことは ありません。
     ★ → ★★置かず、★ネコを **まん中**に します（`justify-content:center`）。
       ★ ★大富豪で ネコが 左に いるのは、★となりに ふきだしが ある から です。
         ★ ★となりが 空の まま 左に 寄せると、★1512px では 右に 1400px の 空きが 残ります。

   ⚠️★★ たけは **数で 書く**（★`height:auto` に しない）★★ ―― ★T167 §2 回り道③【実測】
     ★ ★`<svg class="happy-cat">` に viewBox が ない ので、★`auto` だと SVG の 決まりの
       ★★150px に なり、★盤が 150px 短く なります。
     ★ → ★★48 × 112/150 ＝ 35.84 → **36px** ／ 64 × 112/150 ＝ 47.79 → **48px**。
   ============================================================ */
.talk {
  flex:0 0 auto; display:flex; align-items:flex-start; justify-content:center;
  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;
}
@media (max-width:650px) {
  .talk .cat-wrap { width:48px; }
  .talk .happy-cat { width:48px; height:36px; }
}
/* ============================================================
   ★★ たてが みじかい 画面（★320×480 など）―― ★名札を たたみます（★57px → 42px）★★
   ------------------------------------------------------------
   ⚠️★★ ★これは **見張りが 鳴って から** 足した もの です【実測・T169】。
      ★ ★はじめ 57px の 帯を そのまま 置いたら、★320×480 で `verify` が
        ★★**NG 2** を 出しました：
        ★ ★「★★結果の 箱が 手札に かぶって いる（1px）」
        ★ ★「★結果の 箱の 中身が 15px 切れて いる」
      ★ ★正体【計算】：★320×480 の 盤は 419px、★手札 2つ＋すきまで **338px** 使う ので
        ★ ★余りは **81px** しか ありません。★★57px の 帯を 引くと 余りは 24px ――
          ★ ★まん中の 帯が 133 → **76px** に なり、★結果の 箱（★天井 100px）が 入りません。
   ★ → ★★名札 1行（15px）と 下の よはく（4px）を たたんで **38px** に します。
     ★ ★★ネコの 大きさ（48×36px）は 1pxも 変えて いません ―― ★たたむのは 字だけ です。
   ============================================================ */
@media (max-height:520px) {
  .talk { padding:0 2px 2px; }
  .talk .cat-name { display:none; }
}
/* ============================================================
   ★★ たての 低い 画面（★横向き）―― ★帯を **小さく して 並びに 残します** ★★
   ------------------------------------------------------------
   ★ ★ページワン（T169）とは **逆**に します。★理由は 数字です【実測】：
     ★ ★ページワンの 横向き … 盤 309px・要る たて 307px ＝ ★余り **2px** → ★並びに 置けない
     ★ ★ババ抜きの 横向き　 … 盤 325px・要る たて 264px ＝ ★余り **61px** → ★置ける
   ★ ★そして ババ抜きは **横向きでも ハッピーが 出て いました**（★812×375 で 160×121px）。
     ★ ★消すと 設計図 §9.5「全ゲーム・全ページに 必ず 登場させる」に 反します。
   ★ → ★★40×30px・名札なし の 小さい 帯（★32px）に して、★出しつづけます。
     ★ ★32px なら 325 − 32 ＝ 293px ＞ 264px ―― ★★札は 1pxも 縮みません【実測で 確かめます】。
   ============================================================ */
@media (max-height:430px) {
  .talk { padding:0 2px 2px; }
  .talk .cat-wrap { width:40px; }
  .talk .happy-cat { width:40px; height:30px; }
  .talk .cat-name { display:none; }
}
.stage {
  position:relative; flex:1 1 auto; min-height:0; min-width:0;
  padding:0 4px;                       /* ★ 320px：314 − 8 ＝ ★306px（ルルの 器）*/
  touch-action:none;
  -webkit-user-select:none; user-select:none;
}
.stage, .zone, .cards, .card, .card-in, .card img, .finger { touch-action:none; }

/* ★ 手札の 台（★2つ。★上が ロボット・下が 自分）
   ★ たけは JS が 入れる（--handh）。★14枚 ぶん いつも 空けて あります（ルル §5-1）*/
.zone {
  position:absolute; left:4px; right:4px; height:var(--handh);
  background:var(--felt-in); border:2px solid var(--felt-line); border-radius:14px;
}
.zone.bot { top:0; }
.zone.me  { bottom:0; }
.zone.me.is-no { animation:shakeNo .15s ease-in-out; }

/* ★★ まん中 ―― ★T169 から **空**です ★★
   ★ ★ここに いた ハッピー（★札の 1.7倍）は 上の 帯（`.talk`）へ 引っこしました。
   ★ ★帯じたいは 消して いません ―― ★★結果の 箱が ここに 出ます（★T144 の 直し・`resultSpot`）。
   ★ ★2つの 手札の あいだの すきま として、★そのまま 残ります。 */
.middle {
  position:absolute; left:0; right:0; display:flex; align-items:center; justify-content:center;
  gap:8px; pointer-events:none;
}

/* ── 札 ───────────────────────────────────
   ★★ 札は ぜんぶ 1つの 板（.cards）の 上に 置いて、★場所だけを 動かします ★★
     ★ ＝ 手札から 手札へ 移る ときも、★★同じ 1枚が 飛んで いく のが 見えます。
     ★ これが 判断2「追える形」の 見え方 そのものです（★光は 1つも 使って いません）。 */
.cards { position:absolute; inset:0; pointer-events:none; }
.card {
  position:absolute; width:var(--cw); height:var(--ch);
  transition:left .26s ease, top .26s ease, transform .14s ease, opacity .3s ease;
  will-change:left, top, transform;
}
.card-in {
  position:absolute; inset:0; border-radius:calc(var(--cw) * .10);
  box-shadow:0 1px 2px rgba(40,30,50,.28);
  transform-style:preserve-3d; transition:transform .2s ease;
}
.card img {
  position:absolute; inset:0; width:100%; height:100%; border-radius:inherit;
  display:block; object-fit:fill; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  pointer-events:none; -webkit-user-drag:none;
}
.card .face { opacity:1; }
.card.is-down .face { opacity:0; }
.card.is-down .back { opacity:1; }
.card .back { opacity:0; }
.card.is-lift { transform:translateY(calc(-1 * var(--lift))); }
.card.is-pop  { transform:translateY(calc(-1 * var(--lift))); }
.card.is-gone { opacity:0; transform:scale(.55); transition:opacity .3s ease, transform .3s ease; }

/* ★★ ふちの 光り（T145・★パソコンだけ・★JS が pointerType==='mouse' の ときだけ 付ける）★★
   ------------------------------------------------------------
   ★★ 光るのは **ふち だけ** です ―― ★中身は 1pxも 変えません。
      ★ 使うのは 外向きの box-shadow だけ（★spread は ぜんぶ 札の **そと** に 出ます）。
      ★ ★★filter・opacity・background・border に は 1行も さわりません。
        → ★★中身（絵）の 明るさは 光る 前と 後で **まったく 同じ** です。
        → ★★＝ その 札が 何かは、1ミリも 見えません（verify ⑤-f が 実測で 見張ります）。
   ★ 太さは 札の はばに 合わせる（★どの 画面でも 同じ 見え方に なる）。★下限 2px。 */
.card.is-edge { z-index:20; --edge-w:max(2px, calc(var(--cw) * .05)); }
.card.is-edge .card-in {
  box-shadow:0 1px 2px rgba(40,30,50,.28),                                   /* ★ もとの 影（そのまま）*/
             0 0 0 var(--edge-w) var(--edge),                                /* ★ 輪（★見える 線）*/
             0 0 calc(var(--edge-w) * 3) calc(var(--edge-w) * .8) var(--edge-soft);  /* ★ ふわっと */
}
/* ★★ 強調は 1種類まで（設計図 §5.5）★★
   ★ 押した 瞬間、★札は **浮き** ます。★そのときは ふちの 光りを 消します。
   ★ JS 側でも 消して いますが（press !== null なら 0個）、★ここでも 二重に 止めます。 */
.card.is-lift.is-edge .card-in, .card.is-pop.is-edge .card-in,
.card.is-fly.is-edge .card-in, .card.is-last.is-edge .card-in,
.card.is-gone.is-edge .card-in { box-shadow:0 1px 2px rgba(40,30,50,.28); }
.card.is-fly  { z-index:40; transition:left .42s cubic-bezier(.35,.02,.28,1), top .42s cubic-bezier(.35,.02,.28,1); }
/* ★ 負けた ときの ばば 1枚（★試合が 終わってから 出る しるし・ルル §7-2）*/
.card.is-last { z-index:30; transform:scale(1.18); transition:transform .5s ease; }

/* ★ 絵が 届かなかった ときだけ（★ふだんは 一度も 通らない）*/
.card .fallback {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid #b9b0c4; border-radius:inherit;
  font-size:calc(var(--cw) * .34); font-weight:900; color:#33303a;
}
.card .fallback.red { color:#c0392b; }

/* ── ロボットの 指（○の しるし）────────────────────
   ★★ 顔は 作れません。★でも 指なら 作れます（ルル §2-4）★★
     ★ ロボットの 番に、★自分の 手札の 上を すべって いき、
       ★★引く 札の 上で **0.6秒** 止まって から 抜きます。
     ★ 情報は 1ミリも 増えて いません ―― ★自分の 手札は 元から 表向き。
       ★ 足したのは「0.6秒 早く 分かる」だけ。★その 0.6秒が この ゲームの どきどきです。
   ⚠️★ **色でも 光でも ありません。**★輪の 線と、まん中の 点 だけ。
   ⚠️★ 0.6秒を うっかり 縮めない こと。★この 1本の 顔は これ だけ です。

   ★★★ T150 ―― ★大きさの 直し（★★時間には 1msも さわって いません）★★★
     ------------------------------------------------------------
     ★ トライ T146 §5-3 の 指摘：★「色は 十分 濃い。★足りないのは 面積」。
     ★★ でも「大きくすれば 良い」では ありませんでした。★★写真の 画素で 測ったら、
        ★★**前の しるしは ばばの 絵を 43.8% 覆って いた**のに、
        ★★はっきり 変わった 画素は 画面の 0.098% しか ありませんでした【実測・320×568】。
        ★ 犯人は ★**中の うすい 白（rgba(255,255,255,.72)）**。
          ★★絵を 白く 消す だけで、★1つも 目立たせて いませんでした。

     ★ そこで ―― ★★**中を 空に して、その ぶん 輪に まわしました。**

       | | ★前 | ★★後（T150） |
       |---|---|---|
       | 輪の 外の 直径 | 札の 62% | ★★札の **95%** |
       | 輪の 太さ | 札の 7% | ★札の 11% |
       | 中 | ★白 72%（★絵を 消す） | ★★**空**（★絵が そのまま 見える） |
       | 外 | なし | ★白 1本 → むらさき 1本（★絵の 上でも 消えない ため） |

     ★★ 結果【実測・写真の 画素・320×568・ばばの 上】：
       ★ はっきり 変わった 画素 … 0.098% → ★★**0.265%（2.7倍）**
       ★★ 絵を 覆った 割合 　　… 43.8% → ★★**32.5%（★★減って います）**
       ★ ＝ ★★**目立つ ように なり、★★同時に 札が よく 見えるように なりました。**

     ⚠️★ **これ以上 大きく しない こと。**★★札の はばの 95%が 上限です。
        ★ 100% を こえると となりの 札に かかり、★「どの 札を 指して いるか」が
          逆に 分からなく なります（★手札が 15枚以上に なると 札は 重なりますが、
          ★★実測 2万試合で 指が 出る 場面の 手札は **最大 14枚**＝重なりません）。 */
.finger {
  position:absolute; width:calc(var(--cw) * .84); height:calc(var(--cw) * .84);
  margin-left:calc(var(--cw) * -.42); margin-top:calc(var(--cw) * -.42);
  border:calc(var(--cw) * .11) solid var(--finger); border-radius:50%;
  background:none; box-sizing:border-box;
  /* ★ ぼかしは 0。★★光では なく「外に 引いた 2本の 線」です（ルル §2-4 を 守る）*/
  box-shadow:0 0 0 calc(var(--cw) * .03) var(--finger-gap),
             0 0 0 calc(var(--cw) * .055) var(--finger);
  opacity:0; pointer-events:none; z-index:50;
  transition:left .5s ease, top .5s ease, opacity .18s ease;
}
.finger.is-on { opacity:1; }
.finger::after {
  content:""; position:absolute; left:50%; top:50%; width:32%; height:32%;
  margin:-16% 0 0 -16%; border-radius:50%; background:var(--finger);
}

@keyframes shakeNo {
  0%,100% { transform:translateX(0); }
  25%     { transform:translateX(-5px); }
  75%     { transform:translateX(5px); }
}

/* ★ 場所を いきなり 入れる とき（★配りの はじめ・画面の 大きさが 変わった とき）*/
.cards.no-move .card { transition:none !important; }

/* ★★ 測る ときは 動きを 止める ★★
   ------------------------------------------------------------
   ★ 会社で 4回 かかった わな ―― ★**動いて いる 途中を 測ると、数字が うそに なる**。
     ★ アトの 申し送り：「箱は 出してから 0.3秒 待つ」。
   ★ ここでは 待つ かわりに、★★止めて から 測ります（★待ち時間 0・★ぶれ 0）。
   ★ このクラスは たしかめ（verify / fitTest / screen）の 中でだけ 付きます。 */
body.measuring *, body.measuring *::before, body.measuring *::after {
  transition:none !important; animation:none !important;
}

/* ── ハッピー ＋ ふきだし（★はじめの 画面と 終わった あと だけ）──── */
.happy-bubble {
  margin:0; padding:7px 12px; background:var(--cream);
  border:3px solid var(--gold-soft); border-radius:16px;
  font-size:14px; font-weight:900; color:#7a5205; line-height:1.5;
}
.happy-name { margin:0; font-size:10px; font-weight:900; color:#c9a24a; }
@keyframes happyJump {
  0%,100% { transform:translateY(0) rotate(0); }
  30%     { transform:translateY(-10px) rotate(-6deg); }
  60%     { transform:translateY(0) rotate(5deg); }
}
.happy-cat.is-jump { animation:happyJump .5s ease-in-out 4; }

/* ── 結果の 箱 ────────────────────────────────
   ★★ たけは 100px 以下（ルル §7-2 の ⚠️・五目並べ T133 の 教訓を 先に 入れる）★★
      ★ 320×568 で 手札の 外に 残る たては **144px しか ありません**。
      ★ T130 の 箱（155px）だと 11px はみ出します。
   ★★ ここにも つよさの プルダウンは 置きません（社長裁定 判断4）★★
      ★ スピード以来 6本 続けてきた 形が、★この1本だけ 変わります。 */
.result-wrap {
  position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center;
  padding:10px; background:rgba(70,60,82,.34);
}
/* ★ たけの 内わけ【計算・実測で 合わせました】
     ふち 3×2 ＝ 6 ／ 内よはく 7×2 ＝ 14 ／ 見出しの 行 30 ／ すきま 5 ／ ボタン 44
     　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　＝ ★★99px（★100px 以下）
   ⚠️★ はじめは ふち4・よはく9 で ★102px に なり、★ハッピーの ひとことが 2px 切れて いました
      【実測・T144 の 私の 失敗】。★verify ⑩ が「はみ出して いないか」も 見張ります。 */
.result-box {
  width:min(360px,100%); max-height:var(--result-max);
  padding:7px 11px; background:var(--white); border:3px solid var(--pink-soft);
  border-radius:20px; box-shadow:0 8px 0 rgba(196,58,115,.16);
  display:flex; flex-direction:column; gap:5px; 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:30px; }
.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; }
/* ★ ハッピーの ひとこと。★2行までで 切る（★箱の たけ 100px を こえない ため）*/
.result-say { margin:0; flex:1 1 auto; min-width:0; font-size:11.5px; font-weight:900;
              color:#7a5205; line-height:1.25; max-height:30px; overflow:hidden; }
.result-row { display:flex; flex-direction:row; align-items:stretch; gap:8px; }
.dialog-ok {
  flex:1 1 0; display:inline-flex; align-items:center; justify-content:center; gap:4px;
  min-height:44px; padding:0 14px; border:none; border-radius:999px;
  background:var(--pink-deep); color:#fff; box-shadow:0 4px 0 var(--pink-dark);
  font-size:15px; font-weight:900; text-decoration:none;
}
.dialog-ok:active { transform:translateY(3px); box-shadow:0 2px 0 var(--pink-dark); }
.dialog-ok.alt {
  background:var(--white); color:var(--pink-dark); border:3px solid var(--pink-soft);
  box-shadow:0 4px 0 var(--pink-soft);
}
.result-row { transition:opacity .16s ease-out; }
.result-box.is-locked .result-row { pointer-events:none; opacity:.4; }
.result-box.is-locked .dialog-ok { box-shadow:none; transform:translateY(3px); }

/* ── 遊び方（遊ぶ前に 1回 読む ところ）──────────────
   ★ ルールは 3行。★16本で いちばん 軽い 3行です（ルル §0-3）。
   ⚠️ ★ どの 札を 引くと よいかは、ここでも 1文字も 教えません（設計図 追記②）。 */
dialog {
  width:min(420px,92vw); padding:20px 18px; border:5px solid var(--pink-soft); border-radius:24px;
  background:var(--white); color:var(--ink); font-family:var(--font-main);
}
dialog::backdrop { background:rgba(70,60,82,.34); }
dialog h2 { margin:0 0 10px; font-size:19px; font-weight:900; text-align:center; color:var(--pink-dark); }
.dialog-lead { margin:0 0 14px; font-size:15px; font-weight:900; text-align:center; color:#5a4a63; }
.close-dialog {
  position:absolute; top:8px; right:10px; width:44px; height:44px; border-radius:50%;
  border:3px solid var(--pink-soft); background:var(--white); color:var(--pink-dark);
  font-size:18px; font-weight:900; line-height:1;
}
.help-list { margin:0 0 12px; padding-left:1.3em; }
.help-list li { margin-bottom:8px; font-size:14.5px; font-weight:700; line-height:1.65; }
.help-list b { color:var(--pink-dark); }
.help-note {
  margin:0 0 14px; padding:10px 12px; background:var(--cream);
  border:3px solid var(--gold-soft); border-radius:14px;
  font-size:13px; font-weight:700; line-height:1.7; color:#7a5205;
}
.help-note b { color:var(--pink-dark); }
dialog .dialog-ok { width:100%; }

/* ── 横向き（低い 画面）───────────────────────── */
@media (max-height:430px) and (orientation:landscape) {
  .app-shell { padding:2px 8px; gap:2px; }
  .topbar { min-height:44px; }
  .back, .howto { min-height:44px; }
  .title-screen { gap:8px; padding:8px 14px; }
  .title-happy .happy-cat { width:52px; height:39px; }
  .result-box { padding:7px 10px; }
}