/* ============================================================
   ピラミッド ― 見た目（T76・コーダ）
   ------------------------------------------------------------
   ・色・かたち・丸ゴシックは 既存8本と そろえてある（設計図 §9.5）。
   ・カードの ひりつ 419:635（2:3）は ぜったいに くずさない（設計図 §9）。
   ・★作りは スパイダーでは なく **ソリティア** に そろえる（アイの 申し送り）。
   ・遊んでいる間の ボタンは **2つだけ**（もどす／新しく 配る）。どちらも 上の帯。

   ★★ 寸法の 決めごと（仕様 §1-1・ここを 間違えると 全部 こわれる）★★
     ・同じ段の 札は **重ねない**（S ＝ はば ＋ すきま）
     ・段の 落差 V ＝ 札の 高さ ÷ 2（切りすて）
     → この 2つが あるから「完全に 見えている 札 ＝ 取れる 札」が
       ぴったり 一致する。**文字なしで ルールを 教える 唯一の 手段**。
     → だから 札の 大きさは CSS では 決めない。
       game.js の layout() が **盤の 実寸** から 計算する。
       CSS が 決めるのは「器の かたち」だけ。

   ・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;
  --mint:      #6FC98C;
  --mint-soft: #DCF6E4;
  --blue-soft: #DDF3F7;

  --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 が 入れる（CSS からは 決めない・上の 説明を 読むこと）*/
  --cw: 49px;
  --ch: 74px;
  --radius: 4px;
}

* { 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画面ぴったりに 積む。盤だけが のびちぢみ する。 */
.app-shell {
  height:100vh; height:100svh;
  max-width:1000px; margin:0 auto; padding:8px 10px;
  display:flex; flex-direction:column; gap:8px;
}

/* ── 上の帯（もどる ／ 名前 ／ 遊んでいる間の ボタン 2つ）──────── */
.topbar { flex:0 0 auto; display:flex; align-items:center; gap:6px; min-height:38px; }
.back {
  flex:0 0 auto; display:inline-flex; align-items:center; min-height:36px; 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;
}
/* ★★ T368 ―「◀」の 見えない 押し代（★フリーセル T118 の `.tool::after` の 型）★★
   ★ T367 で 34.5×36（たて）／114×36（よこ）・13画面とも 44 割れ。★見た目は 1pxも 変えない。★的だけ 44×44 以上。
   ★ 左は ふち（3px）の 外がわで 止める（★まん中ぞろえ だと はば320 で 画面の 左から 出て 42px）。★のびる 先は 帯の 地と 題の 字だけ。
   ⚠️★ `position:relative; z-index:1` が 無いと あとの 兄弟が 押し代を 上書きする（T273 §4-1）。 */
.back { position:relative; z-index:1; }
.back::after {
  content:''; position:absolute; left:-3px; top:50%;
  width:max(calc(100% + 6px), 44px); height:44px; transform:translateY(-50%);
}
.back:hover { border-color:var(--pink); }
.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; }

.tools { flex:0 0 auto; display:flex; gap:6px; }
.tool {
  min-height:36px; padding:0 13px; border-radius:999px; white-space:nowrap;
  background:var(--white); border:3px solid var(--gold-soft);
  color:#7a5205; font-size:13px; font-weight:900;
}
.tool:hover { border-color:var(--gold); }
.tool:active { transform:translateY(2px); }
.tool[disabled] { opacity:.4; cursor:default; transform:none; }

@media (max-width:520px) {
  .back span { display:none; }
  .back { padding:0 11px; }
  .brand span { font-size:15px; }
  .tool { padding:0 10px; font-size:12.5px; border-width:2px; }
}
@media (max-width:360px) {
  .app-shell { gap:6px; }
  .brand-cat { display:none; }
  .brand span { font-size:13px; }
  .tool { padding:0 8px; font-size:12px; }
}

/* ── はじめの 画面 ──────────────────────────────
   ★ 社長裁定3：難しさは 選ばせない。プルダウンは 1つも 置かない。 */
.title-screen {
  flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
  padding:24px 18px; 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-lead { margin:0; font-size:clamp(17px,4.4vw,23px); 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; 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); }

/* ── 遊ぶ 画面（盤）──────────────────────────
   ★ .board が のこり ぜんぶを もらう。その 実寸を game.js が 測って
     札の 大きさを 決める（＝ ピラミッドが 絶対に はみ出さない）。
   ★ ピラミッドは 28枚 固定。1枚も 増えず 1pxも 伸びない ので、
     「まれな 最悪ケース」が そもそも 存在しない（仕様 §8-2）。 */
.play-screen { flex:1 1 auto; min-height:0; display:flex; }
.board {
  flex:1 1 auto; min-height:0; min-width:0; display:flex;
  padding:6px; border-radius:20px;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 2px,transparent 2px 8px), #82ce84;
  border:4px solid #3f863f; box-shadow:0 6px 0 rgba(86,53,38,.18);
}
.board-in { position:relative; flex:1 1 auto; min-width:0; min-height:0; }

/* ★★ 盤の 上では、ページを 1mmも 動かさない ★★
   touch-action:none を 置かないと、指が 少し ぶれた 瞬間に ブラウザが
   「これは 画面を すべらせる 指だ」と 決めて、おした のに 反応しない ことが ある。
   ★ T77 で 運ぶのを やめた あとも 要る（おす 指の ぶれで 盤が 揺れない ため）。
   ここは 消さない こと。 */
.board, .board-in, .spot, .card { touch-action:none; }

/* ★ スマホでは 器の わくを 削る（仕様 §1-0 の 内わけを 守る ため）
     375px … 余白4＋わく3＋内3 ＝ 片側10px → 中身 355px → 札 49px ✅
     320px … 余白3＋わく2＋内2 ＝ 片側 7px → 中身 306px → 札 42px ✅ */
@media (max-width:520px) {
  .app-shell { padding:6px 4px; }
  .board { padding:3px; border-width:3px; border-radius:14px; }
}
@media (max-width:340px) {
  .app-shell { padding:6px 3px; }
  .board { padding:2px; border-width:2px; border-radius:11px; }
}

/* ── 置き場は 2つだけ（山札・めくった札）────────────────
   ★ ピラミッドの 28か所には 下じきを 置かない。
     消えた 所に わくが 残ると「まだ 何か ある」と 見える ―― 引き算（仕様 §5-3）。
   ★ 画面の 置き場は 3か所。9本で いちばん 少ない。 */
.spot {
  position:absolute; left:0; top:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius);
  background:rgba(255,255,255,.14); box-shadow:inset 0 0 0 2px rgba(255,255,255,.4);
  color:rgba(255,255,255,.6); font-weight:900; line-height:1;
  user-select:none; -webkit-tap-highlight-color:transparent;
}
.spot.is-stock { cursor:pointer; }
/* 山札が 空に なった ときの「まわせるよ」の 目じるし（文字は 足さない）*/
.spot.is-stock::after { content:"↻"; color:rgba(255,255,255,.55); }
.spot.no-recycle::after { content:""; }

/* 札1枚。位置は transform だけで 動かす ので、動きが そのまま アニメに なる。
   ★ 2枚がさね に して ある：
     外（.card）… 置き場所（transform）。ここに 動く アニメが かかる
     内（.card-in）… 中身（絵）。★取られた ときの「小さくなって 消える」は こちら
   分けて おくと、中身に 何を 足しても 札が 左上に 飛ぶ 事故が 起きない。 */
.card {
  position:absolute; left:0; top:0; width:var(--cw); height:var(--ch);
  -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none;
  cursor:default;
  transition:transform .18s cubic-bezier(.3,.7,.4,1);
}
.card:not(.is-down) { cursor:pointer; }     /* ★T77：運ばない。おして えらぶ */
.card.as-stock { cursor:pointer; }          /* 山札は おすと めくれる */
.card-in {
  position:absolute; inset:0; border-radius:var(--radius);
  transform-origin:50% 50%;
  transition:transform .26s cubic-bezier(.4,0,.6,1), opacity .26s ease-out;
}
.card img {
  position:absolute; inset:0; display:block; width:100%; height:100%;
  border-radius:inherit; box-shadow:0 2px 0 rgba(86,53,38,.22);
  -webkit-user-drag:none;                   /* ★ パソコンの「画像の 引きずり」を 止める */
  pointer-events:none;                      /* 当たり判定は .card に まかせる */
}
.card .cf { opacity:1; }
.card .cb { opacity:0; }
.card.is-down .cf { opacity:0; }
.card.is-down .cb { opacity:1; }
.board.no-anim .card, .board.no-anim .card-in { transition:none; }

/* ★★ 取った 2枚が 小さくなって 消える（仕様 §3-1・§1-5）★★
   ------------------------------------------------------------
   「取った札の 置き場」は 作らない ―― 進み具合は ピラミッドが 減ることで
   もう 見えている。増やす 理由が ない（引き算）。
   ★ 消えるのは 中身（.card-in）だけ。外の 置き場所（transform）は
     さわらない ので、もどす と そのまま ふくらんで 戻る。 */
.card.is-out { pointer-events:none; }
.card.is-out .card-in { transform:scale(.18); opacity:0; }

/* ★★ えらんだ 札 ＝ 青わく（T77・社長指示）★★
   ------------------------------------------------------------
   ★ これが この 画面で **ただ1つ**の 強調（設計図 §5.5）。
     ほかに 光る もの・色が 変わる ものを 足さない こと。
   ★ 青わくが 言うのは「**えらんだ**」だけ。
     「ここに 置ける」は 言わない（言ったら 設計図 追記② 違反）。
   ★ 文字は 1文字も 出さない ―― わく だけで 伝える。
   ⚠️ 太さは 札の 大きさに 合わせて --pick（game.js の layout）で 決まる。
      42px の 札でも 見え、96px の 札でも 太すぎない。
   ⚠️ box-shadow に した のは、外の .card の transform（置き場所）にも
      内の .card-in の scale（消える 動き）にも じゃまを しない ため。
      外の 白い ふちは、どんな 札の 絵の 上でも 青が 沈まない ように。 */
.card.is-pick .card-in {
  box-shadow:
    0 0 0 var(--pick,4px) #2E8BE0,
    0 0 0 calc(var(--pick,4px) + 2px) rgba(255,255,255,.9),
    0 4px 10px rgba(46,139,224,.35);
}
/* ★ 消える 動きの 間は わくも 一緒に 小さく なる（.card-in に 付けて あるので 自動）*/

/* ★★ すべっている 途中の 札は おせない（T69・🔴1 と 同じ 事故よけ）★★
   山札を おす 手は 1試合 45回。連打の 2発目が「飛んでいる 札」に 当たると
   めくりが 消える。通り道を ふさがない ように するだけ ―― 見た目は 1mmも 変えない。 */
.card.is-fly { pointer-events:none; }

/* ★★「それは だめ」の ゆれ ★★
   ------------------------------------------------------------
   取れない 札（＝下の 2枚が まだ 消えていない 札）を おすと、
   えらばれず、その札だけ ぷるっと ゆれる。音は 鳴らさない。
   ★ ゆれは 光でも 色でも ない ので、強調は 青わく 1種類の まま（設計図 §5.5）。
   ★ どこなら 取れるかは 1つも 教えない。「その札は だめ」だけ。
   ★ そして 下の 2枚が 消えた 瞬間、その札は 帯（高さの 半分）から
     札まるごと へ 一気に 開く ―― それが「取れるように なった」の 合図。
     ここが ルールを 文字なしで 教える 所（仕様 §2-5）。

   ⚠️ 札も 置き場も、ふだんの 置き場所は transform で 決めている。
      ゆれの アニメも transform なので、そのまま 書くと **左上に 飛ぶ**。
      → ゆらす 直前に、その 置き場所を --sx / --sy に 入れて おく（game.js）。 */
@keyframes shakeNo {
  0%,100% { transform:translate(var(--sx,0px),var(--sy,0px)); }
  20% { transform:translate(calc(var(--sx,0px) - 5px),var(--sy,0px)) rotate(-2deg); }
  45% { transform:translate(calc(var(--sx,0px) + 4px),var(--sy,0px)) rotate(2deg); }
  70% { transform:translate(calc(var(--sx,0px) - 2px),var(--sy,0px)); }
}
.spot.is-no, .card.is-no { animation:shakeNo .15s ease-in-out; }
.card.is-no { transition:none; }

/* 画像が 届かなかった ときだけ 出る 下じき（画面が 白く ならない ように）。
   ふだんは 一度も 出ない ―― 支給画像は 55枚 そろっている。 */
.fallback {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  border-radius:inherit; background:#fff; border:2px solid #d9cfe0;
  font-size:calc(var(--cw) * .3); font-weight:900; line-height:1;
}
.fallback.red { color:#d8395f; } .fallback.black { color:#3a3a46; }

/* ── ハッピー ＋ ふきだし ＋ 遊び方（画面の 一番下・1行）──── */
.log-row {
  position:relative; z-index:75;      /* ★ 札が 降っても ハッピーは 見えたまま */
  flex:0 0 auto; display:flex; align-items:center; gap:9px;
  padding:6px 10px; background:var(--white); border:3px solid var(--pink-soft); border-radius:18px;
}
.happy-wrap { flex:0 0 auto; text-align:center; }
.happy-cat { width:42px; height:32px; display:block; }
.happy-name { margin:0; font-size:10px; font-weight:900; color:#c9a24a; }
.happy-bubble {
  flex:1 1 auto; margin:0; min-width:0;
  font-size:14.5px; font-weight:900; color:#5a4a63; line-height:1.45;
  /* ★ 日本語は ふつう どこでも 折り返せる ので、keep-all で 文字と 文字の
     間では 折らせず、**言葉の 間の スペースだけ**を 折り返し どころに する。 */
  word-break:keep-all;
}
.howto {
  position:relative;                   /* ★T118：下の 押し代（::after）の 親 */
  flex:0 0 auto; padding:8px 12px; border-radius:999px;
  background:var(--white); border:3px solid var(--pink-soft);
  color:var(--pink-dark); font-size:12.5px; font-weight:900; white-space:nowrap;
}
/* ★★ T289 ― ★見えない 押し代（★T118 の 型・★フリーセルの `.howto::after` を そのまま 写した）★★
   ★ わけ … ★T288 で 数えたら、この ボタンは 12画面 ぜんぶで **30〜35px**でした（★44px 割れ）。
   ★ 直しかた … ★**見た目は 1pxも 太らせない。★的だけ 44px に する。**
                ★箱も 帯も 盤も 1pxも 伸びません（★`::after` は ならびに 入らない）。
   ⚠️★ よこには 広げない（`left:0;right:0`）―― ★広げると となりの ボタンの 的を 取ります。
   ⚠️★ 高さは **44px と 決め打ち**して まん中ぞろえ。★±4px と 書くと ふちの 太さぶん 足りません
        （★フリーセルの 書き置き・375px で 40px しか 出なかった【実測】）。 */
.howto::after {
  content:''; position:absolute; left:0; right:0;
  top:50%; height:44px; transform:translateY(-50%);
}
.howto:hover { border-color:var(--pink); }
@media (max-width:360px) {
  .happy-cat { width:34px; height:26px; }
  .happy-bubble { font-size:12.5px; }
  .howto { padding:7px 9px; font-size:11.5px; border-width:2px; }
  .log-row { padding:5px 7px; gap:6px; }
}

/* ハッピーが とびはねる（勝った ときだけ・仕様 §6-2）*/
@keyframes happyJump {
  0%,100% { transform:translateY(0) rotate(0); }
  30% { transform:translateY(-9px) rotate(-7deg); }
  60% { transform:translateY(0) rotate(5deg); }
}
.happy-cat.is-jump { animation:happyJump .5s ease-in-out 6; }

/* ── 札が 降る 演出（仕様 §6-2・ソリティアと まったく 同じ 52枚）────
   canvas に 消さずに 描きつづける ので、あの おなじみの 帯が のこる。
   タップで 飛ばせる ／ 6秒で かってに 止まる（game.js）。 */
.fall-canvas { position:fixed; inset:0; z-index:70; touch-action:manipulation; }

/* ── 勝ち／止まった ときの 画面 ───────────────────── */
/* ★★ T370（★T369 トライ F2）：z-index 80 → 1000（★スパイダー T368 と 同じ 直し）★★
   ★ わけ … ★札の z-index は place() で 最大 400、★えらんだ 札は 500。★それが 結果の 箱の 上に 乗って いた
     【★実測・812×375：箱の 中 1144点中 20点が 札を 返す】。★えらんだ 札（500）よりも 上に する。
   ★ ハッピー（75）・札が 降る 演出（70）は 前から 箱の 下 ―― ★見え方は 札が 箱に 乗らなく なる だけ。 */
.result-wrap {
  position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(70,60,82,.42);
}
.result-box {
  width:min(360px,100%); padding:22px 20px 20px; text-align:center;
  background:var(--white); border:5px solid var(--pink-soft); border-radius:26px;
  box-shadow:0 10px 0 rgba(196,58,115,.16); max-height:100%; overflow-y:auto;
}
@keyframes resultIn { 0% { transform:scale(.8); opacity:0; } 100% { transform:scale(1); opacity:1; } }
.result-wrap:not(.hidden) .result-box { animation:resultIn .22s ease-out; }
.result-title { margin:0 0 10px; font-size:26px; font-weight:900; color:var(--pink-dark); }
.result-title.is-stop { color:#7f8fa0; font-size:26px; }
.result-say { margin:0 0 16px; font-size:16px; font-weight:900; color:#5a4a63; line-height:1.6; }
.result-buttons { display:flex; flex-direction:column; gap:9px; }

/* ★★ 詰みの 箱は「もどす」が 主役（社長裁定4）★★
   ------------------------------------------------------------
   ソリティア・スパイダーは「新しく 配る」が 主役だった。ピラミッドは 逆。
   ★測った：先を読まない 打ち方だと 47.1% が 詰む。2回に1回 出る 画面。
   そして この 配りは 必ず クリアできる ので、
   正しい 次の 一手は「配り直す」では なく「もどす」。
   ★ ボタンの 大きさで それを 言う ―― 画面の 文字は 1文字も 足さない。
     主役（.dialog-ok）と わき役（.alt）の 差は、既存8本と 同じ 付けかた。 */
.dialog-ok {
  display:block; width:100%; padding:13px 16px; border:none; border-radius:999px;
  background:var(--pink-deep); color:#fff; box-shadow:0 5px 0 var(--pink-dark);
  font-family:inherit; font-size:19px; font-weight:900; text-decoration:none; text-align:center;
}
.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 rgba(196,58,115,.10);
  font-size:14px; padding:9px 14px;
}

/* ★★ T291 ―「指の的だけ たて44px」の 見えない 押し代（★T118／T289 の 型）★★
   ★ わけ … ★T288 は これを「ⓑ 箱の ならびを 変えないと 直らない」に 分けました。
            ★★ところが アトが T289 の 最後に
              ★**「`::after` は ならびに 入らないので 箱は 伸びない」**と
              ★★自分の 見立ての まちがいを 見つけました。★数え直したら その とおりでした。
   ★ 数えた もの【★実測・12画面×結果の箱2場面・T291】
        ★ `#btnSub`（新しく 配る）・`#btnQuit`（◀ ゲームを選ぶ）… 見た目 **たて38px**・的 39px（★12/12 で 44px割れ）。
        ★★となりの ボタンとの すきま **9px**・箱の 下の 空き **20px**。
        ★★★44px に するのに 要るのは **上下 3px ずつ** ―― ★どちらにも 入ります。
        ★ 上の `#btnMain` は 見た目 45px・的 46px で もう 通って いるので さわりません。
   ★ 直しかた … ★**見た目は 1pxも 変えない。★的だけ たて 44px。**★よこは 1pxも 広げません。
   ★ 箱は 伸びません … ★`::after` は 絶対位置なので ならびに 入りません【★T118 で 実測ずみ】。
   ⚠️★ `z-index:0` を 足して います。★T289 §3-② で アトが 見つけた
      ★★「`position:relative` だけを 足すと 遠くの 丸かどが 色1つぶん ずれる」を 起こさない ため。 */
#btnSub, #btnQuit { position:relative; z-index:0; }
#btnSub::after,
#btnQuit::after {
  content:''; position:absolute; left:0; right:0;
  top:50%; height:44px; transform:translateY(-50%);
}

/* ★ 箱が 出た 瞬間、指が まだ 動いている あいだは おせなく する（T62の 事故よけ）
   強調は 増やさない ―― 足すのでは なく 引く。おせない あいだだけ
   うすく・平たく して、おせるように なった 瞬間に 色と かげが もどる。 */
.result-buttons { transition:opacity .16s ease-out; }
.result-box.is-locked .result-buttons { pointer-events:none; opacity:.4; }
.result-box.is-locked .dialog-ok { box-shadow:none; transform:translateY(3px); }

/* ── 遊び方の 中身 ────────────────────────────── */
dialog {
  width:min(420px,92vw); padding:22px 20px 20px; border:none; border-radius:26px;
  background:var(--white); color:var(--ink); font-family:var(--font-main);
  box-shadow:0 12px 0 rgba(196,58,115,.16);
}
dialog::backdrop { background:rgba(70,60,82,.42); }
dialog h2 { margin:0 0 6px; font-size:22px; font-weight:900; color:var(--pink-dark); text-align:center; }
.dialog-lead { margin:0 0 14px; font-size:15px; font-weight:900; text-align:center; color:#5a4a63; }
.close-dialog {
  position:absolute; top:10px; right:12px; width:34px; height:34px; border-radius:50%;
  border:3px solid var(--pink-soft); background:var(--white); color:var(--pink-dark);
  font-size:17px; font-weight:900; line-height:1;
}
/* ★★ T289 ― ★`×` の 見えない 押し代（★T118 の 型）★★
   ★ わけ … ★T288 で 数えたら **34×34**。★10本 そろって 同じ 数で、★会社で いちばん 小さい ボタン。
            ★★しかも「読み終わって 閉じる」は **遊ぶ 前の 最初の 1回**。
              ★ここで 指を 外した子は、まだ 1回も 遊んで いません。
   ★ 直しかた … ★**見た目 34×34 の まま。★的だけ 44×44。**★箱は 1pxも 伸びません。
   ★ はみ出す 先 … ★34→44 で 上下左右に **5px ずつ**。★行き先は 箱の すみの 空きだけで、
                  ★★押せる ものは 1つも いません【★12画面で 数えた・T289】。
   ⚠️★ 親は すでに `position:absolute` なので、★`position:relative` を 足す 必要は ありません。 */
.close-dialog::after {
  content:''; position:absolute; left:50%; top:50%;
  width:44px; height:44px; transform:translate(-50%,-50%);
}
.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 16px; padding:10px 12px; border-radius:16px;
  background:var(--cream); border:3px solid var(--gold-soft);
  font-size:13.5px; font-weight:700; line-height:1.7; color:#6b5522;
}
.help-note b { color:var(--pink-dark); }

/* ============================================================
   ★★★ T297 ② ―― ★「もどす」「新しく 配る」の 見えない 押し代（★🎨アト・2026-09-15）★★★
   ★ ★きっかけ：★🧪トライ T296 ―「★ピラミッド・ソリティア・スパイダーには `.tool::after` が
     ★ ★1行も なく、★灰色でない ときも **36px の まま**」。
   ★ ★★これは ★**私自身の T288 の 数えもれ**です（★67個 と 書きましたが、正しくは もっと ありました）。
   ------------------------------------------------------------
   ★ ★直す前【★アト実測・T297-10・★追記⑥の 12画面・★灰色を 起こして 測った】：
     ★ ★ ・★「もどす」　　… ★見た目 **70.2×36px**／★指の的 **71.2×36px**（★たてが **8px 足りない**）
     ★ ★ ・★「新しく 配る」… ★見た目 **97.7×36px**／★指の的 **97.7×36px**（★たてが **8px 足りない**）
     ★ ★★12画面 ぜんぶ ✕。★3本 × 2つ × 12画面 ＝ ★**72通り**。

   ★ ★直しかた：★**フリーセルの `.tool::after`（★T118）を そのまま 写す**。
     ★ ★★**見た目は 1pxも 太りません** ―― ★絶対位置の 箱は ならびに 入らないので、
     ★ ★★★帯も 盤も 札も ページの たけも 1pxも 動きません（★T289 で 私が 数え直した ところ）。
   ★ ⚠️★T118 の 書き置きの とおり、★`top/bottom` で ±4px とは 書きません。
     ★ ★★`top/bottom` は **ふち（border）の 内がわ**が 基準なので、ふちの 太さ（2〜3px）ぶん
     ★ ★★★足りなく なります（★T289 で 私は「読んだのに 踏みました」）。
     ★ ★→ ★たかさを **44px と 決め打ち**して まん中ぞろえ。★ふちの 太さに 左右されません。
   ★ ★よこには 広げません（★となりの ボタンを ふさがない ため。★`.tools{gap}` は 1文字も 触って いません）。
   ★ ★灰色（disabled）の ときは 押し代も 消します（★フリーセルと 同じ。★押せない ものを 押せそうに 見せない）。
   ------------------------------------------------------------ */
.tool { position:relative; }
.tool::after {
  content:''; position:absolute; left:0; right:0;
  top:50%; height:44px; transform:translateY(-50%);
}
.tool[disabled]::after { display:none; }