diff --git a/CLAUDE.md b/CLAUDE.md
index 4f0878e..c7f4aa5 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -40,7 +40,7 @@ wheel.js ──gesture ends(word)──▶ game.submit(word) ──result object
 
 - [game.js](src/game.js) — all level state and win logic, **pure logic, no DOM** (this is what makes it unit-testable). `submit(word)` returns a discriminated result object (`target` / `bonus` / `duplicate` / `invalid`) — the shape is specified in design doc §10. `createGame` accepts an injectable `rng` (default `Math.random`) so hint-cell selection is deterministic in tests. Economy constants live in the `ECONOMY` object at the top; never scatter coin values elsewhere.
 - [wheel.js](src/wheel.js) — letter wheel + pointer gestures. Hit-testing (`hitIndex`), selection (`applyHit`), and shuffle permutation (`permutationAt` + `shuffleStep`, Lehmer-code unranking stepped by a golden-ratio coprime step for a deterministic full cycle back to the initial layout) are exported pure functions for testing. Selection is bound to button *index*, not letter value, because wheels can contain duplicate letters.
-- [grid.js](src/grid.js), [dictionary-card.js](src/dictionary-card.js) — DOM rendering only. grid.js takes an injected `isFound` (`game.isFound`) and marks every cell whose target word is complete with `role="button"` + an `aria-label` — that one attribute is a **three-way contract**: it is the press-feedback hook in style.css (`.cell[role]:active`), the VoiceOver button semantics, and the only thing that says "this cell opens the dictionary card" (UI doc §4-E). Swapping it for a class breaks the first two silently, and both only show up on a real device. The `role` must never appear without the `aria-label`: with just the role VoiceOver reads "A, button" — identical to a wheel letter button. grid.js also exports `snapshotText` (emoji grid for the text-only share — board *shape* only, two colors, no progress; share targets tend to drop text when files are attached, so sharing sends no image) and `snapshotBlob` (canvas PNG for the manual download button — the button is currently `hidden` in index.html, code kept for later: board as spoiler-free colored blocks plus the letter wheel; colors read from CSS variables so it follows the theme). dictionary-card.js also owns `speechSynthesis` pronunciation (`speak`/`stopSpeech`), used by both its speaker button and main.js's auto-pronounce on target hit (§6.1). Its iOS unlock rule is **not** the same as the `<audio>` one below — only a `click` wakes the TTS engine (`touchend`/`pointerdown` were both measured failing) and a drag never produces one, re-locking on every page load. That is why index.html opens with the `#gate` tap-to-continue screen: it is the only guaranteed `click` in normal play, so without it a pure-drag player hears no pronunciation for the whole page load, and the lock returns on every reload. It once carried the sfx unlock too; that half is gone with the sfx, this half is not — do not remove the gate as decoration. Design doc §7 has the measurements, don't re-test.
+- [grid.js](src/grid.js), [dictionary-card.js](src/dictionary-card.js) — DOM rendering only. grid.js takes an injected `isFound` (`game.isFound`) and marks every cell whose target word is complete with `role="button"` + an `aria-label` — that one attribute is a **three-way contract**: it is the press-feedback hook in style.css (`.cell[role]:active`), the VoiceOver button semantics, and the only thing that says "this cell opens the dictionary card" (UI doc §4-E). Swapping it for a class breaks the first two silently, and both only show up on a real device. The `role` must never appear without the `aria-label`: with just the role VoiceOver reads "A, button" — which says nothing about what pressing it does, and the same letter on the wheel reads "A" (wheel letters are `<div>`s, not buttons — they are `pointer-events: none` and never receive their own `click`, so button semantics would promise an interaction that does not exist). grid.js also exports `snapshotText` (emoji grid for the text-only share — board *shape* only, two colors, no progress; share targets tend to drop text when files are attached, so sharing sends no image) and `snapshotBlob` (canvas PNG for the manual download button — the button is currently `hidden` in index.html, code kept for later: board as spoiler-free colored blocks plus the letter wheel; colors read from CSS variables so it follows the theme). dictionary-card.js also owns `speechSynthesis` pronunciation (`speak`/`stopSpeech`), used by both its speaker button and main.js's auto-pronounce on target hit (§6.1). Its iOS unlock rule is **not** the same as the `<audio>` one below — only a `click` wakes the TTS engine (`touchend`/`pointerdown` were both measured failing) and a drag never produces one, re-locking on every page load. That is why index.html opens with the `#gate` tap-to-continue screen: it is the only guaranteed `click` in normal play, so without it a pure-drag player hears no pronunciation for the whole page load, and the lock returns on every reload. It once carried the sfx unlock too; that half is gone with the sfx, this half is not — do not remove the gate as decoration. Design doc §7 has the measurements, don't re-test.
 - [redeem.js](src/redeem.js) — redemption-code verification: JWT (alg pinned to ES256) checked with WebCrypto against the `PUBLIC_KEYS` kid→JWK whitelist; single-use tracked by `jti` in the save. A payload may carry a `uid`, which binds the code to one player (`tools/make-code.mjs --uid`); codes without one keep working for everybody. Codes are minted locally with `tools/make-code.mjs` (private keys in gitignored `tools/keys/` — never commit them).
 - [storage.js](src/storage.js) — single-key JSON save. `normalizeSave` is pure: any corrupt/unrecognized data resets to a fresh save. Also owns the player id (`newUid`/`isUid`/`normalizeUid`/`formatUid`; make-code.mjs imports `isUid`/`normalizeUid` to validate the id a player reports) — 12 chars of Crockford Base32, 10 random + 2 salted-checksum, backfilled in `loadSave` alongside `firstOpenAt`. The salt ships with the frontend, so the checksum only stops typos and randomly-typed strings; it is not a defence. Design doc §9 has the rationale (and the redemption-code mechanism the `redeem.js`/`make-code.mjs` comments cite), and the invite-code idea it keeps attracting is answered in design doc §16 — a browser has no device id, so nothing offline can tell a friend's device from an incognito window.
 - [bridge.js](src/bridge.js) — platform abstraction (save/load/share/copy/ads/IAP). **Game code must go through `bridge`, never touch `localStorage` or native APIs directly** — this is the one module that gets swapped for native implementations in Phase 2.
diff --git a/docs/word-puzzle-game-design.md b/docs/word-puzzle-game-design.md
index e4360dc..5c95fc6 100644
--- a/docs/word-puzzle-game-design.md
+++ b/docs/word-puzzle-game-design.md
@@ -68,7 +68,7 @@
 - 支援「滑回上一個字母 = 取消最後一個字母」（Wordscapes 的標準行為）。
 - viewport 設定：`<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">`，並用 `env(safe-area-inset-*)` 處理瀏海與 home indicator。
 - 誤觸**雙指捏合縮放**會讓固定版面（html/body `overflow: hidden`）卡在錯位狀態且不易還原，兩個平台各擋一半：Android Chrome 吃 viewport 的 `maximum-scale=1, user-scalable=no`；iOS Safari 自 10 起忽略該設定，只能在 JS 對 Safari 專屬的 `gesturestart`/`gesturechange`/`gestureend` `preventDefault()`。畫面沒有需要放大來讀的內容，字級與命中區都已為手機尺寸設計，故不保留縮放。
-- **從別的 App 點連結會用 iOS 內嵌 WebView（WKWebView）開，它帶原生「下拉關閉」手勢**，玩家在轉盤以外的區域下滑容易誤觸關閉。那手勢屬於外層 App，網頁 JS **無法完全停用**；但多數內嵌瀏覽器是靠 WKWebView 內部 scrollView 在頂端往下 rubber-band 觸發的，於是兩手緩解：(1) 全域 `touchmove` 在**非捲動區** `preventDefault()`（`main.js` 只放行 `.level-list` 與輸入框——前者是樣式表裡唯一的 `overflow-y: auto`，後者的游標拖曳是原生手勢；不做「往上找可捲動祖先」的通用判斷，那要逐事件讀 `scrollHeight`／`getComputedStyle`，轉盤拖曳中每個 `touchmove` 強制一次同步 reflow），讓 scrollView 不 rubber-band；(2) 可捲動容器與 html/body 設 `overscroll-behavior: none`，捲到邊界不外溢到 WebView 的 scrollView。這是**緩解不是保證**——少數自帶 `UIPanGestureRecognizer`（`cancelsTouchesInView=false`）的內嵌瀏覽器、以及邊緣返回手勢仍擋不掉；根治只能離開內嵌瀏覽器，本站本就是 PWA，以 standalone 從主畫面開啟即無瀏覽器 chrome、無下拉關閉手勢——但**內嵌 WebView 裡根本沒有「加入主畫面」這個選項**，真要引導得先講「以 Safari 開啟」；而 App 內的安裝引導做過一版又拿掉了（§15 Phase 1.5-4），現在沒有任何程式在做這件事，別照這句話直接開工。
+- **從別的 App 點連結會用 iOS 內嵌 WebView（WKWebView）開，它帶原生「下拉關閉」手勢**，玩家在轉盤以外的區域下滑容易誤觸關閉。那手勢屬於外層 App，網頁 JS **無法完全停用**；但多數內嵌瀏覽器是靠 WKWebView 內部 scrollView 在頂端往下 rubber-band 觸發的，於是兩手緩解：(1) 全域 `touchmove` 在**非捲動區** `preventDefault()`（`main.js` 只放行 `.level-list`、`.card` 與輸入框——前兩者是樣式表裡僅有的兩個 `overflow-y: auto`（`.card` 的上限與捲動見 UI 文件 §4-D），後者的游標拖曳是原生手勢；不做「往上找可捲動祖先」的通用判斷，那要逐事件讀 `scrollHeight`／`getComputedStyle`，轉盤拖曳中每個 `touchmove` 強制一次同步 reflow），讓 scrollView 不 rubber-band；(2) 可捲動容器與 html/body 設 `overscroll-behavior: none`，捲到邊界不外溢到 WebView 的 scrollView。這是**緩解不是保證**——少數自帶 `UIPanGestureRecognizer`（`cancelsTouchesInView=false`）的內嵌瀏覽器、以及邊緣返回手勢仍擋不掉；根治只能離開內嵌瀏覽器，本站本就是 PWA，以 standalone 從主畫面開啟即無瀏覽器 chrome、無下拉關閉手勢——但**內嵌 WebView 裡根本沒有「加入主畫面」這個選項**，真要引導得先講「以 Safari 開啟」；而 App 內的安裝引導做過一版又拿掉了（§15 Phase 1.5-4），現在沒有任何程式在做這件事，別照這句話直接開工。
 - iOS 另有一種自動縮放：focus 到 `font-size < 16px` 的輸入框時會放大整個版面（`maximum-scale=1` 擋不擋得住依版本而異，不能倚賴）。輸入框一律給 `font-size: max(1rem, 16px)`，用 padding 調高度，不要用縮字級的方式配版；寫死 `16px` 也擋得住自動縮放，但頁面已經不能捏合縮放，系統字級是玩家僅剩的放大手段，其餘字級都是 rem，唯獨輸入框寫死會變成唯一不跟著放大的元件。
 
 ## 5. 關卡資料設計
@@ -188,12 +188,12 @@ function speak(word) {
   - 無效字 → 字串抖動後消失。
 - ~~Haptic（震動）在命中時給一下~~：已移除。web 的 `navigator.vibrate` 在 iOS Safari 完全不支援、Android 上 10ms 脈衝短到 LRA 馬達振不出來，實測兩邊都無感；一個永遠沒作用的設定開關比沒有更糟。Phase 2 若接上 Capacitor 原生 haptics 再視體感決定要不要加回來。
 - 主題：只做深色一套，用 CSS custom properties 定義色票；不跟隨 `prefers-color-scheme`，省掉淺色主題的對比與維護成本。
-- Web 版鎖不了螢幕方向：橫式時蓋一層「請轉直畫面」遮罩即可，不要為橫式做第二套排版。
+- Web 版鎖不了螢幕方向：橫式時蓋一層「請轉直畫面」遮罩即可，不要為橫式做第二套排版。條件要帶上 `pointer: coarse`（詳見 UI 文件「橫式遮罩」）——只寫 `landscape` + `max-height` 的話，桌機把視窗拉矮就會被遮罩蓋掉，而桌機使用者轉不了螢幕。
 - 教學：第 1 關用 3 字母 + 一次性的滑動手勢示意（手指軌跡 overlay），玩家完成第一個字就收掉、不再出現；不做多步驟教學精靈。
 - 關卡選擇：線性解鎖（最遠玩到 `currentLevel`）；已完成關卡可重玩，但不重複給金幣（獎勵已按關卡記錄）。
 - 已找到的目標字可點擊查看釋義與發音（見 §6），卡片位置貼著被點的格子彈出，點卡片外任意處關閉。
 - **沒有音效。** 曾經有 4 個短音（命中、無效字、金幣、過關），兩種實作都試過、都在 iOS 上輸給同一件事——音訊 session 的行為，完整量測與經過見 §13 的「音效的兩次嘗試與收場」。唯一的聽覺回饋是答對目標字時的 TTS 發音（§6.1），無效字有抖動動畫、bonus 有 +N 金幣動畫、過關有過關卡片，四個缺口都已經有視覺回饋。多數 iOS 遊戲在靜音模式下本來就是安靜的，這也更貼近平台慣例。別再加回來（§16）。
-- `prefers-reduced-motion` 開啟時跳過飛入/撒花動畫，直接顯示結果。
+- `prefers-reduced-motion` 開啟時跳過飛入/撒花動畫，直接顯示結果。實作是**一條全域規則**（`*, *::before, *::after` 把 `animation-duration`／`transition-duration` 夾成 `0.01ms`、`animation-iteration-count` 夾成 1），不是逐一列出選擇器的名單。兩個理由，別改回名單：(1) `animation: none` 的元素**不會發 `animationend`**，而 `grid.js`（格子的 `.pop`）與 `main.js` 的 `playOnce`（領取鈕的 `.pop`、提示鈕與領取鈕的 `.shake`）都是靠那個事件把 class 拆掉的——名單版等於讓那些 class 永久殘留，`0.01ms` 一樣看不見但動畫確實跑完、事件照常送到，兩邊的清理程式碼不必為這個模式分岔；(2) 名單要靠人記得維護，新增一個有 transition 的元件就得回來補一筆，漏了不會有任何報錯，而漏掉的代價正好落在最需要它的人身上。`iteration-count` 要一起夾，否則 infinite 的 pulse 會用 0.01ms 的週期狂跑。
 - 設定入口（齒輪按鈕）：發音開關（存檔欄位仍叫 `settings.sound`，音效移除後它只管答對時的自動發音）。
 - 關卡全數破完後顯示「更多關卡即將推出」畫面——關卡被玩完的速度比想像中快，別讓玩家點下一關時當掉。
 
@@ -475,8 +475,12 @@ Phase 1 沒有自動化 UI 測試（§12），這份清單就是驗收標準兼
 - [ ] **Windows 桌機分享**：按［分享］→ **在跳出的系統分享面板裡挑一個目標送出**（郵件／Teams 那類會收文字的）→ 該目標收到的是完整文案＋網址，不是只有網址（機制與取捨見 UI 文件 §4-D）。**不要用 Ctrl+V 驗**：貼上讀的是剪貼簿，那條路本來就一直是完整版，貼得出來也證明不了分享面板收到了什麼。同時看一遍面板上原本「只剩網址」的目標（Facebook、「複製連結」、附近共享那類只吃 WebLink 的）**有沒有變成完全空的、或整個從面板消失**——那是這個改動唯一可能的退化
 - [ ] 按［分享］→ **在系統面板上按取消**（模擬「我的目標是網頁版聊天室／表單，不在這排 App 裡」）→ 按鈕閃出「文案已複製，可直接貼上」，且真的貼得出完整文案。**桌機**上成功分享出去之後回到頁面也該看到同一句（它不是失敗提示）——**手機不必驗這半**：分享出去會直接切到對方 App，2500ms 的提示在背景就燒完了，切回來看不到是預期行為，不是 bug
 - [ ] 同一顆按鈕在 iOS／macOS 分享到訊息、Mail：**網址預覽卡片還在**（Apple 兩邊都是把 text 與 url 當同一個 array 裡的兩個 item 送，維持分開傳就是為了那張卡，見 UI 文件 §4-D）；Android 行為不變（它本來就把兩者串成一個字串——但是用**空白**接、不是換行，所以網址前面沒有空行：那是「分享文案三條規則」第 1 條在 Android 上一直以來的已知例外，不是這次改壞的）
-- [x] 橫式 → 「請轉直畫面」遮罩
+- [ ] 橫式 → 「請轉直畫面」遮罩（**加了 `pointer: coarse` 條件後要重驗**：那條是為了擋桌機誤中，但它也擋在真機這條路上，只有實機／真的觸控裝置驗得準——桌機 DevTools 的裝置模擬不會把 `pointer` 改成 `coarse`）
+- [x] **桌機**把瀏覽器視窗拉矮到高度 < 500px → **不會**出現「請轉直畫面」遮罩（桌機使用者轉不了螢幕，這正是 `pointer: coarse` 擋掉的那條）
 - [x] `prefers-reduced-motion` 開啟 → 跳過飛入/撒花動畫，直接顯示結果
+- [ ] **VoiceOver 打開**：開設定卡 → 唸出「設定」而不是停在底下的畫面，往下滑巡覽**滑不到**卡片外的轉盤與格盤（`aria-modal`），找得到右上角［關閉］且按下去真的關掉、焦點回到齒輪鈕
+- [ ] **VoiceOver 打開**：過關 → 自動唸出「過關！ +10 金幣」（過關的慶祝全是視覺的，不唸就等於什麼都沒發生）
+- [ ] **VoiceOver 打開**：拖曳轉盤拼字期間**不會**逐字唸出 C→CA→CAT（`#preview` 不是 live region）；但拼到已找到的字時要唸出「已找到」（`#status`）
 - [x] 真機測過：iOS Safari + 一台中低階 Android（§12）
 
 Phase 1.5（PWA，§15）補的幾條——同樣只能手測，而且**只有正式站測得準**（`mise run serve` 是 http，SW 只在 localhost 例外生效，安裝到主畫面則完全測不到）：
diff --git a/docs/word-puzzle-ui-screens.md b/docs/word-puzzle-ui-screens.md
index b558048..e1b1385 100644
--- a/docs/word-puzzle-ui-screens.md
+++ b/docs/word-puzzle-ui-screens.md
@@ -35,16 +35,16 @@
 │                          │
 │        ｢ P L A ｣         │ ← 目前拼字串：僅手勢進行中顯示
 │                          │
-│  💡        （A）          │
-│  -25    （P）🔀（E）      │ ← 字母轉盤：下 1/3 拇指區，
-│        （L）（N）         │    中央洗牌鈕
-│                          │
+│            （A）          │
+│         （P）🔀（E）      │ ← 字母轉盤：下 1/3 拇指區，
+│  💡    （L）（N）         │    中央洗牌鈕
+│  -25                     │
 └──────────────────────────┘
 ```
 
 - 頂列高度固定，格子區域用剩餘空間置中縮放（格子尺寸 = 可用寬高取小除以行列數，主文件 §7）。
-- 提示鈕（💡 −25）固定在轉盤左側；金幣不足時按下 → 鈕抖動並強調價格（主文件 §8）。
-- 拼字串顯示區在格子與轉盤之間，平時空白、不佔版面跳動（高度預留固定）。
+- 提示鈕（💡 −25）固定在**左下角**，不是轉盤正左方：圓內接於矩形，剩下的空白全集中在四個角，而水平中線正是圓最寬、整個版面唯一沒有餘裕的那條線——正左方那版在 390×844 上離螢幕邊與轉盤各只剩 4px／2.5px（靠 clamp 硬塞的，原本想留 8px），320×568 更會壓到圓周約 4px。移到轉盤底部那一帶後，圓半寬從 R 降為 √(R²−d²)，橫向就有空間了。**但只有垂直改，水平仍跟著轉盤直徑走**（`right: min(50% + d/2 + 8px, 100% − 56px)`）：轉盤 330px 封頂，桌機上版面再寬轉盤也不會變大，改貼螢幕邊會讓按鈕離轉盤好幾百 px、看起來不屬於轉盤——「左下角」指的是**轉盤的**左下角，不是畫面的。對齊的是轉盤外框左緣而非圓弧切點，因為按鈕底緣與轉盤底緣齊平時最近點是它的右上角，要貼著圓弧得算 √(124R−3844)，跟按鈕高度綁死，用常數逼近會在某個尺寸失手；代價是桌機上最近點離圓弧約 36px（轉盤 330px 封頂時），手機上圓弧本來就在旁邊看不出來。選左下而非右下：按下去就直接扣 25 金幣、沒有確認，不該放在右手拇指的自然靜止弧上。金幣不足時按下 → 鈕抖動並強調價格（主文件 §8）。
+- 拼字串顯示區在格子與轉盤之間，平時空白、不佔版面跳動（高度預留固定）。它**刻意不是 `aria-live` 區塊**：`showPreview` 每滑過一個字母就重寫一次，掛上去等於整段拖曳都在逐字播報 C→CA→CAT，把玩家自己的節奏蓋掉。真正該播的只有 `flashPreview` 那幾則結果訊息（已找到／額外單字／金幣不足／無效字／領取金幣），那些另外寫進看不見的 `#status`（`role="status"`，`.sr-only`）。`#status` 跟 `#tap-hint` 一樣放在所有 screen 之外——screen 用 `hidden` 切換，live region 一旦離開無障礙樹，下次寫入就被當成新插入的子樹而不播報（§4-F 第三段有完整理由）。900ms 後兩邊一起清空：不清的話連續兩次相同訊息（連撞兩個「已找到」）文字沒變，輔助技術不會再播第二次。兩邊的字**只有無效字那則不同**（`flashPreview` 的第三個參數）：畫面上那則的「無效」全在抖動動畫裡，字本身就是玩家剛拼的那個字，照抄進 `#status` 等於只唸出剛拼的字、聽不出被判無效——而答對時 TTS 唸的也正是同一個字，兩者會變成同一句。播報那份改用 `notAWord`。
 
 ## 3. 畫面 B：關卡選擇
 
@@ -63,9 +63,11 @@
 
 ## 4. Overlay 們
 
-**C 過關**：半透明遮罩 + 中央卡片：「過關！ +10 🪙」、本關找到的 bonus 數、本關全部目標字（可點，彈出 E 查詞卡）、［下一關］按鈕、［分享戰績］按鈕（次要樣式；盤面與 D 的［分享］相同，只有第一句不同——這裡報「我破了第 N 關，額外找到 N 個單字」，D 那顆只說「我正在玩第 N 關」，細節見 D）。剛過關是唯一有動機炫耀的時刻，D 那顆則是隨時想到就能邀人，兩種場合不同所以兩邊都放。點卡片外不關閉（過關是單向流程）。最後一關的［下一關］→ 進畫面 G。列出目標字是為了讓玩家能查完成最後一字時來不及點格子看到的釋義。
+**C 過關**：半透明遮罩 + 中央卡片：「過關！ +10 🪙」、本關找到的 bonus 數、本關全部目標字（可點，彈出 E 查詞卡）、［下一關］按鈕、［分享戰績］按鈕（次要樣式；盤面與 D 的［分享］相同，只有第一句不同——這裡報「我破了第 N 關，額外找到 N 個單字」，D 那顆只說「我正在玩第 N 關」，細節見 D）。剛過關是唯一有動機炫耀的時刻，D 那顆則是隨時想到就能邀人，兩種場合不同所以兩邊都放。點卡片外不關閉（過關是單向流程）。**Escape 也不接**，同一條規則——這張卡的出口只有［下一關］。最後一關的［下一關］→ 進畫面 G。列出目標字是為了讓玩家能查完成最後一字時來不及點格子看到的釋義。卡片本身是 `role="dialog" aria-modal="true" aria-labelledby="clear-title" tabindex="-1"`，開啟時 `main.js` 把焦點送進**卡片自己**（不是［下一關］鈕）：過關的慶祝全是視覺的，不這麼做讀螢幕的人完全不知道自己贏了；焦點落在按鈕上只聽得到「下一關，按鈕」，落在卡片上 VoiceOver 才會唸出 `aria-labelledby` 指的「過關！ +10 金幣」。理由與 D 同一套，寫在 D。
+
+**D 設定**：半透明遮罩 + 卡片：發音開關、玩家編號（`XXXX-XXXX-XXXX`，點一下複製、按鈕文字暫時換成「已複製」，複製不到則換成「無法複製，請手動抄下」，1.5 秒還原；回報這串才能拿專屬兌換碼。複製出去的就是鈕上帶分隔線的那串——所見即所得，玩家貼進聊天室才不會以為複製錯了；`make-code.mjs --uid` 的 `normalizeUid` 會剝掉分隔符與大小寫，帶不帶都收）、［分享］按鈕（次要樣式，與旁邊的玩家編號／兌換同一層級——沒有人為了分享才打開設定，它不該是這張卡最搶眼的按鈕；定位是「隨時邀人玩」而非報戰績，所以開頭只說在玩第幾關。純文字：emoji 格盤 + 關卡數 + 字母盤。格盤只畫關卡形狀、不畫進度，進度由關卡數表達；字母隨文案附上讓收到的人能直接在聊天室裡解題（與下載圖同樣的取捨——字母本來就是公開輸入，答案才是雷），並且**排序後**才附上：`wheel.getLetters()` 給的是洗牌後的視覺順序（下載圖要跟畫面對得上才這樣設計），但純文字裡沒有畫面可對，不排序的話同一關分享兩次字母串不同，看起來像亂碼而不是一組字母。字數與方向不必寫進文案：每段長度 ≥2 的連續白格直線即一個字，這條填字慣例足以從盤面推回全部字位（已對 500 關驗證無例外）（⬜ 可填的格／⬛ 背景，沿用填字遊戲「白格可下筆、黑格是牆」的通用慣例而非品牌色；兩者同屬 U+2B1x 區塊以確保每列對齊，理由詳見 `snapshotText` 註解）；桌機手機一律先複製到剪貼簿再開系統分享面板——部分分享目標（Facebook 那類政策上只收連結的）只收連結、丟掉文字，剪貼簿裡通常有完整版可自行貼上——「通常」是因為桌面上分享面板搶走焦點時 `clipboard.writeText` 會被 Chromium 以「Document is not focused」擋掉，而那正好是最需要它成功的情境（取消面板的人就是要自己貼）。所以**面板收掉之後會再補寫一次**，而且要**等焦點真的回到頁面**（`document.hasFocus()`／`focus` 事件，上限 300ms）才寫——「面板關掉」與「`navigator.share` 的 promise settle」沒有規範保證的先後，不等就有機會撞上同一個錯，補寫等於沒補；上限也不能省，手機分享成功會直接切到對方 App，`focus` 永遠不會來，沒有上限的話 `share()` 就永不回傳。第一次就成功的手機不會多寫。兩次都失敗、**而且面板確實有開起來（含使用者取消）**，才是真的沒有保險，那種情況什麼都不提示；面板本身也叫不起來時仍要提示（見下）。**Windows 是唯一要分開處理的平台**：它的分享面板把 `text`／`url` 當 `DataPackage` 上兩個各自獨立的欄位（`SetText`／`SetWebLink`），多數目標只讀 WebLink，整段文案就這樣不見了（「電腦版分享只剩網址」的成因）；所以 Windows 上把網址併進單一 `text` 欄位傳。只挑 Windows 而非全平台改單欄位，是因為 iOS 要有真正的 `NSURL` item 才長得出預覽卡片、也才留得住只吃 URL 的分享目標，而 Android 本來就會把兩者串成一個字串、改不改都一樣。**macOS 不必比照 Windows**（問過一次就記在這，不用再查）：Apple 兩邊共用同一份 `WKShareSheet`，`text` 以 `NSString` 進 array、`url` 以帶 LinkPresentation metadata 的 item 進**同一個** array，接收端是「能收的 item 都收」，不是 Windows 那種「兩個具名欄位挑一個讀」——Mail、訊息那類目標文字與網址都拿得到。macOS 已知的怪癖是 `title` 會被丟掉（Mail 只留 url + text），而我們本來就沒送 `title`，所以踩不到。判斷用 `navigator.userAgentData?.platform`，不是在猜 UA 字串：Windows 上有 `navigator.share` 的只有 Chromium 系（Firefox 桌面版預設沒有 Web Share，走剪貼簿那條；Windows 沒有 Safari）。這個修正有兩個**已知例外，都不另外處理**：（1）Windows 的 Web Share 從 Chrome 81 就有、`userAgentData` 要 Chrome 90 才有，中間那段舊版 Chromium（以及手動打開 `dom.webshare.enabled` 的 Firefox）會 `?.` 短路、落回分開傳，分享出去仍可能只剩網址——就是修正前的行為；（2）Windows 這條不送 `SetWebLink`，只吃 WebLink 的目標（「複製連結」、附近共享那類）會收到空的、或直接不出現在面板上。把 `url` 加回去救不了（2）：那些目標本來就會忽略 `text`，兩個都給等於沒修，所以只能二選一，選了「多數目標拿得到完整文案」。分享失敗時（權限政策擋下、手勢過期、面板叫不起來，`AbortError` 的取消不算）落回剪貼簿的結果去提示，不能當成送出成功——那會讓按鈕看起來完全沒反應。面板關閉或被取消後，只要剪貼簿真的寫成功就**一律**提示「文案已複製，可直接貼上」：不是每個人的分享目標都在系統面板上——想貼到網頁版聊天室、表單、文件的人按完分享只會看到一排用不到的 App，取消面板正是「我的目標不在上面」那個訊號。提示排在面板之後才閃（`bridge.share` 是 await 完才回傳），所以不會被面板蓋掉、也不會浪費在看不到的時間裡；文案要帶主詞（「**文案**已複製」而不是光「已複製」），否則剛分享成功的人會把它讀成分享失敗。反過來，剪貼簿沒寫成就什麼都不提示——這句話是承諾，讓人去貼卻貼不出東西比不提示更糟。這也是為什麼不能「先樂觀提示、再開面板」：那個時間點 `writeText` 還沒 settle，而先 await 它就會吃掉手勢、面板根本開不了（見上）；帶檔分享時多數目標也會丟文字，故一律不帶圖）、［下載圖片］按鈕（canvas 快照 PNG 直接下載；目前以 `hidden` 隱藏，程式碼保留備用）、**兌換欄位**（輸入框 +［兌換］鈕 + 一行結果訊息，文案見 §6 的 `redeem*`；這是兌換碼**唯一的入口**，沒有 `?code=` 兌換連結，貼進整串舊網址也照收，機制與理由見主文件 §9）、「關於」（版本號 + 素材授權聲明，主文件 §14 要求的授權頁就放這；末行的「License texts」連到同站的 `assets/licenses.txt`，放 WordNet 與 ECDICT 的條文全文——§14 要求條文隨副本散布，但兩面條文牆不該塞進設定卡，另開檔案兩邊都成立）。點卡片外關閉，**另有右上角［✕］**——遮罩那條路讀螢幕的人走不到（`.overlay` 不可聚焦，VoiceOver 滑動巡覽碰不到它），開了就困在裡面，所以這顆是無障礙的出口而非裝飾。第三條路是 **Escape**，但它跟轉盤的鍵盤輸入一樣只服務開發迭代（§4-E），不能拿來取代［✕］。三條路共用 `closeSettings()`，才不會有一條忘了把焦點還回去——關掉時焦點交還開卡的齒輪鈕，不還的話焦點落回 `body`，讀螢幕的人得從畫面最上面重新滑一次才找得回自己剛才在哪裡。
 
-**D 設定**：半透明遮罩 + 卡片：發音開關、玩家編號（`XXXX-XXXX-XXXX`，點一下複製、按鈕文字暫時換成「已複製」，複製不到則換成「無法複製，請手動抄下」，1.5 秒還原；回報這串才能拿專屬兌換碼。複製出去的就是鈕上帶分隔線的那串——所見即所得，玩家貼進聊天室才不會以為複製錯了；`make-code.mjs --uid` 的 `normalizeUid` 會剝掉分隔符與大小寫，帶不帶都收）、［分享］按鈕（次要樣式，與旁邊的玩家編號／兌換同一層級——沒有人為了分享才打開設定，它不該是這張卡最搶眼的按鈕；定位是「隨時邀人玩」而非報戰績，所以開頭只說在玩第幾關。純文字：emoji 格盤 + 關卡數 + 字母盤。格盤只畫關卡形狀、不畫進度，進度由關卡數表達；字母隨文案附上讓收到的人能直接在聊天室裡解題（與下載圖同樣的取捨——字母本來就是公開輸入，答案才是雷），並且**排序後**才附上：`wheel.getLetters()` 給的是洗牌後的視覺順序（下載圖要跟畫面對得上才這樣設計），但純文字裡沒有畫面可對，不排序的話同一關分享兩次字母串不同，看起來像亂碼而不是一組字母。字數與方向不必寫進文案：每段長度 ≥2 的連續白格直線即一個字，這條填字慣例足以從盤面推回全部字位（已對 500 關驗證無例外）（⬜ 可填的格／⬛ 背景，沿用填字遊戲「白格可下筆、黑格是牆」的通用慣例而非品牌色；兩者同屬 U+2B1x 區塊以確保每列對齊，理由詳見 `snapshotText` 註解）；桌機手機一律先複製到剪貼簿再開系統分享面板——部分分享目標（Facebook 那類政策上只收連結的）只收連結、丟掉文字，剪貼簿裡通常有完整版可自行貼上——「通常」是因為桌面上分享面板搶走焦點時 `clipboard.writeText` 會被 Chromium 以「Document is not focused」擋掉，而那正好是最需要它成功的情境（取消面板的人就是要自己貼）。所以**面板收掉之後會再補寫一次**，而且要**等焦點真的回到頁面**（`document.hasFocus()`／`focus` 事件，上限 300ms）才寫——「面板關掉」與「`navigator.share` 的 promise settle」沒有規範保證的先後，不等就有機會撞上同一個錯，補寫等於沒補；上限也不能省，手機分享成功會直接切到對方 App，`focus` 永遠不會來，沒有上限的話 `share()` 就永不回傳。第一次就成功的手機不會多寫。兩次都失敗、**而且面板確實有開起來（含使用者取消）**，才是真的沒有保險，那種情況什麼都不提示；面板本身也叫不起來時仍要提示（見下）。**Windows 是唯一要分開處理的平台**：它的分享面板把 `text`／`url` 當 `DataPackage` 上兩個各自獨立的欄位（`SetText`／`SetWebLink`），多數目標只讀 WebLink，整段文案就這樣不見了（「電腦版分享只剩網址」的成因）；所以 Windows 上把網址併進單一 `text` 欄位傳。只挑 Windows 而非全平台改單欄位，是因為 iOS 要有真正的 `NSURL` item 才長得出預覽卡片、也才留得住只吃 URL 的分享目標，而 Android 本來就會把兩者串成一個字串、改不改都一樣。**macOS 不必比照 Windows**（問過一次就記在這，不用再查）：Apple 兩邊共用同一份 `WKShareSheet`，`text` 以 `NSString` 進 array、`url` 以帶 LinkPresentation metadata 的 item 進**同一個** array，接收端是「能收的 item 都收」，不是 Windows 那種「兩個具名欄位挑一個讀」——Mail、訊息那類目標文字與網址都拿得到。macOS 已知的怪癖是 `title` 會被丟掉（Mail 只留 url + text），而我們本來就沒送 `title`，所以踩不到。判斷用 `navigator.userAgentData?.platform`，不是在猜 UA 字串：Windows 上有 `navigator.share` 的只有 Chromium 系（Firefox 桌面版預設沒有 Web Share，走剪貼簿那條；Windows 沒有 Safari）。這個修正有兩個**已知例外，都不另外處理**：（1）Windows 的 Web Share 從 Chrome 81 就有、`userAgentData` 要 Chrome 90 才有，中間那段舊版 Chromium（以及手動打開 `dom.webshare.enabled` 的 Firefox）會 `?.` 短路、落回分開傳，分享出去仍可能只剩網址——就是修正前的行為；（2）Windows 這條不送 `SetWebLink`，只吃 WebLink 的目標（「複製連結」、附近共享那類）會收到空的、或直接不出現在面板上。把 `url` 加回去救不了（2）：那些目標本來就會忽略 `text`，兩個都給等於沒修，所以只能二選一，選了「多數目標拿得到完整文案」。分享失敗時（權限政策擋下、手勢過期、面板叫不起來，`AbortError` 的取消不算）落回剪貼簿的結果去提示，不能當成送出成功——那會讓按鈕看起來完全沒反應。面板關閉或被取消後，只要剪貼簿真的寫成功就**一律**提示「文案已複製，可直接貼上」：不是每個人的分享目標都在系統面板上——想貼到網頁版聊天室、表單、文件的人按完分享只會看到一排用不到的 App，取消面板正是「我的目標不在上面」那個訊號。提示排在面板之後才閃（`bridge.share` 是 await 完才回傳），所以不會被面板蓋掉、也不會浪費在看不到的時間裡；文案要帶主詞（「**文案**已複製」而不是光「已複製」），否則剛分享成功的人會把它讀成分享失敗。反過來，剪貼簿沒寫成就什麼都不提示——這句話是承諾，讓人去貼卻貼不出東西比不提示更糟。這也是為什麼不能「先樂觀提示、再開面板」：那個時間點 `writeText` 還沒 settle，而先 await 它就會吃掉手勢、面板根本開不了（見上）；帶檔分享時多數目標也會丟文字，故一律不帶圖）、［下載圖片］按鈕（canvas 快照 PNG 直接下載；目前以 `hidden` 隱藏，程式碼保留備用）、**兌換欄位**（輸入框 +［兌換］鈕 + 一行結果訊息，文案見 §6 的 `redeem*`；這是兌換碼**唯一的入口**，沒有 `?code=` 兌換連結，貼進整串舊網址也照收，機制與理由見主文件 §9）、「關於」（版本號 + 素材授權聲明，主文件 §14 要求的授權頁就放這；末行的「License texts」連到同站的 `assets/licenses.txt`，放 WordNet 與 ECDICT 的條文全文——§14 要求條文隨副本散布，但兩面條文牆不該塞進設定卡，另開檔案兩邊都成立）。點卡片外關閉。
+卡片是 `role="dialog" aria-modal="true" aria-labelledby="settings-title" tabindex="-1"`，開啟時把焦點送進**卡片自己**：`aria-modal` 讓 VoiceOver 的滑動巡覽把卡片外的一切藏起來（沒有它，開著設定卡也能一路滑到底下的轉盤與格盤，聽起來像沒有東西擋著），`tabindex="-1"` 是 `focus()` 的落點，VO 會跟著唸出標題，玩家才知道自己開了什麼——焦點進第一顆按鈕的話只聽得到「關閉」。**刻意沒有做 JS 焦點陷阱**：對觸控輔助技術來說 `aria-modal` 已經等於陷阱，剩下會用 Tab 逃出去的只有桌面鍵盤，而桌面鍵盤在這個專案裡只服務開發迭代，為它寫十幾行 focus trap 不划算。真要補時是加在這裡，不是散到各個按鈕上。同一套（`role`／`aria-modal`／焦點進卡片）也套在 C 過關卡上。卡片超過畫面高度時**自己捲**（`.card` 上 `max-height: 88%` + `overflow-y: auto`，遮罩是 `position: fixed inset: 0`、高度已是定值，用 % 才不會像 vh 那樣跟 iOS 網址列收合對不上）：不設上限的話，展開「關於」的六行授權文字在小螢幕上會被 `align-items: center` 上下裁掉，連遮罩都被推出畫面，只剩兩側各 4vw 的縫可以點，「點卡片外關閉」等於失效。因此 `.card` 是全站第二個 `overflow-y: auto`，要跟 `.level-list` 一樣列進 main.js 那條 `touchmove` 白名單、也一樣要 `overscroll-behavior: none`（主文件 §4 的內嵌 WebView 下拉關閉）。上限與捲動掛在 `.card` 而非只給設定卡：C 過關卡同樣沒有保護。
 
 **分享文案的三條規則**（改 `shareText`／`shareAll` 前先讀，違反其中任一條都會讓訊息讀起來像詐騙轉發）：
 
@@ -75,7 +77,9 @@
 
 另外：朋友點進網址是從**第 1 關**開始（沒有 deep link，關卡逐關解鎖），所以任何暗示「點進來玩這一關」的句子都是假的，不能寫。
 
-**E 查詞卡片**：貼著被點的格子彈出的小 popover：單字、一句繁中釋義（主）、一句英文釋義（輔）、🔊 喇叭鈕（Web Speech API，主文件 §6）。點卡片外任意處關閉。無英文語音可用時隱藏喇叭鈕。兩個入口——格盤上已找到的字、過關卡片(C)的單字鈕——共用同一段程式（`openDict`），但**只有格盤那條算「玩家已經知道格子可以點」**、收掉 F 第二段（單字鈕本來就長得像按鈕，教不了格盤，完整理由在 F 第二段「為什麼 C 的單字鈕不算」）。**已找到的字**的格子按下去會縮一下（同 `.clear-word-chip` 手感）：這只是點下去之後的確認，教不了「可以點」，發現性靠 F 第二段。條件是「所屬目標字已找到」而不是「格子有字」——提示只揭示一格、整字還沒補滿時那格點了沒反應，給它按壓回饋（與 VoiceOver 的 button 語意）就是騙人。實作上由 `grid.js` 在 `createGrid` 與每次 `update()` 給這些格子掛上 `role="button"`（一關內只增不減、換關整個格盤重建，所以不必拿掉），CSS（`.cell[role]:active`）與 VoiceOver 讀同一個標記。**`role` 一定要配 `aria-label`**（`strings.cellDictLabel`，內容是「查看 {字} 的解釋」）：只有 `role` 的話 VoiceOver 唸出來是「A，按鈕」，跟轉盤的字母鈕一字不差，聽的人分不出這顆是查解釋還是拼字母。刻意**不給 `tabindex`／Enter 處理**：整場沒有鍵盤玩法（轉盤是拖曳手勢），VoiceOver 觸控巡覽不靠 `tabindex` 也到得了；要補鍵盤就得整個格盤做 roving tabindex，那是另一件事，不是這個 `role` 的附帶義務。
+**E 查詞卡片**：貼著被點的格子彈出的小 popover：單字、一句繁中釋義（主）、一句英文釋義（輔）、🔊 喇叭鈕（Web Speech API，主文件 §6）。點卡片外任意處關閉，桌面鍵盤另有 Escape（疊層最上面那張先關，所以 C + E 都開著時 Escape 只收 E）。**彈出時節點會被搬進當下那張 `aria-modal="true"` 的 dialog 裡**（`anchorEl.closest('[aria-modal="true"]')`，沒有就掛回 `body`）：卡片本體平常是 `body` 的直接子節點，而 `aria-modal` 會讓輔助技術把 dialog 以外的一切藏起來——C + E 這個組合（C 的單字鈕正是 E 最主要的入口，因為完成最後一字時根本來不及點格子）在不搬的情況下，讀螢幕的人點得下去、卡片也真的畫出來了，卻永遠滑不到釋義與喇叭鈕。`position: fixed` 不吃 DOM 位置，版面與定位計算都不變，所以搬家只影響無障礙樹。無英文語音可用時隱藏喇叭鈕；喇叭鈕的 `aria-label` 是 `strings.speakLabel`（「唸出 {字}」），跟其餘標籤一樣走 strings.js——寫死英文的話讀螢幕的人會在一整頁繁中裡聽到中英夾雜。兩個入口——格盤上已找到的字、過關卡片(C)的單字鈕——共用同一段程式（`openDict`），但**只有格盤那條算「玩家已經知道格子可以點」**、收掉 F 第二段（單字鈕本來就長得像按鈕，教不了格盤，完整理由在 F 第二段「為什麼 C 的單字鈕不算」）。**已找到的字**的格子按下去會縮一下（同 `.clear-word-chip` 手感）：這只是點下去之後的確認，教不了「可以點」，發現性靠 F 第二段。條件是「所屬目標字已找到」而不是「格子有字」——提示只揭示一格、整字還沒補滿時那格點了沒反應，給它按壓回饋（與 VoiceOver 的 button 語意）就是騙人。實作上由 `grid.js` 在 `createGrid` 與每次 `update()` 給這些格子掛上 `role="button"`（一關內只增不減、換關整個格盤重建，所以不必拿掉），CSS（`.cell[role]:active`）與 VoiceOver 讀同一個標記。**`role` 一定要配 `aria-label`**（`strings.cellDictLabel`，內容是「查看 {字} 的解釋」）：只有 `role` 的話 VoiceOver 唸出來是「A，按鈕」——除了字母本身什麼都沒說，按下去會發生什麼完全聽不出來，而轉盤上同一個字母唸的是「A」，兩者只差一個「按鈕」，分不出這顆是查解釋還是拼字母。刻意**不給 `tabindex`／Enter 處理**：整場沒有鍵盤玩法（轉盤是拖曳手勢），VoiceOver 觸控巡覽不靠 `tabindex` 也到得了；要補鍵盤就得整個格盤做 roving tabindex，那是另一件事，不是這個 `role` 的附帶義務。
+
+**對照組：轉盤的字母是 `<div>` 不是 `<button>`**（`wheel.js`）。命中判斷走座標（`hitIndex`），那些節點是 `pointer-events: none`，從來收不到自己的 `click`——掛成 `button` 只會讓 VoiceOver 唸出「A，按鈕」再雙點一下毫無反應，而且它們會全部排進 Tab 順序。用 `div` 仍然唸得出字母（玩家聽得到這關有哪些字母，資訊沒有少），只是不再假裝可以按。轉盤本身對輔助技術仍然是玩不了的（拖曳手勢），這只是不再給出假的可按承諾，不是把它變成無障礙的。
 
 **F 教學**：兩段文案、**各自一個節點**（`#overlay-tutorial`／`#tap-hint`，共用 `.tutorial` 樣式），都不攔截操作（`pointer-events: none`），存檔各記一個旗標在 `settings` 裡。共用一個節點試過：兩段的位置、生命週期、完成旗標全都不同，狀態得在過關、換關、點開查詞、換畫面四處手動同步，漏一處就殘留（例如過關卡片背後透出上一關座標的殘影）。
 
@@ -99,7 +103,7 @@
 
 **G 全破**：全螢幕「更多關卡即將推出」+ 返回關卡選擇按鈕（可重玩舊關）+［分享戰績］按鈕（次要樣式）。這裡分享的是「破完目前所有關卡」而非某一盤——進到 G 時 `game`/`wheel` 還停在最後一關，秀那張盤面沒有意義；也刻意不寫關卡總數（同 `shareAll`）。
 
-**橫式遮罩**：全螢幕不透明「請轉直畫面」，蓋過其他一切。
+**橫式遮罩**：全螢幕不透明「請轉直畫面」，蓋過其他一切。條件是 `(orientation: landscape) and (max-height: 500px) and (pointer: coarse)`——**`pointer: coarse` 不是保險條款而是必要條件**：桌機把視窗拉矮（或筆電開半螢幕）就同時滿足前兩項，整個遊戲會被遮罩蓋掉，而桌機使用者轉不了螢幕。`coarse` 讀的是**主要**輸入裝置，所以帶觸控螢幕的筆電（主要輸入仍是觸控板）不會誤中，平板橫著拿仍然會中——那正是要蓋的情況。
 
 ### 疊層順序（z-index 由上到下）
 
@@ -132,6 +136,7 @@
 |-----|------|
 | `levelTitle` | 第 {n} 關 |
 | `alreadyFound` | 已找到 |
+| `notAWord` | {字} 不是單字 —— 只給 `#status` 播報（見 §2 拼字串顯示區），畫面上的無效字仍只顯示單字本身 + 抖動 |
 | `levelClear` | 過關！ |
 | `nextLevel` | 下一關 |
 | `bonusFound` | 額外單字 +{n} |
@@ -139,6 +144,8 @@
 | `tutorial` | 滑過字母，連成單字 |
 | `tapWordHint` | 點單字查看解釋 —— 過關卡片(C)單字列的說明與教學(F)第二段共用同一條 |
 | `cellDictLabel` | 查看 {字} 的解釋 —— 只給螢幕閱讀器聽（已找到的格子的 `aria-label`，見 E），畫面上不出現 |
+| `shuffleLabel` | 洗牌 —— 只給螢幕閱讀器聽（轉盤中央洗牌鈕的 `aria-label`），圖示鈕沒有可見文字 |
+| `speakLabel` | 唸出 {字} —— 只給螢幕閱讀器聽（查詞卡喇叭鈕的 `aria-label`，見 E） |
 | （閘門提示） | Lexoria／點擊繼續 —— 靜態寫在 index.html，不經 strings.js：JS 還在下載時就要看得見，同 `載入中…`。品牌名是畫面內唯一的露出點（其餘只在 title/meta/分享文案/關於裡） |
 | `rotateDevice` | 請轉直畫面 |
 | `allClear` | 更多關卡即將推出 |
diff --git a/index.html b/index.html
index 91856e6..32d212d 100644
--- a/index.html
+++ b/index.html
@@ -88,7 +88,10 @@
     </header>
     <!-- 載入提示（靜態文字，不經 strings.js——JS 下載與 levels.json 取得期間就要可見）：startLevel 建格盤時清掉 -->
     <div id="grid" class="grid-area" translate="no"><p class="loading-text">載入中…</p></div>
-    <div id="preview" class="preview" aria-live="polite"></div>
+    <!-- 拼字串顯示區刻意**不是** aria-live 區塊：showPreview 每滑過一個字母就重寫一次，
+         掛上去等於在整段拖曳期間逐字播報 C→CA→CAT。真正該播的只有 flashPreview 那幾則結果
+         訊息，那些走下面的 #status（UI 文件 §4-F 第三段）-->
+    <div id="preview" class="preview"></div>
     <div class="wheel-row">
       <button id="btn-hint" class="hint-btn" type="button" aria-label="提示"><span class="icon icon-bulb"></span><small id="hint-cost"></small></button>
       <div id="wheel" class="wheel" translate="no"></div>
@@ -120,8 +123,10 @@ <h1 id="error-text"></h1>
   </section>
 
   <!-- C. 過關 overlay -->
+  <!-- role/aria-modal/tabindex 的完整理由見設定卡（下一個 overlay）那段註解，兩張卡同一套。
+       這張刻意不接 Escape：過關是單向流程，「點卡片外不關閉」也是同一條規則（UI 文件 §4-C）-->
   <div id="overlay-clear" class="overlay" hidden>
-    <div class="card">
+    <div class="card" role="dialog" aria-modal="true" aria-labelledby="clear-title" tabindex="-1">
       <!-- biome-ignore lint/a11y/useHeadingContent: 文字由 strings.js 在執行期填入 -->
       <h2 id="clear-title"></h2>
       <p id="clear-bonus"></p>
@@ -134,7 +139,17 @@ <h2 id="clear-title"></h2>
 
   <!-- D. 設定 overlay -->
   <div id="overlay-settings" class="overlay" hidden>
-    <div class="card">
+    <!-- aria-modal="true" 讓 VoiceOver 的滑動巡覽把卡片外的一切藏起來——沒有它，開著設定卡也能
+         一路滑到底下的轉盤與格盤，聽起來像沒有東西擋著。tabindex="-1" 是給 main.js 開卡時
+         focus() 用的落點（VO 會跟著唸出 aria-labelledby 指的標題，玩家才知道開了什麼）。
+         **沒有做 JS 焦點陷阱**：那對觸控輔助技術來說 aria-modal 已經等於陷阱，剩下會用 Tab
+         逃出去的只有桌面鍵盤，而桌面鍵盤在這個專案裡只服務開發迭代（UI 文件 §4-E），
+         為它寫十幾行 focus trap 不划算。真要補時是加在這裡，不是散到各個按鈕上。 -->
+    <div class="card" role="dialog" aria-modal="true" aria-labelledby="settings-title" tabindex="-1">
+      <!-- 點卡片外也能關，但那條路讀螢幕的人走不到（遮罩不可聚焦、VO 滑動巡覽碰不到），
+           開了就困在裡面；這顆是走得到的出口，不是裝飾（UI 文件 §4-D）。
+           桌面鍵盤另有 Escape（main.js），但那條只服務開發迭代，不能拿來取代這顆 -->
+      <button id="btn-settings-close" class="card-close" type="button" aria-label="關閉"><span class="icon icon-close"></span></button>
       <!-- biome-ignore lint/a11y/useHeadingContent: 文字由 strings.js 在執行期填入 -->
       <h2 id="settings-title"></h2>
       <!-- biome-ignore lint/a11y/noLabelWithoutControl: span 文字由 strings.js 在執行期填入，input 已是 label 的子元素 -->
@@ -177,6 +192,13 @@ <h2 id="settings-title"></h2>
        收起來是靠文字清空（main.js hideTapHint + style.css #tap-hint:empty）-->
   <div id="tap-hint" class="tutorial at-grid" aria-live="polite"></div>
 
+  <!-- 狀態播報：flashPreview 的結果訊息（已找到／額外單字／金幣不足／無效字／領取金幣）只在
+       #preview 上閃 900ms，那是純視覺的。這個節點看不見，只負責讓輔助技術唸出同一句。
+       放在所有 screen 之外：screen 用 hidden 切換，live region 一旦離開無障礙樹，下次寫入就被
+       當成新插入的子樹而不播報（同 #tap-hint 的理由，UI 文件 §4-F）。role="status" 已隱含
+       aria-live="polite"，不必再寫一次。 -->
+  <p id="status" class="sr-only" role="status"></p>
+
   <!-- E. 查詞卡片（動態定位） -->
   <div id="dict-card" class="dict-card" hidden></div>
 
diff --git a/src/dictionary-card.js b/src/dictionary-card.js
index 542a66e..79a57d8 100644
--- a/src/dictionary-card.js
+++ b/src/dictionary-card.js
@@ -1,4 +1,5 @@
 // 查詞卡片（設計文件 §6）：釋義 + 喇叭發音。只有已找到的字能查（由呼叫端把關）。
+import { strings } from './strings.js';
 
 // 無英文語音就隱藏喇叭鈕（§6.2）；getVoices 可能先回空陣列，要等 voiceschanged。
 let hasEnglishVoice = false;
@@ -108,7 +109,7 @@ export function createDictionaryCard(cardEl) {
       const btn = document.createElement('button');
       btn.className = 'speak-btn';
       btn.innerHTML = '<span class="icon icon-speaker"></span>';
-      btn.setAttribute('aria-label', `pronounce ${word}`);
+      btn.setAttribute('aria-label', strings.speakLabel(word));
       btn.addEventListener('click', () => speak(word, 'btn'));
       cardEl.appendChild(btn);
     }
@@ -125,6 +126,11 @@ export function createDictionaryCard(cardEl) {
     p.textContent = entry?.def ?? '';
     cardEl.appendChild(p);
 
+    // 節點要掛進當下那張 aria-modal 的 dialog 裡面，不能留在 body 上：aria-modal="true" 會讓
+    // 輔助技術把 dialog 以外的一切藏起來，而過關卡片的單字鈕正是這張卡最主要的入口（UI 文件 §4-C）
+    // ——留在外面的話讀螢幕的人點得下去、卻永遠滑不到剛彈出來的釋義與喇叭鈕。
+    // position: fixed 不吃 DOM 位置，版面與下面的定位計算都不受影響；沒有 modal 就掛回 body。
+    (anchorEl.closest('[aria-modal="true"]') ?? document.body).appendChild(cardEl);
     // 貼著被點的格子彈出（螢幕邊緣往內夾）
     cardEl.hidden = false;
     const a = anchorEl.getBoundingClientRect();
diff --git a/src/grid.js b/src/grid.js
index 4f228cd..ff33843 100644
--- a/src/grid.js
+++ b/src/grid.js
@@ -48,8 +48,9 @@ export function createGrid(container, level, { onCellTap, isFound }) {
   // 補滿的格子點了不會有反應，給它按鈕語意（VoiceOver 唸成 button）與按壓回饋只會變成
   // 「按下去有縮放、卻什麼都沒發生」。role 同時是 CSS(.cell[role]:active) 與 VoiceOver 的依據，
   // 不另外再加一個 class。
-  // aria-label 是必要的、不是加分項：只有 role 的話 VoiceOver 唸出來是「A，按鈕」，跟轉盤的
-  // 字母鈕一字不差，聽的人分不出這顆是查解釋還是拼字母。名稱取「已找到的第一個字」而不是格子上的
+  // aria-label 是必要的、不是加分項：只有 role 的話 VoiceOver 唸出來是「A，按鈕」——除了字母本身
+  // 什麼都沒說，按下去會發生什麼完全聽不出來，而轉盤上同一個字母唸的是「A」（那邊是 div，不帶
+  // button 語意），兩者只差一個「按鈕」，分不出這顆是查解釋還是拼字母。名稱取「已找到的第一個字」而不是格子上的
   // 字母，才不依賴 update() 有沒有先寫進 textContent（createGrid 就叫得動），取法同 onCellTap。
   // 不給 tabindex／鍵盤：整場沒有鍵盤玩法（轉盤是拖曳手勢），VoiceOver 觸控巡覽不靠 tabindex
   // 也到得了；要補就得整個格盤做 roving tabindex，那是另一件事。
diff --git a/src/main.js b/src/main.js
index c5d18d9..8208521 100644
--- a/src/main.js
+++ b/src/main.js
@@ -12,6 +12,16 @@ import { createWheel } from './wheel.js';
 
 const $ = (id) => document.getElementById(id);
 
+// 播一次動畫 class，播完就拆掉：留著的話切到關卡選擇（screen 用 hidden → display:none）
+// 再切回來會讓 CSS 動畫整個重播，看起來像按鈕自己動了一下。
+// 先移除→強制回流→加回，否則同一個 class 還在時動畫不會重播。
+function playOnce(el, cls) {
+  el.classList.remove(cls);
+  void el.offsetWidth;
+  el.classList.add(cls);
+  el.addEventListener('animationend', () => el.classList.remove(cls), { once: true });
+}
+
 // ---- 除錯紀錄：網址帶 ?debug 才收集，設定裡多一顆「複製除錯紀錄」（非正式功能）----
 const DEBUG = new URLSearchParams(location.search).has('debug');
 const debugLog = [];
@@ -83,6 +93,9 @@ $('label-about').textContent = strings.about;
 $('label-uid').textContent = strings.playerId;
 $('btn-download').textContent = strings.download;
 $('redeem-input').placeholder = strings.redeemPlaceholder;
+// placeholder 不是可存取名稱：多數輔助技術只在欄位還空著時唸它，開始輸入後就沒有名字了，
+// 有些設定下根本不唸。旁邊的［兌換］鈕也標不了它——那顆是動作，不是這格的標籤。
+$('redeem-input').setAttribute('aria-label', strings.redeemPlaceholder);
 $('btn-redeem').textContent = strings.redeemAction;
 $('hint-cost').textContent = `−${ECONOMY.hintCost}`; // 價格唯一來源是 ECONOMY（設計文件 §8）
 
@@ -161,7 +174,7 @@ for (const type of ['gesturestart', 'gesturechange', 'gestureend'])
 // iOS 從別的 App 點連結會用內嵌 WebView（WKWebView）開，它帶了原生的「下拉關閉」手勢。
 // 那個手勢屬於外層 App，網頁 JS 無法完全停用；但多數內嵌瀏覽器是靠 WKWebView 內部
 // scrollView 在頂端往下 rubber-band 來觸發的。整頁本就是固定版面（html/body overflow: hidden），
-// 只有 .level-list 真的要捲動（style.css 裡唯一的 overflow-y: auto），於是其餘一律擋掉
+// 只有 .level-list 和 .card 真的要捲動（style.css 裡僅有的兩個 overflow-y: auto），於是其餘一律擋掉
 // touchmove，讓 scrollView 不 rubber-band → 大幅降低下滑誤觸關閉。關卡列表放行，捲到邊界
 // 交給它自己的 overscroll-behavior: none 不外溢。多指一起擋：兩指下滑照樣 rubber-band，
 // 而縮放本來就由 gesture*／viewport 擋掉了，這裡多擋不會多吃到任何手勢。
@@ -174,7 +187,7 @@ for (const type of ['gesturestart', 'gesturechange', 'gestureend'])
 document.addEventListener(
   'touchmove',
   (e) => {
-    if (!e.target.closest('.level-list, input')) e.preventDefault();
+    if (!e.target.closest('.level-list, .card, input')) e.preventDefault();
   },
   { passive: false }
 );
@@ -209,14 +222,21 @@ function showPreview(word) {
   el.className = 'preview';
   el.textContent = word;
 }
-function flashPreview(text, cls) {
+// #preview 是純視覺的（showPreview 逐字母重寫，掛 aria-live 會整段拖曳都在播報），
+// 所以結果訊息另外寫進看不見的 #status live region。900ms 後兩邊一起清空：不清的話，
+// 連續兩次同樣的訊息（例如連撞兩個「已找到」）文字沒變、輔助技術就不會再播第二次。
+// say 預設等於畫面上那句；只有無效字要分開——那則的「無效」全在抖動動畫裡，
+// 畫面上的字就是玩家剛拼的那個字，照抄進 live region 等於什麼都沒說（答對時聽到的也是同一個字）。
+function flashPreview(text, cls, say = text) {
   const el = $('preview');
   el.textContent = text;
   el.className = `preview ${cls}`;
+  $('status').textContent = say;
   clearTimeout(previewTimer);
   previewTimer = setTimeout(() => {
     el.textContent = '';
     el.className = 'preview';
+    $('status').textContent = '';
   }, 900);
 }
 
@@ -364,7 +384,8 @@ function onSubmit(word) {
       flashPreview(strings.alreadyFound, 'dup'); // 不重播動畫、不重複給金幣（§1）
       break;
     case 'invalid':
-      flashPreview(word, 'shake'); // 無效字的回饋純視覺——沒有音效了（§13）
+      // 無效字的畫面回饋純視覺——沒有音效了（§13）；播報那份要自己說出「不是單字」
+      flashPreview(word, 'shake', strings.notAWord(word));
       break;
   }
 }
@@ -389,6 +410,10 @@ function onWin() {
   hideTapHint();
   renderClearWords();
   $('overlay-clear').hidden = false;
+  // 焦點進卡片本身（tabindex="-1"），VoiceOver 才會唸出「過關！+10 金幣」——不然過關這件事
+  // 對讀螢幕的人是完全無聲的（畫面上的慶祝全是視覺）。不進［下一關］鈕：那樣只聽得到
+  // 「下一關，按鈕」，仍然不知道剛剛贏了。
+  $('overlay-clear').querySelector('.card').focus();
 }
 
 // 過關卡片列出本關全部目標字，點字可彈出查詞卡（不強制關閉，UI 文件 §4）
@@ -416,10 +441,7 @@ $('btn-hint').addEventListener('click', () => {
   const result = game.useHint(save.coins);
   if (!result.ok) {
     // 金幣不足 → 按鈕抖動並強調價格，不彈購買視窗
-    const btn = $('btn-hint');
-    btn.classList.remove('shake');
-    void btn.offsetWidth; // 重新觸發動畫
-    btn.classList.add('shake');
+    playOnce($('btn-hint'), 'shake');
     flashPreview(strings.noCoins, 'dup');
     return;
   }
@@ -452,13 +474,8 @@ function updateClaim() {
   if (ready) {
     btn.textContent = strings.claimReady(ECONOMY.claimCoins);
     btn.setAttribute('aria-label', strings.claimLabel); // 「+25」對螢幕閱讀器太隱晦，補上動作名
-    if (claimWasReady === false) {
-      // 從倒數翻成可領（守到歸零，或切回分頁時剛好過期）→ 彈跳登場。
-      // 移除→強制回流→加回，否則同一個 class 還在時動畫不會重播。
-      btn.classList.remove('pop');
-      void btn.offsetWidth;
-      btn.classList.add('pop');
-    }
+    // 從倒數翻成可領（守到歸零，或切回分頁時剛好過期）→ 彈跳登場
+    if (claimWasReady === false) playOnce(btn, 'pop');
   } else if (remainingMs <= CLAIM_FINAL_MS) {
     // 進入秒級的那一刻 remainingMs 幾乎剛好 60000（setTimeout 只會晚不會早），
     // ceil 會先閃一格「60 秒」——夾到 59，秒級倒數才真的從 59 開始
@@ -478,10 +495,7 @@ $('btn-claim').addEventListener('click', () => {
   const { ready, remainingMs } = claimStatus(save.lastClaimAt);
   if (!ready) {
     // 同提示鈕金幣不足的模式：抖動 + 說明訊息，讓倒數不會被誤讀成限時
-    const btn = $('btn-claim');
-    btn.classList.remove('shake');
-    void btn.offsetWidth;
-    btn.classList.add('shake');
+    playOnce($('btn-claim'), 'shake');
     if (remainingMs <= CLAIM_FINAL_MS) {
       flashPreview(strings.claimAlmost, 'good'); // 最後一分鐘：承認他在等，不再報時
     } else {
@@ -575,11 +589,21 @@ function flasher(btn, label, ms) {
 }
 
 // ---- 設定 overlay ----
+// 三條關閉路徑（點卡片外、右上角 ✕、Escape）共用這支，才不會有一條忘了把焦點還回去。
+function closeSettings() {
+  $('overlay-settings').hidden = true;
+  // 焦點交還給開卡的那顆齒輪：不還的話焦點落回 body，讀螢幕的人得從畫面最上面重新滑一次
+  // 才找得回自己剛才在哪裡。
+  $('btn-settings').focus();
+}
 $('btn-settings').addEventListener('click', () => {
   dictCard.hide(); // 同時只留一個互動 overlay（UI 文件 §4）
   $('opt-sound').checked = save.settings.sound;
   $('redeem-msg').hidden = true; // 上次的兌換結果不留到下次開卡
   $('overlay-settings').hidden = false;
+  // 同過關卡：焦點進卡片本身，VoiceOver 會唸出 aria-labelledby 指的「設定」標題。
+  // 不進第一顆按鈕，那樣只聽得到「關閉」，不知道自己開了什麼。
+  $('overlay-settings').querySelector('.card').focus();
 });
 // 玩家編號：一輩子不變，填一次就好；點一下複製。
 // 複製失敗（非 secure context 沒有 clipboard）也要出文案——按鈕按下去毫無反應使用者不知道
@@ -596,7 +620,17 @@ $('opt-sound').addEventListener('change', (e) => {
   persist(save);
 });
 $('overlay-settings').addEventListener('click', (e) => {
-  if (e.target === e.currentTarget) $('overlay-settings').hidden = true; // 點卡片外關閉
+  if (e.target === e.currentTarget) closeSettings(); // 點卡片外關閉
+});
+$('btn-settings-close').addEventListener('click', closeSettings);
+// Escape：桌面鍵盤的退出鍵，跟轉盤的鍵盤輸入（wheel.js）一樣只服務開發迭代，不是玩家的出口
+// ——玩家的出口是 ✕ 與點卡片外。由上往下關一層：查詞卡(z 35) 疊在 overlay(30) 之上，
+// 兩張都開著時（過關卡片 + 點單字彈出的查詞卡，UI 文件 §4 允許）先關上面那張。
+// 過關卡片刻意不接：那是單向流程，跟「點卡片外不關閉」同一條規則（§4-C）。
+addEventListener('keydown', (e) => {
+  if (e.key !== 'Escape') return;
+  if (!$('dict-card').hidden) dictCard.hide();
+  else if (!$('overlay-settings').hidden) closeSettings();
 });
 // 分享進度：Wordle 式純文字（emoji 格盤 + 關卡數），內容是目前畫面這一關——重玩舊關時誠實。
 // 三顆按鈕共用這套流程，差別全在 buildText：過關報戰績、設定邀人玩、全破報總關數。
diff --git a/src/strings.js b/src/strings.js
index 7e526a5..3b4e926 100644
--- a/src/strings.js
+++ b/src/strings.js
@@ -10,6 +10,9 @@ const shareHead = (n, bonus) =>
 export const strings = {
   levelTitle: (n) => `第 ${n} 關`,
   alreadyFound: '已找到',
+  // 只給 #status 播報用：#preview 上無效字是「單字本身 + 抖動」，抖動是純視覺的，
+  // 光把單字丟進 live region 等於只唸出剛拼的字，聽不出來被判無效（答對時聽到的也是同一個字）
+  notAWord: (w) => `${w} 不是單字`,
   levelClear: '過關！',
   nextLevel: '下一關',
   bonusFound: (n) => `額外單字 +${n}`,
@@ -45,6 +48,10 @@ export const strings = {
   download: '下載圖片',
   tapWordHint: '點單字查看解釋', // 過關卡片單字列(§4-C)與教學第二段(§4-F)共用同一條（UI 文件）
   cellDictLabel: (w) => `查看 ${w} 的解釋`, // 已找到的格子的 aria-label：只有 role 會跟轉盤字母鈕同音
+  // 以下兩句只給輔助技術聽，畫面上看不到（圖示鈕沒有可見文字）。放這裡是因為它們也是 UI 文案：
+  // 其餘標籤全是繁中，寫死英文的話讀螢幕的人會聽到中英夾雜。
+  shuffleLabel: '洗牌',
+  speakLabel: (w) => `唸出 ${w}`,
   playerId: '玩家編號',
   copied: '已複製',
   copyFailed: '無法複製，請手動抄下',
diff --git a/src/style.css b/src/style.css
index c0ac403..beb4367 100644
--- a/src/style.css
+++ b/src/style.css
@@ -78,6 +78,7 @@ button {
   --i-shuffle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 3 21 3 21 8'/%3E%3Cline x1='4' y1='20' x2='21' y2='3'/%3E%3Cpolyline points='21 16 21 21 16 21'/%3E%3Cline x1='15' y1='15' x2='21' y2='21'/%3E%3Cline x1='4' y1='4' x2='9' y2='9'/%3E%3C/svg%3E");
   --i-speaker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14'/%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3C/svg%3E");
   --i-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='12' x2='5' y2='12'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E");
+  --i-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
   --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
   --i-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
   --i-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M7 4v16l13-8z'/%3E%3C/svg%3E");
@@ -117,6 +118,9 @@ button {
 .icon-check {
   --i: var(--i-check);
 }
+.icon-close {
+  --i: var(--i-close);
+}
 .icon-lock {
   --i: var(--i-lock);
 }
@@ -336,13 +340,21 @@ button {
   padding: 8px 0 24px;
 }
 .hint-btn {
-  /* 用 right（而非 left）定位，讓按鈕左緣交給內容自然撐開——不必猜按鈕寬度，
-     轉盤變大/變小時兩者永遠不會疊到；second min() 分支保底螢幕邊界最少 4px
-     （52px 是目前按鈕實際寬度，本專案無 i18n，內容固定不會變寬，設計文件 §4）*/
+  /* 轉盤的左下角。兩個軸各有各的理由，要動請兩邊一起想：
+     — 垂直靠轉盤下緣，不是正左方的水平中線：圓內接於矩形，剩下的空白全集中在四個角，而水平
+       中線正是圓最寬、整個版面唯一沒有餘裕的那條線（正左方那版在 390px 上離螢幕邊與轉盤各
+       只剩 4px／2.5px，320px 還會壓到圓周）。移到下緣這一帶圓半寬掉成 √(R²−d²)，橫向就有
+       空間了（UI 文件 §2）。空間不必挪，本來就在角落沒人用。
+     — 水平仍跟著轉盤走，不貼螢幕邊：轉盤 330px 封頂，桌機上版面再寬它也不會變大，貼螢幕邊
+       會讓按鈕離轉盤好幾百 px、看起來不屬於轉盤。用 right（而非 left）定位，按鈕左緣交給
+       內容自然撐開、不必猜寬度；second min() 分支保底離螢幕邊最少 4px（52px 是目前按鈕實際
+       寬度，本專案無 i18n，內容固定不會變寬，設計文件 §4）。
+     對齊的是轉盤外框左緣而不是圓周切點：按鈕底緣與轉盤底緣齊平，最近點是它的右上角，要真的
+     貼著圓弧得算 √(124R−3844)——那跟按鈕高度綁死，換個常數逼近就會在某個螢幕尺寸失手。
+     代價是桌機上最近點離圓弧約 36px（轉盤 330px 封頂時），手機上圓弧本來就在旁邊，看不出差別。 */
   position: absolute;
   right: min(calc(50% + var(--wheel-d) / 2 + 8px), calc(100% - 56px));
-  top: 50%;
-  transform: translateY(-50%);
+  bottom: 24px; /* 對齊轉盤下緣：絕對定位以 padding box 為準，這裡等於 .wheel-row 的 padding-bottom */
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -356,24 +368,7 @@ button {
   transition: transform 0.12s ease;
 }
 .hint-btn:active {
-  transform: translateY(-50%) scale(0.94);
-}
-.hint-btn.shake {
-  /* .hint-btn 靠 translateY(-50%) 垂直置中，共用的 .shake 只設 translateX 會蓋掉它，
-     導致抖動時整顆按鈕往下掉半個身位，所以這裡疊加專屬 keyframes 保留置中位移 */
-  animation: hint-shake 0.35s;
-}
-@keyframes hint-shake {
-  0%,
-  100% {
-    transform: translateY(-50%) translateX(0);
-  }
-  25% {
-    transform: translateY(-50%) translateX(-6px);
-  }
-  75% {
-    transform: translateY(-50%) translateX(6px);
-  }
+  transform: scale(0.94);
 }
 .hint-btn small {
   font-family: var(--font-display);
@@ -578,12 +573,20 @@ button {
   display: none;
 }
 .card {
+  position: relative; /* 關閉鈕的定位基準 */
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 20px;
   padding: 26px 30px;
   min-width: 244px;
   max-width: min(92vw, 360px);
+  /* 卡片高過畫面時要自己捲，不能讓 overlay 的 align-items:center 把它上下裁掉：
+     裁掉的同時遮罩也被推出畫面，只剩兩側各 4vw 的縫可以點，「點卡片外關閉」等於失效。
+     展開設定卡的「關於」（六行授權文字）在小螢幕上就會這樣。用 % 而不是 vh——遮罩是
+     position:fixed inset:0，高度已經是定值，vh 在 iOS 反而會跟著網址列收合對不上。 */
+  max-height: 88%;
+  overflow-y: auto;
+  overscroll-behavior: none; /* 同 .level-list：捲到邊界不外溢到 WebView scrollView（設計文件 §4）*/
   display: flex;
   flex-direction: column;
   gap: 16px;
@@ -591,6 +594,20 @@ button {
   box-shadow: var(--shadow-lg);
   animation: card-in 0.22s ease-out;
 }
+/* 右上角關閉鈕：脫離流排，不佔標題那一行的位置。捲動時會跟著內容捲走，
+   但那時遮罩已經點得到了（上面 max-height），VoiceOver 也照樣走得到這顆。 */
+.card-close {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  padding: 10px; /* 圖示 20px + 內距，湊滿 40px 觸控範圍 */
+  line-height: 0;
+  color: var(--text-soft);
+  transition: transform 0.12s ease;
+}
+.card-close:active {
+  transform: scale(0.9);
+}
 @keyframes card-in {
   from {
     transform: scale(0.92) translateY(8px);
@@ -805,6 +822,18 @@ body:has(.overlay:not([hidden])) #tap-hint {
   transform: scale(0.88);
 }
 
+/* 只給輔助技術聽、畫面上看不見（#status 的結果訊息播報）。
+   不能用 display: none／visibility: hidden／width: 0——那些會把節點一起移出無障礙樹，
+   live region 就永遠不播了。夾成 1px 再 clip 掉是唯一還留在樹裡的做法。 */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
 /* 橫式遮罩：蓋過其他一切 */
 .rotate-mask {
   position: fixed;
@@ -818,33 +847,33 @@ body:has(.overlay:not([hidden])) #tap-hint {
   font-size: 1.3rem;
   font-weight: 800;
 }
-@media (orientation: landscape) and (max-height: 500px) {
+/* pointer: coarse 不是保險條款，是必要條件：桌機把視窗拉矮（或筆電開半螢幕）就同時滿足
+   landscape 與 max-height: 500px，整個遊戲會被「請轉直畫面」蓋掉——而桌機使用者轉不了。
+   coarse 讀的是**主要**輸入裝置，所以帶觸控螢幕的筆電（主要輸入仍是觸控板）不會誤中；
+   平板橫著拿仍然會中，那正是要蓋的情況。 */
+@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
   .rotate-mask {
     display: flex;
   }
 }
 
-/* prefers-reduced-motion：跳過動畫與過場，直接顯示結果（設計文件 §7）*/
+/* prefers-reduced-motion：跳過動畫與過場，直接顯示結果（設計文件 §7）。
+   這裡曾經是兩份逐一列出的選擇器名單，改成全域規則有兩個理由，別改回去：
+   1. `animation: none` 的元素**不會發 animationend**，而 grid.js（格子的 .pop）與 main.js
+      的 playOnce（.pop／.shake）都是靠那個事件把 class 拆掉的——名單版等於讓那些 class 永久殘留。
+      `0.01ms` 一樣看不見，但動畫確實跑完、事件照常送到，兩邊的清理程式碼不必為這個模式分岔。
+   2. 名單要靠人記得維護：新增一個有 transition 的元件就得回來補一筆，漏了不會有任何報錯，
+      而漏掉的代價正好落在最需要它的人身上。
+   iteration-count 要一起夾成 1，否則 .gate-hint／.loading-text 的 infinite pulse 會用
+   0.01ms 的週期狂跑。 */
 @media (prefers-reduced-motion: reduce) {
-  .cell.pop,
-  #btn-claim.pop,
-  .preview.shake,
-  .shake,
-  .tutorial,
-  .card,
-  .loading-text,
-  .gate-hint {
-    animation: none;
-  }
-  .chip,
-  .hint-btn,
-  .level-btn,
-  .btn-primary,
-  .wheel-letter,
-  .wheel-shuffle,
-  .speak-btn,
-  .clear-word-chip,
-  .cell {
-    transition: none;
+  /* biome-ignore-start lint/complexity/noImportantStyles: 通用選擇器的特異性是 0，不加 !important 就會輸給每一條元件規則——而那些正是它要蓋掉的東西 */
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
   }
+  /* biome-ignore-end lint/complexity/noImportantStyles: 見上 */
 }
diff --git a/src/wheel.js b/src/wheel.js
index 0c9c334..f82dfcb 100644
--- a/src/wheel.js
+++ b/src/wheel.js
@@ -1,5 +1,6 @@
 // 字母轉盤 + 手勢（設計文件 §4）。
 // 命中與選取邏輯是純函式（hitIndex / applyHit），與 DOM 分離以便單元測試（§12）。
+import { strings } from './strings.js';
 
 const LETTER_KEY = /^[a-zA-Z]$/;
 
@@ -73,8 +74,12 @@ export function createWheel(container, letters, { onChange, onSubmit }) {
   svg.appendChild(line);
   container.appendChild(svg);
 
+  // 字母是 <div> 而不是 <button>：命中判斷走座標（hitIndex），這些節點是 pointer-events: none，
+  // 從來收不到自己的 click——掛成 button 只會讓 VoiceOver 唸出「A，按鈕」再雙點一下毫無反應，
+  // 而且它們會全部排進 Tab 順序。用 div 仍然唸得出字母（玩家聽得到這關有哪些字母，資訊沒有少），
+  // 只是不再假裝可以按。CSS 全靠 .wheel-letter 這個 class，不吃 button 的預設樣式，換元素無感。
   const buttons = letters.map((letter, i) => {
-    const b = document.createElement('button');
+    const b = document.createElement('div');
     b.className = 'wheel-letter';
     b.textContent = letter;
     b.dataset.index = i;
@@ -85,7 +90,7 @@ export function createWheel(container, letters, { onChange, onSubmit }) {
   const shuffleBtn = document.createElement('button');
   shuffleBtn.className = 'wheel-shuffle';
   shuffleBtn.innerHTML = '<span class="icon icon-shuffle"></span>';
-  shuffleBtn.setAttribute('aria-label', 'shuffle');
+  shuffleBtn.setAttribute('aria-label', strings.shuffleLabel);
   container.appendChild(shuffleBtn);
 
   // 盤面唯一的洗牌狀態:排列編號 k。按鈕 i 的圓周位置 = permutationAt(k)[i],