/* ============================================================
   神経衰弱 ― 見た目（T79・コーダ）
   ------------------------------------------------------------
   ・色・かたち・丸ゴシックは 既存9本と そろえてある（設計図 §9.5）。
   ・カードの ひりつ 419:635（2:3）は ぜったいに くずさない（設計図 §9）。
   ・遊んでいる間の ボタンは **1つも 無い**（もどすも 新しく配るも 作らない）。

   ★★★ この 画面には「光る・色が 変わる」ものが **1つも ない** ★★★
     ------------------------------------------------------------
     社長裁定5：★青わくは 作らない。強調ゼロ。
     ★ 1枚めを おした ことは、**その札が 裏から 表に なる**ことで 分かる
       ―― この 画面で 一番 大きい 変化。青わくは 同じことを 2回 言うだけ。
     ★ 下の 札（.card）の きまりを 全部 見ても、
       :hover ／ :active ／ filter ／ 色の 切りかえ は 1つも 無い。
       あるのは
         ・.is-down … 裏と表の 入れかえ（＝ めくる。ゲームの 動きそのもの）
         ・.is-no   … ぷるっと ゆれる（transform だけ。光でも 色でもない）
         ・.is-wait … ★絵が 来るのを 待つ ゆれ（transform だけ。★電波が 弱い ときだけ 出る）
       の 3つだけ。**ここに 光る ものを 足さないこと。**

   ★★ 寸法の 決めごと（★ここを 間違えると 全部 こわれる）★★
     ・並べ方は **7列×8段（56枠）。最後の段だけ 3枚**（52枚）
     ・52枠の 場所は 最後まで 動かさない（覚える ゲームで 並びが 動いたら 全損）
     → だから 札の 大きさは 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;
}

/* ── 上の帯（もどる ／ 名前）────────────────────────
   ★ 遊んでいる間の ボタンは 無い。左右の つりあいを 取るための 空きだけ 置く。 */
.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; }
.topbar-pad { flex:0 0 auto; width:96px; }

/* ★★ T274 ―「↻ やめる」（★アトの 型・T273 §2／設計図 追記⑩）★★
   ------------------------------------------------------------
   ★ 遊んでいる 間だけ 出る。★押すと はじめの 画面へ 戻る。
   ★ 出ている あいだは 右の 空き枠（.topbar-pad）を 消す ―― ★入れかわり。
   ⚠️★ position:relative; z-index:2 は 飾りでは ない（T273 §4-1）。
        ★ これが 無いと、44px の 箱の はみ出しを あとから 来る 兄弟が 上書きし、
          ★指の的が 36〜42px に 減る【アト実測】。
   ⚠️★ 44px の はみ出しは **下だけ** に margin で 返す（T273 §4-2）。
        ★ ここは .back が 36px なので、★44 − 38（帯）＝ **6px** を 返す。
          ★ こうすると 上の帯（38px）は **1pxも 伸びません**。
        ★★ 6px の うち **2px を 上・4px を 下**に した 理由【★T274 実測】：
           ★ 全部 下に 返すと ボタンの 下ふちが **51px**、★盤の 器の 上ふちが **50px** で
             ★★1px かぶりました。★2px 上に 逃がすと ★**4〜48px** に なり、★かぶり 0・すきま 2px。
           ★ 上に 逃がしても 画面から 出ません（★帯の 上ふちが y=6px。★T273 §4-2 の
             「上下 半分ずつは だめ」は、★帯が y=2px の 本の 話）。
   ★ 色は うすみどり ―― ★20本の 上の帯で 空いて いた 唯一の 色（T273 §2）。 */
.quit-btn {
  position:relative; z-index:2;
  flex:0 0 auto; margin-left:auto; margin-top:-2px; margin-bottom:-4px;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px; padding:0 10px;
  background:#B7EDC9; border:3px solid #2F7D4C; border-radius:999px;
  color:#22633F; font-family:inherit; font-size:11.5px; font-weight:900; line-height:1;
  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 以下（★320の 端末）は 字を 1段 下げ、★↻ を 落とす（★45〜47px に 収める）*/
@media (max-width:374px) {
  .quit-btn { font-size:10.5px; padding:0 5px; }
  .quit-btn .quit-icon { display:none; }
}

@media (max-width:520px) {
  .back span { display:none; }
  .back { padding:0 11px; }
  .brand span { font-size:15px; }
  .topbar-pad { width:40px; }
}
@media (max-width:360px) {
  .app-shell { gap:6px; }
  .brand-cat { display:none; }
  .brand span { font-size:13px; }
  .topbar-pad { width:34px; }
}

/* ── はじめの 画面 ──────────────────────────────
   ★ 置くものは 3つだけ ―― ひとこと ／ もの覚えの プルダウン ／ はじめる。 */
.title-screen {
  flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  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); }

/* ── ロボットの もの覚え（★この ゲームで ただ1つの 設定）──────
   置き場は 2か所だけ ―― はじめの 画面 と 終わりの 画面（スピード T64 と 同じ）。
   ★ 遊んでいる 最中の 画面には 置かない（設計図 §5.5 の 線引き）。
   ★ 中身（枚数）は 1つも 出さない。言葉だけで 分かるように する。 */
.level-pick {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 10px;
  max-width:100%; margin:0 auto 14px; padding:7px 10px;
  background:var(--cream); border:3px solid var(--gold-soft); border-radius:20px;
}
.title-screen .level-pick { margin:0; }
.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; }

/* ── 遊ぶ 画面（盤）──────────────────────────
   ★ .board が のこり ぜんぶを もらう。その 実寸を game.js が 測って
     札の 大きさを 決める（＝ 52枚が 絶対に はみ出さない）。
   ★ 52枚 固定。1枚も 増えず 1pxも 伸びない ので、
     「まれな 最悪ケース」が そもそも 存在しない（設計図 2026-08-20 の裁定）。 */
.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 を 置かないと、指が 少し ぶれた 瞬間に ブラウザが
   「これは 画面を すべらせる 指だ」と 決めて、おした のに 反応しない ことが ある。
   ★ このゲームは 押し間違いが 取り消せない ので、ここは 絶対に 消さない。 */
.board, .board-in, .card { touch-action:none; }

/* ★ スマホでは 器の わくを 削る（仕様 §1-0 の 内わけを 守る ため）
     375px … 余白4＋わく3＋内3 ＝ 片側10px → 中身 355px → 札 49px ✅
     320px … 余白3＋わく2＋内2 ＝ 片側 7px → 中身 306px → 札 33px */
@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枚 ────────────────────────────────
   位置は transform だけで 動かす ので、動きが そのまま アニメに なる。
   ★ 2枚がさね に して ある：
     外（.card）… 置き場所（transform）。★取った 2枚が 帯へ 飛ぶ のも ここ
     内（.card-in）… 中身（絵）
   ★ 取られた 場所に 下じきは 置かない（わくが 残ると「まだ 何か ある」と 見える）。
   ★ だから 52枠の 場所は 最後まで 動かない のに、盤は だんだん 空いていく。 */
.card {
  position:absolute; left:0; top:0; width:var(--cw); height:var(--ch);
  transform-origin:0 0;                     /* ★帯へ 縮めて 飛ぶ ときの 基準 */
  -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none;
  cursor:pointer;
  transition:transform .3s cubic-bezier(.3,.7,.4,1);
}
.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;                      /* 当たり判定は game.js の 座標計算に まかせる */
}

/* ★★ めくる（裏 → 表）★★
   ------------------------------------------------------------
   ★ これが この ゲームの 唯一の「変化」であり、そのまま
     「えらんだ」の 合図でも ある（社長裁定5 ―― 青わくは 作らない）。
   ★ 時間は 200ms（game.js の TUNE.FLIP）。
     ⚠️ この 200ms は「見せる時間（1.2秒／0.6秒）」には 含めない。 */
.card .cf { opacity:1; transition:opacity .2s ease-out; }
.card .cb { opacity:0; transition:opacity .2s ease-out; }
.card.is-down .cf { opacity:0; }
.card.is-down .cb { opacity:1; }
.board.no-anim .card, .board.no-anim .card img { transition:none; }

/* ★★「それは だめ」の ゆれ ★★
   ------------------------------------------------------------
   すでに めくれている 1枚めを もう一度 おすと、その札だけ ぷるっと ゆれる。
   ★「もう一度 おして 取り消す」は 無い ―― もう 見えて しまっている ので、
     外しても「見なかったこと」には できない（仕様 §4-3）。
   ★ ゆれは **光でも 色でも ない** ので、強調は ゼロの まま。音も 鳴らさない。
   ★ どの札が 当たりかは 1つも 教えない（設計図 追記②）。

   ⚠️ ふだんの 置き場所は transform で 決めている。ゆれの アニメも transform なので、
      そのまま 書くと **左上に 飛ぶ**。→ ゆらす 直前に 置き場所を --sx / --sy に 入れる。 */
@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)); }
}
.card.is-no { animation:shakeNo .15s ease-in-out; transition:none; }

/* ★★「絵が 来るのを 待っている」ゆれ（T81・電波が 弱い ときだけ 出る）★★
   ------------------------------------------------------------
   ★ T80 §7 の 事故：札1枚 193KB。電波が 弱いと 絵が 1.5秒 かかるのに、
     見せる時間の 1.2秒は 絵と 関係なく 走っていた ―― ★白いまま 裏へ 戻っていた。
   ★ 直したので、今は **絵が 来るまで めくらない**。
     ★ただし 黙って 止まると「おしたのに 何も 起きない」に 見える。
       そこで 0.15秒 以上 待たせる ときだけ、その札が ゆっくり 上下に ゆれる。
   ★ 速い回線では **1度も 出ない**（絵は もう 手元に ある）。
   ★ ここも 上の ゆれと 同じ ―― ★transform だけ。★光らない・色も 変えない。
     ★強調は ゼロの まま（社長裁定5）。「読み込み中」の 文字も 出さない（設計図 §5.5）。
   ⚠️ 置き場所は transform で 決めている ので、ゆれる 直前に --sx / --sy に 入れる
      （入れないと 左上に 飛ぶ）。shakeNo と 同じ 作法。 */
@keyframes waitFace {
  0%,100% { transform:translate(var(--sx,0px),var(--sy,0px)); }
  50%     { transform:translate(var(--sx,0px),calc(var(--sy,0px) - 4px)); }
}
.card.is-wait { animation:waitFace .8s ease-in-out infinite; 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;
  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; }

/* ── 勝ち／負け／引き分け の 画面 ───────────────────── */
/* ★★ T370（★T369 トライ F2）：z-index 80 → 1000（★スパイダー T368 と 同じ 直し）★★
   ★ わけ … ★札の z-index は place() で 最大 225。★取った 札の 列が 結果の 箱の 上に 乗って いた
     【★実測・812×375：箱の 中 1540点中 64点が 札を 返す／568×272：取った 札が「ロボットの もの覚え」の 選ぶ箱を 横切る】。
   ★ ハッピー（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); }
/* ★ 負け・引き分けは 同じ 落ちついた 色。★引き分けを 負けと 同じ 言葉で 片づけない
   （8試合に 1回 出る ので、専用の 言葉を 用意して ある ―― index.html を 見ること）。 */
.result-title.is-quiet { color:#7f8fa0; }
.result-say { margin:0 0 14px; 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: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】
        ★ `#btnQuit`（◀ ゲームを選ぶ）… 見た目 **たて38px**・的 38〜39px（★12/12 で 44px割れ）。
        ★★上の `#btnAgain` までの すきま **9px**・箱の 下の 空き **20px**。
        ★★★44px に するのに 要るのは **上下 3px ずつ** ―― ★どちらにも 入ります。
   ★ 直しかた … ★**見た目は 1pxも 変えない。★的だけ たて 44px。**★よこは 1pxも 広げません。
   ★ 箱は 伸びません … ★`::after` は 絶対位置なので ならびに 入りません【★T118 で 実測ずみ】。
   ⚠️★ `z-index:0` を 足して います。★T289 §3-② で アトが 見つけた
      ★★「`position:relative` だけを 足すと 遠くの 丸かどが 色1つぶん ずれる」を 起こさない ため。 */
#btnQuit { position:relative; z-index:0; }
#btnQuit::after {
  content:''; position:absolute; left:0; right:0;
  top:50%; height:44px; transform:translateY(-50%);
}

/* ★ 箱が 出た 瞬間、指が まだ 動いている あいだは おせなく する（T62・T63 の 事故よけ）
   強調は 増やさない ―― 足すのでは なく 引く。 */
.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); }

/* ★★ T368 ―― ★よこ向きの ひくい 画面（★568×272・568×320）の はじめの 画面を 詰める ★★
   ★ わけ【★実測】：★選ぶ箱を 44px に した（★＋6px・追記⑯ B）ら、★568×272 で「はじめる」が 白い 箱の 下で 切れて
     ★指の的 121×43（★T368 測り直し）。★もとから 中身 163px／箱 132px で ★上下に はみ出して いた（★ひとことが 題に かぶる）。
   ★ 直しかた：★からっぽの すきまと 内よはくだけ 詰める（★字・ボタンの 大きさは 変えない）。 */
@media (orientation:landscape) and (max-height:340px) {
  .title-screen { gap:6px; padding:6px 18px; }
}