/* ===== テーマ ===== */
:root {
  --c-bg: #fdf6ec;
  --c-panel: #ffffff;
  --c-red: #ff8787;
  --c-orange: #ffa94d;
  --c-yellow: #ffd43b;
  --c-green: #69db7c;
  --c-blue: #74c0fc;
  --c-purple: #b197fc;
  --c-pink: #faa2c1;
  --c-brown: #c9a37e;
  --c-sky: #d0ebff;
  --c-ink: #5f4b44;
  --shadow: 0 4px 12px rgba(95, 75, 68, 0.15);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--c-bg);
  font-family: system-ui, sans-serif;
  color: var(--c-ink);
  touch-action: manipulation;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}

/* ===== ホーム画面 ===== */
#home {
  height: 100%;
  overflow-y: auto;
  padding: 16px;
}

.home-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 0 16px;
  font-size: 20px;
  font-weight: bold;
  /* 端のボタン(左=ことば / 右=おと)を寄せるための基準(バックログ 94 / 1)。
     中央ぞろえの見出しを崩さずに、端だけへ置くため。 */
  position: relative;
  /* **右に地球儀のぶんの余白を必ず空ける**(バックログ 94 の対象者視点レビュー 軽微3)。
     地球儀は `position: absolute` なので、空けないと**見出しが幅の制約を受けない** ——
     実測で 320x568 のスペイン語は見出しの末尾が白い丸の下へ 18.5px 潜り、
     360x640 でも余白 1.5px しか残っていなかった(書体が違う端末ではそのまま重なる帯)。
     usagi が ばしょ の名前について「余白そのものを 8px 以上要求する」と凍結したのと同じ形。
     左にも同じだけ入れて、見出しが中央にとどまるようにする。
     **左右とも 52px はボタンの場所である**(左=ことば / 右=おと。バックログ 1)——
     もともと対称のために空けていた帯にちょうど収まるので、見出しの幅は変わらない。
     **3つ目の理由: この 52px と下の `.home-title svg` の 44px が、
     顔のロゴと端のボタンの「絵どうしの空き」(実測 15.8px)を作っている当のものである**
     (著作権レビュー)。訳語が長い言語では**箱の空きは 0 になる**ので、
     絵が離れていることだけが「端の記号と顔が1枚の絵に読めない」根拠になっている。
     `どのことばでもロゴと端のボタンの絵が離れている` が 8言語で見張る。
     **どれかを外すときは、他の2つが空けている理由も一緒に読むこと。**
     **4つ目: `.control` の `:focus-visible` は箱の外へ出さない**(バックログ 4 の
     著作権レビュー 重大1)。輪郭は 52px の帯の外へはみ出すので、外向きに 6px 出すと
     **輪郭の外周が顔のロゴへ約 1.5px 食い込む**(実測 7.4px < 閾値 12px)。
     詳しくは下の `.control:focus-visible` の注記。 */
  padding-left: 52px;
  padding-right: 52px;
}

/* 見出しは折り返してよい(タイルの上の1行なので、高さが少し増えても遊びに影響しない)。
   **省略はしない** —— アプリの名前が読めなくなる。 */
#home-title-text { min-width: 0; }

.home-title svg { width: 44px; height: 44px; }

/* ---------------------------------------------------------------- ことば(バックログ 94)

   表示言語の選び直し。**これは保護者向けの操作**(0〜4歳の子はタイルの名前を読まず、
   アイコンで選ぶ)。だから遊びの対象の下限(短辺 80px)ではなく `.control`(44px)側で、
   ヘッダの端に小さく置く —— 誤タップしても開いて閉じるだけで、遊びは壊れない。

   **遊びの画面には出さない。** 遊びの画面に文字は1つも出ないので置く理由が無いし、
   遊びの最中の誤タップを増やすだけになる。 */
/* **置き場所は左端**(「おと」は右端)。バックログ 1 の対象者視点レビューの重大指摘で
   入れ替えた —— 遊びの画面の「もどる」(x 8〜56 / y 8〜56)は、ホームのこの位置と
   **896px² 重なる**(もどるの中心 (32,32) が枠の内側に入る)。0〜1歳は同じ場所を
   続けて叩くので、**もどる → そのままもう一度**で下の操作が発火する経路が常にある
   (`onTap` が防ぐのは「同じ指の1動作」で、指を離してからの2回目は素通りする)。
   **だから、その座標には「長押しでしか開かない」ほうを置く。**
   1タップで効く「おと」を右端へ逃がしてある。
   `もどるの場所を続けて2回たたいても、おとは変わらない` が見張る。

   **この並びを支える理由は2本ある。もう1本は意匠**(著作権レビュー):
   スピーカーの波は**右へ張り出す非対称な絵**なので、左端へ戻すと**波が顔のロゴを向く** ——
   「音を出している顔」という1枚の絵に読める余地が生まれる(絵どうしの空きは実測 15.8px)。
   地球儀は左右対称で**外周の円より外へ出る線を1本も持たない**ので、隣を巻き込まない。
   **理由が1本しか書かれていないと、「もどる」の位置が変わった日に配置が戻せてしまう。**
   同じ理由で、**顔のロゴの隣に置いてよいのは、左右対称で外へ伸びる線を持たない絵だけ**
   (矢印・波・吹き出し・音符・光条を左端へ置かない)。

   **`left` / `right` を論理プロパティ(`inset-inline-start` / `-end`)へ書き換えないこと。**
   「現代化」として機械的に置換されやすいが、RTL の言語を足した日に**左右が黙って
   入れ替わり**、上の2本の理由が CSS を1文字も足さずに破れる。 */
.lang-button {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  padding: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow);
}
.lang-button svg { width: 100%; height: 100%; }
.lang-button:active { transform: translateY(-50%) scale(0.94); }

/* ---------------------------------------------------------------- おと(バックログ 1)

   音を消す/戻す。**これも保護者向けの操作**なので、遊びの対象の下限(短辺 80px)ではなく
   `.control`(44px)側で、ヘッダの端に小さく置く。ことばと同じ大きさ・同じ形にそろえる
   —— 端の丸いボタンは「保護者のための操作」という1つの語彙にしておく。

   **右端に置く**(ことばは左端)。`.home-title` の左右 52px の余白はもともと
   見出しを中央に保つために空けてあったので、どちらへ収めても見出しは動かない。
   **左右を入れ替えないこと** —— 左端は遊びの画面の「もどる」と 896px² 重なる位置で、
   **1タップで効くものを置いてはいけない**(上の `.lang-button` の注記)。

   状態は**波の有無**が持つ(色だけで意味を運ばない ← UX原則8)。
   下地の色はそれに添えるだけで、単独では意味を運ばせない。 */
.mute-button {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  padding: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow);
}
.mute-button svg { width: 100%; height: 100%; }
.mute-button:active { transform: translateY(-50%) scale(0.94); }
.mute-button.off { background: #f0e2e6; }

/* 選ぶ面。**画面いっぱいに敷く** —— 8言語ぶんの名前が指の届く大きさで並ぶ必要がある。 */
.lang-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(253, 246, 236, 0.97);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-content: center;
  gap: 12px;
  padding: 20px;
}

/* 一覧そのものは大人が読むが、**開けてしまうのは子供**なので、
   閉じる操作まで含めて子供の指で足りる大きさにする。 */
.lang-item {
  min-height: 72px;
  padding: 10px;
  border-radius: 18px;
  background: #fff;
  border: 3px solid #f0e2e6;
  color: #5f4b44;
  font-size: 18px;
  font-weight: bold;
  /* **名前はその言語自身の表記**なので、書体は端末まかせにする(同梱しない) */
  line-height: 1.2;
}
/* **色だけで意味を運ばない**(UX原則8。バックログ 94 の対象者視点レビュー 軽微6)。
   枠の色と下地だけだと色チャンネルしか使っていないので、印(チェック)も一緒に出す。 */
.lang-item.on {
  border-color: #ffd43b;
  background: #fffaf0;
  position: relative;
}
.lang-item.on::after {
  content: '✓';
  position: absolute;
  top: 4px;
  right: 8px;
  font-size: 16px;
  color: #e8a800;
}
.lang-item:active { transform: scale(0.96); }

/* 選ばずに戻る道。**必ず出す** —— 読めないことばの一覧に閉じ込められるのが
   いちばん重い壊れ方で、そこだけは絵(✕)で通じる必要がある。 */
/* **言語カードと同じ大きさにする**(バックログ 94 の対象者視点レビュー 重大2)。
   小さいままだと、反応する面のうち「閉じる」が 4.2% しかなく、
   当たったタップの 95.8% が**ことばが変わる**側に落ちていた。
   **逃げるほうが選ぶより易しい**のが正しい向き。 */
.lang-close {
  grid-column: 1 / -1;
  min-height: 72px;
  margin-top: 6px;
  border-radius: 28px;
  background: #fff;
  border: 3px solid #f0e2e6;
  color: #5f4b44;
  font-size: 24px;
  font-weight: bold;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  padding-bottom: 40px;
}

/* 難易度のまとまりの区切り。**見出しも数字も置かず、間隔だけで分ける**
   (難易度と製作側の推奨であって個人差があるため。js/main.js の tierOf を参照)。
   通常の gap 16px に対し 16+20+16=52px の空きになり、まとまりが目で分かる。 */
.grid-break {
  grid-column: 1 / -1;
  height: 20px;
  pointer-events: none;
}

.tile {
  background: var(--c-panel);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 14px 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 150px;
  transition: transform 0.15s;
}

.tile:active { transform: scale(0.94); }
.tile svg { width: 88px; height: 88px; }
.tile span { font-size: 14px; }

/* ===== ゲーム画面 ===== */
#stage-wrap {
  position: fixed;
  inset: 0;
  display: none;
  background: var(--c-bg);
}

#stage-wrap.on { display: block; }

#stage {
  position: absolute;
  inset: 0;
  touch-action: none;
  overflow: hidden;
}

#back {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 48px;
  height: 48px;
  z-index: 50;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
}

#back svg { width: 26px; height: 26px; }

/* ===== 焦点の見え方(指以外で操作する人のため。バックログ 1 / 4) =====

   タイル・もどる・端のボタンは `click` の口を持っているので、キーボード・スイッチ・
   スクリーンリーダーだけでもホーム → 遊び → ホームを一周できる。**そのとき
   「いま自分がどこに居るか」が見えないと、口があっても使えない。**

   `:focus-visible` なので**指で押したときには出ない** ——
   0〜4歳の画面に、意味の分からない枠を増やさないため。
   色ではなく**太さのある輪郭**で出す(色だけで意味を運ばない ← UX原則8)。
   線の色は本文と同じ `--c-ink` にする。タイル(白)・ヘッダの丸(白)・
   ことばの一覧(白)・遊びの画面の もどる(白い丸)のどれに乗っても読める唯一の色で、
   `--c-orange` などのパステルは**白の上でほとんど消える**。 */
.tile:focus-visible,
#back:focus-visible,
.lang-item:focus-visible,
.lang-close:focus-visible {
  outline: 3px solid var(--c-ink);
  outline-offset: -3px;
}

/* 遊びの対象のうち、指以外の口を持つもの(バックログ 5)。印は `utils.js` の
   `keyable()` が口と同時に付けるので、**輪郭が出る = 押せば必ず反応する**。
   `outline-offset: -3px`(内側)にそろえてあるのは、遊びの対象が隙間なく並ぶため ——
   外向きに出すと、ぴあのの隣り合う鍵・おなじのどれの隣のカードに輪郭が乗り、
   **どちらに焦点があるのか読めなくなる**(実測: ぴあのの鍵の隙間は 8px、
   外向き 3+3=6px だと残りは 2px)。 */
.keyable:focus-visible {
  outline: 3px solid var(--c-ink);
  outline-offset: -3px;
}

/* **浮かぶ的だけは輪郭を箱の外へ出す**(バックログ 6)。ふうせん・しゃぼんだま・
   ほし・さかな は**絵が箱いっぱいに描かれている**ので、内向きの帯(箱の内側 3〜6px)が
   絵の外形を必ず横切る —— 実測でしゃぼんだまは箱から丸まで 3.6〜5.2px、
   ほしは 4.3〜6.0px しかなく、`焦点の輪郭が遊びの対象の絵に食い込まない` が落ちる。
   **絵を縮めて空きを作らないこと** —— 短辺 80px は箱ではなく**見えている絵**で
   満たされていなければ意味が無い(縮めると 0〜1歳の的が実質小さくなる)。

   外へ出せるのは、この4種が**互いに離れて漂う**ため(隣に乗る心配が無い)。
   ぴあのの鍵・おなじのどれのカードのように隙間なく並ぶ的では、いまも内向きが正しい。
   **`.keyable` 全体をこちらへ倒さないこと** —— ひよこ・いないいないばあの顔・
   のりものは `.sprite` だが並んで置かれるので、外向きにすると隣の絵に乗る。

   **くだものキャッチの かご も同じ側**(バックログ 6)。漂ってはいないが、
   条件は同じ ——(1) 絵が箱いっぱいで、実測の空きは **3.7px**(帯 6px に足りない)、
   (2) 画面の下端に1つだけ置かれ、**焦点の止まる的が隣に無い**
   (落ちてくる実は `pointer-events: none` の飾りで、順路にも載らない)。
   下の余白は 16px あるので、外向き 6px は画面からも出ない。
   **判断の基準は「浮かんでいるか」ではなく「隣に的が無いか」**である。 */
.afloat:focus-visible {
  outline-offset: 3px;
}

/* 座標を指す遊び(はなび・おえかき・なぞりがき)の「ゆびさき」(バックログ 6)。
   **絵を1つも持たない** —— 下地も枠も影も無いので、指で遊ぶ子には最後まで見えない。
   焦点が当たったときだけ `.keyable:focus-visible` の輪郭が出て、
   **いま指している範囲**を示す(だから箱の大きさは的の下限と同じ 80px にしてある)。

   **背景色・枠線を足さないこと。** 足した瞬間に「画面のどこでも触れる」遊びに
   **狙うべき場所**が描かれることになり、指で遊ぶ子の遊び方が変わる
   (0〜4歳に狙わせないのがこの4種の設計そのもの)。
   輪郭は内向き(`.keyable` の既定)のまま —— 外向きにすると、
   なぞりがきでは案内の点に、おえかきでは描いた線に輪郭が乗る。

   **`pointer-events: none` は必須。** この箱は画面のまん中に 80px あるので、
   指の下に置くと**その下にあるものが押せなくなる** —— おえかきの けす は
   `z-index: 10` の隅にあり、ゆびさきを方向キーでそこまで運ぶと
   **指では二度と けせなくなる**(遊びの経路を1ミリ秒も変えない、の裏返し)。
   支援技術が出す `click` は要素へ直接届くので、これで塞がるのは指だけである。 */
.keypoint {
  position: absolute;
  pointer-events: none;
}

/* **端のボタン(ことば・おと)だけは内側へ描く**(著作権レビューの重大指摘)。
   上の 52px の帯にボタンはぴったり収まっているので、訳語が長いことばでは
   **ヘッダの箱の空きは 0**(そこは想定どおり)。外向きに 3+3=6px 出すと、
   輪郭の外周が顔のロゴの黄色い円へ **約 1.5px 食い込む**(375px 幅の計算値)——
   「端の記号と顔が1枚の絵に読めない」根拠は**絵どうしの 15.8px だけ**なので、
   そこを接触まで詰める変更は、その根拠をまるごと壊す。
   しかも輪郭の色は glyph と同じインクなので、焦点が当たった瞬間だけ
   「同じ色で描かれたリング + 隣り合う黄色い顔」という1枚の絵が成立する。
   **最初の Tab が当たるのが `#lang`** なので、稀な状態ではない。

   内側 3px でも glyph には触れない(44px の丸で輪郭は半径 19〜22px、
   地球儀・スピーカーの実描画は半径 10.6px まで)。
   **`0` にもしないこと** —— 外周が顔まで 1.4px の位置に来る。 */
.control:focus-visible {
  outline: 3px solid var(--c-ink);
  outline-offset: -3px;
}

/* ===== 共通部品 ===== */
/* **`transition` はここに置くこと**(バックログ 30)。`utils.js` の `burst()` が
   インラインで書いていた頃は、下の `@media (prefers-reduced-motion: reduce)` の
   `transition: none` が**特異性で必ず負けて一度も効かなかった**
   (姉妹ゲーム usagi-no-osewa が 67 で踏んだ穴。coding.md 3章
   「止める行は書いてあることと効いていることが別」)。**インラインへ戻さないこと。** */
.particle {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 40;
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

.sprite {
  position: absolute;
  touch-action: none;
}

.sprite svg { width: 100%; height: 100%; display: block; }

/* ゆっくり弾む(肯定フィードバック用)。
   **外した側の「もう一回どうぞ」にも使う**(ぱずるの駒 ← バックログ 24)——
   否定の演出を作らないという方針なので、`wiggle` ではなくこちらを選んでいる。
   **`transform` だけを動かすこと**(明るさ・不透明度を足すと、これを毎回掛け直している
   10 の遊びがいっせいに明滅の規約へ触れる ← CLAUDE.md「`bounce`(共有クラス)の使い方」) */
@keyframes bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  35%      { transform: translateY(-14%) scale(1.06); }
  65%      { transform: translateY(0) scale(0.97); }
}
.bounce { animation: bounce 0.5s ease; }

/* ふるふる(「ちがうよ、もう一回」の優しい誘い) */
@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-6deg); }
  75% { transform: rotate(6deg); }
}
.wiggle { animation: wiggle 0.4s ease; }

/* ぽん、と消える */
@keyframes popout {
  0%   { transform: scale(1);   opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
.popout { animation: popout 0.3s ease forwards; }

/* ふわっと現れる */
@keyframes popin {
  0%   { transform: scale(0);   opacity: 0; }
  70%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}
.popin { animation: popin 0.35s ease forwards; }

/* ===== 動きをへらす設定(`prefers-reduced-motion: reduce`。バックログ 30) =====

   動きに敏感な子のために保護者が OS へ入れる設定。**止めるのは「場所が動くもの」と
   「大きく形が変わるもの」だけ**で、次の2つは残す:

   - **遊びの中身そのものである動き**(ふうせん・しゃぼんだま・ほし・さかな が漂う /
     くだものが落ちる / のりものが走る)。止めると遊びが成立しない ——
     **動きを止めるのと、遊びを消すのは別**である
   - **その場の微小な手ごたえ**(ぴあのの鍵 0.1s / がらがら 0.1s / なぞりがきの点 0.15s)。
     移動せず 0.15 秒で終わるので、動きに敏感な子の負担にはならない

   **いちばん大事なのは「止めた結果を目で見る」こと**(coding.md 3章)。
   姉妹ゲームは 67 で2回踏んだ —— 素直に止めたら**道具が一度も見えなくなり**、
   粒は**1点に重なって体の裏に隠れた**。ここでも同じ形を1つずつ塞いである。 */
@media (prefers-reduced-motion: reduce) {
  /* **`animation: none` で素直に止めないこと。**
     `bounce` は**「おと」を消している家庭での唯一の反応**なので(バックログ 24 /
     `puzzle.js` の `place()` にも同じ注記がある)、止めると
     **「動きに敏感 × 消音」という二重に配慮した家庭だけが完全な無反応**になる。

     だから**動きだけを抜いて、反応は残す** —— `steps(1, end)` で補間を捨て、
     0.4 秒だけ 6% 大きい姿で静止して、ぱっと戻る(状態が変わるのは2回だけ)。
     **移動(`translateY`)は落とす**。上下に動くのがいちばん効くので、そこを消す。

     - **0% は素の姿(`scale(1)`)から始めること。`from, to` で同じ値にしない**
       (対象者視点レビューの重大2)。同じ値だけを流すと**掛け直しても計算値が
       1つも変わらない** —— 前の 0.4 秒が終わる前のタップが**画面を1画素も
       変えなくなり、実質 400ms の床になる**。実測(同じ的を10回叩いて計算値が
       変わった回数): たいこ 150ms 間隔で **1回**(既定は 96回)、
       250ms 間隔でも **1回**(既定は 160回)。**たいこ と どうぶつのこえ は
       反応が音と `bounce` の2つだけ**なので、おとを消していると2打目以降が
       完全な無反応になる —— バックログ 11 が「床を入れると『押しても何も起きない』が
       生まれる」として**差し戻したはずの床**が、静止版の副作用で復活した形である
     - **6% は動く版の頂点と同じ値**。大きくすると、隣り合う的の空き(16px)を
       押した的が食う(`遊びの対象どうしが N px 以上はなれている` が見張る帯)
     - **明るさ・不透明度・色を混ぜないこと。** 動く版と同じ理由で、
       ここも `transform` だけである限り**何回掛け直しても明滅にならない**
       —— だから動く版と同じく**絵の側に最短間隔(床)を入れずに済む**
       (床を入れると「押しても何も起きない」が生まれる ← バックログ 11 で差し戻した) */
  @keyframes bounce-still {
    0%        { transform: scale(1); }
    20%, 100% { transform: scale(1.06); }
  }
  .bounce { animation: bounce-still 0.4s steps(1, end); }

  /* 「ちがうよ、もう一回」の誘い。回転の往復を落として、**傾いた姿で静止する**。
     `bounce`(大きくなる)と見分けが付くので、肯定と再挑戦の区別は残る。
     **`animation: none` にしないこと** —— まちがえたときに画面が1画素も
     変わらなくなり、消音の家庭では「押しても何も起きない」に落ちる。 */
  /* 傾きは**動く版の振れ幅と同じ 6°**。並んだ選択肢のうち1つだけが傾くので、
     隣の絵が「まっすぐ」の見本になって読める(80px の的で端が約 8px ずれる)。 */
  @keyframes wiggle-still {
    0%        { transform: rotate(0); }
    20%, 100% { transform: rotate(-6deg); }
  }
  .wiggle { animation: wiggle-still 0.4s steps(1, end); }

  /* 現れる/消える。**素の姿(不透明・原寸)で現れるので、止めても必ず見える**
     ——`.popin` を持つ絵はどれも素の指定に `opacity: 0` を持たない
     (持たせると、姉妹ゲームの道具と同じ「一度も見えない」に落ちる。
     **新しく `.popin` を使うときは、素の姿が見えることを確かめること**)。 */
  .popin { animation: none; }

  /* **`popout` は止めるだけでは駄目。** この演出の仕事は「消えること」なので、
     `animation: none` だけ書くと**消えるはずの絵が残り続ける**
     (`forwards` で最後に当たっていた `opacity: 0` が失われる)。
     消えた姿を明示的に置く。 */
  .popout { animation: none; opacity: 0; }

  /* 粒は「散った先」に静かに置く(`utils.js` の `burst()` が座標を入れる)。
     **`transition` はここで切るが、それだけでは止まらない** ——
     JS 側が飛ばすのをやめて初めて、飛ばずにその場へ着く。 */
  .particle { transition: none; }

  /* 押した手ごたえの縮み(`.tile:active`)は残す。補間だけ捨てて、ぱっと縮む。 */
  .tile { transition: none; }
}