/* ============================================================
   スパイダーソリティア ― 見た目（T71・コーダ）
   ------------------------------------------------------------
   ・色・かたち・丸ゴシックは 既存7本と そろえてある（設計図 §9.5）。
   ・カードの ひりつ 419:635（2:3）は ぜったいに くずさない（設計図 §9）。
   ・進み具合バー・常設の 解説パネル・たしかめ用の 箱は 1つも 作らない（§5.5 の上限）。
   ・遊んでいる間の ボタンは **2つだけ**（もどす／新しく 配る）。どちらも 上の帯の 中。
   ・設定は **むずかしさの プルダウン 1つだけ**（§5.5 の 例外は 1ゲームに 1つまで）。

   ★★ 寸法の 決めごと（仕様 §1・ここを 間違えると 全部 こわれる）★★
     ・1000×900 は **たて**で 決まる（横は 余る）
     ・375px は **横**で 決まる（10列が 入る はば ＝ 33px）
     どちらも 器の 実寸から game.js の layout() が 計算する。
     **CSS は 札の 大きさを 1mmも 決めない。** CSS が 決めるのは 器の かたちだけ。

   ★ 1000×900・375px・320px の どれでも スクロールを 出さない（社長の 一番の 要望）。
   ★ ゲームの 中に「スマホだと 小さいよ」の 言い訳は 1文字も 書かない（社長裁定1b）。
   ・仕上げは 🎨アトが やります。部品ごとに 見出しを 入れてあります。
   ============================================================ */

: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: 33px;
  --ch: 50px;
  --radius: 3px;
}

* { 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; }
}

/* ★★★ T275 ―「↻ やめる」の 型（★アト T273 §2 の 型・★設計図 追記⑩）★★★
   ------------------------------------------------------------
   ★ 置き場所 … 上の帯の いちばん 右（★「もどす」「新しく 配る」の さらに 右）。
                ★★この本は 上の帯に すでに ボタンが 2つ あるので、
                ★★★入るか どうかを 先に 数えました【T275 実測・はば320px】：
                ★  帯 314px ＝ ◀ 34.5 ＋ 名前の 箱 125.5 ＋ どうぐ 142 ＋ すきま 12。
                ★  名前の 字は 60.9px しか 使って いない ので、
                ★  **名前の 箱に 64.6px の あそび** が あります。
                ★  → ★44px ＋ すきま 6px ＝ 50px。★**14.6px 残して 入ります**。
   ★ 返す margin … ★この本の 上の帯の たけは **38px**（★たてを 場札に まわす ため）。
                ★44 − 38 = **6px** はみ出す ぶんを、★**下だけ**に そっくり 返します。
                ★（★上下に 半分ずつ 返すと、★44px の 箱が 画面の 外に はみ出して
                ★  届くのが 42px に なります ―― ★T273 §4-2 実測 25通り）
   ★ 色      … うすみどり（★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:-6px;
  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; }
}
/* ★★★ T275 ―― ★★ここは 私の 見張りが 私を 止めた ところ です（★記録）★★★
   ------------------------------------------------------------
   ★ ★ボタンを 足したら、★はば **375px と 390px** で
     ★ ★★名前の 箱が やせすぎて、★★★「スパイダー」の 字が 箱から **9.8px／2.3px** はみ出し、
     ★ ★★★375px では 「もどす」に **3.8px 重なって いました**【★T275 実測】。
   ★ ★★数字の 見張り（あふれ・画面外・行の数）は ★**ぜんぶ 通しました** ――
     ★ ★字は `white-space:nowrap` なので **折れずに 出て いく** から です。
     ★ ★★見つけたのは ★「名前が 箱から はみ出したか」を 数える 1行 でした。
   ★ ★★中身：★名前の 箱に 要るのは 〈かお 30px ＋ すきま 6px ＋ 字 70.2px ＝ 106.2px〉。
     ★ ★はば375px では 箱が **86.6px** しか 残りません（★19.6px 足りない）。
   ★ ★★→ ★**かお を はば400px 以下で しまいます**（★もとは 360px 以下）。
     ★ ★  → ★要るのが 70.2px に なり、★**16.4px 残して 入ります**。
   ⚠️★ ★★ハッピーは 消えません（★§9.5）―― ★この本の ハッピーは **画面の いちばん下**に
     ★ ★います（`.log-row` の `#happyCat`）。★消えるのは 帯の 小さい かおだけ です。
   ------------------------------------------------------------ */
@media (max-width:400px){
  .brand-cat { display:none; }
}

/* ── はじめの 画面 ────────────────────────────── */
.title-screen {
  flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  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); }

/* ── むずかしさを えらぶ（★社長裁定3・T64 スピードの 形を そのまま）────
   2か所に 出る（はじめの 画面 ／ 止まった・勝った 画面）。見た目は 同じ。
   ・遊んで いる とちゅうの 画面には 出さない（設計図 §5.5 の 線引き）。
   ・強調（光る・色が 変わる）は 足さない。 */
.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;
}
.result-box .level-pick { margin:0 auto 14px; }
.level-pick-name { font-size:13px; font-weight:900; color:#7a5205; white-space:nowrap; }
.level-select {
  /* ★T368：38→44px（★select は `::after` が 描かれない ので 見た目で 44。★箱が 6px 高く なるのは 社長OK・追記⑯ B） */
  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; }
.level-select[disabled] { opacity:.5; cursor:default; }

/* ── 遊ぶ 画面（場札エリア）────────────────────────
   ★ .board が のこり ぜんぶを もらう。その 実寸を game.js が 測って
     札の 大きさを 決める。 */
.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 を 置かないと、指を 動かした 瞬間に ブラウザが
   「これは 画面を すべらせる 指だ」と 決めて pointermove を くれなく なる
   ＝ スマホで 札が 運べなく なる。ここは 消さない こと。 */
.board, .board-in, .spot, .card { touch-action:none; }

/* ★ せまい 画面では 器の わくを 削る（10列ぶんの はばを 守る ため）
   ------------------------------------------------------------
   スパイダーは 10列。わくの 1pxが そのまま 札の はばに 効く。
     375px … 余白4＋わく3＋内3 ＝ 片側10px → 中身 355px → 札 33px
     320px … 余白3＋わく2＋内2 ＝ 片側 7px → 中身 306px → 札 28px */
@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; }
}

/* 置き場の 下じき（山札1・そろった組8・場札10）*/
.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; }
/* 山札を おした のに 配れなかった ときの 返事（仕様 §7-4 の 6番）
   ------------------------------------------------------------
   「空の列が あると 配れない」は 本物の ルール。削らない。
   でも **押しても 何も 起きない** は T68 の 🟡3（壊れてる？）と 同じ 形なので、
   押した ことは 必ず 伝える ―― 短く ぷるっと ゆれる ＋ 小さい音（game.js）。
   ★ どこが 空いているかは 光らせない。「何かが だめだった」だけを 伝える。
   ★ 強調は 画面に これ 1種類だけ（設計図 §5.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; }

/* そろった 組の 置き場 8つ。埋まると 少し 濃くする（文字は 1つも 足さない）*/
.spot.is-found.is-filled { box-shadow:inset 0 0 0 2px rgba(255,255,255,.75); }

/* 札1枚。位置は transform だけで 動かす ので、動きが そのまま アニメに なる。
   ★ 2枚がさね：外（.card）＝ 置き場所 ／ 内（.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:grab; }        /* 表向きは つまめる */
.card.as-stock { cursor:pointer; }          /* 山札は おすと 配れる */
.card-in { position:absolute; inset:0; border-radius:var(--radius); }
.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 { transition:none; }

/* ★★ 運んでいる 札 ★★
   すべる 動きを 切って、指に **ぴったり** ついてくる ように する。
   ★ 見せ方は これ 1つだけ ―― 「置ける ところを 光らせる」は 作らない
     （設計図 追記②。置ける場所を プログラムが 教えたら ひらめきを 奪う）。
   ⚠️ 色を 変えない・光らせない・大きく しない。持ち上がった かげ だけ。 */
.card.is-drag { transition:none; cursor:grabbing; }
.card.is-drag img { box-shadow:0 7px 13px rgba(86,53,38,.34); }

/* ★ すべっている 途中の 札は おせない（T69・🔴1 の 直しを そのまま）
   通り道を ふさがない ように するだけ ―― 見た目は 1mmも 変えない。 */
.card.is-fly { pointer-events:none; }

/* ★★ 見切れた 札（T72・かつみ社長の 裁定）★★
   ------------------------------------------------------------
   社長：「ありえないくらい トランプを 重ねられたら 画面から 見切れちゃって いいよ。
           見切れる＝上限 って ことで いいと 思う。
           そして それは いちいち プレイヤーに 伝える 必要は ないです。」
   → 列が つめきれない ほど 長く なった とき、**上の 札から** 画面の 外に 出す。
     ★下は 必ず 残す（さわるのは 一番下の 札。下が 消えたら 詰みに なる）。
     ★注意書き・印・色は 1つも 足さない ―― ただ 静かに 見えなく なるだけ。 */
.card.is-clip { visibility:hidden; pointer-events:none; 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;
  /* 日本語は ふつう どこでも 折り返せる ので、文字と 文字の 間では 折らせず、
     **言葉の 間の スペースだけ**を 折り返し どころに する（T69・🟡10）。 */
  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; }
}

/* ハッピーが とびはねる（勝った ときだけ）*/
@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; }

/* ── 札が 降る 演出（仕様 §8-2）──────────────────
   7本かけて 見つけた 当たり（トライ「7本で 一番いい 瞬間」）を そのまま 使う。
   タップで 飛ばせる ／ 6秒で かってに 止まる（game.js）。 */
.fall-canvas { position:fixed; inset:0; z-index:70; touch-action:manipulation; }

/* ── 勝ち／止まった ときの 画面 ───────────────────── */
/* ★★ T368：z-index 80 → 1000 ★★
   ★ わけ … ★札の z-index は 置いた 順に 1枚ずつ 増える（★place() の z++・104枚）。★81枚目から 先の 札が
     ★★「止まった」の 箱の 上に 乗って いた【★実測・812×375：むずかしさ の 選ぶ箱の まん中に 札が 4本 かぶり、的が はば 12px】。
     ★568×320・568×272 の 見張りの「押し代が となりの 見た目を 取った」も ★本当は この 札だった（★押し代の せいでは ない）。
   ★ つかんだ 札（900＋）よりも 上に する。★箱が 出て いる あいだは 札を つかめない ので、★ほかの 見え方は 変わらない。 */
.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:27px; 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; }
.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:17px; 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:15px;
}

/* ★★ T291 ―「指の的だけ たて44px」の 見えない 押し代（★T118／T289 の 型）★★
   ★ わけ … ★T288 は これを「ⓑ 箱の ならびを 変えないと 直らない」に 分けました。
            ★★ところが アトが T289 の 最後に
              ★**「`::after` は ならびに 入らないので 箱は 伸びない」**と
              ★★自分の 見立ての まちがいを 見つけました。★数え直したら その とおりでした。
   ★ 数えた もの【★実測・12画面・T291】
        ★ `#btnMain`（新しく 配る）… 見た目 **たて43px**・的 44px。★上の となりまで **24px**・下に **9px**。
        ★ `#helpDialog .dialog-ok`（分かった！）… 見た目 **たて43px**。★上に **65px**・下に **102px**。
        ★★どちらも 44px に するのに 要るのは **上下 0.5px ずつ**。
   ★ 直しかた … ★**見た目は 1pxも 変えない。★的だけ たて 44px。**★よこは 1pxも 広げません。
   ★ 箱は 伸びません … ★`::after` は 絶対位置なので ならびに 入りません【★T118 で 実測ずみ】。
   ⚠️★ `z-index:0` を 足して います。★T289 §3-② で アトが 見つけた
      ★★「`position:relative` だけを 足すと 遠くの 丸かどが 色1つぶん ずれる」を 起こさない ため。 */
#btnMain, #helpDialog .dialog-ok { position:relative; z-index:0; }
#btnMain::after,
#helpDialog .dialog-ok::after {
  content:''; position:absolute; left:0; right:0;
  top:50%; height:44px; transform:translateY(-50%);
}

/* ★ 箱が 出た 瞬間、指が まだ 動いている あいだは おせなく する（T62の 事故よけ）
   足すのでは なく 引く ―― おせない あいだだけ うすく・平たく して、
   おせるように なった 瞬間に 色と かげが もどる。 */
.result-buttons, .result-box .level-pick { transition:opacity .16s ease-out; }
.result-box.is-locked .result-buttons,
.result-box.is-locked .level-pick { 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; }