/* ============================================================
   スピード ― 見た目（T61・コーダ）
   ------------------------------------------------------------
   ・色・かたち・丸ゴシックは 既存5本と そろえてある（設計図 §9.5）。
   ・カードの ひりつ 419:635（2:3）は ぜったいに くずさない（設計図 §9）。
   ・遊んでいる間の ボタンは 0個。常設の 解説パネルも 進み具合バーも 作らない
     （設計図 §5.5「二層設計の上限」）。
   ・★ 強調は 画面に 1種類だけ ＝「出せない札を おした ときの ゆれ」。
     社長裁定3で「出せる手札は 光らせない」と 決まったので、光りは 1つも 無い。
   ・1000×900 で スクロールが 出ないこと が 目標（社長の 一番の 要望）。
     たての 見つもり：帯48 ＋ ロボット112 ＋ 場196 ＋ 自分163 ＋ ハッピー62
                      ＋ 遊び方44 ＋ 余白 ≒ 705px
   ・仕上げは 🎨アトが やります。部品ごとに 見出しを 入れてあります。
   ============================================================ */

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

  /* カードの 大きさ（419×635 ＝ 2:3 を たもつ）。
     画面はばで のびちぢみ するので、せまい スマホでも 横に はみ出さない。 */
  --hand-w:  clamp(52px, 20vw,  96px);
  --hand-h:  calc(var(--hand-w) * 635 / 419);
  --pile-w:  clamp(64px, 24vw, 108px);
  --pile-h:  calc(var(--pile-w) * 635 / 419);
  --back-w:  clamp(40px, 13vw,  62px);
  --back-h:  calc(var(--back-w) * 635 / 419);
}

/* たてに 余裕の ある 画面（パソコン）では 札を 大きく する。
   1000×900 での たての 見つもり：帯48 ＋ ロボット134 ＋ 場219 ＋ 自分192
                                  ＋ ハッピー62 ＋ 遊び方44 ＋ 余白 ≒ 779px
   → 900px に おさまる（スクロールは 出ない）。
   ⚠️ ここを 大きく する ときは かならず 1000×900 で 出ないことを たしかめる。 */
@media (min-width:560px) and (min-height:840px) {
  :root { --hand-w:112px; --pile-w:126px; --back-w:74px; }
}
/* たてが みじかい スマホ（iPhone SE など 568px）でも 出ないように つめる */
@media (max-height:640px) {
  :root {
    --hand-w:clamp(46px, 18vw, 88px);
    --pile-w:clamp(54px, 21vw, 98px);
    --back-w:clamp(34px, 11vw, 56px);
  }
  .topbar { margin-bottom:6px; }
  .side-row { margin-bottom:6px; }
  .board { padding:10px 8px; margin-bottom:6px; }
  .log-row { margin-bottom:8px; padding:6px 10px; }
  .happy-cat { width:38px; height:29px; }
  .happy-bubble { font-size:14px; }
  .app-shell { padding:8px 12px 12px; }
  /* ★T64で 増えた プルダウンの ぶん、たてを つめる */
  .title-screen { padding:18px 14px 20px; }
  .speed-pick { margin-bottom:10px; padding:5px 9px; }
  .result-box { padding:16px 16px 14px; }
}

* { box-sizing:border-box; }
body {
  margin:0; min-width:320px; color:var(--ink); font-family:var(--font-main);
  background:linear-gradient(180deg,#bcebf0 0 190px,#fff7e8 190px); min-height:100vh;
  -webkit-text-size-adjust:100%;
}
button { font-family:inherit; cursor:pointer; }
.hidden { display:none !important; }
.sprite-defs { position:absolute; width:0; height:0; overflow:hidden; }
/* 部品が 少ない ゲームなので 器を せまくして まん中に よせる
   （広い 画面で 場の 山が ぽつんと しない ように）*/
.app-shell { max-width:560px; margin:0 auto; padding:12px 14px 20px; }

/* ── 上の帯 ───────────────────────────────────── */
.topbar { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.back {
  flex:0 0 auto; display:inline-flex; align-items:center; min-height:38px; padding:0 13px;
  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;
}
.back:hover { border-color:var(--pink); }

/* ★★ T289 ― ★上の帯の「◀ ゲームを選ぶ」の 見えない 押し代（★T118 の 型）★★
   ★ わけ … ★この ボタンは **12画面ずっと 出ている ただ1つの ボタン**。
            ★★T288 で 数えたら 高さ **38px**で、★44px に **6px** 足りて いません。
   ★ 直しかた … ★**見た目 38px の まま。★的だけ 44px。**★帯は 1pxも 伸びません
                （★となりの `.quit-btn` が 44px なので、★帯の 高さは もともと 44px 分 あります）。
   ★ はみ出す 先 … ★上下に **3px ずつ**。★12画面 ぜんぶで 押せる ものは いません【★T289 で 数えた】。
   ⚠️★ よこには 広げない（`left:0;right:0`）―― ★右どなりは `.brand`（★ハッピーと 題）です。
   ⚠️★ `.topbar` で しぼって います（★ふせた 札が あとから 増えても 巻きこまない ため）。 */
/* ⚠️★★ z-index:0 は 飾りでは ありません（★T289 で 写真の 画素が 教えて くれた）★★
   ★ `position:relative` だけを 足すと、★この ボタンは **あとから 塗られる 側**に 移ります。
     ★★すると 下の 卓（`.board-wrap`）の **丸かどの ふちの 色が ±1 だけ ずれ**、
        ★★★写真の 画素が **27画素** 鳴きました【★実測・ホールデム 812×375 ほか 5画面】。
   ★ ★目では 見えない ずれ（255段階の 1）ですが、★**0で ない ものを 0とは 書きません**。
     ★★`z-index:0` を 足すと **0画素**に 戻り、★的は 44px の まま でした【★実測】。
   ⚠️★ `z-index:2` では **直りません**（★27画素の まま）。★0 で ある ことに 意味が あります。 */
.topbar .back { position:relative; z-index:0; }
.topbar .back::after {
  content:''; position:absolute; left:0; right:0;
  top:50%; height:44px; transform:translateY(-50%);
}
.brand { flex:1 1 auto; display:flex; align-items:center; justify-content:center; gap:7px; min-width:0; }
.brand-cat { width:34px; height:26px; 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; }
@media (max-width:520px) { .topbar-pad { display:none; } }

/* ★★ T274 ―「↻ やめる」（★アトの 型・T273 §2／設計図 追記⑩）★★
   ------------------------------------------------------------
   ★ 遊んでいる 間だけ 出る。★押すと はじめの 画面へ 戻る（★速さを 決め直せる）。
   ★ 出ている あいだは 右の 空き枠（.topbar-pad）を 消す ―― ★入れかわり。
     ★ 520px 以下では 空き枠は もともと 消えて います。
   ⚠️★ position:relative; z-index:2 は 飾りでは ない（T273 §4-1）。
        ★ これが 無いと、44px の 箱の はみ出しを あとから 来る 兄弟が 上書きし、
          ★指の的が 36〜42px に 減る【アト実測】。
   ⚠️★ 44px の はみ出しは **下だけ** に margin で 返す（T273 §4-2）。
        ★ ここは .back が 38px なので、★44 − 38 ＝ **6px** を 下へ 返す。
          ★ こうすると 上の帯は **1pxも 伸びません**。
   ★ 色は うすみどり ―― ★20本の 上の帯で 空いて いた 唯一の 色（T273 §2）。 */
.quit-btn {
  position:relative; z-index:2;
  flex:0 0 auto; margin-left:auto; margin-bottom:-6px;
  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; }
}

/* ── はじめの 画面 ──────────────────────────────── */
.title-screen {
  margin-bottom:10px; padding:30px 18px 34px;
  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);
}
.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); }

/* ── ロボットの 速さを えらぶ（★T64・社長裁定）──────────────
   2か所に 出る（はじめの 画面 ／ 決着の 画面）。見た目は 同じ。
   ・遊んで いる とちゅうの 画面には 出さない（ボタン0個は そのまま）。
   ・せまい 画面（320px）では 名前と プルダウンが 2行に 折れる。
   ・強調（光る・色が 変わる）は 足さない ―― 画面の 強調は
     「出せない札を おした ときの ゆれ」1種類の まま（設計図 §5.5）。 */
.speed-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;
}
.speed-pick-name { font-size:13px; font-weight:900; color:#7a5205; white-space:nowrap; }
.speed-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;
}
.speed-select:focus-visible { outline:3px solid var(--pink); outline-offset:2px; }

/* ── ロボットの 行／自分の 行 ────────────────────────
   ★ 4つの 席は 最後まで 動かさない（仕様 §3-2）。
     grid の 4列 固定なので、1枚 出しても 残りが 左に つめない。 */
.side-row { margin:0 0 10px; }
.side-head {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin:0 auto 4px; max-width:520px; padding:0 2px;
}
.side-name { margin:0; font-size:13px; font-weight:900; color:#6b5c75; white-space:nowrap; }
.deck-count {
  margin:0; padding:2px 11px; border-radius:999px; white-space:nowrap;
  background:#fffbe9; border:2px solid var(--gold); color:#7a5205;
  font-size:12.5px; font-weight:900;
}
.hand-row {
  display:grid; grid-template-columns:repeat(4, var(--back-w)); gap:8px;
  justify-content:center; align-items:start;
}
.hand-row.is-mine { grid-template-columns:repeat(4, var(--hand-w)); gap:10px; }

/* 札1枚（席）。空の 席も 同じ 大きさで 残す ＝ 場所が 動かない 証拠 */
.slot {
  position:relative; padding:0; border:none; background:none;
  width:var(--back-w); height:var(--back-h);
  border-radius:7px; touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.is-mine .slot { width:var(--hand-w); height:var(--hand-h); border-radius:9px; }
.slot.is-empty {
  border:3px dashed #e6dced; background:rgba(255,255,255,.35);
}
.slot img { display:block; width:100%; height:100%; border-radius:inherit; }
.is-mine .slot img { box-shadow:0 3px 0 rgba(86,53,38,.14); }

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

/* 出せない札を おした ときの 返事（仕様 §3-3・社長裁定3で 大事さが 上がった）
   短く ぷるっと ゆれる だけ。止めない・ばつを 与えない。 */
@keyframes shakeNo {
  0%,100% { transform:translateX(0); }
  20% { transform:translateX(-6px) rotate(-2deg); }
  45% { transform:translateX(5px) rotate(2deg); }
  70% { transform:translateX(-3px); }
}
.slot.is-no { animation:shakeNo .15s ease-in-out; }
.slot.is-no img { filter:grayscale(.35) brightness(.94); }

/* ── 場の 山 2つ ──────────────────────────────── */
.board {
  position:relative; display:flex; justify-content:center; align-items:center; gap:22px;
  padding:14px 10px; margin:0 0 10px; border-radius:23px;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 2px,transparent 2px 8px), #82ce84;
  border:5px solid #3f863f; box-shadow:0 7px 0 rgba(86,53,38,.2);
}
.pile {
  width:var(--pile-w); height:var(--pile-h); border-radius:10px;
  background:rgba(255,255,255,.20); box-shadow:inset 0 0 0 3px rgba(255,255,255,.35);
}
.pile img { display:block; width:100%; height:100%; border-radius:10px; box-shadow:0 4px 0 rgba(86,53,38,.22); }
@keyframes pilePop { 0% { transform:scale(1.10); } 100% { transform:scale(1); } }
.pile.is-new img { animation:pilePop .16s ease-out; }

/* 3…2…1…スタート！ ／ せーの！ */
.count-box {
  position:absolute; inset:0; margin:0; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.72); border-radius:18px;
  font-size:clamp(30px,9vw,54px); font-weight:900; color:var(--pink-dark);
  text-shadow:0 3px 0 #fff; pointer-events:none;
}
@keyframes countPop { 0% { transform:scale(.6); opacity:0; } 100% { transform:scale(1); opacity:1; } }
.count-box > span { display:inline-block; animation:countPop .18s ease-out; }

/* ── ハッピー ＋ ふきだし（T57 の ポーカーと 同じ 1行）──── */
.log-row {
  display:flex; align-items:center; gap:10px; margin:0 0 12px;
  padding:8px 12px; background:var(--white); border:3px solid var(--pink-soft); border-radius:18px;
}
.happy-wrap { flex:0 0 auto; text-align:center; }
.happy-cat { width:46px; height:35px; display:block; }
.happy-name { margin:0; font-size:10px; font-weight:900; color:#c9a24a; }
.happy-bubble {
  flex:1 1 auto; margin:0; min-height:22px;
  font-size:15px; font-weight:900; color:#5a4a63; line-height:1.5;
}

/* ── 遊び方（画面の 一番下）───────────────────────── */
.howto {
  position:relative;                   /* ★T118：下の 押し代（::after）の 親 */
  display:block; width:100%; padding:10px 12px; border-radius:999px;
  background:var(--white); border:3px solid var(--pink-soft);
  color:var(--pink-dark); font-size:13.5px; font-weight:900;
}
/* ★★ T289 ― ★見えない 押し代（★T118 の 型・★フリーセルの `.howto::after` を 写した）★★
   ★ わけ … ★T288 で 数えたら 高さ **40px**（★44px に 4px 足りない）。
   ★ ★T288 で「16px」「31px」と 出た のは **足りない のでは なく、
       ★★画面の 下で 切れて いた** だけ でした【★T289 で 数え直し・はし=true・すべらせれば 届く】。
       ★★★足りない のは どの 画面でも **4px** ちょうどです。
   ★ 直しかた … ★**見た目 40px の まま。★的だけ 44px。**★上下に 2px ずつ はみ出すだけ。
   ⚠️★ よこには 広げない（`left:0;right:0`）。★この ボタンは もう 画面いっぱいの はばです。 */
.howto::after {
  content:''; position:absolute; left:0; right:0;
  top:50%; height:44px; transform:translateY(-50%);
}
.howto:hover { border-color:var(--pink); }

/* ── 飛ぶ 札（手ざわり・仕様 §3-4）──────────────────
   ★ 判定が 先・見た目が あと。この 絵は ゲームの 中身を 1つも 止めない。
     連打の とちゅうで 何枚 重なっても かまわない 作りに してある。 */
.flycard {
  position:fixed; z-index:60; pointer-events:none;
  border-radius:9px; background-size:100% 100%; background-repeat:no-repeat;
  transform-origin:top left;
  transition:transform .17s cubic-bezier(.3,.7,.4,1);
}

/* ── 勝ち負けの 画面 ────────────────────────────── */
.result-wrap {
  position:fixed; inset:0; z-index:80; 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);
  /* ★T64で 速さの プルダウンが 1つ 増えた ぶんの 保険。
     たてが みじかい スマホ（横向き など）でも 箱の 中で 収まる ように する
     ―― ページ本体が 横にも たてにも スクロールしない のは そのまま。 */
  max-height:100%; overflow-y:auto;
}
/* 決着の 画面の プルダウンは 箱の はばいっぱいに（まん中ぞろえ）*/
.result-box .speed-pick { width:100%; margin-bottom:14px; }
@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 12px; font-size:32px; font-weight:900; color:var(--pink-dark); }
.result-title.is-lose { color:#7f8fa0; }
.result-card { display:flex; justify-content:center; margin:0 0 12px; }
.result-card img {
  display:block; width:96px; height:145px; border-radius:9px;
  box-shadow:0 6px 0 rgba(86,53,38,.2);
}
@keyframes cardIn { 0% { transform:scale(.4) rotate(-12deg); opacity:0; } 100% { transform:scale(1) rotate(0); opacity:1; } }
.result-card img { animation:cardIn .26s cubic-bezier(.2,1.3,.5,1); }
.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】
        ★ `#btnAgain`（もう1回）… 見た目 **たて43px**・的 44px。★上の となりまで **24px**・下に **9px**。
        ★ `#helpDialog .dialog-ok`（分かった！）… 見た目 **たて43px**。★上に **65px**・箱の 下に **20px**。
        ★★どちらも 44px に するのに 要るのは **上下 0.5px ずつ**。
   ★ 直しかた … ★**見た目は 1pxも 変えない。★的だけ たて 44px。**★よこは 1pxも 広げません。
   ★ 箱は 伸びません … ★`::after` は 絶対位置なので ならびに 入りません【★T118 で 実測ずみ】。
   ⚠️★ `z-index:0` を 足して います。★T289 §3-② で アトが 見つけた
      ★★「`position:relative` だけを 足すと 遠くの 丸かどが 色1つぶん ずれる」を 起こさない ため。 */
#btnAgain, #helpDialog .dialog-ok { position:relative; z-index:0; }
#btnAgain::after,
#helpDialog .dialog-ok::after {
  content:''; position:absolute; left:0; right:0;
  top:50%; height:44px; transform:translateY(-50%);
}

/* ★ 決着した 瞬間、指が まだ 動いている あいだは おせなく する
   ------------------------------------------------------------
   T62 トライの 実測：この 2つの ボタンは 手札カードの 真上に かさなる。
   決着の 0.3秒あと に 箱が 出るので、連打の 勢いで そのまま おしてしまい、
   5試合の うち 3回、勝ち負けを 見ないまま 次の 試合が 始まった。
   （パソコンでは「やめる」も かさなるので、ゲーム一覧まで 飛び出す）

   ★ 強調は 増やさない（設計図 §5.5：1画面に 強調は 1種類まで）。
     足すのでは なく 引く ―― おせない あいだだけ うすく・平たく して、
     おせるように なった 瞬間に すっと 色と かげが もどる。
     「おせそうな 見た目の まま おせない」を 作らない ことが 大事。
   待ち時間は game.js の TUNE.RESULT_LOCK 1か所だけ。

   ★T64：速さの プルダウンも 同じ かぎの 中に 入れる。
     連打の 勢いで 速さが かってに 変わったら 台なしに なる。
     ⚠️ pointer-events:none は **wrapper（.speed-pick）に かける**こと。
        select 自体を disabled に する だけ だと、その タップは どこにも
        届かなく なり、game.js の bumpLock（＝ 指が 止まるまで 待つ）が
        走らない。wrapper で 素通しに すれば タップは 箱に 届いて かぎが
        かかり直す。キーボード用の disabled は game.js が 別に 立てている。 */
.result-buttons, .result-box .speed-pick { transition:opacity .16s ease-out; }
.result-box.is-locked .result-buttons,
.result-box.is-locked .speed-pick { pointer-events:none; opacity:.4; }
.result-box.is-locked .dialog-ok { box-shadow:none; transform:translateY(3px); }

/* ── 遊び方の 中身 ──────────────────────────────
   ★ A と K の つながりを 教える ただ1つの 場所（社長裁定3の 申し送り①）。
     遊んでいる とちゅうの 画面には 1文字も 足さない。 */
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 14px; padding-left:1.3em; }
.help-list li { margin-bottom:7px; font-size:14.5px; font-weight:700; line-height:1.65; }
.help-list b { color:var(--pink-dark); }

.ring-wrap {
  margin:0 0 16px; padding:10px 8px 8px; border-radius:18px;
  background:var(--cream); border:3px solid var(--gold-soft); text-align:center;
}
.ring { width:min(190px,52vw); height:auto; display:block; margin:0 auto; }
.ring-num text {
  font-family:var(--font-main); font-size:15px; font-weight:900; fill:#6b5c75;
  text-anchor:middle; dominant-baseline:middle;
  paint-order:stroke; stroke:var(--cream); stroke-width:5px; stroke-linejoin:round;
}
/* A と K だけ 色を 変えて、輪っかの つなぎ目に 目が いく ように する */
.ring-num text.hi { fill:var(--pink-dark); font-size:19px; }
.ring-cap {
  font-family:var(--font-main); font-size:17px; font-weight:900; fill:#c9a24a;
  text-anchor:middle; dominant-baseline:middle;
}
.ring-note { margin:2px 0 0; font-size:15px; font-weight:900; color:#5a4a63; }
.ring-note b { color:var(--pink-dark); font-size:18px; }

/* ============================================================
   ★★★ T297 ―― ★上の帯を 画面に くっつける（★🎨アト・2026-09-15）★★★
   ★ ★社長裁定「★1. 直して、そのまま 公開」。★お手本は ★ブラックジャック（★T279）と 七並べ（★T285）。
   ★★ この かたまりは **スピード 1本だけ**。
   ------------------------------------------------------------
   ★ ★直す前【★アト実測・T297-01・★12画面・★本物の 指で 下へ すべらせた】：
     ★ ★★**12画面中 9画面**で「◀ ゲームを選ぶ」も「↻ やめる」も 画面の 上へ 消え、
       ★ ★★まん中も 押せません でした（★いちばん ひどいのは 568×272 の 上 **−400px**）。
     ★ ★鳴かなかった 3画面（★320×568・375×812・390×844）は **すべる ところが 少ない** 画面です。

   ★★★ この本で 気を つけた ところ ★★★
   ★ ①★`.app-shell` に overflow は 1つも ありません【★実測 `visible/visible`】
     ★ ★→ ★七並べの わな（★`overflow:hidden` の 中では `sticky` が 1pxも 効かない）は 出ません。
   ★ ②★止める 位置は ★**3px**。★「◀」の 見えない 押し代（★`.topbar .back::after` ＝ 44px）が
     ★ ★帯（38px）から 上に **3px** はみ出して います【★実測・12画面とも】。
       ★ ★★`top:0` で 止めると 指の的が 41px に 減ります。★★3px 下げて 44px を 守ります。
     ★ ★代金の 3px は ★**器の 上の よはく 12px の 中**。★盤も 札も 山も 1pxも 動きません。
   ★ ③★「↻ やめる」は 44px の 的の ため 帯から **下に 6px** 出て います。
     ★ ★ふたの すそは **0**（★七並べ T285 の 「すそ 8px で 中身を 隠した」を くり返さない）。
       ★ ★★＝ ★この 6px は **足す前と まったく 同じ 見え方**の まま 中身の 上に 出ます。
   ★ ④★`z-index` は **20**。★中身の いちばん 上は 2（`.quit-btn`）。
     ★ ★結果の 箱（`.result-wrap` ＝ **80**）は 帯の 上のまま ―― ★かぶせ窓は 隠れません。
   ★ ⑤⚠️★`body` に ★**`overflow-x:clip`** を 足しました。
     ★ ★わけ：★この本の 器は max-width **560px**。★★812×375 など 7画面では 器より 画面が 広く、
       ★ ★ふたを 器の はばに すると **左右が クリーム色**に なります。
       ★ ★★だから ふたは 画面の はしから はし（`50% - 50vw`）。
     ★ ★★`100vw` は パソコンの すべりバーの ぶんだけ 中身より 広い ことが あるので、
       ★ ★★★そのままだと **よこに すべる ものが 出ます**（★ほかの 3本は body に
       ★ ★★`overflow-x:hidden` が もとから あって 出ません）。
     ★ ★★★`hidden` では なく `clip` に したのは、★`hidden` は **すべる 入れ物**を 作るから
       ★ ★（★七並べ T285 の わな）。★`clip` は 同じように 切って、入れ物を 作りません。
     ★ ★足す前の よこの はみ出しは **17画面とも 0px**【★実測・T297-05】。★＝ ★切る ものは ありません。
   ------------------------------------------------------------ */

/* ★ `.app-shell{padding-top:12px}`（★81行）の 写し。★★ずれたら 見張り（`SPEED.verify()`）が 鳴きます。 */
:root { --bar-pad-top:12px; --bar-over:3px; --bar-h:38px; }

body { overflow-x:clip; }

.topbar { position:sticky; top:var(--bar-over); z-index:20; }

/* ★ 空と **まったく 同じ** ふた（★body 71〜74行の 写し）。★指は 取らない・★帯の 中身より うしろ。
   ★ ★ふたの 上はしは すべって いない とき ちょうど 文書の 0px に 来ます
     ★ ★（★＝ ★同じ グラデーションを 同じ 起点で 敷くので 1画素も 変わりません）。 */
.topbar::before {
  content:''; position:absolute; z-index:-1; pointer-events:none;
  top:calc(-1 * var(--bar-pad-top)); bottom:0;
  left:calc(50% - 50vw); right:calc(50% - 50vw);
  background:linear-gradient(180deg,#bcebf0 0 190px,#fff7e8 190px);
}

html { scroll-padding-top:calc(var(--bar-over) + var(--bar-h) + 4px); }