/* ⚠ [data-key="…"] だけで選ばない。必ず .pad の中に限ること。
   data-key は「この釦は engine のどの操作か」を示す配線用の印で、
   練習ページの操作釦（.pr-key）も同じ印を持っている —— 配線を
   共有するためにそうしてある。掌機の配色や座標をこの印だけで当てると、
   掌機モードを選んだ人の練習ページで釦が水色や赤になり、位置まで
   絶対座標に飛ぶ（2026-08-31、站長の実機で発生）。 */
/* スマホの操作部。3 つのモードを 1 組の DOM で切り替える。

   釦は左右・回転・軟着地・ドロップ・ホールドの 6 つで、どのモードでも同じ ——
   違うのは置き場所と大きさだけなので、DOM を 3 つ持つ理由が無い。
   モードは html[data-pad-mode] で、pad-mode.js が入れ替える。

   担当の切り分け：
     ・釦の配線（押したら何が起きるか）→ ui/console-shell.js の bindPad
     ・いまどのモードか、どう切り替えるか → ui/pad-mode.js
     ・見た目と位置（このファイル）
   盤や筐体そのものは game.css の担当で、ここには持ち込まない。 */

/* ---------- 共通 ---------- */
/* 既定は出さない。PC と中間幅はキーボード／レトロ機の十字キーがある */
.pad, .pad-panel, .pad-gesture { display: none; }

@media (max-width: 560px) {
  /* 操作部の土台。盤の下に敷き、中の釦は絶対配置で置く ——
     モードごとに並びがまったく違うので、流し込みでは表現できない。
     ⚠ align-self: stretch が要る。.game-stage は align-items: center なので、
     これが無いと中身が全部絶対配置の .pad は幅 0 に潰れ、釦は画面の左外に並ぶ */
  .pad {
    position: relative; display: block; align-self: stretch;
    height: var(--pad-h, 240px);
    margin: 0 8px;
  }
  .pad-key {
    position: absolute; display: grid; place-items: center;
    border: var(--stroke-w) solid var(--stroke);
    box-shadow: 0 4px 0 var(--stroke);
    font-family: inherit; color: var(--ink); line-height: 1;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: none;
  }
  /* 押したら沈む。実体影と対で「物としての釦」になる */
  .pad-key:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--stroke); }
  /* 機体に添える小さな字（注記・刻印）。押す物ではない */
  .pad-note, .pad-stamp {
    position: absolute; margin: 0;
    font-weight: 800; color: var(--faint); pointer-events: none;
  }
  .pad-note { display: none; }
  .pad-stamp { display: none; font-family: 'Share Tech Mono', ui-monospace, monospace; font-size: 11px; color: var(--muted); }

  /* ---------- スワイプモード（3a）---------- */
  /* 釦は出さず、手勢の説明と「レトロ機で あそぶ」の入口だけを置く */
  html[data-pad-mode="swipe"] .pad { display: none; }
  html[data-pad-mode="swipe"] .pad-gesture {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin: 8px 16px 10px;
  }
  .pad-gesture p {
    margin: 0; flex: none;
    font-size: 9.5px; font-weight: 800; color: var(--faint); line-height: 1.5; white-space: nowrap;
  }
  /* レトロ機への入口。緑にするのは「別のあそび方への誘い」で、
     赤（＝いま選ばれている物）や橙（＝主要な行動）とは役が違うため */
  .pad-to-retro {
    flex: none; display: flex; align-items: center; gap: 5px;
    height: 34px; padding: 0 12px;
    background: var(--mino-s); border: var(--stroke-w) solid var(--stroke);
    border-radius: var(--radius-pill); box-shadow: 0 2px 0 var(--stroke);
    font-size: 11px; font-weight: 900; color: var(--ink); white-space: nowrap;
  }
  .pad-to-retro:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--stroke); }

  /* ---------- レトロ機（2a / 2b）に共通の縮尺 ----------
     設計稿は高さ 800px の機体で描かれている。実機は Safari の上下の帯を
     引くと 650〜700 しか残らず、操作部を実寸のまま置くと画面の 4 割を食って
     盤が 125×250 まで痩せる（站長の実機で実測）。

     そこで操作部だけを「1 枚の版面」として縮める —— シンプル皮膚が
     1074×778 の版を transform で縮めているのと同じ考え方。
     位置も大きさもすべて --k 倍で書き、倍率は console-shell.js が
     「盤に残したい高さ」から逆算して 1 か所に入れる。
     ⚠ 設計稿の数字はそのまま残す（64 は 64 と書く）。読み合わせができるように */
  /* --k は「設計稿の 1px がこの画面では何 px か」。長さを数で割ると長さに
     なるので、縮尺は CSS だけで出せる —— JS を待つと 1 フレームだけ実寸で
     描かれ、盤が小さい→大きいと跳ねるのが見える（站長の実機で確認）。

     式の中身：視口の高さから「盤以外で操作部でもない分」と「盤に残す分」を
     引いた残りが操作部に回せる高さ。それを設計稿の高さで割れば倍率になる。
     下限 .8 の理由は下の PAD_SCALE_MIN と同じ（いちばん小さい釦が 42px）。
     ⚠ 引いている定数は console-shell.js の CHROME_BASE / BOARD_KEEP と対。
     ずれると読み込み直後に跳ねるので、あちらが実測で検算して警告を出す */
  /* ⚠ --k は html に置く。盤の当て値（game.css の --chrome-h）が
     この値を読むので、.pad の中で定義すると祖先へは届かない */
  html[data-pad-mode="one"] { --k: clamp(.8px, (100svh - 516px) / 228, 1px); }
  html[data-pad-mode="two"] { --k: clamp(.8px, (100svh - 516px) / 214, 1px); }
  .pad { --pad-k: 1; }

  /* ---------- 片手（2a）----------
     右下の親指のつけ根を中心に、使う頻度の高い順で半径を割る。
     左半分を空けるのは、盤を持つ手で隠さないため。
     ⚠ 位置・大きさ・色は設計稿 2a の実測値そのまま（× --k） */
    /* 高さは 228。設計稿の 266 は左上に注記があった頃の値で、いまはそこが空いている ——
     弧そのものの実寸は ホールド の bottom 168 ＋ 高さ 52 ＝ 220 で足りる。
     詰めたぶんはそのまま盤の高さになる（站長要望）*/
  html[data-pad-mode="one"] .pad { display: block; --pad-base: 228; height: calc(228 * var(--k)); }
  /* 片手のときは十字の器を無かったことにして、中の 4 つを .pad 直下として置く。
     display:contents なら DOM を組み替えずに親子関係だけ透かせる ——
     両手のときだけ器が要る（4 枚で 1 つの十字に見せるため）*/
  html[data-pad-mode="one"] .pad-dpad { display: contents; }
  html[data-pad-mode="one"] .pad-hub { display: none; }
  html[data-pad-mode="one"] .pad-key { border-radius: var(--radius-pill); font-size: calc(24 * var(--k)); }
  /* いちばん使う左右移動を最内周に、指を伸ばす距離が最短になる位置へ */
  html[data-pad-mode="one"] .pad [data-key="left"]  { width: calc(64 * var(--k)); height: calc(64 * var(--k)); right: calc(188 * var(--k)); bottom: calc(16 * var(--k)); background: var(--mino-i); }
  html[data-pad-mode="one"] .pad [data-key="right"] { width: calc(64 * var(--k)); height: calc(64 * var(--k)); right: calc(110 * var(--k)); bottom: calc(14 * var(--k)); background: var(--mino-i); }
  /* 軟着地は端に寄せる。押しっぱなしにする釦なので、親指を預けられる位置 */
  html[data-pad-mode="one"] .pad [data-key="down"]  { width: calc(60 * var(--k)); height: calc(60 * var(--k)); right: calc(32 * var(--k)); bottom: calc(12 * var(--k)); background: var(--surface); font-size: calc(18 * var(--k)); box-shadow: 0 3px 0 var(--stroke); }
  html[data-pad-mode="one"] .pad [data-key="rot-r"] { width: calc(64 * var(--k)); height: calc(64 * var(--k)); right: calc(32 * var(--k)); bottom: calc(88 * var(--k)); background: var(--mino-t); }
  /* ドロップは唯一やり直しの効かない操作。第 3 周へ置いて誤爆を防ぐ */
  html[data-pad-mode="one"] .pad [data-key="a"] {
    width: calc(72 * var(--k)); height: calc(72 * var(--k)); right: calc(112 * var(--k)); bottom: calc(96 * var(--k));
    background: var(--brand-red); color: var(--brand-body); font-size: calc(12 * var(--k)); font-weight: 800;
    box-shadow: 0 4px 0 var(--stroke), inset 0 4px 5px rgb(255 255 255 / .35);
  }
  html[data-pad-mode="one"] .pad [data-key="b"] {
    width: calc(52 * var(--k)); height: calc(52 * var(--k)); right: calc(44 * var(--k)); bottom: calc(168 * var(--k));
    background: var(--surface); font-size: calc(10 * var(--k)); font-weight: 800;
    box-shadow: 0 3px 0 var(--stroke);
  }
  /* 左上の注記。親指の弧の外なので、ここだけは字を置いても邪魔にならない */
  html[data-pad-mode="one"] .pad-note.is-one {
    display: block; left: 14px; top: calc(44 * var(--k)); width: calc(104 * var(--k));
    font-size: calc(10 * var(--k)); line-height: 1.7;
  }
  /* 持ち手の切替は機体の下端の行（.pad-foot）へ移した。
     親指の弧の中に字を置くと、上＝盤・下＝釦 の 2 区画に読めなくなる（站長指摘）*/
  /* 左利き。位置だけ鏡にする（役目と色はそのまま）*/
  html[data-pad-mode="one"][data-pad-hand="left"] .pad-key { right: auto; }
  /* ⚠ 左右の移動キーだけは鏡にしないこと。位置をそのまま裏返すと
     ← が画面の右、→ が左に来て、押す向きと動く向きが逆になる
     （站長指摘・2026-09-02、実測でも ←x220 / →x142 と入れ替わっていた）。
     他の釦（DROP・HOLD・回転・軟着地）は左右の意味を持たないので鏡でよい。
     そのぶん「親指に近いほう」が右利きと入れ替わる（右利きは →、左利きは ←）が、
     指の届きやすさより、向きが合っていることを優先する */
  html[data-pad-mode="one"][data-pad-hand="left"] .pad [data-key="left"]  { left: calc(110 * var(--k)); }
  html[data-pad-mode="one"][data-pad-hand="left"] .pad [data-key="right"] { left: calc(188 * var(--k)); }
  html[data-pad-mode="one"][data-pad-hand="left"] .pad [data-key="down"]  { left: calc(32 * var(--k)); }
  html[data-pad-mode="one"][data-pad-hand="left"] .pad [data-key="rot-r"] { left: calc(32 * var(--k)); }
  html[data-pad-mode="one"][data-pad-hand="left"] .pad [data-key="a"]     { left: calc(112 * var(--k)); }
  html[data-pad-mode="one"][data-pad-hand="left"] .pad [data-key="b"]     { left: calc(44 * var(--k)); }

  /* ---------- 機体の下端の行（レトロ機のとき）----------
     持ち手の切替と、なぞる版への戻り道。どちらも親指の弧の外に置く ——
     遊んでいる最中に踏むと、操作そのものが変わってしまう。
     ⚠ 釦の版面（--k）では縮めない。ここは押せることが要件で、
     小さくすると「戻れない」に直結する */
  /* ⚠ 行として機体の下に積まない。積むとその高さぶん盤が低くなる ——
     片手版は左半分をもともと空けてある（盤を持つ手で隠さないため）ので、
     その空きの上端へ縦に重ねる。高さを 1px も取らない置き方 */
  .pad-foot { display: none; }
  /* 片手版は左半分がもともと空いている（盤を持つ手で隠さないため）。
     その左下の隅へ縦に積む —— 親指の弧は右下にあるので、
     いちばん遠い隅なら遊んでいる最中に踏まない */
  /* ⚠ 位置は必ず持ち手と一緒に鏡にすること。錠剤のまま left: 16px に固定して
     いた頃は、左利きにすると釦のほうだけが左へ降りてきて、← 釦へ 30px
     重なっていた（站長報告・2026-09-01、大きい画面ほど顕著）。
     見た目も操作キーと同じ丸に揃える —— 字の錠剤が 2 つ混ざると
     「機体」ではなく「頁の部品」に見えて、下端だけ浮いていた */
  html[data-pad-mode="one"] .pad-foot {
    display: flex; flex-direction: column; align-items: center;
    gap: calc(12 * var(--k));
    position: absolute; left: calc(18 * var(--k)); right: auto;
    bottom: calc(16 * var(--k)); top: auto;
  }
  html[data-pad-mode="one"][data-pad-hand="left"] .pad-foot {
    left: auto; right: calc(18 * var(--k));
  }
  /* 丸釦。操作キーと同じ寸法・同じ影で、機体の一部として読ませる。
     字は出さない（52px の丸に「あそび方を かえる」は入らない）——
     代わりに aria-label を置いてあるので、読み上げでは意味が残る */
  html[data-pad-mode="one"] .pad-foot > button {
    width: calc(52 * var(--k)); height: calc(52 * var(--k));
    padding: 0; gap: 0; border-radius: 50%;
    display: grid; place-items: center;
  }
  html[data-pad-mode="one"] .pad-foot .pad-foot-label { display: none; }
  html[data-pad-mode="one"] .pad-foot-icon {
    font-style: normal; font-size: calc(22 * var(--k)); line-height: 1;
  }
  html[data-pad-mode="one"] .pad-to-normal svg { width: calc(24 * var(--k)); height: calc(24 * var(--k)); }
  /* ⚠ 両手版の左下は十字キーそのもの。空いているのは
     十字キーと A のあいだ（上端の帯）だけなので、そこへ横に 1 つ */
  html[data-pad-mode="two"] .pad-foot {
    display: flex; position: absolute; left: 50%; translate: -50%; top: 2px;
  }
  /* 両手版は上端の帯に横 1 つだけなので、字のまま置ける（丸にする理由が無い）*/
  html[data-pad-mode="two"] .pad-foot-icon { display: none; }
  /* 左利きの切替は片手版だけ。両手版は左右の手に役が分かれていて鏡にする意味が無い */
  html[data-pad-mode="two"] .pad-flip { display: none; }
  .pad-flip {
    display: flex; align-items: center; flex: none;
    height: 30px; padding: 0 12px; background: transparent;
    border: var(--stroke-w) solid #C05A2E; border-radius: var(--radius-pill);
    font-family: inherit; font-size: 11px; font-weight: 800; color: #C05A2E;
  }
  .pad-flip[aria-pressed="true"] { background: #C05A2E; color: var(--brand-body); }
  /* なぞる版へ戻る。なぞる版の「レトロ機で あそぶ」と同じ緑・同じ形にして、
     2 つで 1 組の行き来だと分かるようにする */
  .pad-to-normal {
    flex: none; display: flex; align-items: center; gap: 5px;
    height: 34px; padding: 0 14px;
    background: var(--mino-s); border: var(--stroke-w) solid var(--stroke);
    border-radius: var(--radius-pill); box-shadow: 0 2px 0 var(--stroke);
    font-family: inherit; font-size: 11px; font-weight: 900; color: var(--ink); white-space: nowrap;
  }
  .pad-to-normal:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--stroke); }

  /* ---------- 両手（2b）----------
     両手で機を握ると、親指が届くのは下の 2 隅だけ。中央に十字キーを置いた
     前の版はどちらの親指からも遠く、実機の握りと合っていなかった。
     左＝十字キー（上を回転にするのは任天堂機の慣例）、右＝A/B の斜め置き。
     中央は装飾だけ —— 握ったときに手のひらが当たる場所なので釦は置かない */
  html[data-pad-mode="two"] .pad { display: block; --pad-base: 214; height: calc(214 * var(--k)); }
  html[data-pad-mode="two"] .pad-key { font-size: calc(17 * var(--k)); }
  /* 十字キー。角丸を外側だけ大きくして 4 枚で 1 つの十字に見せる */
  html[data-pad-mode="two"] .pad-dpad {
    position: absolute; left: calc(16 * var(--k)); bottom: calc(20 * var(--k));
    width: calc(156 * var(--k)); height: calc(156 * var(--k));
  }
  html[data-pad-mode="two"] .pad-dpad .pad-key {
    background: var(--sub); color: #DBC69A; box-shadow: 0 3px 0 #362817;
  }
  html[data-pad-mode="two"] .pad-dpad .pad-key:active { box-shadow: 0 1px 0 #362817; }
  html[data-pad-mode="two"] .pad-dpad .pad-key { width: calc(52 * var(--k)); height: calc(52 * var(--k)); }
  html[data-pad-mode="two"] .pad [data-key="left"]  { left: 0;                  bottom: calc(52 * var(--k));  border-radius: 12px 4px 4px 12px; }
  html[data-pad-mode="two"] .pad [data-key="right"] { left: calc(104 * var(--k)); bottom: calc(52 * var(--k));  border-radius: 4px 12px 12px 4px; }
  html[data-pad-mode="two"] .pad [data-key="rot-r"] { left: calc(52 * var(--k));  bottom: calc(104 * var(--k)); border-radius: 12px 12px 4px 4px; }
  html[data-pad-mode="two"] .pad [data-key="down"]  { left: calc(52 * var(--k));  bottom: 0;                   border-radius: 4px 4px 12px 12px; }
  /* 十字の中心。4 枚の隙間を埋めて 1 つの部品に見せ、支点の窪みを置く */
  html[data-pad-mode="two"] .pad-hub {
    display: block; position: absolute;
    left: calc(52 * var(--k)); bottom: calc(52 * var(--k));
    width: calc(52 * var(--k)); height: calc(52 * var(--k));
    background: var(--sub);
    border-left: var(--stroke-w) solid var(--stroke); border-right: var(--stroke-w) solid var(--stroke);
  }
  html[data-pad-mode="two"] .pad-hub::after {
    content: ''; position: absolute; left: calc(15 * var(--k)); top: calc(15 * var(--k));
    width: calc(18 * var(--k)); height: calc(18 * var(--k));
    background: var(--stroke); border-radius: var(--radius-pill);
    box-shadow: inset 0 2px 3px rgb(0 0 0 / .5);
  }
  /* A/B は GB の角度で斜めに。A（ドロップ）を大きく高い位置に置くのは、
     親指の自然な振り角の先にいちばん使う釦を置くため */
  html[data-pad-mode="two"] .pad [data-key="a"] {
    width: calc(74 * var(--k)); height: calc(74 * var(--k)); right: calc(18 * var(--k)); bottom: calc(118 * var(--k));
    border-radius: var(--radius-pill);
    background: var(--brand-red); color: var(--brand-body); font-size: calc(12 * var(--k)); font-weight: 800;
    box-shadow: 0 4px 0 var(--stroke), inset 0 4px 5px rgb(255 255 255 / .35);
  }
  html[data-pad-mode="two"] .pad [data-key="b"] {
    width: calc(64 * var(--k)); height: calc(64 * var(--k)); right: calc(102 * var(--k)); bottom: calc(34 * var(--k));
    border-radius: var(--radius-pill);
    background: var(--sub); color: #DBC69A; font-size: calc(11 * var(--k)); font-weight: 800;
    box-shadow: 0 4px 0 #362817, inset 0 3px 4px rgb(255 255 255 / .12);
  }
  html[data-pad-mode="two"] .pad-stamp { display: block; }
  html[data-pad-mode="two"] .pad-stamp.is-a { right: calc(15 * var(--k)); bottom: calc(96 * var(--k)); }
  html[data-pad-mode="two"] .pad-stamp.is-b { right: calc(99 * var(--k)); bottom: calc(12 * var(--k)); }
  html[data-pad-mode="two"] .pad-note.is-two {
    display: block; right: calc(26 * var(--k)); bottom: calc(30 * var(--k)); width: calc(60 * var(--k));
    font-size: 9px; line-height: 1.6; text-align: center;
  }
  /* 中央の柱（設計稿 2b）。押せる物は置かない —— 両手で握ると手のひらが
     当たる場所で、ここに釦を置くと勝手に落ちる。一時停止は画面の中の柱にある。
     ⚠ 出すのは 390px 以上の画面だけ。設計稿の版面が 390px で、A/B は右端から
     の実測位置に貼ってあるため、これより狭いと B と重なる。
     機能を持たない飾りなので、狭い画面ではこれを落とすのが筋 */
  @media (min-width: 390px) {
    html[data-pad-mode="two"] .pad-brand { display: flex; }
  }

  .pad-brand {
    position: absolute; left: 50%; translate: -50%; bottom: calc(18 * var(--k));
    display: none; flex-direction: column; align-items: center; gap: calc(7 * var(--k));
    pointer-events: none;
  }
  .pad-mold { display: flex; }
  .pad-mold i {
    width: calc(38 * var(--k)); height: calc(12 * var(--k)); background: var(--sub);
    border: var(--stroke-w) solid var(--stroke); border-radius: var(--radius-pill);
    box-shadow: 0 2px 0 #362817;
  }
  .pad-grille { display: flex; gap: 4px; pointer-events: none; }
  .pad-grille i { width: 4px; height: calc(15 * var(--k)); background: #DBC69A; border-radius: 2px; }
  .pad-logo {
    font-family: 'M PLUS Rounded 1c', 'Zen Maru Gothic', sans-serif;
    font-weight: 900; font-size: 9px; letter-spacing: 1px; color: var(--faint);
    pointer-events: none;
  }

  /* レトロ機の 2 モードから、なぞる操作へ戻る小さな入口。
     どちらのモードでも親指の弧の外（上の隅）に置く。
     ⚠ ここは縮めない —— 釦の版面ではなく、常に押せる必要のある出口 */
  html[data-pad-mode="swipe"] .pad-to-swipe { display: none; }
  /* 操作部にいるときは字だけ。柱へ移ったときは絵だけになる（game.css 側）*/
  .pad .pad-swipe-icon { display: none; }
  .pad-to-swipe {
    position: absolute; left: 12px; top: 4px;
    display: flex; align-items: center; gap: 4px; height: 28px; padding: 0 11px;
    background: var(--surface); border: var(--stroke-w) solid var(--stroke);
    border-radius: var(--radius-pill); box-shadow: 0 2px 0 var(--stroke);
    font-family: inherit; font-size: 10.5px; font-weight: 800; color: var(--ink); white-space: nowrap;
  }
  html[data-pad-mode="one"] .pad-to-swipe { left: auto; right: 14px; top: 12px; }

  /* ---------- モード切替パネル（3b）----------
     値はすべて設計稿 3b の実測。下から出る面で、上に盤が透けて見える ——
     全画面で覆わないのは「一時的な選択」だと分かるようにするため */
  .pad-panel {
    display: block; position: fixed; inset: 0; z-index: 40;
    background: rgb(74 56 38 / .35);
    opacity: 0; transition: opacity .2s ease;
  }
  .pad-panel.is-open { opacity: 1; }
  .pad-sheet {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: var(--surface);
    border-top: var(--stroke-w) solid var(--stroke);
    border-radius: 26px 26px 0 0;
    padding: 12px 16px calc(18px + var(--safe-bottom, 0px));
    translate: 0 100%; transition: translate .22s cubic-bezier(.2,.8,.3,1);
  }
  .pad-panel.is-open .pad-sheet { translate: 0 0; }
  /* 指で下へ払っているあいだは、指の位置に貼りつかせる ——
     動きの補間が入ると、払った量と面の位置がずれて重く感じる */
  .pad-sheet.is-dragging { transition: none; }
  /* ⚠ none にする。pan-y だと「縦の手勢はブラウザが使う」という宣言になり、
     Safari が途中でスクロールとして横取りして pointercancel が飛ぶ ——
     指では下ろせないのに、合成イベントでは動くので気づきにくい（実機で発覚）。
     この面自体はスクロールしないので、手勢は全部こちらで受けてよい */
  .pad-sheet { touch-action: none; }
  /* つまみ。触って下ろせる面だと分かる印（下ろす操作自体は背景を押しても効く）*/
  .pad-grip {
    display: block; width: 44px; height: 5px; margin: 0 auto;
    background: #DCCB9F; border-radius: var(--radius-pill);
  }
  .pad-sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 10px;
  }
  .pad-sheet-head h2 {
    margin: 0; font-size: 17px; font-weight: 900; color: var(--ink);
    font-family: 'Zen Maru Gothic', sans-serif;
  }
  .pad-sheet-pico { flex: none; }

  /* 選択肢。丸い選択印は右端 —— 左端は役目を表す絵に譲る。
     練習ページの技一覧が印を左に置いているのは、あちらに絵が無いから */
  .pad-choice {
    display: flex; align-items: center; gap: 12px; width: 100%;
    margin-top: 8px; padding: 12px 14px;
    background: var(--surface); border: var(--stroke-w) solid var(--line);
    border-radius: 16px;
    font-family: inherit; color: var(--ink); text-align: left;
  }

  /* 指で下へ払っているあいだは、指の位置に貼りつかせる ——
     動きの補間が入ると、払った量と面の位置がずれて重く感じる。
     ⚠ touch-action は none。pan-y だと「縦の手勢はブラウザが使う」という
     宣言になり、Safari が途中でスクロールとして横取りする（実機で発覚）*/
  .pad-panel.is-open .pad-sheet { translate: 0 0; }
  .pad-sheet.is-dragging { transition: none; }
  .pad-sheet { touch-action: none; }

  .pad-choice-icon {
    flex: none; width: 46px; height: 46px; display: grid; place-items: center;
    background: var(--soft); border: var(--stroke-w) solid var(--stroke); border-radius: 14px;
  }
  /* レトロ機だけ緑。手勢の行にある入口（.pad-to-retro）と同じ色で、
     「これを押すとあの版になる」を色で繋ぐ */
  .pad-choice-icon.is-retro { background: var(--mino-s); }
  .pad-choice-body { flex: 1; min-width: 0; }
  .pad-choice-body b {
    display: flex; align-items: center; gap: 6px;
    font-size: 15px; font-weight: 900; color: var(--ink);
  }
  .pad-choice-body small {
    display: block; margin-top: 2px;
    font-size: 12px; font-weight: 700; color: var(--muted); line-height: 1.6;
  }
  /* いま使っている版の印。選択中の印（赤い環）とは別物 ——
     選んだだけではまだ切り替わらないので、両方が同時に要る */
  .pad-now {
    display: none; flex: none;
    background: var(--soft); border: var(--stroke-w) solid var(--stroke); border-radius: var(--radius-pill);
    padding: 0 8px; font-size: 10px; font-style: normal; font-weight: 900; color: var(--ink);
  }
  [data-pad-current] .pad-now { display: inline-flex; }
  .pad-radio {
    flex: none; width: 20px; height: 20px; display: grid; place-items: center;
    border: var(--stroke-w) solid #C8B89A; border-radius: var(--radius-pill);
  }
  /* 選択中。輪郭を濃くし、外側に赤い環を 1 本足す。
     地色も淡い赤へ寄せて、離れて見ても選ばれている側が分かるように */
  .pad-choice[aria-checked="true"] {
    border-color: var(--stroke); background: #FCEBE8;
    box-shadow: 0 0 0 2px rgb(227 90 75 / .25);
  }
  .pad-choice[aria-checked="true"] .pad-radio {
    background: var(--brand-red); border-color: var(--stroke);
  }
  .pad-choice[aria-checked="true"] .pad-radio::before {
    content: ''; width: 7px; height: 7px; background: var(--surface); border-radius: var(--radius-pill);
  }
  /* 親（レトロ機）が選ばれているあいだは、二段目ごと 1 枚のカードに見せる。
     赤い環は入れ物のほうへ移す —— 上下の箱が別々に環を持つと、
     継ぎ目に線が 1 本走って「2 枚のカードが重なっている」ように見える */
  .pad-retro[data-pad-open-sub] {
    margin-top: 8px; border-radius: 16px;
    box-shadow: 0 0 0 2px rgb(227 90 75 / .25);
  }
  .pad-retro[data-pad-open-sub] .pad-choice {
    margin-top: 0; border-radius: 16px 16px 0 0; border-bottom: 0; box-shadow: none;
  }

  /* 二段目。片手／両手は「どちらか」であって順位が無いので、
     縦に積まず横に 2 つ並べる —— 縦に積むと上が優先に見える */
  .pad-sub { display: none; }
  .pad-retro[data-pad-open-sub] .pad-sub {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    padding: 0 14px 12px;
    background: #FCEBE8;
    border: var(--stroke-w) solid var(--stroke); border-top: 0;
    border-radius: 0 0 16px 16px;
  }
  .pad-hand {
    height: 60px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px;
    background: var(--surface); border: var(--stroke-w) solid var(--stroke); border-radius: 12px;
    font-family: inherit; color: var(--ink);
  }
  .pad-hand b { font-size: 13px; font-weight: 900; }
  .pad-hand small { font-size: 9.5px; font-weight: 700; color: var(--muted); }
  .pad-hand[aria-checked="true"] {
    background: var(--brand-red); color: var(--brand-body); box-shadow: 0 3px 0 var(--stroke);
  }
  .pad-hand[aria-checked="true"] small { color: rgb(255 253 247 / .9); }

  /* 確定。ここを押すまで切り替わらない */
  .pad-sheet-go {
    display: grid; place-items: center; width: 100%; height: 48px; margin-top: 12px;
    background: var(--cta); border: var(--stroke-w) solid var(--stroke); border-radius: var(--radius-pill);
    box-shadow: 0 3px 0 var(--stroke);
    font-family: inherit; font-size: 15px; font-weight: 900; color: var(--brand-body);
  }
  .pad-sheet-go:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--stroke); }
  .pad-sheet-note {
    margin: 8px 0 0; text-align: center;
    font-size: 11px; font-weight: 700; color: var(--faint);
  }
}