diff --git a/.changeset/player-long-note-and-ruleset-signals.md b/.changeset/player-long-note-and-ruleset-signals.md
new file mode 100644
index 000000000..3364f2458
--- /dev/null
+++ b/.changeset/player-long-note-and-ruleset-signals.md
@@ -0,0 +1,8 @@
+---
+'@be-music/player': minor
+---
+
+The engine now tells UI runtimes about long-note holds and about the ruleset a play is judged under, so a renderer no longer has to guess them from lane presses or re-derive the judge windows.
+
+- `PlayerUiCommand` gains `long-note-start` (channel, head beat, and the `ln` / `cn` / `hcn` mode the active ruleset actually plays the note in) and `long-note-end` (channel and a `complete` / `dropped` outcome). They are pushed in autoplay, auto-scratch, and manual play, next to the existing `hold-lane-until-beat` / `release-lane` pair.
+- `PlayerOptions.onRulesetResolved` is called once before playback with a `PlayerRulesetInfo`: the ruleset id, its long-note style, and its judge window tables in µs, after the judge ruleset, the debug window override, and a replay's recorded settings were applied. Under LR2 the tables are the ones in force at the start of the chart; a later `#EXRANKxx` change is not reported.
diff --git a/.changeset/player-web-skin-frame-data.md b/.changeset/player-web-skin-frame-data.md
new file mode 100644
index 000000000..61b9e4cd3
--- /dev/null
+++ b/.changeset/player-web-skin-frame-data.md
@@ -0,0 +1,19 @@
+---
+'@be-music/player-web': minor
+---
+
+Be-music skins can change play options and open the readme from the select screen through the new `setPlayOption`, `cyclePlayOption`, and `toggleReadme` actions (unknown keys and values outside an option's choices are ignored, `hiSpeed` and `shutter` are clamped, and each change bumps the select frame's `revision`). `PixiPlayOptions` and its value unions are now aliases of the SDK's `BeMusicPlayOptions` types.
+
+The player now fills these new skin fields:
+
+- Runtime: `song`, `lastJudgeDeltaMs` / `judgeTimings`, `minBpm` / `maxBpm` / `mainBpm`, `songLengthMs` / `songElapsedMs`, `failedAtMs` / `allNotesDoneAtMs` / `outroAtMs`, `gaugeRiseAtMs` / `gaugeMaxAtMs`, `scoreHistory` / `gaugeHistory`, `laneCovers` / `visibleMs` / `greenNumber` (beatoraja's duration and green number, over the current scroll and BPM), and `judgeWindows` (the engine's resolved windows in ms; a mid-chart `#EXRANK` change is not reflected).
+- Lanes and notes: each lane's `pressedAtMs` / `releasedAtMs` and `holding` / `holdStartedAtMs`, each long note's `mode` (as the active ruleset plays it) and `state` (`pending` / `held` / `dropped` / `done`), `autoplay` on notes and long notes played by autoplay or auto-scratch, the `judge` that set off each bomb, and `measureLines` (one per lane run) for skins that set `drawsMeasureLines`.
+- Select: `pointer` in the stage's design pixels, `hit` returns whether the pointer is over the rect, and `songRecord(song)` answers from the new `resolveSongRecord` select-scene option, through which a host hands skins its per-chart best records (lamp, EX score, max combo, miss count, play count); without it every song reads as never played.
+- Result data: `lamp`, `gaugeType`, `judgeRuleset`, `fast` / `slow`, and `judgeTimings`.
+- Song images: `songImage(song, kind)` on the select, decide, gameplay, and result frames returns the song's `#STAGEFILE`, `#BANNER`, or `#BACKBMP` as an `ImageBitmap`, loaded lazily from the song collection (select bumps `revision` when one arrives). Each scene keeps at most 32 decoded images and closes the least recently used one beyond that.
+- Skin settings: every frame carries `settings`. The gameplay, select, result, and decide scenes take the player's stored values through the new `beMusicSkinSettings` option, check them with `resolveBeMusicSkinSettings` (now also exported from `@be-music/player-web/skin`), and take changes through `setBeMusicSkinSettings`, which the skin sees from the next frame (select also bumps `revision`). Without stored values the skin draws with its defaults.
+- BGA: a skin that sets `drawsBga` receives `frame.bga` with the active base, layer, and POOR images and `poorActive`.
+
+A skin that sets `drawsLaneCover`, `drawsMeasureLines`, or `drawsBga` now draws the lane covers, measure lines, or BGA itself, and the player stops drawing its own.
+
+The new `DefaultPixiDecideView` shows a skin's `decide` screen between select and play for its `durationMs` (Enter, Space, or a click skips ahead; Escape cancels back to select); hosts mount it only when the skin declares one.
diff --git a/.changeset/skin-sdk-complete-frames.md b/.changeset/skin-sdk-complete-frames.md
new file mode 100644
index 000000000..0a18b2ccc
--- /dev/null
+++ b/.changeset/skin-sdk-complete-frames.md
@@ -0,0 +1,11 @@
+---
+'@be-music/skin-sdk': minor
+---
+
+Skins now receive everything they need to match what LR2 and beatoraja skins can show. Every addition is optional or opt-in, so existing skins keep working unchanged.
+
+- Gameplay runtime: `song`, `lastJudgeDeltaMs` / `judgeTimings` (positive = late), `judgeWindows`, `laneCovers`, `visibleMs`, `greenNumber`, `minBpm` / `maxBpm` / `mainBpm`, `songLengthMs` / `songElapsedMs`, `failedAtMs` / `allNotesDoneAtMs` / `outroAtMs`, `gaugeRiseAtMs` / `gaugeMaxAtMs`, and `scoreHistory` / `gaugeHistory`.
+- Gameplay frame: `measureLines` and `bga` behind the new opt-in `drawsMeasureLines` / `drawsBga` flags, `drawsLaneCover`, per-lane press / release / hold times, long-note `mode` / `state`, `autoplay` on notes, and the `judge` behind each bomb.
+- Select frame: `playOptions` / `playOptionChoices` with `setPlayOption`, `cyclePlayOption`, and `toggleReadme` actions, `pointer`, `songRecord(song)`, and `hit` returning whether the pointer is over the rect. `BeMusicPlayOptions` and its value unions now live in the SDK.
+- Result data: `lamp`, `gaugeType`, `judgeRuleset`, `fast` / `slow`, and `judgeTimings`, with `binJudgeTimings` for timing histograms.
+- An optional decide screen (`skin.decide`), skin settings (`skin.settings`, resolved with `resolveBeMusicSkinSettings` and checked by `validateBeMusicSkin`), and `songImage(song, kind)` on every frame.
diff --git a/docs/be-music-skin.ja.md b/docs/be-music-skin.ja.md
index 4896ad8fd..7822fd970 100644
--- a/docs/be-music-skin.ja.md
+++ b/docs/be-music-skin.ja.md
@@ -149,6 +149,8 @@ export default defineBeMusicSkin({
 | `contextAttributes`、`setup`、`teardown` | —    | [サーフェス](#サーフェス)と[フレームワークを使う](#フレームワークを使う)を参照。                               |
 | `stage`                                  | —    | デザインキャンバス。既定は `wideStage`。[ステージとレイアウト](#ステージとレイアウト)を参照。                  |
 | `gameplay`、`select`、`result`           | ○    | 各画面の `draw` 関数。[画面](#画面)を参照。                                                                    |
+| `decide`                                 | —    | 選曲とプレイの間の決定画面。[決定画面](#決定画面)を参照。                                                      |
+| `settings`                               | —    | プレイヤーが調整できるスキンのオプション。[スキン設定](#スキン設定)を参照。                                    |
 
 `validateBeMusicSkin(skin)` は、例外を投げずに同じ問題をメッセージの配列で返します。
 
@@ -172,17 +174,31 @@ export default defineBeMusicSkin({
 `gameplay.draw(surface, frame)` は `BeMusicGameplayFrame` を受け取ります。
 
 - `layout`: [ステージとレイアウト](#ステージとレイアウト)を参照。
-- `lanes`: 各レーンの矩形（`x`、`w`、`top`、判定ライン位置の `bottom`）、`kind`、`beam`（キービーム強度。押下中は 1、離すと減衰）。
-- `notes`: タップノーツ `{ kind, x, w, y }`。`y` はノーツの下端です。
-- `longNotes`: ロングノーツ `{ kind, x, w, top, bottom }`。`top` が終端、`bottom` が始端で、押下中は判定ラインに張り付きます。
+- `lanes`: 各レーンの矩形（`x`、`w`、`top`、判定ライン位置の `bottom`）、`kind`、`beam`（キービーム強度。押下中は 1、離すと減衰）。`pressedAtMs` / `releasedAtMs` はそのレーンを最後に押した・離したプレイクロック時刻、`holding` と `holdStartedAtMs` はそのレーンでロングノーツを押し続けているかと、その開始時刻です。
+- `notes`: タップノーツ `{ kind, x, w, y }`。`y` はノーツの下端です。オートプレイやオートスクラッチが叩くノーツには `autoplay` が付きます。
+- `longNotes`: ロングノーツ `{ kind, x, w, top, bottom }`。`top` が終端、`bottom` が始端で、押下中は判定ラインに張り付きます。`mode`（`'ln'` / `'cn'` / `'hcn'`）は判定方式、`state`（`'pending'` / `'held'` / `'dropped'` / `'done'`）は進行状態、`autoplay` はオートプレイが処理するかを表します。
 - `mines`: 地雷ノーツ `{ kind, x, w, y }`。`y` は下端です。判定ラインを通過する瞬間にそのレーンを押すと BAD になります。スキンが `gameplay.drawsMines`（後述）を設定したときだけ中身が入ります。
-- `bombs`: 生きているヒットエフェクト。`elapsedMs` と固定の `seed` を持ちます。
+- `bombs`: 生きているヒットエフェクト。`elapsedMs`、固定の `seed`、発生させた判定 `judge` を持ちます。
+- `measureLines`: 小節線 `{ side, x, w, y }`。横切るレーンランごとに 1 本です。スキンが `gameplay.drawsMeasureLines` を設定したときだけ中身が入ります。
+- `bga`: 合成する BGA のレイヤー（`{ base?, layer?, poor?, poorActive }`）。スキンが `gameplay.drawsBga` を設定したとき以外は `undefined` です。
 - `runtime`: HUD の値（下記）。
 - `beatPhase`、`nowMs`、`effects`、`audio`。
+- `settings` と `songImage`: [スキン設定](#スキン設定)と[曲の画像](#曲の画像)を参照。
 
 `gameplay.bombDurationMs`（既定 300）でヒットエフェクトの寿命を指定します。
 
-`gameplay.drawsMines: true` を設定すると、地雷ノーツを `frame.mines` から自分で描けます。設定しない場合はプレイヤーが黄色の注意縞が入った赤いバーとしてキャンバスの上に描くので、地雷を扱わないスキンでも地雷は表示されます。
+#### 自分で描く
+
+既定では、いくつかの要素をプレイヤーがキャンバスの上（または後ろ）に描くので、それらを扱わないスキンでも表示されます。自分で描きたい場合は `gameplay` に対応するフラグを設定します。
+
+| フラグ              | 描画に使うデータ     | 設定しない場合                                                         |
+| ------------------- | -------------------- | ---------------------------------------------------------------------- |
+| `drawsMines`        | `frame.mines`        | プレイヤーが黄色の注意縞入りの赤いバーをキャンバスの上に描きます。     |
+| `drawsLaneCover`    | `runtime.laneCovers` | プレイヤーが SUDDEN+ / HIDDEN+ のカバーをキャンバスの上に描きます。    |
+| `drawsMeasureLines` | `frame.measureLines` | プレイヤーが自前の小節線を描きます。                                   |
+| `drawsBga`          | `frame.bga`          | プレイヤーが BGA をキャンバスの後ろ、`layout.bga` の位置に表示します。 |
+
+どのフラグも既定は `false` で、解禁されるフレームのフィールドは設定するまで空（または `undefined`）のままです。既存のスキンの見た目は変わりません。`drawsBga` では、`layer` の画像は BMS のレイヤーの慣習どおり純粋な黒が透明になった状態で渡され、`base` と `poor` は不透明です。通常のアルファブレンドで描き、`poorActive` の間は他の代わりに `poor` を表示してください。bmson のレイヤー（仕様で黒は不透明のまま）と動画のレイヤーは作者が作ったとおりに渡されます。画像は `ImageBitmap`、動画の BGA なら再生中の `<video>` 要素です。`#BGA` の部分領域は切り出した画像として渡されます（切り出しが終わるまでの最初の 1〜2 フレームは渡されません）。`#SWBGA` のアニメーションのフレームはプレイヤーが選びますが、スロットの `#ARGB` による色と不透明度はスキンに任されます。
 
 `runtime`（`BeMusicGameplayRuntime`）の値:
 
@@ -196,6 +212,14 @@ export default defineBeMusicSkin({
 - **プレイ状態:** `autoplay`、`hasBga`、`loading`（音声デコードや BGA 変換の間は NOW LOADING を表示）、`progressRatio`、`chartMs`、`beatPhase`、`nowMs`
 - **イベント時刻:** `judgeAtMs`、`impulseAtMs`、`impulseKind`（直近の判定とキー入力。パンチやインパルスの演出用）
 - **快適性とサウンド:** `effects`、`audio`
+- **譜面:** `song`（プレイ中の `BrowserSongEntry`。レベル、難易度、`#RANK`、`#TOTAL` は `song.chart.metadata` にあります）、`minBpm`、`maxBpm`、`mainBpm`
+- **タイミング:** `lastJudgeDeltaMs` と `judgeTimings`（タイミング付きの直近 64 判定、古い順）。[判定タイミング](#判定タイミング)を参照。`judgeWindows` はルールセットの判定幅をノーツの種類（`note`、`scratch`、`longNoteEnd`）ごとに ms で表します。プレイ開始時に `#RANK` から決まり、途中の `#EXRANK` の変更は反映されません。
+- **レーンカバー:** `laneCovers`（サイドごとの `sudden`、`hidden`、`lift`。レーンの高さに対する割合）、`visibleMs`（ノーツが画面に見えている時間）、`greenNumber`（`visibleMs × 0.6`）
+- **曲の時計:** `songLengthMs` と `songElapsedMs`。オーディオの時計で、曲の開始とともに 0 から進み、ポーズ中は止まります。残り時間は `songLengthMs - songElapsedMs` です。`chartMs` は譜面の最初の拍から測り、カウントイン中は負になる点が異なります。
+- **1 プレイに 1 度の瞬間:** `failedAtMs`（プレイ中にゲージが尽きた）、`allNotesDoneAtMs`（最後のノーツが判定された）、`outroAtMs`（譜面が終わった）、`gaugeRiseAtMs`（ゲージが初めて上がった）、`gaugeMaxAtMs`（初めて最大に達した）。どれもその瞬間に固定されるプレイクロック時刻で、それまでは `undefined` です。
+- **推移:** `scoreHistory` と `gaugeHistory`。リザルト画面が受け取るのと同じサンプルです。ホストが更新中の配列そのものなので、読むだけにして変更しないでください。
+
+runtime のフィールドはすべて省略可能です。ホストが提供できない値は `undefined` になるので、適切な代替表示を用意してください。
 
 ### 選曲
 
@@ -204,22 +228,79 @@ export default defineBeMusicSkin({
 - **`select.draw(surface, frame)`** は `BeMusicSelectFrame` を受け取ります。
   - `entries`、`selectedIndex`、`firstVisibleIndex`、`visibleRows`、`focusedSong`
   - `folderLabel`、`searchQuery`、`totalCharts`
-  - `actions`（`play`、`autoPlay`、`activateSearch`）
-  - `revision`: 選曲の状態（カーソル、フォルダ、検索、リスト内容）が変わるたびに増えます。保持型のシーングラフは、これが変わったときだけ作り直せば済みます。
+  - `actions`: `play`、`autoPlay`、`activateSearch`、`setPlayOption(key, value)`、`cyclePlayOption(key, step?)`（step は 1 か -1、端で折り返し）、`toggleReadme()`（フォーカス中の曲の `.txt` を開閉）
+  - `playOptions`（`BeMusicPlayOptions`: ハイスピード、ランダム、ゲージ、HIDDEN / SUDDEN、レーンカバー、BGA、リストのフィルタなど）と `playOptionChoices`（列挙型・オンオフのオプションが取りうる値）。選択肢にない値は無視されます。`hiSpeed` と `shutter` は任意の数値を受け付けて範囲内に丸められ、`cyclePlayOption` では変わりません。
+  - `songRecord(song)`: その譜面でのプレイヤーのベスト記録（`{ lamp, exScore?, maxCombo?, missCount?, playCount? }`）。ホストが記録を持たなければ `undefined`
+  - `pointer`: デザインピクセルでのポインタ位置。なければ `undefined`
+  - `settings` と `songImage`: [スキン設定](#スキン設定)と[曲の画像](#曲の画像)を参照
+  - `revision`: 選曲の状態（カーソル、フォルダ、検索、リスト内容、プレイオプション、readme の開閉）が変わるたびに増えます。保持型のシーングラフは、これが変わったときだけ作り直せば済みます。
   - 登場やフォーカス移動のトランジション用の `sceneStartedAt`、`cursorChangedAt`
   - `nowMs`、`effects`、`launchAt`、`audio`
-  - `hit(x, y, w, h, action, cursor?)`: 矩形をそのフレームの間だけクリック可能にします。クリック領域は描画のたびに宣言してください。
+  - `hit(x, y, w, h, action, cursor?)`: 矩形をそのフレームの間だけクリック可能にし、ポインタが矩形の上にあるかを返します（ホバー表示用）。クリック領域は描画のたびに宣言してください。
 
 ### リザルト
 
 `result.draw(surface, frame)` は `BeMusicResultFrame` を受け取ります。
 
-- `result`（`BeMusicResultData`）: スコア、判定数、ゲージとスコアの推移、プレイログ。
+- `result`（`BeMusicResultData`）: スコア、判定数、ゲージとスコアの推移、プレイログ。ホストが提供する場合は、`lamp`（クリアランプ: `FAILED`、クリアしたゲージ、`FULL_COMBO`、`PERFECT`、`MAX`）、`gaugeType`、`judgeRuleset`、`fast` / `slow`、`judgeTimings`（プレイ中のタイミング付き判定すべて）も入ります。
 - `rankLabel`（IIDX の DJ LEVEL）、`ratePercent`。
 - `elapsedMs`: シーン開始からの経過。登場演出をスキップした後は `Infinity`。
 - `nowMs`、`effects`。
+- `settings` と `songImage`: [スキン設定](#スキン設定)と[曲の画像](#曲の画像)を参照。
+
+`resolveResultLamp` と `resolveResultTrackRows` が、組み込みスキンの表示するクリアランプとトラック行を返します。`binJudgeTimings(result.judgeTimings, binMs, rangeMs?)` でタイミングをヒストグラムにできます。
+
+### 決定画面
+
+スキンは、譜面を選んでからプレイが始まるまでの決定画面を追加できます。ホストは `skin.decide` があるときだけこれを表示し、なければそのままプレイに進みます。
+
+- **`decide.durationMs`:** 画面を表示する時間（既定 2000）。プレイヤーは Enter で先に進み、Escape で選曲に戻れます。
+- **`decide.draw(surface, frame)`** は `BeMusicDecideFrame` を受け取ります: `song`、`playOptions`、画面表示からの `elapsedMs`、`nowMs`、`effects`、`audio`、`settings`、`songImage`。
+
+## 判定タイミング
+
+タイミングのずれは符号付きのミリ秒で、エンジンの慣習に従います。**正は遅い（SLOW）、負は早い（FAST）**、0 はジャストです。
+
+- `runtime.lastJudgeDeltaMs` が直近のずれ、`runtime.judgeTimings` が直近 64 件の `{ atMs, deltaMs, judge, channel? }`（古い順）です。
+- `result.judgeTimings` にはプレイ中のタイミング付き判定がすべて入ります。
+- タイミングを持つのは押下を伴う判定だけです。オートプレイの判定、地雷の BAD、見逃し（押下のない POOR）は含まれません。
+- `binJudgeTimings(timings, binMs = 1, rangeMs?)` は `{ binMs, originMs, counts }` を返します。ビンの境界は `binMs` の倍数に揃います。`rangeMs` を渡すとタイミングにかかわらず `-rangeMs..rangeMs` を覆うので、別のプレイのヒストグラムと並べられます。
+
+## スキン設定
+
+スキンは、配色テーマ、判定文字の位置、演出のオンオフなど、プレイヤーが調整できるオプションを宣言できます。
+
+```ts
+settings: [
+  {
+    kind: 'choice',
+    id: 'theme',
+    label: 'Theme',
+    options: [
+      { value: 'neon', label: 'Neon' },
+      { value: 'mono', label: 'Mono' },
+    ],
+    default: 'neon',
+  },
+  { kind: 'number', id: 'judgeOffset', label: 'Judge offset', min: -40, max: 40, step: 2, default: 0, unit: 'px' },
+  { kind: 'toggle', id: 'glow', label: 'Glow', default: true },
+],
+```
+
+- **種類:** `choice`（`options` のいずれか）、`number`（`min..max`。省略可能な `step` と、`'px'`・`'ms'`・`'%'` の `unit`）、`toggle`。
+- **検査:** `validateBeMusicSkin` がスキーマを検査します。id は重複不可、ラベルは空不可で、`default` は選択肢のいずれか、または範囲内でなければなりません。
+- **値:** すべてのフレームが `settings`（id をキーにしたプレイヤーの値）を持ちます。ホストは値をスキンごとに保存し、`resolveBeMusicSkinSettings(skin, stored)` で解決します。欠けている値、古い値、型の違う値は既定値に戻り、数値は範囲内に収められ、スキンが宣言しなくなった id は捨てられます。宣言した id はすべて正しい型で揃っていると考えて構いません。
+- **その場での変更:** 画面の表示中にプレイヤーが値を変えることがあります。変更は次のフレームから反映され、選曲画面では `revision` も進みます。最初のフレームの値をキャッシュせず、`frame.settings` を毎フレーム読んでください（そこから導いた値をキャッシュするなら `revision` をキーにします）。
+- **be-music プレイヤーでは:** ホストは保存した値を `beMusicSkinSettings` オプションでシーンに渡し、`setBeMusicSkinSettings` で更新します。デモは Debug Menu にスキーマから「Skin settings」フォルダを作り（`choice` はドロップダウン、`number` は単位を名前に添えたスライダー、`toggle` はチェックボックス）、設定を宣言しないスキンでは隠し、値をスキン id ごとにブラウザへ保存します。
+
+## 曲の画像
+
+`songImage(song, kind)` はすべてのフレーム（選曲、決定、ゲームプレイ、リザルト）にあります。曲の `'stageFile'`、`'banner'`、`'backBmp'` を `ImageBitmap` で返すので、そのまま `drawImage` やテクスチャのアップロードに使えます。
 
-`resolveResultLamp` と `resolveResultTrackRows` が、組み込みスキンの表示するクリアランプとトラック行を返します。
+- 画像は遅延読み込みです。デコード中の最初の呼び出しは `undefined` を返し、準備ができると画面が描き直されます（選曲では `revision` が進みます）。
+- 曲にその画像がない場合や、ホストが画像を提供しない場合も `undefined` を返すので、必ず代替表示を用意してください。
+- ビットマップを close したり transfer したりしないでください。ホストがキャッシュしています。
+- ビットマップ（やそこから作ったテクスチャ）をフレームをまたいで保持せず、描くたびに画像を引いてください。ホストが持つ画像の数には上限があり、場所が足りなくなると最も長く使われていない画像を close します。
 
 ## SDK ヘルパー
 
@@ -232,6 +313,8 @@ export default defineBeMusicSkin({
 | ロード中   | `LOADING_WORD`、`loadingDots(nowMs)`                                                                                                                                            |
 | サウンド   | `audioDrive`、`bandAt`、`bandLevel`。[音楽に反応させる](#音楽に反応させる)を参照                                                                                                |
 | リザルト   | `resolveResultLamp`、`resolveResultTrackRows`                                                                                                                                   |
+| タイミング | `binJudgeTimings`。[判定タイミング](#判定タイミング)を参照                                                                                                                      |
+| 設定       | `resolveBeMusicSkinSettings`、`validateBeMusicSkinSettings`。[スキン設定](#スキン設定)を参照                                                                                    |
 | 曲情報     | `resolveSongRowFacts`、`resolveSongStats`、`resolveSongTags`、`formatSongLength`、`formatBpmRange`、`formatPlayVariantLabel`                                                    |
 | テキスト   | `DEFAULT_TEXT_FONT`、`layoutTabularRun`（等幅数字の配置）                                                                                                                       |
 | モーション | `easeOutCubic`、`easeOutBack`、`stageProgress`、`rollUpValue`、`hash01`（決定的なゆらぎ）                                                                                       |
@@ -386,6 +469,10 @@ export default defineBeMusicSkin({
 - [ ] `runtime.hasBga` のとき BGA の矩形を透明のまま残している。
 - [ ] `runtime.loading` の間は NOW LOADING を表示している。
 - [ ] 選曲の行が `select.layout` と揃い、ボタンは描画のたびに `frame.hit` で宣言している。
+- [ ] 設定した `draws*` フラグに対応する要素を自分で描いている。
+- [ ] runtime の省略可能なフィールドや `songImage` が `undefined` のときの代替表示がある。
+- [ ] タイミング表示は正の `deltaMs` を遅い（SLOW）、負を早い（FAST）として扱っている。
+- [ ] `settings` の id が重複せず、既定値がすべて有効。
 - [ ] 音への反応は `audioDrive` を通し、`effects` を尊重している。
 - [ ] 使うフェイスをすべて `fontLoads` に挙げている。
 - [ ] ノーツの多い譜面・高密度でも `draw` が 1 フレームの半分を十分下回り、毎フレームの確保やピクセルの読み戻しがない。
diff --git a/docs/be-music-skin.md b/docs/be-music-skin.md
index f58e64833..5979a2987 100644
--- a/docs/be-music-skin.md
+++ b/docs/be-music-skin.md
@@ -149,6 +149,8 @@ Every skin declares these fields. `defineBeMusicSkin` checks them and throws whe
 | `contextAttributes`, `setup`, `teardown` | no       | See [Surfaces](#surfaces) and [Using a framework](#using-a-framework).                                                                |
 | `stage`                                  | no       | Design canvas; defaults to `wideStage`. See [Stage and layout](#stage-and-layout).                                                    |
 | `gameplay`, `select`, `result`           | yes      | Each screen's `draw` function; see [Screens](#screens).                                                                               |
+| `decide`                                 | no       | The decide screen between select and play; see [Decide](#decide).                                                                     |
+| `settings`                               | no       | Options the player can tune for the skin; see [Skin settings](#skin-settings).                                                        |
 
 `validateBeMusicSkin(skin)` returns the same problems as a list of messages without throwing.
 
@@ -172,17 +174,31 @@ Every skin declares these fields. `defineBeMusicSkin` checks them and throws whe
 `gameplay.draw(surface, frame)` receives a `BeMusicGameplayFrame`:
 
 - `layout`: see [Stage and layout](#stage-and-layout).
-- `lanes`: each lane's rect (`x`, `w`, `top`, `bottom` at the judgement line), `kind`, and `beam`, the key-beam intensity (1 while held, then decaying).
-- `notes`: tap notes as `{ kind, x, w, y }`, where `y` is the note's bottom edge.
-- `longNotes`: long notes as `{ kind, x, w, top, bottom }`. `top` is the tail; `bottom` is the head, clamped to the judgement line while held.
+- `lanes`: each lane's rect (`x`, `w`, `top`, `bottom` at the judgement line), `kind`, and `beam`, the key-beam intensity (1 while held, then decaying). `pressedAtMs` / `releasedAtMs` are the play-clock times of the lane's last press and release; `holding` and `holdStartedAtMs` tell whether a long note in the lane is being held, and since when.
+- `notes`: tap notes as `{ kind, x, w, y }`, where `y` is the note's bottom edge. `autoplay` is set on notes autoplay or auto-scratch will hit.
+- `longNotes`: long notes as `{ kind, x, w, top, bottom }`. `top` is the tail; `bottom` is the head, clamped to the judgement line while held. `mode` (`'ln'` / `'cn'` / `'hcn'`) says how the note judges, `state` (`'pending'` / `'held'` / `'dropped'` / `'done'`) where it is in its life, and `autoplay` whether autoplay plays it.
 - `mines`: mine notes as `{ kind, x, w, y }`, where `y` is the bottom edge. Pressing the lane as one passes the judgement line costs a BAD. Empty unless the skin sets `gameplay.drawsMines` (below).
-- `bombs`: live hit effects with `elapsedMs` and a stable `seed`.
+- `bombs`: live hit effects with `elapsedMs`, a stable `seed`, and the `judge` that set them off.
+- `measureLines`: measure lines as `{ side, x, w, y }`, one per lane run they cross. Empty unless the skin sets `gameplay.drawsMeasureLines`.
+- `bga`: the BGA layers to composite (`{ base?, layer?, poor?, poorActive }`). `undefined` unless the skin sets `gameplay.drawsBga`.
 - `runtime`: the HUD values (below).
 - `beatPhase`, `nowMs`, `effects`, and `audio`.
+- `settings` and `songImage`: see [Skin settings](#skin-settings) and [Song images](#song-images).
 
 `gameplay.bombDurationMs` (default 300) sets how long a hit effect lives.
 
-Set `gameplay.drawsMines: true` to draw mine notes yourself from `frame.mines`. Without it the player draws them over your canvas as red bars with yellow caution stripes, so a skin that ignores mines still shows them.
+#### Drawing it yourself
+
+By default the player draws a few things over (or behind) your canvas, so a skin that ignores them still shows them. Set the matching flag on `gameplay` to draw them yourself instead:
+
+| Flag                | You draw from        | Without it                                                              |
+| ------------------- | -------------------- | ----------------------------------------------------------------------- |
+| `drawsMines`        | `frame.mines`        | The player draws red bars with yellow caution stripes over your canvas. |
+| `drawsLaneCover`    | `runtime.laneCovers` | The player draws its SUDDEN+ / HIDDEN+ covers over your canvas.         |
+| `drawsMeasureLines` | `frame.measureLines` | The player draws its own measure lines.                                 |
+| `drawsBga`          | `frame.bga`          | The player shows the BGA behind your canvas, in `layout.bga`.           |
+
+Every flag defaults to `false`, and the frame field it unlocks stays empty (or `undefined`) until you set it, so existing skins keep their look. With `drawsBga`, the `layer` image arrives with pure black already turned transparent (the BMS layer convention) while `base` and `poor` are opaque: draw them with plain alpha blending, and show `poor` instead of the others while `poorActive`. A bmson layer (its spec keeps black opaque) and a video layer arrive as authored. The images are `ImageBitmap`s or, for a video BGA, the playing `<video>` element; a `#BGA` sub-region arrives as its own cropped image (missing for the first frame or two while it is cut). The player still picks the frame of a `#SWBGA` animation, but leaves a slot's `#ARGB` tint and opacity to you.
 
 `runtime` (`BeMusicGameplayRuntime`) carries:
 
@@ -196,6 +212,14 @@ Set `gameplay.drawsMines: true` to draw mine notes yourself from `frame.mines`.
 - **Play state:** `autoplay`, `hasBga`, `loading` (show NOW LOADING while audio decodes or a BGA transcodes), `progressRatio`, `chartMs`, `beatPhase`, `nowMs`
 - **Event timestamps:** `judgeAtMs`, `impulseAtMs`, `impulseKind` (the last judgement and key press, for punch and impulse effects)
 - **Comfort and sound:** `effects`, `audio`
+- **Chart:** `song` (the `BrowserSongEntry` being played; level, difficulty, `#RANK`, and `#TOTAL` are in `song.chart.metadata`), `minBpm`, `maxBpm`, `mainBpm`
+- **Timing:** `lastJudgeDeltaMs` and `judgeTimings` (the last 64 timed judgements, oldest first); see [Judgement timing](#judgement-timing). `judgeWindows` gives the ruleset's windows in ms per note class (`note`, `scratch`, `longNoteEnd`), resolved from `#RANK` when the play starts (a later `#EXRANK` change is not reflected).
+- **Lane cover:** `laneCovers` (per side: `sudden`, `hidden`, `lift` as fractions of the lane height), `visibleMs` (how long a note is on screen), and `greenNumber` (`visibleMs × 0.6`)
+- **Song clock:** `songLengthMs` and `songElapsedMs`, on the audio clock: it starts at 0 with the song and stops while paused, so the remaining time is `songLengthMs - songElapsedMs`. `chartMs` differs: it is measured from the chart's first beat and runs negative through the count-in.
+- **Once-per-play moments:** `failedAtMs` (the gauge failed mid-play), `allNotesDoneAtMs` (the last playable note was judged), `outroAtMs` (the chart ended), `gaugeRiseAtMs` (the gauge first rose), and `gaugeMaxAtMs` (it first reached its maximum). Each is a play-clock time latched when the moment happens, `undefined` before.
+- **Histories:** `scoreHistory` and `gaugeHistory`, the samples the result screen receives. They are the host's live arrays: read them, never mutate them.
+
+Every runtime field is optional. A host that can't provide one leaves it `undefined`, so draw a sensible fallback.
 
 ### Select
 
@@ -204,22 +228,79 @@ Set `gameplay.drawsMines: true` to draw mine notes yourself from `frame.mines`.
 - **`select.draw(surface, frame)`** receives a `BeMusicSelectFrame`:
   - `entries`, `selectedIndex`, `firstVisibleIndex`, `visibleRows`, `focusedSong`
   - `folderLabel`, `searchQuery`, `totalCharts`
-  - `actions` (`play`, `autoPlay`, `activateSearch`)
-  - `revision`, which increases whenever the select state changes (cursor, folder, search, list contents). A retained scene graph can be rebuilt only when it moves.
+  - `actions`: `play`, `autoPlay`, `activateSearch`, `setPlayOption(key, value)`, `cyclePlayOption(key, step?)` (step 1 or -1, wrapping), and `toggleReadme()` (opens or closes the focused song's `.txt`)
+  - `playOptions` (`BeMusicPlayOptions`: hi-speed, random, gauge, HIDDEN / SUDDEN, lane cover, BGA, list filters, …) and `playOptionChoices`, the values each enum or on / off option can take. Values outside the choices are ignored; `hiSpeed` and `shutter` take any number and are clamped to their range, and `cyclePlayOption` leaves them alone.
+  - `songRecord(song)`: the player's best record on a chart (`{ lamp, exScore?, maxCombo?, missCount?, playCount? }`), or `undefined` when the host keeps none
+  - `pointer`: the pointer in design pixels, or `undefined`
+  - `settings` and `songImage`: see [Skin settings](#skin-settings) and [Song images](#song-images)
+  - `revision`, which increases whenever the select state changes (cursor, folder, search, list contents, play options, the readme opening or closing). A retained scene graph can be rebuilt only when it moves.
   - `sceneStartedAt` and `cursorChangedAt` for entrance and focus transitions
   - `nowMs`, `effects`, `launchAt`, and `audio`
-  - `hit(x, y, w, h, action, cursor?)`: makes a rect clickable for this frame. Declare your hit areas on every draw.
+  - `hit(x, y, w, h, action, cursor?)`: makes a rect clickable for this frame and returns whether the pointer is over it, for hover states. Declare your hit areas on every draw.
 
 ### Result
 
 `result.draw(surface, frame)` receives a `BeMusicResultFrame`:
 
-- `result` (`BeMusicResultData`): scores, judgement counts, gauge and score history, and the play log.
+- `result` (`BeMusicResultData`): scores, judgement counts, gauge and score history, and the play log. When the host provides them, also `lamp` (the clear lamp: `FAILED`, the gauge it was cleared on, `FULL_COMBO`, `PERFECT`, `MAX`), `gaugeType`, `judgeRuleset`, `fast` / `slow`, and `judgeTimings` (every timed judgement of the play).
 - `rankLabel` (IIDX DJ level) and `ratePercent`.
 - `elapsedMs` since the scene mounted, or `Infinity` once the player skipped the entrance.
 - `nowMs` and `effects`.
+- `settings` and `songImage`: see [Skin settings](#skin-settings) and [Song images](#song-images).
+
+`resolveResultLamp` and `resolveResultTrackRows` give the clear lamp and track rows the built-in skins show. `binJudgeTimings(result.judgeTimings, binMs, rangeMs?)` turns the timings into a histogram.
+
+### Decide
+
+A skin may add a decide screen, shown between picking a chart and the play. Hosts mount it only when `skin.decide` exists and go straight to the play otherwise.
+
+- **`decide.durationMs`:** how long the screen shows (default 2000). The player can skip ahead with Enter or go back to select with Escape.
+- **`decide.draw(surface, frame)`** receives a `BeMusicDecideFrame`: `song`, `playOptions`, `elapsedMs` since the screen mounted, `nowMs`, `effects`, `audio`, `settings`, and `songImage`.
+
+## Judgement timing
+
+Timing offsets are signed milliseconds with the engine's convention: **positive is late (SLOW), negative is early (FAST)**, 0 is dead on.
+
+- `runtime.lastJudgeDeltaMs` is the most recent offset, and `runtime.judgeTimings` the last 64 as `{ atMs, deltaMs, judge, channel? }`, oldest first.
+- `result.judgeTimings` holds every timed judgement of the play.
+- Only judgements with a press carry a timing. Autoplay hits, mine BADs, and missed notes (a POOR without a press) are left out.
+- `binJudgeTimings(timings, binMs = 1, rangeMs?)` returns `{ binMs, originMs, counts }`, a histogram whose bin edges sit on multiples of `binMs`. Pass `rangeMs` to cover `-rangeMs..rangeMs` whatever the timings, so histograms of different plays line up.
+
+## Skin settings
+
+A skin can declare options the player tunes, such as a colour theme, a judge-text offset, or an effect toggle:
+
+```ts
+settings: [
+  {
+    kind: 'choice',
+    id: 'theme',
+    label: 'Theme',
+    options: [
+      { value: 'neon', label: 'Neon' },
+      { value: 'mono', label: 'Mono' },
+    ],
+    default: 'neon',
+  },
+  { kind: 'number', id: 'judgeOffset', label: 'Judge offset', min: -40, max: 40, step: 2, default: 0, unit: 'px' },
+  { kind: 'toggle', id: 'glow', label: 'Glow', default: true },
+],
+```
+
+- **Kinds:** `choice` (one of `options`), `number` (`min..max`, with an optional `step` and `unit` of `'px'`, `'ms'`, or `'%'`), and `toggle`.
+- **Validation:** `validateBeMusicSkin` checks the schema. Ids must be unique, labels must not be empty, and every `default` must be one of the options or lie in its range.
+- **Values:** every frame carries `settings`, the player's values keyed by id. Hosts persist the values per skin and resolve them with `resolveBeMusicSkinSettings(skin, stored)`, which falls back to the default for anything missing, stale, or mistyped, clamps numbers into their range, and drops ids the skin no longer declares. You can rely on every declared id being present with the right type.
+- **Live changes:** the player may change a value while a screen is showing; the next frame carries it, and on select `revision` moves too. Read `frame.settings` every frame (or key anything you derive from it on `revision`) rather than caching it from the first frame.
+- **In the be-music player:** hosts pass the stored values to the scenes with the `beMusicSkinSettings` option and update them with `setBeMusicSkinSettings`. The demo builds a "Skin settings" folder in its Debug Menu from the schema (a dropdown per `choice`, a slider per `number` with the unit in its name, a checkbox per `toggle`), hides it for a skin that declares none, and saves the values per skin id in the browser.
+
+## Song images
+
+`songImage(song, kind)` is on every frame (select, decide, gameplay, and result). It returns the song's `'stageFile'`, `'banner'`, or `'backBmp'` as an `ImageBitmap`, ready for `drawImage` or a texture upload.
 
-`resolveResultLamp` and `resolveResultTrackRows` give the clear lamp and track rows the built-in skins show.
+- Images load lazily. The first calls return `undefined` while an image decodes; the screen is redrawn once it is ready (on select, `revision` moves).
+- It also returns `undefined` when the song has no such image or the host doesn't provide images, so always draw a fallback.
+- Don't close or transfer the bitmap: the host caches it.
+- Look the image up on every draw rather than keeping the bitmap (or a texture made from it) across frames. The host keeps a bounded number of images and closes the least recently used one to make room.
 
 ## SDK helpers
 
@@ -232,6 +313,8 @@ Set `gameplay.drawsMines: true` to draw mine notes yourself from `frame.mines`.
 | Loading    | `LOADING_WORD`, `loadingDots(nowMs)`                                                                                                                                       |
 | Sound      | `audioDrive`, `bandAt`, `bandLevel`; see [Reacting to the music](#reacting-to-the-music)                                                                                   |
 | Result     | `resolveResultLamp`, `resolveResultTrackRows`                                                                                                                              |
+| Timing     | `binJudgeTimings`; see [Judgement timing](#judgement-timing)                                                                                                               |
+| Settings   | `resolveBeMusicSkinSettings`, `validateBeMusicSkinSettings`; see [Skin settings](#skin-settings)                                                                           |
 | Song facts | `resolveSongRowFacts`, `resolveSongStats`, `resolveSongTags`, `formatSongLength`, `formatBpmRange`, `formatPlayVariantLabel`                                               |
 | Text       | `DEFAULT_TEXT_FONT`, `layoutTabularRun` (tabular figures)                                                                                                                  |
 | Motion     | `easeOutCubic`, `easeOutBack`, `stageProgress`, `rollUpValue`, `hash01` (deterministic jitter)                                                                             |
@@ -386,6 +469,10 @@ List every face you draw with in `fontLoads`. The host loads them with `document
 - [ ] The BGA rect is left transparent when `runtime.hasBga`.
 - [ ] NOW LOADING is shown while `runtime.loading`.
 - [ ] Select rows line up with `select.layout`, and buttons are declared with `frame.hit` on every draw.
+- [ ] Every `draws*` flag you set is matched by drawing that element yourself.
+- [ ] Optional runtime fields and `songImage` lookups that come back `undefined` have a fallback.
+- [ ] Timing displays treat positive `deltaMs` as late (SLOW) and negative as early (FAST).
+- [ ] `settings` ids are unique and every default is valid.
 - [ ] Audio reactions go through `audioDrive`, and `effects` is respected.
 - [ ] Every face is listed in `fontLoads`.
 - [ ] `draw` stays well under half a frame on a dense chart at high density, with no per-frame allocations or pixel readback.
diff --git a/packages/player-tui/src/node/node-ui-worker.ts b/packages/player-tui/src/node/node-ui-worker.ts
index e9578f034..c548f4da5 100644
--- a/packages/player-tui/src/node/node-ui-worker.ts
+++ b/packages/player-tui/src/node/node-ui-worker.ts
@@ -232,7 +232,11 @@ async function bootstrap(): Promise<void> {
           bgaRenderer?.triggerPoor(command.seconds);
           continue;
         }
-        bgaRenderer?.clearPoor();
+        if (command.kind === 'clear-poor-bga') {
+          bgaRenderer?.clearPoor();
+        }
+        // Long-note start / end commands are for graphical skins; the TUI already lights the lane through
+        // `hold-lane-until-beat` / `release-lane`.
       }
     }
 
diff --git a/packages/player-web-demo/src/main.ts b/packages/player-web-demo/src/main.ts
index 26627fb5e..70ef9e9e4 100644
--- a/packages/player-web-demo/src/main.ts
+++ b/packages/player-web-demo/src/main.ts
@@ -4,6 +4,7 @@
 import {
   BUILT_IN_BE_MUSIC_SKINS,
   latticeSkin,
+  DefaultPixiDecideView,
   DefaultPixiGameplayView,
   DefaultPixiResultView,
   DefaultPixiSongSelectView,
@@ -24,7 +25,9 @@ import {
 import {
   BeatorajaSkinAudioPlayer,
   createBeMusicSkinRegistry,
+  resolveBeMusicSkinSettings,
   type BeMusicSkin,
+  type BeMusicSongRecord,
   discoverBeatorajaSelectBgmPath,
   discoverBeatorajaSystemSoundPaths,
   findBeatorajaThemeBgm,
@@ -106,6 +109,19 @@ import {
   type BeatorajaSkinHeader,
 } from '@be-music/beatoraja-skin';
 import { BeatorajaSkinOptionsGui } from './beatoraja-skin-options-gui.ts';
+import {
+  mergeSongRecord,
+  readStoredSongRecords,
+  songRecordKey,
+  songRecordPlayFromResult,
+  storeSongRecords,
+} from './song-records.ts';
+import {
+  describeSkinSettingControllers,
+  readStoredSkinSettings,
+  setStoredSkinSetting,
+  storeSkinSettings,
+} from './skin-settings.ts';
 import type { BeMusicJson } from '@be-music/json';
 import { resolveBmsControlFlow } from '@be-music/parser';
 import type { PlayerSummary } from '@be-music/player/core/engine';
@@ -444,7 +460,7 @@ class PlayerWebDemoApp {
    */
   private beatorajaSelectSnapshot: import('@be-music/player-web').PixiBeatorajaSelectSceneSnapshot | undefined;
   private resultView: PixiResultView | DefaultPixiResultView | undefined;
-  private decideView: PixiDecideView | undefined;
+  private decideView: PixiDecideView | DefaultPixiDecideView | undefined;
   private hostMounted = false;
   /**
    * Last-known cursor / folder state of the select view, captured before gameplay so returning to song select restores
@@ -487,6 +503,19 @@ class PlayerWebDemoApp {
   private readonly playOptionControllers: Controller[] = [];
   /** Per-entry chart-file SHA-256 cache (`''` = lookup failed) — see {@link resolveChartSha256}. */
   private readonly chartSha256Cache = new Map<string, string>();
+  /** In-flight {@link resolveChartSha256} lookups, so a chart is hashed once however often it is asked for. */
+  private readonly chartSha256Pending = new Map<string, Promise<string | undefined>>();
+  /** Best record per chart ({@link songRecordKey}), persisted in `localStorage` and shown to be-music select skins. */
+  private readonly songRecords = readStoredSongRecords();
+  /** Each be-music skin's `settings` values by skin id, persisted in `localStorage` and handed to its scenes. */
+  private readonly skinSettings = readStoredSkinSettings();
+  /** Debug Menu folder holding the active be-music skin's settings; hidden for a skin that declares none. */
+  private skinSettingsFolder: GUI | undefined;
+  /**
+   * Record key of the play in flight when it counts towards the chart's best record, latched at song start. `undefined`
+   * for autoplay and replay plays, which never touch the records.
+   */
+  private activePlayRecordKey: string | undefined;
   /**
    * `guiState.autoSavePlaylog` as it was when the current play STARTED. The result-screen auto-save decision reads
    * this latch, not the live checkbox, so the value in effect at song start governs the whole play (the checkbox is
@@ -902,6 +931,9 @@ class PlayerWebDemoApp {
         }
         this.handleSkinFamilyOverrideChange(this.guiState.skinFamilyOverride);
       });
+    // The active be-music skin's own settings, built from its `settings` schema (rebuilt when the skin changes).
+    this.skinSettingsFolder = gui.addFolder('Skin settings');
+    this.rebuildSkinSettingsFolder();
     // LR2 theme picker — visible only when the most recent drop covered multiple themes (e.g. someone dropped the
     // entire `LR2files/Theme/` parent). Single-theme drops keep this hidden so the panel doesn't grow a useless
     // 1-option dropdown.
@@ -1371,9 +1403,41 @@ class PlayerWebDemoApp {
     if (cached !== undefined) {
       return cached === '' ? undefined : cached;
     }
-    const hash = await computeChartFileSha256(resolveSongSource(this.collection, song), song.chartPath);
-    this.chartSha256Cache.set(song.id, hash ?? '');
-    return hash;
+    const pending = this.chartSha256Pending.get(song.id);
+    if (pending !== undefined) {
+      return pending;
+    }
+    const lookup = computeChartFileSha256(resolveSongSource(this.collection, song), song.chartPath)
+      .catch(() => undefined)
+      .then((hash) => {
+        this.chartSha256Cache.set(song.id, hash ?? '');
+        return hash;
+      })
+      .finally(() => this.chartSha256Pending.delete(song.id));
+    this.chartSha256Pending.set(song.id, lookup);
+    return lookup;
+  }
+
+  /**
+   * A chart's best record for the select skin's `frame.songRecord`. Records are keyed by chart hash, which is only known
+   * once the chart has been hashed: the first lookup starts hashing it and answers from the path key meanwhile (where a
+   * chart that could not be hashed keeps its record), so a skin sees the record a frame or two later.
+   */
+  private lookupSongRecord(song: BrowserSongEntry): BeMusicSongRecord | undefined {
+    if (this.songRecords.size === 0) {
+      return undefined;
+    }
+    const hash = this.chartSha256Cache.get(song.id);
+    if (hash === undefined) {
+      void this.resolveChartSha256(song);
+    }
+    return this.songRecords.get(songRecordKey(song, hash || undefined));
+  }
+
+  /** Folds a finished play into its chart's best record and persists the records. */
+  private recordSongResult(key: string, data: PixiGameplayResultData): void {
+    this.songRecords.set(key, mergeSongRecord(this.songRecords.get(key), songRecordPlayFromResult(data)));
+    storeSongRecords(this.songRecords);
   }
 
   /**
@@ -1811,9 +1875,67 @@ class PlayerWebDemoApp {
   private handleBuiltInSkinChange(id: string): void {
     this.guiState.builtInSkin = BE_MUSIC_SKINS.resolve(id).id;
     storeBuiltInSkinId(this.guiState.builtInSkin);
+    this.rebuildSkinSettingsFolder();
     this.handleSkinFamilyOverrideChange(this.guiState.skinFamilyOverride);
   }
 
+  /** The stored values for the active be-music skin's settings, as handed to its scenes (`beMusicSkinSettings`). */
+  private get beMusicSkinSettings(): Readonly<Record<string, unknown>> | undefined {
+    return this.skinSettings.get(this.beMusicSkin.id);
+  }
+
+  /**
+   * Refills the "Skin settings" folder from the active be-music skin's `settings` schema — a dropdown per choice, a
+   * slider per number, a checkbox per toggle — seeded with the stored values, and hides it when the skin declares none.
+   * Every change is stored under the skin's id and reaches the scenes on screen at once.
+   */
+  private rebuildSkinSettingsFolder(): void {
+    const folder = this.skinSettingsFolder;
+    if (!folder) return;
+    // `controllersRecursive` returns a copy, so destroying (which splices `folder.controllers`) is safe mid-loop.
+    for (const controller of folder.controllersRecursive()) controller.destroy();
+    const skin = this.beMusicSkin;
+    const controllers = describeSkinSettingControllers(skin.settings);
+    folder.show(controllers.length > 0);
+    if (controllers.length === 0) return;
+    const values: Record<string, unknown> = { ...resolveBeMusicSkinSettings(skin, this.skinSettings.get(skin.id)) };
+    for (const controller of controllers) {
+      const added =
+        controller.kind === 'dropdown'
+          ? folder.add(values, controller.id, controller.options)
+          : controller.kind === 'slider'
+            ? folder.add(values, controller.id, controller.min, controller.max, controller.step)
+            : folder.add(values, controller.id);
+      added.name(controller.name).onChange((value: string | number | boolean) => {
+        setStoredSkinSetting(this.skinSettings, skin.id, controller.id, value);
+        storeSkinSettings(this.skinSettings);
+        this.applyBeMusicSkinSettings();
+      });
+    }
+    folder
+      .add(
+        {
+          reset: () => {
+            this.skinSettings.delete(skin.id);
+            storeSkinSettings(this.skinSettings);
+            this.applyBeMusicSkinSettings();
+            this.rebuildSkinSettingsFolder();
+          },
+        },
+        'reset',
+      )
+      .name('Reset to defaults');
+  }
+
+  /** Hands the active be-music skin's settings to the scenes on screen, which draw with them from their next frame. */
+  private applyBeMusicSkinSettings(): void {
+    const settings = this.beMusicSkinSettings;
+    this.selectView?.setBeMusicSkinSettings(settings);
+    this.gameplayView?.setBeMusicSkinSettings(settings);
+    this.resultView?.setBeMusicSkinSettings(settings);
+    if (this.decideView instanceof DefaultPixiDecideView) this.decideView.setBeMusicSkinSettings(settings);
+  }
+
   private handleSkinFamilyOverrideChange(value: SkinFamilyOverride): void {
     this.guiState.skinFamilyOverride = value;
     if (this.lastSelectNavigation === undefined && this.selectView !== undefined) {
@@ -3244,6 +3366,7 @@ class PlayerWebDemoApp {
         this.guiState.autoScratch2P = options.autoScratch2P;
         this.refreshPlayOptionControllers();
       },
+      resolveSongRecord: (song: BrowserSongEntry) => this.lookupSongRecord(song),
       onSongSelected: (song: BrowserSongEntry) => {
         // Fire the decide cue first — it plays through the select view's AudioContext which keeps running even after
         // the view is hidden, so the cue isn't cut by the gameplay mount.
@@ -3267,6 +3390,7 @@ class PlayerWebDemoApp {
           ...selectSceneOptions,
           beMusicSkin: this.beMusicSkin,
           beMusicEffects: this.guiState.skinEffects,
+          beMusicSkinSettings: this.beMusicSkinSettings,
         });
     await this.selectView.mount(this.sceneHost);
     this.selectView.setCollection(this.collection);
@@ -3275,7 +3399,8 @@ class PlayerWebDemoApp {
   /**
    * Mounts the decide-screen splash and routes the user into gameplay when it dismisses (auto-advance OR Enter / Space
    * / Escape input). Without a decide skin, falls straight through to `playSong` so themes that don't ship a Decide
-   * directory still play the chart immediately.
+   * directory still play the chart immediately. On the default family the splash is the be-music skin's own decide
+   * screen, shown only when the skin declares one.
    *
    * The decide view runs alongside the select view's AudioContext — `playDecideSound` was already fired at song-pick
    * time, and the splash visually masks the chart-load + gameplay-mount window that comes next.
@@ -3290,9 +3415,15 @@ class PlayerWebDemoApp {
       if (!mounted) await this.playSong(song, overrides);
       return;
     }
-    if (decideFamily === 'default' || !this.decideSkin) {
-      // Default family has no decide splash by design — same for an LR2-only setup that didn't ship a decide skin.
-      // The select view's `playDecideSound` already fired so the audio cue still plays.
+    // A be-music skin's decide screen hands over to the LR2 / default gameplay preloaded below, so it is skipped when
+    // the play itself runs on a beatoraja theme.
+    const beMusicDecide =
+      decideFamily === 'default' &&
+      this.beMusicSkin.decide !== undefined &&
+      pickActiveFamilyForScene(this.familyDispatchState(), 'gameplay', song) !== 'beatoraja';
+    if (!beMusicDecide && (decideFamily === 'default' || !this.decideSkin)) {
+      // No decide splash: a be-music skin without one, or an LR2-only setup that didn't ship a decide skin. The select
+      // view's `playDecideSound` already fired so the audio cue still plays.
       await this.playSong(song, overrides);
       return;
     }
@@ -3314,8 +3445,7 @@ class PlayerWebDemoApp {
       advanced = true;
       then();
     };
-    this.decideView = new PixiDecideView({
-      skin: this.decideSkin,
+    const callbacks = {
       onContinue: () =>
         advance(() => {
           void this.startGameplayAfterDecide(song, preloaded);
@@ -3327,7 +3457,19 @@ class PlayerWebDemoApp {
           this.gameplayView = undefined;
           void this.showSelect();
         }),
-    });
+    };
+    const playOptions = this.selectView?.getPlayOptions();
+    this.decideView = beMusicDecide
+      ? new DefaultPixiDecideView({
+          ...callbacks,
+          beMusicSkin: this.beMusicSkin,
+          beMusicEffects: this.guiState.skinEffects,
+          beMusicSkinSettings: this.beMusicSkinSettings,
+          ...(playOptions !== undefined
+            ? { playOptions: { ...playOptions, autoPlay: overrides.autoPlay ?? this.guiState.autoPlay } }
+            : {}),
+        })
+      : new PixiDecideView({ ...callbacks, skin: this.decideSkin });
     await this.decideView.mount(this.sceneHost, { song, collection: this.collection });
   }
 
@@ -3372,11 +3514,15 @@ class PlayerWebDemoApp {
   ): PixiGameplayView | DefaultPixiGameplayView {
     const playOptions = this.selectView?.getPlayOptions();
     const replay = overrides.replay;
+    const autoPlay = overrides.autoPlay ?? this.guiState.autoPlay;
+    // Only a play the player actually played counts towards the chart's best record.
+    this.activePlayRecordKey =
+      autoPlay || replay !== undefined ? undefined : songRecordKey(song, overrides.chartSha256);
     const sharedOptions = {
       // The playlog-relevant options (auto play / random / DP flip / auto scratch / gauge / judge) read from
       // `guiState` — the Debug Menu's "Play options" folder and the LR2 select panel two-way sync into it, and it
       // is the surface that exists on every family (default / beatoraja selects have no LR2 PLAY OPTION panel).
-      autoPlay: overrides.autoPlay ?? this.guiState.autoPlay,
+      autoPlay,
       autoPauseOnBlur: this.guiState.autoPauseOnBlur,
       initialHiSpeed: playOptions?.hiSpeed,
       bga: playOptions?.bga,
@@ -3429,6 +3575,7 @@ class PlayerWebDemoApp {
         ...sharedOptions,
         beMusicSkin: this.beMusicSkin,
         beMusicEffects: this.guiState.skinEffects,
+        beMusicSkinSettings: this.beMusicSkinSettings,
       });
     }
     return new PixiGameplayView({
@@ -3583,11 +3730,16 @@ class PlayerWebDemoApp {
           ...sharedResultOptions,
           beMusicSkin: this.beMusicSkin,
           beMusicEffects: this.guiState.skinEffects,
+          beMusicSkinSettings: this.beMusicSkinSettings,
         });
     await this.resultView.mount(this.sceneHost, data);
     this.gameplayView?.dispose({ preserveAudioTail: true });
     this.gameplayView = undefined;
     this.setStatus(`Result: ${data.song.title}`);
+    if (this.activePlayRecordKey !== undefined) {
+      this.recordSongResult(this.activePlayRecordKey, data);
+      this.activePlayRecordKey = undefined;
+    }
     this.maybeAutoSavePlaylog(data.playlog);
     this.unlockPlaylogOptions();
   }
diff --git a/packages/player-web-demo/src/skin-settings.test.ts b/packages/player-web-demo/src/skin-settings.test.ts
new file mode 100644
index 000000000..a94b153c1
--- /dev/null
+++ b/packages/player-web-demo/src/skin-settings.test.ts
@@ -0,0 +1,113 @@
+import { describe, expect, it } from 'vite-plus/test';
+import type { BeMusicSkinSetting } from '@be-music/player-web/skin';
+import {
+  describeSkinSettingControllers,
+  parseStoredSkinSettings,
+  serializeStoredSkinSettings,
+  setStoredSkinSetting,
+  type StoredSkinSettings,
+  type StoredSkinSettingValue,
+} from './skin-settings.ts';
+
+const SCHEMA: readonly BeMusicSkinSetting[] = [
+  {
+    kind: 'choice',
+    id: 'theme',
+    label: 'Theme',
+    options: [
+      { value: 'dark', label: 'Dark' },
+      { value: 'light', label: 'Light' },
+    ],
+    default: 'dark',
+  },
+  { kind: 'number', id: 'offset', label: 'Judge offset', min: -40, max: 40, step: 2, default: 0, unit: 'px' },
+  { kind: 'number', id: 'opacity', label: 'Opacity', min: 0, max: 1, default: 1 },
+  { kind: 'toggle', id: 'glow', label: 'Glow', default: true },
+];
+
+describe('parseStoredSkinSettings', () => {
+  it('round-trips what serializeStoredSkinSettings writes', () => {
+    const settings: StoredSkinSettings = new Map<string, Record<string, StoredSkinSettingValue>>([
+      ['synesthesia', { theme: 'light', offset: -12, glow: false }],
+      ['lattice', {}],
+    ]);
+    expect(parseStoredSkinSettings(serializeStoredSkinSettings(settings))).toEqual(settings);
+  });
+
+  it('stores values per skin id under a versioned map', () => {
+    const settings: StoredSkinSettings = new Map<string, Record<string, StoredSkinSettingValue>>([
+      ['phantom', { glow: true }],
+    ]);
+    expect(JSON.parse(serializeStoredSkinSettings(settings))).toEqual({
+      version: 1,
+      skins: { phantom: { glow: true } },
+    });
+  });
+
+  it('drops values that are not a string, a finite number, or a boolean', () => {
+    const raw = JSON.stringify({
+      version: 1,
+      skins: { a: { ok: 'x', n: 3, b: false, nested: { x: 1 }, list: [1], nil: null }, broken: 'nope', arr: [1] },
+    });
+    expect(parseStoredSkinSettings(raw)).toEqual(new Map([['a', { ok: 'x', n: 3, b: false }]]));
+  });
+
+  it('yields nothing for missing, malformed, or other-version data', () => {
+    expect(parseStoredSkinSettings(null).size).toBe(0);
+    expect(parseStoredSkinSettings('{').size).toBe(0);
+    expect(parseStoredSkinSettings('"text"').size).toBe(0);
+    expect(parseStoredSkinSettings(JSON.stringify({ version: 2, skins: { a: { x: 1 } } })).size).toBe(0);
+  });
+});
+
+describe('setStoredSkinSetting', () => {
+  it('merges one value into the skin entry without touching other skins', () => {
+    const settings: StoredSkinSettings = new Map<string, Record<string, StoredSkinSettingValue>>([
+      ['a', { theme: 'light' }],
+      ['b', { glow: false }],
+    ]);
+    const before = settings.get('a');
+    const values = setStoredSkinSetting(settings, 'a', 'offset', 8);
+    expect(values).toEqual({ theme: 'light', offset: 8 });
+    expect(settings.get('a')).toBe(values);
+    expect(before).toEqual({ theme: 'light' });
+    expect(settings.get('b')).toEqual({ glow: false });
+  });
+
+  it('starts an entry for a skin with nothing stored', () => {
+    const settings: StoredSkinSettings = new Map();
+    expect(setStoredSkinSetting(settings, 'new', 'glow', true)).toEqual({ glow: true });
+  });
+});
+
+describe('describeSkinSettingControllers', () => {
+  it('maps each setting kind to its controller, in declaration order', () => {
+    expect(describeSkinSettingControllers(SCHEMA)).toEqual([
+      { kind: 'dropdown', id: 'theme', name: 'Theme', options: { Dark: 'dark', Light: 'light' } },
+      { kind: 'slider', id: 'offset', name: 'Judge offset (px)', min: -40, max: 40, step: 2 },
+      { kind: 'slider', id: 'opacity', name: 'Opacity', min: 0, max: 1, step: undefined },
+      { kind: 'checkbox', id: 'glow', name: 'Glow' },
+    ]);
+  });
+
+  it('keeps options with a repeated label pickable', () => {
+    const [controller] = describeSkinSettingControllers([
+      {
+        kind: 'choice',
+        id: 'c',
+        label: 'C',
+        options: [
+          { value: 'a', label: 'Same' },
+          { value: 'b', label: 'Same' },
+        ],
+        default: 'a',
+      },
+    ]);
+    expect(controller).toEqual({ kind: 'dropdown', id: 'c', name: 'C', options: { Same: 'a', 'Same (b)': 'b' } });
+  });
+
+  it('describes nothing for a skin without settings', () => {
+    expect(describeSkinSettingControllers(undefined)).toEqual([]);
+    expect(describeSkinSettingControllers([])).toEqual([]);
+  });
+});
diff --git a/packages/player-web-demo/src/skin-settings.ts b/packages/player-web-demo/src/skin-settings.ts
new file mode 100644
index 000000000..d54a95502
--- /dev/null
+++ b/packages/player-web-demo/src/skin-settings.ts
@@ -0,0 +1,129 @@
+// The demo's values for be-music skins' `settings`: persistence per skin id across reloads, and the Debug Menu
+// controllers built from a skin's settings schema.
+
+import type { BeMusicSkinSetting } from '@be-music/player-web/skin';
+
+const STORAGE_KEY = 'be-music-demo.skin-settings';
+/** Bumped when the stored shape changes; a stored map with another version is ignored. */
+const STORAGE_VERSION = 1;
+
+/** One stored setting value: a choice's option value, a number, or a toggle's state. */
+export type StoredSkinSettingValue = string | number | boolean;
+
+/** Stored values per skin id, each keyed by setting id. */
+export type StoredSkinSettings = Map<string, Record<string, StoredSkinSettingValue>>;
+
+function isStoredValue(value: unknown): value is StoredSkinSettingValue {
+  return (
+    typeof value === 'string' || typeof value === 'boolean' || (typeof value === 'number' && Number.isFinite(value))
+  );
+}
+
+/**
+ * Parses stored skin settings. Values that are not a string, a finite number, or a boolean are dropped; anything
+ * unreadable yields no settings. Values are not checked against any schema here — the scenes do that with
+ * `resolveBeMusicSkinSettings`, so a value an older release of a skin stored falls back to the default there.
+ */
+export function parseStoredSkinSettings(raw: string | null | undefined): StoredSkinSettings {
+  const settings: StoredSkinSettings = new Map();
+  if (!raw) return settings;
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    return settings;
+  }
+  if (typeof parsed !== 'object' || parsed === null) return settings;
+  const { version, skins } = parsed as { version?: unknown; skins?: unknown };
+  if (version !== STORAGE_VERSION || typeof skins !== 'object' || skins === null) return settings;
+  for (const [skinId, entry] of Object.entries(skins)) {
+    if (typeof entry !== 'object' || entry === null || Array.isArray(entry)) continue;
+    const values: Record<string, StoredSkinSettingValue> = {};
+    for (const [id, value] of Object.entries(entry)) {
+      if (isStoredValue(value)) values[id] = value;
+    }
+    settings.set(skinId, values);
+  }
+  return settings;
+}
+
+/** Serializes skin settings as `{ version: 1, skins: { [skinId]: { [settingId]: value } } }`. */
+export function serializeStoredSkinSettings(settings: StoredSkinSettings): string {
+  return JSON.stringify({ version: STORAGE_VERSION, skins: Object.fromEntries(settings) });
+}
+
+/**
+ * Records `value` for setting `id` of skin `skinId`, keeping the skin's other values, and returns the skin's values. A
+ * new object replaces the skin's entry, so values already handed to a scene are never mutated.
+ */
+export function setStoredSkinSetting(
+  settings: StoredSkinSettings,
+  skinId: string,
+  id: string,
+  value: StoredSkinSettingValue,
+): Readonly<Record<string, StoredSkinSettingValue>> {
+  const values = { ...settings.get(skinId), [id]: value };
+  settings.set(skinId, values);
+  return values;
+}
+
+export function readStoredSkinSettings(): StoredSkinSettings {
+  try {
+    return parseStoredSkinSettings(window.localStorage.getItem(STORAGE_KEY));
+  } catch {
+    return new Map();
+  }
+}
+
+export function storeSkinSettings(settings: StoredSkinSettings): void {
+  try {
+    window.localStorage.setItem(STORAGE_KEY, serializeStoredSkinSettings(settings));
+  } catch {
+    // Private windows / blocked or full storage: the values still apply for this session.
+  }
+}
+
+/** A Debug Menu controller for one skin setting. */
+export type SkinSettingController =
+  | {
+      kind: 'dropdown';
+      id: string;
+      name: string;
+      /** Shown label → option value, as lil-gui's `add(object, key, options)` takes them. */
+      options: Record<string, string>;
+    }
+  | { kind: 'slider'; id: string; name: string; min: number; max: number; step: number | undefined }
+  | { kind: 'checkbox'; id: string; name: string };
+
+/**
+ * The Debug Menu controllers for a skin's `settings` schema, in declaration order: a choice becomes a dropdown, a
+ * number a slider over `min..max` (with the unit in its name), a toggle a checkbox. Option labels that repeat get the
+ * option value appended so every option stays pickable.
+ */
+export function describeSkinSettingControllers(
+  settings: readonly BeMusicSkinSetting[] | undefined,
+): SkinSettingController[] {
+  return (settings ?? []).map((setting): SkinSettingController => {
+    switch (setting.kind) {
+      case 'choice': {
+        const options: Record<string, string> = {};
+        for (const option of setting.options) {
+          const label = option.label in options ? `${option.label} (${option.value})` : option.label;
+          options[label] = option.value;
+        }
+        return { kind: 'dropdown', id: setting.id, name: setting.label, options };
+      }
+      case 'number':
+        return {
+          kind: 'slider',
+          id: setting.id,
+          name: setting.unit === undefined ? setting.label : `${setting.label} (${setting.unit})`,
+          min: setting.min,
+          max: setting.max,
+          step: setting.step,
+        };
+      case 'toggle':
+        return { kind: 'checkbox', id: setting.id, name: setting.label };
+    }
+  });
+}
diff --git a/packages/player-web-demo/src/song-records.test.ts b/packages/player-web-demo/src/song-records.test.ts
new file mode 100644
index 000000000..514859256
--- /dev/null
+++ b/packages/player-web-demo/src/song-records.test.ts
@@ -0,0 +1,108 @@
+import { describe, expect, it } from 'vite-plus/test';
+import type { PixiGameplayResultData } from '@be-music/player-web/scenes';
+import {
+  CLEAR_LAMP_ORDER,
+  clearLampRank,
+  mergeSongRecord,
+  parseSongRecords,
+  serializeSongRecords,
+  songRecordKey,
+  songRecordPlayFromResult,
+} from './song-records.ts';
+
+describe('clearLampRank', () => {
+  it('ranks lamps from NO_PLAY up to MAX', () => {
+    expect(clearLampRank('NO_PLAY')).toBe(0);
+    expect(clearLampRank('FAILED')).toBeLessThan(clearLampRank('ASSIST_EASY'));
+    expect(clearLampRank('EX_HARD')).toBeLessThan(clearLampRank('FULL_COMBO'));
+    expect(clearLampRank('MAX')).toBe(CLEAR_LAMP_ORDER.length - 1);
+  });
+});
+
+describe('mergeSongRecord', () => {
+  const play = { lamp: 'HARD' as const, exScore: 1500, maxCombo: 400, missCount: 12 };
+
+  it('starts a record from the first play', () => {
+    expect(mergeSongRecord(undefined, play)).toEqual({ ...play, playCount: 1 });
+  });
+
+  it('keeps each best independently and counts the play', () => {
+    const previous = { lamp: 'EX_HARD' as const, exScore: 1400, maxCombo: 500, missCount: 20, playCount: 3 };
+    expect(mergeSongRecord(previous, play)).toEqual({
+      lamp: 'EX_HARD',
+      exScore: 1500,
+      maxCombo: 500,
+      missCount: 12,
+      playCount: 4,
+    });
+  });
+
+  it('upgrades the lamp when the play is better', () => {
+    expect(mergeSongRecord({ lamp: 'FAILED', playCount: 1 }, play).lamp).toBe('HARD');
+    expect(mergeSongRecord({ lamp: 'HARD', playCount: 1 }, { ...play, lamp: 'FAILED' }).lamp).toBe('HARD');
+  });
+
+  it('fills fields a stored record lacks', () => {
+    expect(mergeSongRecord({ lamp: 'NORMAL' }, play)).toEqual({
+      lamp: 'HARD',
+      exScore: 1500,
+      maxCombo: 400,
+      missCount: 12,
+      playCount: 1,
+    });
+  });
+});
+
+describe('songRecordPlayFromResult', () => {
+  const score = { total: 10, perfect: 5, great: 2, good: 1, bad: 1, poor: 1, emptyPoor: 4, exScore: 12, score: 0 };
+
+  it('reads the lamp, EX score, max combo, and BAD + POOR', () => {
+    const data = { score, maxCombo: 6, cleared: true, lamp: 'EASY' } as PixiGameplayResultData;
+    expect(songRecordPlayFromResult(data)).toEqual({ lamp: 'EASY', exScore: 12, maxCombo: 6, missCount: 2 });
+  });
+
+  it('falls back to the gauge verdict without a lamp', () => {
+    expect(songRecordPlayFromResult({ score, maxCombo: 0, cleared: false } as PixiGameplayResultData).lamp).toBe(
+      'FAILED',
+    );
+    expect(songRecordPlayFromResult({ score, maxCombo: 0, cleared: true } as PixiGameplayResultData).lamp).toBe(
+      'NORMAL',
+    );
+  });
+});
+
+describe('songRecordKey', () => {
+  it('prefers the chart SHA-256 and falls back to the chart path', () => {
+    expect(songRecordKey({ chartPath: 'a/b.bms' }, 'abc123')).toBe('sha256:abc123');
+    expect(songRecordKey({ chartPath: 'a/b.bms' }, undefined)).toBe('path:a/b.bms');
+    expect(songRecordKey({ chartPath: 'a/b.bms' }, '')).toBe('path:a/b.bms');
+  });
+});
+
+describe('parseSongRecords / serializeSongRecords', () => {
+  it('round-trips records', () => {
+    const records = new Map([
+      ['sha256:abc', { lamp: 'FULL_COMBO' as const, exScore: 900, maxCombo: 450, missCount: 0, playCount: 2 }],
+      ['path:x.bms', { lamp: 'FAILED' as const, playCount: 1 }],
+    ]);
+    expect(parseSongRecords(serializeSongRecords(records))).toEqual(records);
+  });
+
+  it('yields no records for missing, unreadable, or foreign-version data', () => {
+    expect(parseSongRecords(null).size).toBe(0);
+    expect(parseSongRecords('{not json').size).toBe(0);
+    expect(parseSongRecords('[]').size).toBe(0);
+    expect(parseSongRecords(JSON.stringify({ version: 2, records: { a: { lamp: 'MAX' } } })).size).toBe(0);
+  });
+
+  it('drops entries with an unknown lamp and leaves out malformed counts', () => {
+    const raw = JSON.stringify({
+      version: 1,
+      records: {
+        bad: { lamp: 'SUPER_CLEAR', exScore: 10 },
+        ok: { lamp: 'HARD', exScore: -1, maxCombo: 1.5, missCount: '3', playCount: 4 },
+      },
+    });
+    expect([...parseSongRecords(raw)]).toEqual([['ok', { lamp: 'HARD', playCount: 4 }]]);
+  });
+});
diff --git a/packages/player-web-demo/src/song-records.ts b/packages/player-web-demo/src/song-records.ts
new file mode 100644
index 000000000..1dcb11d52
--- /dev/null
+++ b/packages/player-web-demo/src/song-records.ts
@@ -0,0 +1,125 @@
+// The demo's per-chart best records, handed to be-music skins through the select scene's `resolveSongRecord`: lamp
+// ordering, merging a finished play into a record, and persistence across reloads.
+
+import type { BrowserSongEntry } from '@be-music/player-web/collection';
+import type { PixiGameplayResultData } from '@be-music/player-web/scenes';
+import type { BeMusicClearLamp, BeMusicSongRecord } from '@be-music/player-web/skin';
+
+const STORAGE_KEY = 'be-music-demo.song-records';
+/** Bumped when the stored shape changes; a stored map with another version is ignored. */
+const STORAGE_VERSION = 1;
+
+/** Clear lamps from worst to best — a record keeps the best lamp it has seen. */
+export const CLEAR_LAMP_ORDER: readonly BeMusicClearLamp[] = [
+  'NO_PLAY',
+  'FAILED',
+  'ASSIST_EASY',
+  'EASY',
+  'NORMAL',
+  'HARD',
+  'EX_HARD',
+  'FULL_COMBO',
+  'PERFECT',
+  'MAX',
+];
+
+/** Rank of `lamp` in {@link CLEAR_LAMP_ORDER} (higher is better); an unknown lamp ranks as `NO_PLAY`. */
+export function clearLampRank(lamp: BeMusicClearLamp): number {
+  return Math.max(0, CLEAR_LAMP_ORDER.indexOf(lamp));
+}
+
+/** What one finished play contributes to a record. */
+export interface SongRecordPlay {
+  lamp: BeMusicClearLamp;
+  exScore: number;
+  maxCombo: number;
+  /** BAD + POOR (empty POORs excluded — they never cost a note). */
+  missCount: number;
+}
+
+/** The record-relevant facts of a result. A result without a lamp falls back to its gauge verdict. */
+export function songRecordPlayFromResult(data: PixiGameplayResultData): SongRecordPlay {
+  return {
+    lamp: data.lamp ?? (data.cleared ? 'NORMAL' : 'FAILED'),
+    exScore: data.score.exScore,
+    maxCombo: data.maxCombo,
+    missCount: data.score.bad + data.score.poor,
+  };
+}
+
+/**
+ * Merges `play` into `previous`: the better lamp, the higher EX score and max combo, the lower miss count, and one more
+ * play. Every best is kept independently, as LR2 and beatoraja do — the best EX score may come from a different play
+ * than the best lamp.
+ */
+export function mergeSongRecord(previous: BeMusicSongRecord | undefined, play: SongRecordPlay): BeMusicSongRecord {
+  if (previous === undefined) {
+    return { lamp: play.lamp, exScore: play.exScore, maxCombo: play.maxCombo, missCount: play.missCount, playCount: 1 };
+  }
+  return {
+    lamp: clearLampRank(play.lamp) > clearLampRank(previous.lamp) ? play.lamp : previous.lamp,
+    exScore: Math.max(previous.exScore ?? 0, play.exScore),
+    maxCombo: Math.max(previous.maxCombo ?? 0, play.maxCombo),
+    missCount: previous.missCount === undefined ? play.missCount : Math.min(previous.missCount, play.missCount),
+    playCount: (previous.playCount ?? 0) + 1,
+  };
+}
+
+/**
+ * The key a chart's record is stored under: its chart-file SHA-256 when known (stable across sessions, machines, and
+ * file moves — the same hash the play-logs record), else its chart path inside the dropped library.
+ */
+export function songRecordKey(song: Pick<BrowserSongEntry, 'chartPath'>, chartSha256: string | undefined): string {
+  return chartSha256 !== undefined && chartSha256.length > 0 ? `sha256:${chartSha256}` : `path:${song.chartPath}`;
+}
+
+/**
+ * Parses stored records. Entries whose lamp is unknown are dropped and malformed counts are left out, so a hand-edited
+ * or stale store can't hand a skin junk; anything unreadable yields no records.
+ */
+export function parseSongRecords(raw: string | null | undefined): Map<string, BeMusicSongRecord> {
+  const records = new Map<string, BeMusicSongRecord>();
+  if (!raw) return records;
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    return records;
+  }
+  if (typeof parsed !== 'object' || parsed === null) return records;
+  const { version, records: stored } = parsed as { version?: unknown; records?: unknown };
+  if (version !== STORAGE_VERSION || typeof stored !== 'object' || stored === null) return records;
+  for (const [key, entry] of Object.entries(stored)) {
+    if (typeof entry !== 'object' || entry === null) continue;
+    const { lamp } = entry as { lamp?: unknown };
+    if (typeof lamp !== 'string' || !CLEAR_LAMP_ORDER.includes(lamp as BeMusicClearLamp)) continue;
+    const record: BeMusicSongRecord = { lamp: lamp as BeMusicClearLamp };
+    for (const field of ['exScore', 'maxCombo', 'missCount', 'playCount'] as const) {
+      const value = (entry as Record<string, unknown>)[field];
+      if (typeof value === 'number' && Number.isInteger(value) && value >= 0) record[field] = value;
+    }
+    records.set(key, record);
+  }
+  return records;
+}
+
+/** Serializes records as `{ version: 1, records: { [key]: BeMusicSongRecord } }`. */
+export function serializeSongRecords(records: ReadonlyMap<string, BeMusicSongRecord>): string {
+  return JSON.stringify({ version: STORAGE_VERSION, records: Object.fromEntries(records) });
+}
+
+export function readStoredSongRecords(): Map<string, BeMusicSongRecord> {
+  try {
+    return parseSongRecords(window.localStorage.getItem(STORAGE_KEY));
+  } catch {
+    return new Map();
+  }
+}
+
+export function storeSongRecords(records: ReadonlyMap<string, BeMusicSongRecord>): void {
+  try {
+    window.localStorage.setItem(STORAGE_KEY, serializeSongRecords(records));
+  } catch {
+    // Private windows / blocked or full storage: the records still hold for this session.
+  }
+}
diff --git a/packages/player-web/scripts/exports-cases.ts b/packages/player-web/scripts/exports-cases.ts
index b89b7e83a..b2e1b4550 100644
--- a/packages/player-web/scripts/exports-cases.ts
+++ b/packages/player-web/scripts/exports-cases.ts
@@ -287,6 +287,26 @@ export function registerPlayerWebCoreExportsCases(define: DefineBenchmarkCase):
       playerWebCoreApi.resolveBeMusicLaneKind('1D', -1, '24');
     },
   });
+  define('player-web.resolveBeMusicSkinSettings', {
+    run: () => {
+      playerWebCoreApi.resolveBeMusicSkinSettings(
+        {
+          settings: [
+            {
+              kind: 'choice',
+              id: 'theme',
+              label: 'Theme',
+              options: [{ value: 'dark', label: 'Dark' }],
+              default: 'dark',
+            },
+            { kind: 'number', id: 'offset', label: 'Offset', min: -50, max: 50, step: 1, default: 0, unit: 'px' },
+            { kind: 'toggle', id: 'glow', label: 'Glow', default: true },
+          ],
+        },
+        { theme: 'light', offset: 80, glow: false, stale: 1 },
+      );
+    },
+  });
   define('player-web.resolveSelectListWindow', {
     run: () => {
       playerWebCoreApi.resolveSelectListWindow(playerWebCoreApi.phantomSkin.select.layout, 480, 50, 100);
@@ -297,6 +317,12 @@ export function registerPlayerWebCoreExportsCases(define: DefineBenchmarkCase):
       playerWebCoreApi.createCroppedBeatorajaTexture(undefined, { x: 0, y: 0, w: 16, h: 16 });
     },
   });
+  define('player-web.DefaultPixiDecideView', {
+    run: () => {
+      new playerWebCoreApi.DefaultPixiDecideView({ beMusicSkin: playerWebCoreApi.phantomSkin });
+    },
+    interactive: true,
+  });
   define('player-web.DefaultPixiGameplayView', {
     run: () => {
       new playerWebCoreApi.DefaultPixiGameplayView();
diff --git a/packages/player-web/src/media/textures.ts b/packages/player-web/src/media/textures.ts
index a5aeaa575..dd2964be9 100644
--- a/packages/player-web/src/media/textures.ts
+++ b/packages/player-web/src/media/textures.ts
@@ -984,6 +984,31 @@ async function loadTextureFromImageData(
   }
 }
 
+/**
+ * Decodes an image asset (PNG, BMP, JPG, TGA, registered formats, …) into an `ImageBitmap`, for consumers that draw
+ * with the canvas APIs rather than Pixi (be-music skins' song images). No chroma key is applied. `undefined` when the
+ * bytes don't decode; the caller owns the bitmap and `close()`s it when done.
+ */
+export async function loadImageBitmapFromBytes(path: string, bytes: Uint8Array): Promise<ImageBitmap | undefined> {
+  const lower = path.toLowerCase();
+  try {
+    if (lower.endsWith('.tga')) {
+      const imageData = decodeTgaImageData(bytes);
+      return imageData ? await createImageBitmap(imageData) : undefined;
+    }
+    const decoded = resolveImageDecoder(lower)?.(bytes);
+    if (decoded) {
+      // Copy into an `ArrayBuffer`-backed view: `ImageData` rejects views typed over `ArrayBufferLike`.
+      const pixels = new Uint8ClampedArray(new ArrayBuffer(decoded.rgba.byteLength));
+      pixels.set(decoded.rgba);
+      return await createImageBitmap(new ImageData(pixels, decoded.width, decoded.height));
+    }
+    return await createImageBitmap(new Blob([bytes as Uint8Array<ArrayBuffer>]));
+  } catch {
+    return undefined;
+  }
+}
+
 function normalizeLoadTextureOptions(
   input: { r: number; g: number; b: number } | LoadTextureOptions | undefined,
 ): LoadTextureOptions {
@@ -1072,6 +1097,31 @@ async function decodeTgaTexture(
   options: LoadTextureOptions = {},
   label?: string,
 ): Promise<Texture | undefined> {
+  const imageData = decodeTgaImageData(bytes, options);
+  if (!imageData) {
+    return undefined;
+  }
+  const { width, height } = imageData;
+  const canvas = document.createElement('canvas');
+  canvas.width = width;
+  canvas.height = height;
+  const context = canvas.getContext('2d');
+  if (!context) {
+    return undefined;
+  }
+  context.putImageData(imageData, 0, 0);
+  const blob = await new Promise<Blob | null>((resolve) => canvas.toBlob(resolve, 'image/png'));
+  if (!blob) {
+    return undefined;
+  }
+  return loadTextureFromBlob(blob, label);
+}
+
+/**
+ * Decodes an uncompressed or RLE true-colour / grayscale TGA into RGBA pixels, applying the chroma keys in `options`.
+ * `undefined` for truncated files and variants it doesn't handle (colour-mapped, 15/16-bit).
+ */
+function decodeTgaImageData(bytes: Uint8Array, options: LoadTextureOptions = {}): ImageData | undefined {
   const transparentColor = options.transparentColor;
   const keyOutBlack = options.keyOutBlack === true;
   if (bytes.length < 18) {
@@ -1171,17 +1221,5 @@ async function decodeTgaTexture(
     }
   }
 
-  const canvas = document.createElement('canvas');
-  canvas.width = width;
-  canvas.height = height;
-  const context = canvas.getContext('2d');
-  if (!context) {
-    return undefined;
-  }
-  context.putImageData(imageData, 0, 0);
-  const blob = await new Promise<Blob | null>((resolve) => canvas.toBlob(resolve, 'image/png'));
-  if (!blob) {
-    return undefined;
-  }
-  return loadTextureFromBlob(blob, label);
+  return imageData;
 }
diff --git a/packages/player-web/src/runtime/web-ui-runtime.ts b/packages/player-web/src/runtime/web-ui-runtime.ts
index 1a8314cf7..2684fb367 100644
--- a/packages/player-web/src/runtime/web-ui-runtime.ts
+++ b/packages/player-web/src/runtime/web-ui-runtime.ts
@@ -27,6 +27,8 @@ export interface WebUiRuntimeCallbacks {
    * - `press-lane` / `release-lane` — manual key press / release on this lane.
    * - `trigger-poor-bga` — POOR BGA window started (the host typically draws `#xxx06` until `clear-poor-bga`).
    * - `clear-poor-bga` — POOR BGA window ended (next note hit, or the timeout elapsed).
+   * - `long-note-start` / `long-note-end` — a long note's hold began (with the mode it plays in) / finished
+   *   (`complete` or `dropped`).
    *
    * The host should switch on `command.kind` and apply the matching visual effect.
    */
diff --git a/packages/player-web/src/scene/core/clear-lamp.test.ts b/packages/player-web/src/scene/core/clear-lamp.test.ts
new file mode 100644
index 000000000..4d2d58c9a
--- /dev/null
+++ b/packages/player-web/src/scene/core/clear-lamp.test.ts
@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vite-plus/test';
+import { resolveClearLamp } from './clear-lamp.ts';
+
+const score = (perfect: number, great: number, good: number, total = 100) => ({ total, perfect, great, good });
+
+describe('resolveClearLamp', () => {
+  it('reports a failed gauge as FAILED, whatever the judgements', () => {
+    expect(resolveClearLamp({ cleared: false, score: score(100, 0, 0), gaugeType: 'HARD' })).toBe('FAILED');
+  });
+
+  it('grades full combos by their worst judgement', () => {
+    expect(resolveClearLamp({ cleared: true, score: score(100, 0, 0) })).toBe('MAX');
+    expect(resolveClearLamp({ cleared: true, score: score(90, 10, 0) })).toBe('PERFECT');
+    expect(resolveClearLamp({ cleared: true, score: score(80, 15, 5), gaugeType: 'EASY' })).toBe('FULL_COMBO');
+  });
+
+  it('takes the gauge lamp for a clear with misses', () => {
+    const cases: [string, string][] = [
+      ['GROOVE', 'NORMAL'],
+      ['NORMAL', 'NORMAL'],
+      ['EASY', 'EASY'],
+      ['ASSIST-EASY', 'ASSIST_EASY'],
+      ['ASSISTED-EASY', 'ASSIST_EASY'],
+      ['HARD', 'HARD'],
+      ['EX-HARD', 'EX_HARD'],
+      ['DEATH', 'EX_HARD'],
+      ['HAZARD', 'EX_HARD'],
+      ['hard', 'HARD'],
+      ['CLASS', 'NORMAL'],
+    ];
+    for (const [gaugeType, lamp] of cases) {
+      expect(resolveClearLamp({ cleared: true, score: score(80, 10, 5), gaugeType })).toBe(lamp);
+    }
+    expect(resolveClearLamp({ cleared: true, score: score(80, 10, 5) })).toBe('NORMAL');
+  });
+
+  it('does not call an empty chart a full combo', () => {
+    expect(resolveClearLamp({ cleared: true, score: score(0, 0, 0, 0), gaugeType: 'HARD' })).toBe('HARD');
+  });
+});
diff --git a/packages/player-web/src/scene/core/clear-lamp.ts b/packages/player-web/src/scene/core/clear-lamp.ts
new file mode 100644
index 000000000..ba4ecca4f
--- /dev/null
+++ b/packages/player-web/src/scene/core/clear-lamp.ts
@@ -0,0 +1,40 @@
+import type { BeMusicClearLamp } from '@be-music/skin-sdk';
+import type { ScoreSummary } from '@be-music/player/core/scoring';
+
+/**
+ * Clear lamp of a gauge, by the gauge ids the rulesets use (`GROOVE` / `EASY` / `HARD` / `DEATH` under LR2,
+ * `ASSIST-EASY` / `EASY` / `NORMAL` / `HARD` / `EX-HARD` / `HAZARD` under beatoraja, `ASSISTED-EASY` … under IIDX).
+ * DEATH and HAZARD clear on the strictest lamp below the full-combo ones.
+ */
+const GAUGE_LAMPS: Readonly<Record<string, BeMusicClearLamp>> = {
+  'ASSIST-EASY': 'ASSIST_EASY',
+  'ASSISTED-EASY': 'ASSIST_EASY',
+  EASY: 'EASY',
+  GROOVE: 'NORMAL',
+  NORMAL: 'NORMAL',
+  HARD: 'HARD',
+  'EX-HARD': 'EX_HARD',
+  DEATH: 'EX_HARD',
+  HAZARD: 'EX_HARD',
+};
+
+/**
+ * Resolves the clear lamp of a finished play. A failed gauge is `FAILED`; a clear where every note was judged GOOD or
+ * better is `FULL_COMBO`, `PERFECT` when GREAT or better, and `MAX` when every one was a PERFECT; any other clear takes
+ * the lamp of its gauge (`NORMAL` for gauges the table doesn't know). Empty POORs never touch a note, so they don't
+ * cost a full combo.
+ */
+export function resolveClearLamp(play: {
+  cleared: boolean;
+  score: Pick<ScoreSummary, 'total' | 'perfect' | 'great' | 'good'>;
+  gaugeType?: string;
+}): BeMusicClearLamp {
+  if (!play.cleared) return 'FAILED';
+  const { total, perfect, great, good } = play.score;
+  if (total > 0) {
+    if (perfect >= total) return 'MAX';
+    if (perfect + great >= total) return 'PERFECT';
+    if (perfect + great + good >= total) return 'FULL_COMBO';
+  }
+  return (play.gaugeType !== undefined ? GAUGE_LAMPS[play.gaugeType.toUpperCase()] : undefined) ?? 'NORMAL';
+}
diff --git a/packages/player-web/src/scene/core/decide.test.ts b/packages/player-web/src/scene/core/decide.test.ts
new file mode 100644
index 000000000..5a5268e5d
--- /dev/null
+++ b/packages/player-web/src/scene/core/decide.test.ts
@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vite-plus/test';
+import { resolveDecideKeyAction } from './decide.ts';
+
+describe('resolveDecideKeyAction', () => {
+  it('continues on Enter and Space', () => {
+    expect(resolveDecideKeyAction({ key: 'Enter', repeat: false })).toBe('continue');
+    expect(resolveDecideKeyAction({ key: ' ', repeat: false })).toBe('continue');
+    expect(resolveDecideKeyAction({ key: 'Spacebar', repeat: false })).toBe('continue');
+  });
+
+  it('cancels on Escape', () => {
+    expect(resolveDecideKeyAction({ key: 'Escape', repeat: false })).toBe('cancel');
+  });
+
+  it('ignores other keys and auto-repeats', () => {
+    expect(resolveDecideKeyAction({ key: 'a', repeat: false })).toBeUndefined();
+    expect(resolveDecideKeyAction({ key: 'Enter', repeat: true })).toBeUndefined();
+    expect(resolveDecideKeyAction({ key: 'Escape', repeat: true })).toBeUndefined();
+  });
+});
diff --git a/packages/player-web/src/scene/core/decide.ts b/packages/player-web/src/scene/core/decide.ts
new file mode 100644
index 000000000..afbcd67b4
--- /dev/null
+++ b/packages/player-web/src/scene/core/decide.ts
@@ -0,0 +1,226 @@
+import { Color, Container, Graphics } from 'pixi.js';
+import { type PixiSceneHost } from '../host.ts';
+import { logger } from '../../logger.ts';
+import { resolveSongSource } from '../../collection/collection.ts';
+import type { BrowserSongCollection, BrowserSongEntry } from '../../collection/types.ts';
+import type { BeMusicEffectLevel, BeMusicPlayOptions, BeMusicSkin } from '../../skin/be-music/types.ts';
+import { BeMusicDecideBinding, resolveBeMusicSkinStage } from '../../skin/be-music/binding.ts';
+import { SongImageCache } from '../../skin/be-music/song-images.ts';
+import {
+  resolveDesignTextResolution,
+  resolveScaledViewport,
+  setDesignPixelRatio,
+  setDesignTextResolution,
+} from './viewport.ts';
+import { DEFAULT_PLAY_OPTIONS } from './select.ts';
+
+const log = logger('decide');
+
+const BG = new Color('#05070b');
+
+/** What a key press does on the decide screen. */
+export type DecideKeyAction = 'continue' | 'cancel';
+
+/**
+ * Maps a key press to its decide-screen action: Enter / Space skip ahead to the play, Escape goes back to select.
+ * Auto-repeats are ignored so the Enter held from picking the chart doesn't skip the screen.
+ */
+export function resolveDecideKeyAction(event: { key: string; repeat: boolean }): DecideKeyAction | undefined {
+  if (event.repeat) return undefined;
+  if (event.key === 'Escape') return 'cancel';
+  if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') return 'continue';
+  return undefined;
+}
+
+export interface CoreDecideTarget {
+  /** The chart about to be played. */
+  song: BrowserSongEntry;
+  /** The song collection, for the song's images. Without one `frame.songImage` reports none. */
+  collection?: BrowserSongCollection;
+}
+
+export interface CoreDecideViewOptions {
+  /** The be-music skin whose `decide` screen is drawn. The view shows nothing (and continues at once) without one. */
+  beMusicSkin: BeMusicSkin;
+  /** Showmanship level handed to the skin. Defaults to `'full'`. */
+  beMusicEffects?: BeMusicEffectLevel;
+  /**
+   * The player's stored values for the be-music skin's `settings`, keyed by setting id. They are checked against the
+   * skin's schema (`resolveBeMusicSkinSettings`: unknown ids dropped, invalid values replaced by the default, numbers
+   * clamped) and handed to the skin as `frame.settings`. Omit it to draw with the skin's defaults; change it live with
+   * `setBeMusicSkinSettings`.
+   */
+  beMusicSkinSettings?: Readonly<Record<string, unknown>>;
+  /** The options the play will run with (`frame.playOptions`). Defaults to the select scene's defaults. */
+  playOptions?: Readonly<BeMusicPlayOptions>;
+  /** Fired once when the screen's time is up or the player skips ahead (Enter / Space / click). */
+  onContinue?: () => void;
+  /** Fired once when the player backs out with Escape. Falls back to {@link onContinue} when not provided. */
+  onCancel?: () => void;
+}
+
+/**
+ * The be-music skin's decide screen, shown between picking a chart and the play: draws `skin.decide` every frame for
+ * its `durationMs`, then continues. Enter / Space / a click skip ahead and Escape cancels back to select, as on the LR2
+ * decide scene (without its `#STARTINPUT` input lock, which a be-music skin doesn't declare). The view owns its scene
+ * graph and the song images it loaded, both released by {@link dispose}.
+ */
+export class CoreDecideView {
+  private host: PixiSceneHost | undefined;
+  private readonly sceneRoot = new Container();
+  private readonly root = new Container();
+  private readonly viewportBackground = new Graphics();
+  private readonly designClipMask = new Graphics();
+  private cachedScreenWidth = -1;
+  private cachedScreenHeight = -1;
+  private cachedDesignWidth = -1;
+  private cachedDesignHeight = -1;
+  private binding: BeMusicDecideBinding | undefined;
+  private songImages: SongImageCache | undefined;
+  private target: CoreDecideTarget | undefined;
+  private mountedAt = 0;
+  private advanceTimer: ReturnType<typeof setTimeout> | undefined;
+  private tickerAttached = false;
+  private disposed = false;
+  private finished = false;
+  private readonly options: CoreDecideViewOptions;
+  /** The player's stored values for the skin's settings (`beMusicSkinSettings`, then the setter). */
+  private beMusicSkinSettings: Readonly<Record<string, unknown>> | undefined;
+  private readonly tickerHandle = (): void => {
+    if (!this.disposed) this.render();
+  };
+
+  public constructor(options: CoreDecideViewOptions) {
+    this.options = options;
+    this.beMusicSkinSettings = options.beMusicSkinSettings;
+  }
+
+  /**
+   * Replaces the player's values for the be-music skin's `settings` (see the `beMusicSkinSettings` option); the skin
+   * draws with them from the next frame. `undefined` goes back to the skin's defaults.
+   */
+  public setBeMusicSkinSettings(stored: Readonly<Record<string, unknown>> | undefined): void {
+    this.beMusicSkinSettings = stored;
+    this.binding?.setSettings(stored);
+  }
+
+  /** How long the screen shows before continuing: the skin's `decide.durationMs`, 0 when it has no decide screen. */
+  public get durationMs(): number {
+    return this.binding?.durationMs ?? 0;
+  }
+
+  public async mount(host: PixiSceneHost, target: CoreDecideTarget): Promise<void> {
+    this.host = host;
+    this.target = target;
+    const skin = this.options.beMusicSkin;
+    this.sceneRoot.label = 'decide/scene';
+    this.root.label = 'decide/root';
+    this.viewportBackground.label = 'decide/viewport-bg';
+    this.designClipMask.label = 'decide/design-clip';
+    this.sceneRoot.addChild(this.viewportBackground, this.root);
+    if (skin.decide) {
+      const collection = target.collection;
+      this.songImages = new SongImageCache({
+        resolveSource: (song) => (collection ? resolveSongSource(collection, song) : undefined),
+      });
+      this.binding = new BeMusicDecideBinding(skin, {
+        songImage: this.songImages.lookup,
+        settings: this.beMusicSkinSettings,
+      });
+      this.root.addChild(this.binding.view);
+    }
+    this.root.addChild(this.designClipMask);
+    this.root.mask = this.designClipMask;
+    host.app.stage.addChild(this.sceneRoot);
+    window.addEventListener('keydown', this.handleKeyDown);
+    host.app.canvas.addEventListener('pointerdown', this.handlePointerDown);
+    this.mountedAt = performance.now();
+    this.advanceTimer = setTimeout(() => {
+      this.advanceTimer = undefined;
+      this.finish('continue');
+    }, this.durationMs);
+    this.render();
+    host.app.ticker.add(this.tickerHandle);
+    this.tickerAttached = true;
+  }
+
+  public dispose(): void {
+    if (this.disposed) return;
+    this.disposed = true;
+    if (this.advanceTimer !== undefined) {
+      clearTimeout(this.advanceTimer);
+      this.advanceTimer = undefined;
+    }
+    if (this.tickerAttached) {
+      this.host?.app.ticker.remove(this.tickerHandle);
+      this.tickerAttached = false;
+    }
+    window.removeEventListener('keydown', this.handleKeyDown);
+    this.host?.app.canvas.removeEventListener('pointerdown', this.handlePointerDown);
+    this.sceneRoot.parent?.removeChild(this.sceneRoot);
+    try {
+      this.binding?.dispose();
+      this.binding = undefined;
+      this.songImages?.dispose();
+      this.songImages = undefined;
+      this.sceneRoot.destroy({ children: true, context: true });
+    } catch (error) {
+      log.warn('decide cleanup threw', error);
+    }
+    this.host = undefined;
+  }
+
+  private render(): void {
+    const host = this.host;
+    const target = this.target;
+    if (!host || !target) return;
+    const { width: designWidth, height: designHeight } = resolveBeMusicSkinStage(this.options.beMusicSkin);
+    const screenWidth = host.app.screen.width || designWidth;
+    const screenHeight = host.app.screen.height || designHeight;
+    const viewport = resolveScaledViewport(screenWidth, screenHeight, designWidth, designHeight);
+    setDesignTextResolution(resolveDesignTextResolution(viewport.scale, host.app.renderer.resolution));
+    setDesignPixelRatio(viewport.scale * host.app.renderer.resolution);
+    if (this.cachedScreenWidth !== screenWidth || this.cachedScreenHeight !== screenHeight) {
+      this.viewportBackground.clear().rect(0, 0, screenWidth, screenHeight).fill(BG);
+      this.cachedScreenWidth = screenWidth;
+      this.cachedScreenHeight = screenHeight;
+    }
+    this.root.position.set(viewport.x, viewport.y);
+    this.root.scale.set(viewport.scale);
+    if (this.cachedDesignWidth !== designWidth || this.cachedDesignHeight !== designHeight) {
+      this.designClipMask.clear().rect(0, 0, designWidth, designHeight).fill(0xffffff);
+      this.cachedDesignWidth = designWidth;
+      this.cachedDesignHeight = designHeight;
+    }
+    const now = performance.now();
+    this.binding?.render({
+      designWidth,
+      designHeight,
+      nowMs: now,
+      elapsedMs: now - this.mountedAt,
+      song: target.song,
+      playOptions: this.options.playOptions ?? DEFAULT_PLAY_OPTIONS,
+      effects: this.options.beMusicEffects ?? 'full',
+      audio: undefined,
+    });
+  }
+
+  private finish(action: DecideKeyAction): void {
+    if (this.finished || this.disposed) return;
+    this.finished = true;
+    if (action === 'cancel') (this.options.onCancel ?? this.options.onContinue)?.();
+    else this.options.onContinue?.();
+  }
+
+  private readonly handleKeyDown = (event: KeyboardEvent): void => {
+    if (this.disposed) return;
+    const action = resolveDecideKeyAction(event);
+    if (!action) return;
+    event.preventDefault();
+    this.finish(action);
+  };
+
+  private readonly handlePointerDown = (): void => {
+    this.finish('continue');
+  };
+}
diff --git a/packages/player-web/src/scene/core/gameplay-bga.test.ts b/packages/player-web/src/scene/core/gameplay-bga.test.ts
index f23de9c34..6558831b1 100644
--- a/packages/player-web/src/scene/core/gameplay-bga.test.ts
+++ b/packages/player-web/src/scene/core/gameplay-bga.test.ts
@@ -3,6 +3,7 @@ import { createEmptyJson, type BeMusicJson } from '@be-music/json';
 import { describe, expect, it } from 'vite-plus/test';
 import {
   buildBgaTimeline,
+  buildSkinBgaFrame,
   collectBgaTextureLoadKeys,
   isVideoExtension,
   pickActiveBgaCue,
@@ -127,3 +128,40 @@ describe('isVideoExtension', () => {
     expect(isVideoExtension('image.png')).toBe(false);
   });
 });
+
+describe('buildSkinBgaFrame', () => {
+  const images = {
+    base: new Map([
+      ['01', 'base-01'],
+      ['CC', 'poor-CC'],
+    ]),
+    layer: new Map([['AA', 'layer-AA']]),
+  };
+  const resolve = (key: string, track: 'base' | 'layer') => images[track].get(key);
+
+  it('hands over the base and layer images outside a POOR', () => {
+    expect(buildSkinBgaFrame({ base: '01', layer: 'AA', poor: undefined }, resolve)).toEqual({
+      base: 'base-01',
+      layer: 'layer-AA',
+      poorActive: false,
+    });
+  });
+
+  it('reads the layer from the keyed layer map, not the base map', () => {
+    expect(buildSkinBgaFrame({ base: undefined, layer: '01', poor: undefined }, resolve)).toEqual({
+      poorActive: false,
+    });
+  });
+
+  it('marks the POOR active only when its image is there', () => {
+    expect(buildSkinBgaFrame({ base: '01', layer: undefined, poor: 'CC' }, resolve)).toEqual({
+      base: 'base-01',
+      poor: 'poor-CC',
+      poorActive: true,
+    });
+    expect(buildSkinBgaFrame({ base: '01', layer: undefined, poor: 'ZZ' }, resolve)).toEqual({
+      base: 'base-01',
+      poorActive: false,
+    });
+  });
+});
diff --git a/packages/player-web/src/scene/core/gameplay-bga.ts b/packages/player-web/src/scene/core/gameplay-bga.ts
index f8d2a3a8e..c2e229e3c 100644
--- a/packages/player-web/src/scene/core/gameplay-bga.ts
+++ b/packages/player-web/src/scene/core/gameplay-bga.ts
@@ -75,3 +75,31 @@ export function isVideoExtension(path: string): boolean {
   const lower = path.toLowerCase();
   return /\.(mpg|mpeg|mp4|m4v|avi|mov|wmv|webm|mkv)$/u.test(lower);
 }
+
+/** The BGA keys showing this frame, as `renderBga` resolved them (`#SWBGA` frames already picked). */
+export interface ActiveBgaKeys {
+  base: string | undefined;
+  layer: string | undefined;
+  /** Set only while a POOR is being shown. */
+  poor: string | undefined;
+}
+
+/**
+ * The `frame.bga` a skin that sets `drawsBga` receives: the image behind each active key (`resolve` reads the base or
+ * layer texture map), with `poorActive` set when a POOR image is there to show in place of the base and layer.
+ */
+export function buildSkinBgaFrame<Image>(
+  keys: ActiveBgaKeys,
+  resolve: (key: string, track: 'base' | 'layer') => Image | undefined,
+): { base?: Image; layer?: Image; poor?: Image; poorActive: boolean } {
+  const base = keys.base !== undefined ? resolve(keys.base, 'base') : undefined;
+  const layer = keys.layer !== undefined ? resolve(keys.layer, 'layer') : undefined;
+  // POOR images decode like the base (no chroma key), so they live in the base map.
+  const poor = keys.poor !== undefined ? resolve(keys.poor, 'base') : undefined;
+  return {
+    ...(base !== undefined ? { base } : {}),
+    ...(layer !== undefined ? { layer } : {}),
+    ...(poor !== undefined ? { poor } : {}),
+    poorActive: poor !== undefined,
+  };
+}
diff --git a/packages/player-web/src/scene/core/gameplay-bpm-range.test.ts b/packages/player-web/src/scene/core/gameplay-bpm-range.test.ts
new file mode 100644
index 000000000..6af693ded
--- /dev/null
+++ b/packages/player-web/src/scene/core/gameplay-bpm-range.test.ts
@@ -0,0 +1,46 @@
+import { describe, expect, it } from 'vite-plus/test';
+import { resolveChartBpmRange } from './gameplay-bpm-range.ts';
+
+describe('resolveChartBpmRange', () => {
+  it('reports a constant tempo as its own range', () => {
+    expect(resolveChartBpmRange([{ bpm: 150, seconds: 0 }], 120)).toEqual({ minBpm: 150, maxBpm: 150, mainBpm: 150 });
+  });
+
+  it('picks the BPM held longest as the main BPM, summing every stretch at that BPM', () => {
+    const points = [
+      { bpm: 120, seconds: 0 },
+      { bpm: 240, seconds: 30 },
+      { bpm: 120, seconds: 40 },
+      { bpm: 60, seconds: 50 },
+    ];
+    // 120 holds 30 + 10 = 40 s, 240 holds 10 s, 60 holds 50..100 = 50 s.
+    expect(resolveChartBpmRange(points, 100)).toEqual({ minBpm: 60, maxBpm: 240, mainBpm: 60 });
+    // Ending the chart at 80 s leaves 60 BPM with 30 s, so 120 wins.
+    expect(resolveChartBpmRange(points, 80)).toEqual({ minBpm: 60, maxBpm: 240, mainBpm: 120 });
+  });
+
+  it('gives a tie to the BPM reached first', () => {
+    const points = [
+      { bpm: 200, seconds: 0 },
+      { bpm: 100, seconds: 10 },
+    ];
+    expect(resolveChartBpmRange(points, 20)?.mainBpm).toBe(200);
+  });
+
+  it('ignores zero and non-finite BPMs', () => {
+    const points = [
+      { bpm: 140, seconds: 0 },
+      { bpm: 0, seconds: 5 },
+      { bpm: Number.NaN, seconds: 6 },
+      { bpm: 140, seconds: 7 },
+    ];
+    expect(resolveChartBpmRange(points, 20)).toEqual({ minBpm: 140, maxBpm: 140, mainBpm: 140 });
+  });
+
+  it('falls back to the given BPM when no tempo point is usable', () => {
+    expect(resolveChartBpmRange([], 60, 130)).toEqual({ minBpm: 130, maxBpm: 130, mainBpm: 130 });
+    expect(resolveChartBpmRange([{ bpm: 0, seconds: 0 }], 60, 130)?.mainBpm).toBe(130);
+    expect(resolveChartBpmRange([], 60)).toBeUndefined();
+    expect(resolveChartBpmRange([], 60, 0)).toBeUndefined();
+  });
+});
diff --git a/packages/player-web/src/scene/core/gameplay-bpm-range.ts b/packages/player-web/src/scene/core/gameplay-bpm-range.ts
new file mode 100644
index 000000000..840dd920e
--- /dev/null
+++ b/packages/player-web/src/scene/core/gameplay-bpm-range.ts
@@ -0,0 +1,49 @@
+import type { TempoPoint } from '@be-music/audio-renderer/triggers';
+
+/** The lowest, highest, and main (longest-held) BPM of a chart. */
+export interface ChartBpmRange {
+  minBpm: number;
+  maxBpm: number;
+  mainBpm: number;
+}
+
+/**
+ * Works out a chart's BPM range from its tempo points. `mainBpm` is the BPM held for the longest time in total (each
+ * point holds until the next one, the last until `endSeconds`); a tie goes to the BPM reached first. Points with a
+ * non-positive or non-finite BPM (stops encoded as BPM 0, broken headers) are ignored. Returns `fallbackBpm` for all
+ * three when no point is usable, and `undefined` when there is no usable fallback either.
+ */
+export function resolveChartBpmRange(
+  tempoPoints: readonly Pick<TempoPoint, 'bpm' | 'seconds'>[],
+  endSeconds: number,
+  fallbackBpm?: number,
+): ChartBpmRange | undefined {
+  let minBpm = Number.POSITIVE_INFINITY;
+  let maxBpm = Number.NEGATIVE_INFINITY;
+  const heldSeconds = new Map<number, number>();
+  for (let index = 0; index < tempoPoints.length; index += 1) {
+    const point = tempoPoints[index]!;
+    const { bpm } = point;
+    if (!Number.isFinite(bpm) || bpm <= 0) continue;
+    if (bpm < minBpm) minBpm = bpm;
+    if (bpm > maxBpm) maxBpm = bpm;
+    const next = tempoPoints[index + 1];
+    const start = Math.max(0, point.seconds);
+    const end = next ? next.seconds : Math.max(endSeconds, start);
+    heldSeconds.set(bpm, (heldSeconds.get(bpm) ?? 0) + Math.max(0, end - start));
+  }
+  if (minBpm > maxBpm) {
+    if (fallbackBpm === undefined || !Number.isFinite(fallbackBpm) || fallbackBpm <= 0) return undefined;
+    return { minBpm: fallbackBpm, maxBpm: fallbackBpm, mainBpm: fallbackBpm };
+  }
+  let mainBpm = minBpm;
+  let longest = Number.NEGATIVE_INFINITY;
+  // Map iteration follows insertion order, so the strict `>` keeps the earliest BPM on a tie.
+  for (const [bpm, seconds] of heldSeconds) {
+    if (seconds > longest) {
+      longest = seconds;
+      mainBpm = bpm;
+    }
+  }
+  return { minBpm, maxBpm, mainBpm };
+}
diff --git a/packages/player-web/src/scene/core/gameplay.ts b/packages/player-web/src/scene/core/gameplay.ts
index 2ed475721..c5af55ab7 100644
--- a/packages/player-web/src/scene/core/gameplay.ts
+++ b/packages/player-web/src/scene/core/gameplay.ts
@@ -36,6 +36,7 @@ import {
   type PlayerSummary,
 } from '@be-music/player/core/engine';
 import type { GrooveGaugeType } from '@be-music/player/core/groove-gauge';
+import type { LongNoteStyle, PlayerRulesetInfo } from '@be-music/player/core/engine';
 import type { ChartPlayVariant } from '@be-music/player/core/lane-layout';
 import type { PlayerInputSignalBus } from '@be-music/player/core/input-signal-bus';
 import type { PlayerJudgeComboSignalState, PlayerStateSignals } from '@be-music/player/state-signals';
@@ -76,6 +77,13 @@ import {
   sanitizeBusVolume,
 } from '../../runtime/audio-bus.ts';
 import { GameplayRecorder, type GameplayRecorderResult } from '../../recording/gameplay-recorder.ts';
+import { resolveClearLamp } from './clear-lamp.ts';
+import { resolveChartBpmRange, type ChartBpmRange } from './gameplay-bpm-range.ts';
+import { JudgeTimingLog } from './judge-timing-log.ts';
+import { toBeMusicJudgeWindows } from './judge-windows.ts';
+import { LongNoteTracker, resolveBeMusicLongNoteMode } from './long-note-tracker.ts';
+import { fillLaneCover, resolveGreenNumber, resolveNoteVisibleMs } from './lane-cover.ts';
+import { resolveSideLaneRuns, type SideLaneRun } from './measure-line-runs.ts';
 import { PerfTracker } from '../perf.ts';
 import { type PixiSceneHost } from '../host.ts';
 import { ChildPool, staggerDestroyTextures } from '../pixi-utils.ts';
@@ -112,6 +120,7 @@ import {
 } from '../gameplay-constants.ts';
 import {
   buildBgaTimeline,
+  buildSkinBgaFrame,
   collectBgaTextureLoadKeys,
   isVideoExtension,
   pickActiveBgaCue,
@@ -136,13 +145,17 @@ import type {
   BeMusicBomb,
   BeMusicEffectLevel,
   BeMusicGameplayLayout,
+  BeMusicImage,
+  BeMusicJudge,
+  BeMusicLaneCover,
   BeMusicLaneFrame,
   BeMusicSkin,
   BeMusicStage,
 } from '../../skin/be-music/types.ts';
 import { resolveBeMusicLaneKind } from '../../skin/be-music/registry.ts';
-import { resolveGameplayLayout } from '@be-music/skin-sdk';
+import { resolveGameplayLayout, type BeMusicJudgeWindows, type BeMusicLongNote } from '@be-music/skin-sdk';
 import { BeMusicGameplayBinding, resolveBeMusicSkinStage } from '../../skin/be-music/binding.ts';
+import { SongImageCache } from '../../skin/be-music/song-images.ts';
 import {
   PHANTOM_BOMB_DURATION_MS,
   renderPhantomBombs,
@@ -356,6 +369,13 @@ export interface CoreGameplayViewOptions {
   beMusicSkin?: BeMusicSkin;
   /** Showmanship level for the be-music skin (count-ins, shakes, particles). Defaults to `'full'`. */
   beMusicEffects?: BeMusicEffectLevel;
+  /**
+   * The player's stored values for the be-music skin's `settings`, keyed by setting id. They are checked against the
+   * skin's schema (`resolveBeMusicSkinSettings`: unknown ids dropped, invalid values replaced by the default, numbers
+   * clamped) and handed to the skin as `frame.settings`. Omit it to draw with the skin's defaults; change it live with
+   * `setBeMusicSkinSettings`.
+   */
+  beMusicSkinSettings?: Readonly<Record<string, unknown>>;
   onExit?: () => void;
   /**
    * Restart hook. Fired when the player presses the restart hotkey (`R` by default) — host should dispose this view and
@@ -919,6 +939,53 @@ export class CoreGameplayView<TOptions extends CoreGameplayViewOptions = CoreGam
   private gaugeHistory: Array<{ progress: number; value: number }> = [];
   /** Same shape as `gaugeHistory`, but tracking running EX score. */
   private scoreHistory: Array<{ progress: number; exScore: number }> = [];
+  /**
+   * Timed judgements of the current play, fed from the engine's judge-combo bus. Its recent window reaches skins as
+   * `runtime.judgeTimings`, the full list as the result data's `judgeTimings`.
+   */
+  private readonly judgeTimings = new JudgeTimingLog();
+  /** Long-note holds of the current play, fed from the engine's `long-note-start` / `long-note-end` commands. */
+  private readonly longNotes = new LongNoteTracker();
+  /**
+   * How the engine's ruleset plays long notes and its judge windows (ms), from `onRulesetResolved` at engine launch.
+   * The windows are the ones in force when the chart starts: an LR2 mid-chart `#EXRANKxx` change narrows or widens
+   * the engine's windows from then on, but is not reflected here.
+   */
+  private longNoteStyle: LongNoteStyle | undefined;
+  private judgeWindows: BeMusicJudgeWindows | undefined;
+  /** The chart's BPM range, worked out once per {@link prepareSong}. */
+  private chartBpmRange: ChartBpmRange | undefined;
+  /**
+   * Scratch lanes the engine plays itself under auto-scratch (empty when it is off), resolved per {@link prepareSong}.
+   * See {@link isAutoplayedChannel}.
+   */
+  private autoScratchChannels: ReadonlySet<string> = new Set();
+  /**
+   * Play-clock ms of once-per-play moments (gauge failed, last note judged, chart end, gauge first risen above its
+   * start / reaching its max), latched as they happen and cleared per {@link prepareSong}.
+   */
+  private playMoments: {
+    failedAtMs?: number;
+    allNotesDoneAtMs?: number;
+    outroAtMs?: number;
+    gaugeRiseAtMs?: number;
+    gaugeMaxAtMs?: number;
+  } = {};
+  /**
+   * Lane covers handed to skins as `runtime.laneCovers`, one per play side with lanes. Rebuilt when the lane channels
+   * change and refilled in place every frame, so the runtime allocates nothing for them.
+   */
+  private laneCovers: { channels: readonly string[]; covers: BeMusicLaneCover[] } | undefined;
+  /**
+   * Lane runs measure lines cross for a skin that draws them (`drawsMeasureLines`), with the lane geometry they were
+   * worked out from; rebuilt only when the lanes move.
+   */
+  private measureLineRuns: { signature: number; runs: SideLaneRun[] } | undefined;
+  /** Judgement that set off each lane's live bomb, by channel; absent for bombs without one (an autoplayed LN head). */
+  private readonly bombJudge = new Map<string, BeMusicJudge>();
+  /** Play-clock ms of each lane's last key press / release (also autoplay hits), by channel. */
+  private readonly lanePressedAt = new Map<string, number>();
+  private readonly laneReleasedAt = new Map<string, number>();
   protected lastJudge = '';
   protected lastJudgeUntil = 0;
   /**
@@ -1088,9 +1155,12 @@ export class CoreGameplayView<TOptions extends CoreGameplayViewOptions = CoreGam
    */
   private readonly perf = new PerfTracker('gameplay');
   protected readonly options: TOptions;
+  /** The player's stored values for the be-music skin's settings (`beMusicSkinSettings`, then the setter). */
+  private beMusicSkinSettings: Readonly<Record<string, unknown>> | undefined;
 
   public constructor(options: TOptions = {} as TOptions) {
     this.options = options;
+    this.beMusicSkinSettings = options.beMusicSkinSettings;
     if (options.initialHiSpeed !== undefined && Number.isFinite(options.initialHiSpeed)) {
       // Snap to the same 1/1000 grid `adjustHiSpeed` uses so a host-supplied `1.5000000000000002` (the obvious
       // float-drift failure mode of repeated +0.1 steps) lands on the canonical grid value the in-game adjust hotkey
@@ -1839,6 +1909,10 @@ export class CoreGameplayView<TOptions extends CoreGameplayViewOptions = CoreGam
     try {
       this.skinBindingInstance?.dispose();
       this.skinBindingInstance = undefined;
+      this.songImages?.dispose();
+      this.songImages = undefined;
+      for (const crop of this.skinBgaCrops.values()) crop?.close();
+      this.skinBgaCrops.clear();
       this.noteLayerPool.destroy();
       this.skinLayerPool.destroy();
       this.overlayLayerPool.destroy();
@@ -1863,8 +1937,15 @@ export class CoreGameplayView<TOptions extends CoreGameplayViewOptions = CoreGam
     this.autoSampleTriggers = [];
 
     this.pressedChannels.clear();
+    this.lanePressedAt.clear();
+    this.laneReleasedAt.clear();
+    this.judgeTimings.clear();
+    this.longNotes.clear();
+    this.longNoteStyle = undefined;
+    this.judgeWindows = undefined;
     this.timerStartedAt.clear();
     this.bombStartedAt.clear();
+    this.bombJudge.clear();
     this.keyOnFadeOutStart.clear();
     this.wavCmdVolumeMultipliers.clear();
     this.switchingBgas.clear();
@@ -2111,6 +2192,19 @@ export class CoreGameplayView<TOptions extends CoreGameplayViewOptions = CoreGam
     this.slowCount = 0;
     this.fullComboFired = false;
     this.displayedScore = 0;
+    this.judgeTimings.clear();
+    this.longNotes.clear();
+    this.playMoments = {};
+    this.lanePressedAt.clear();
+    this.laneReleasedAt.clear();
+    this.chartBpmRange = resolveChartBpmRange(
+      resolver.tempoPoints,
+      this.songDurationSeconds,
+      resolved.metadata.bpm > 0 ? resolved.metadata.bpm : this.song?.bpm,
+    );
+    this.autoScratchChannels = this.resolveAutoScratchEnabled()
+      ? new Set(prepared.laneBindings.filter((binding) => binding.isScratch).map((binding) => binding.channel))
+      : new Set();
     this.bgaTimeline = buildBgaTimeline(resolved, resolver);
     // BMS spec — when `#POORBGA` is unset but `#BMP00` exists, BMP00 becomes the implicit POOR placeholder until an
     // explicit `#xxx06` cue fires. Mirrors the TUI BGA renderer's `poorFallbackKey` so the web side stops showing a
@@ -2141,6 +2235,25 @@ export class CoreGameplayView<TOptions extends CoreGameplayViewOptions = CoreGam
     return ruleset === 'lr2';
   }
 
+  /** The compat ruleset judging the play (a replay's recorded one wins). */
+  private resolveJudgeRuleset(): string {
+    return this.options.replay?.play.judgeRuleset ?? this.options.judgeRuleset ?? 'lr2';
+  }
+
+  /**
+   * Whether the engine runs with auto-scratch, mirroring the `autoScratch` engine option: a replay's recorded flag, or
+   * either side's toggle (the engine has one flag for both scratch lanes).
+   */
+  private resolveAutoScratchEnabled(): boolean {
+    if (this.options.replay !== undefined) return this.options.replay.play.autoScratch === true;
+    return this.options.autoScratch1P === true || this.options.autoScratch2P === true;
+  }
+
+  /** Whether the engine plays `channel`'s notes itself: every lane under autoplay, the scratch under auto-scratch. */
+  private isAutoplayedChannel(channel: string): boolean {
+    return this.options.autoPlay === true || this.autoScratchChannels.has(channel);
+  }
+
   /**
    * Locates the song's current beat from `currentSeconds` using the BPM-aware tempo points. Required because BMS charts
    * can change tempo mid-song (`#BPM` events) — using the initial BPM alone makes notes after a tempo change drift
@@ -2719,6 +2832,7 @@ export class CoreGameplayView<TOptions extends CoreGameplayViewOptions = CoreGam
   }
 
   private startKeyOnTimer(channel: string): void {
+    this.lanePressedAt.set(channel, this.playClock());
     const timerId = this.resolveKeyOnTimerId(channel);
     if (timerId === undefined) {
       return;
@@ -2739,6 +2853,7 @@ export class CoreGameplayView<TOptions extends CoreGameplayViewOptions = CoreGam
    * laser back to its fade-in origin before the decay).
    */
   private releaseKeyOnTimer(channel: string): void {
+    this.laneReleasedAt.set(channel, this.playClock());
     const timerId = this.resolveKeyOnTimerId(channel);
     if (timerId === undefined) return;
     // Stamp the fade origin unconditionally — the render-side cleanup uses it as the authoritative clock for the
@@ -2831,9 +2946,11 @@ export class CoreGameplayView<TOptions extends CoreGameplayViewOptions = CoreGam
    * Starts a bomb (hit explosion) on `channel`. The core scene draws it from `bombStartedAt`; themes react through the
    * `bomb` event (the LR2 family stamps its per-lane bomb timer at the same instant).
    */
-  private triggerBomb(channel: string): void {
+  private triggerBomb(channel: string, judge?: BeMusicJudge): void {
     const now = this.playClock();
     this.bombStartedAt.set(channel, now);
+    if (judge) this.bombJudge.set(channel, judge);
+    else this.bombJudge.delete(channel);
     this.onThemeEvent({ kind: 'bomb', channel, at: now });
   }
 
@@ -3057,6 +3174,13 @@ export class CoreGameplayView<TOptions extends CoreGameplayViewOptions = CoreGam
       gaugeHistory,
       scoreHistory,
       ...(this.playlog !== undefined ? { playlog: this.playlog } : {}),
+      lamp: resolveClearLamp({ cleared: this.gaugeState.cleared, score: this.score, gaugeType: this.gaugeState.type }),
+      gaugeType: this.gaugeState.type,
+      judgeRuleset: this.resolveJudgeRuleset(),
+      fast: this.fastCount,
+      slow: this.slowCount,
+      // `clear` swaps in a fresh list for the next play, so the result can keep this one.
+      judgeTimings: this.judgeTimings.all,
     };
   }
 
@@ -3225,6 +3349,7 @@ export class CoreGameplayView<TOptions extends CoreGameplayViewOptions = CoreGam
         continue;
       }
       this.bombStartedAt.delete(channel);
+      this.bombJudge.delete(channel);
       this.onThemeEvent({ kind: 'bomb-retired', channel });
     }
   }
@@ -3239,6 +3364,8 @@ export class CoreGameplayView<TOptions extends CoreGameplayViewOptions = CoreGam
    */
   private renderShutter(): void {
     this.shutterLayer.clear();
+    // A be-music skin that draws its own covers reads them from `runtime.laneCovers` instead.
+    if (this.skinBinding?.drawsLaneCover) return;
     // LANE COVER (`button_type 46`) is the master ON/OFF switch for the playfield mask. With it OFF, no shutter renders
     // even if HIDDEN / SUDDEN / HID+SUD is selected — matches LR2's behavior where the user toggles LANE COVER off to
     // hide the cover without losing the height they had dialed in. The HIDDEN / SUDDEN cycle picks WHERE the mask sits
@@ -3346,6 +3473,7 @@ export class CoreGameplayView<TOptions extends CoreGameplayViewOptions = CoreGam
         elapsedMs: Math.max(0, now - startedAt),
         // Stable per hit: the start time changes on every re-trigger, so a new hit gets a new scatter.
         seed: Math.floor(startedAt * 7.31) % 100_003,
+        judge: this.bombJudge.get(channel),
       });
     }
     const binding = this.skinBinding;
@@ -3364,6 +3492,8 @@ export class CoreGameplayView<TOptions extends CoreGameplayViewOptions = CoreGam
   }
 
   private skinBindingInstance: BeMusicGameplayBinding | undefined;
+  /** Song images handed to the be-music skin (`frame.songImage`), from the playing song's asset source. */
+  private songImages: SongImageCache | undefined;
 
   /**
    * The be-music skin's gameplay binding while the scene paints through a skin: lanes, notes, and hit effects are handed
@@ -3373,10 +3503,28 @@ export class CoreGameplayView<TOptions extends CoreGameplayViewOptions = CoreGam
   private get skinBinding(): BeMusicGameplayBinding | undefined {
     const skin = this.options.beMusicSkin;
     if (!skin || this.options.skinlessChromeRenderer) return undefined;
-    this.skinBindingInstance ??= new BeMusicGameplayBinding(skin);
+    if (!this.skinBindingInstance) {
+      this.songImages = new SongImageCache({
+        resolveSource: (song) =>
+          this.source !== undefined && song.sourceId === this.source.id ? this.source : undefined,
+      });
+      this.skinBindingInstance = new BeMusicGameplayBinding(skin, {
+        songImage: this.songImages.lookup,
+        settings: this.beMusicSkinSettings,
+      });
+    }
     return this.skinBindingInstance;
   }
 
+  /**
+   * Replaces the player's values for the be-music skin's `settings` (see the `beMusicSkinSettings` option); the skin
+   * draws with them from the next frame. `undefined` goes back to the skin's defaults.
+   */
+  public setBeMusicSkinSettings(stored: Readonly<Record<string, unknown>> | undefined): void {
+    this.beMusicSkinSettings = stored;
+    this.skinBindingInstance?.setSettings(stored);
+  }
+
   /**
    * Composites the chart's BGA into the theme's BGA rectangles ({@link collectBgaTargets}; the default-family BGA
    * rectangle unless a theme supplies its own). Three layers stack from back to front: base (channel 04 / bmson `bga.events`), layer
@@ -3438,6 +3586,24 @@ export class CoreGameplayView<TOptions extends CoreGameplayViewOptions = CoreGam
     this.syncBgaVideo('base', baseCue, seconds);
     this.syncBgaVideo('layer', layerCue, seconds);
 
+    const binding = this.skinBinding;
+    if (binding?.drawsBga) {
+      // The skin composites the BGA itself: hand it the images and leave the BGA layer empty.
+      binding.setBga(
+        buildSkinBgaFrame(
+          {
+            base: baseKey !== undefined ? this.resolveBgaFrameKey(baseKey, baseCue?.seconds, seconds) : undefined,
+            layer: layerKey !== undefined ? this.resolveBgaFrameKey(layerKey, layerCue?.seconds, seconds) : undefined,
+            poor: poorKey,
+          },
+          (key, track) =>
+            this.resolveSkinBgaImage((track === 'layer' ? this.bgaLayerTextures : this.bgaTextures).get(key)),
+        ),
+      );
+      this.bgaLayerPool.end();
+      return;
+    }
+
     for (const bga of visibleBgas) {
       const { x, y, w, h } = bga;
       if (w <= 0 || h <= 0) continue;
@@ -3448,19 +3614,7 @@ export class CoreGameplayView<TOptions extends CoreGameplayViewOptions = CoreGam
         cueSeconds: number | undefined,
       ): void => {
         if (!key) return;
-        // BMS spec — `#SWBGAxx fr:tot:lp:ARGB N1 N2 ...` declares an animated BGA. When the cue's slot matches a parsed
-        // entry, advance through its frame list at the authored interval and swap in the source `#BMPxx` texture for
-        // the currently-visible frame. The fast path (no `#SWBGAxx` entry) leaves `key` untouched so the existing
-        // static texture lookup wins.
-        let resolvedKey = key;
-        if (cueSeconds !== undefined) {
-          const swBga = this.switchingBgas.get(key);
-          if (swBga) {
-            const elapsedMs = Math.max(0, (seconds - cueSeconds) * 1000);
-            const frameKey = pickSwitchingBgaFrame(swBga, elapsedMs);
-            if (frameKey) resolvedKey = frameKey;
-          }
-        }
+        const resolvedKey = this.resolveBgaFrameKey(key, cueSeconds, seconds);
         const texture = textures.get(resolvedKey);
         if (!texture) return;
         // Stretch the BGA texture to fill this rect exactly. The previous version routed through a BMS 256×256 spec
@@ -3512,6 +3666,54 @@ export class CoreGameplayView<TOptions extends CoreGameplayViewOptions = CoreGam
     this.bgaLayerPool.end();
   }
 
+  /**
+   * The slot to show for the BGA cue `key` that fired at `cueSeconds`. BMS spec — `#SWBGAxx fr:tot:lp:ARGB N1 N2 ...`
+   * declares an animated BGA: when the cue's slot matches a parsed entry, advance through its frame list at the
+   * authored interval and show the source `#BMPxx` of the currently-visible frame. Otherwise (no `#SWBGAxx` entry, or
+   * no cue time as for POOR) `key` itself.
+   */
+  private resolveBgaFrameKey(key: string, cueSeconds: number | undefined, seconds: number): string {
+    if (cueSeconds === undefined) return key;
+    const swBga = this.switchingBgas.get(key);
+    if (!swBga) return key;
+    const elapsedMs = Math.max(0, (seconds - cueSeconds) * 1000);
+    return pickSwitchingBgaFrame(swBga, elapsedMs) || key;
+  }
+
+  /**
+   * Cropped copies of the `#BGAxx` sub-region textures, for a skin that composites the BGA itself (a canvas image can't
+   * carry the crop the way a Pixi sub-texture does). `null` while the crop is being made.
+   */
+  private readonly skinBgaCrops = new Map<Texture, ImageBitmap | null>();
+
+  /**
+   * The image behind a loaded BGA texture, for `frame.bga`: the decoded bitmap or the `<video>` element itself, or a
+   * cropped copy for a `#BGAxx` sub-region (made on first use, so `undefined` for a frame or two).
+   */
+  private resolveSkinBgaImage(texture: Texture | undefined): BeMusicImage | undefined {
+    if (!texture) return undefined;
+    const source = texture.source;
+    const resource = source.resource as BeMusicImage | undefined;
+    if (!resource) return undefined;
+    const { frame } = texture;
+    if (frame.x === 0 && frame.y === 0 && frame.width === source.width && frame.height === source.height) {
+      return resource;
+    }
+    const crop = this.skinBgaCrops.get(texture);
+    if (crop !== undefined) return crop ?? undefined;
+    this.skinBgaCrops.set(texture, null);
+    createImageBitmap(resource, frame.x, frame.y, frame.width, frame.height).then(
+      (bitmap) => {
+        if (this.disposed || !this.skinBgaCrops.has(texture)) bitmap.close();
+        else this.skinBgaCrops.set(texture, bitmap);
+      },
+      () => {
+        // Leave the `null` marker: the crop isn't retried, the sub-region just doesn't show.
+      },
+    );
+    return undefined;
+  }
+
   /**
    * Drives playback of a video BGA on a single track (`base` or `layer`). When the cue's key matches a known video: -
    * first time it fires, `play()` from the cue's start offset - re-firing the same cue is a no-op (video keeps playing)
@@ -3593,6 +3795,7 @@ export class CoreGameplayView<TOptions extends CoreGameplayViewOptions = CoreGam
   private resolveSkinlessGameplayChromeRuntime(): SkinlessGameplayChromeRuntime {
     const total = this.score.total > 0 ? this.score.total : 0;
     const seconds = this.currentSeconds();
+    const songLengthSeconds = this.resolveSongDurationSeconds();
     const usesPlayer2 = this.chartPlayVariant !== '9' && this.laneChannels.some((channel) => channel.startsWith('2'));
     const judgeSides: SkinlessGameplayJudgeState[] = [];
     for (const side of ['1P', '2P'] as const) {
@@ -3604,11 +3807,14 @@ export class CoreGameplayView<TOptions extends CoreGameplayViewOptions = CoreGam
         judgeSides.push({ side, judge: state.judge, combo: state.combo });
       }
     }
+    const bpm = this.timingResolver?.bpmAtBeat(this.currentBeat(seconds)) ?? this.song?.bpm;
+    const laneCovers = this.resolveLaneCovers();
+    const visibleMs = this.resolveVisibleMs(laneCovers[0], bpm);
     return {
       songTitle: this.song?.title,
       songArtist: this.song?.artist,
       songGenre: this.song?.genre,
-      bpm: this.timingResolver?.bpmAtBeat(this.currentBeat(seconds)) ?? this.song?.bpm,
+      bpm,
       hiSpeed: this.hiSpeed,
       score: this.score.score,
       exScore: this.score.exScore,
@@ -3631,15 +3837,12 @@ export class CoreGameplayView<TOptions extends CoreGameplayViewOptions = CoreGam
       autoplay: this.options.autoPlay === true,
       hasBga: this.hasBga,
       nowMs: this.playClock(),
-      progressRatio: (() => {
-        const totalSeconds = this.resolveSongDurationSeconds();
-        return totalSeconds > 0 ? Math.max(0, Math.min(1, seconds / totalSeconds)) : 0;
-      })(),
+      progressRatio: songLengthSeconds > 0 ? Math.max(0, Math.min(1, seconds / songLengthSeconds)) : 0,
       beatPhase: (() => {
         const beat = this.currentBeat(seconds);
         return beat - Math.floor(beat);
       })(),
-      rulesetLabel: this.options.replay?.play.judgeRuleset ?? this.options.judgeRuleset ?? 'lr2',
+      rulesetLabel: this.resolveJudgeRuleset(),
       gaugeLabel: this.gaugeState.type ?? 'GROOVE',
       gaugeSurvival: this.gaugeState.survival === true,
       fast: this.fastCount,
@@ -3653,9 +3856,68 @@ export class CoreGameplayView<TOptions extends CoreGameplayViewOptions = CoreGam
       impulseKind: this.lastImpulseKind,
       effects: this.options.beMusicEffects ?? 'full',
       audio: this.audioFrame,
+      song: this.song,
+      lastJudgeDeltaMs: this.judgeTimings.lastDeltaMs,
+      judgeTimings: this.judgeTimings.recent,
+      minBpm: this.chartBpmRange?.minBpm,
+      maxBpm: this.chartBpmRange?.maxBpm,
+      mainBpm: this.chartBpmRange?.mainBpm,
+      songLengthMs: this.song ? songLengthSeconds * 1000 : undefined,
+      // Clamped to the length so the remaining time never runs negative through the audio tail.
+      songElapsedMs: this.song ? Math.min(seconds, songLengthSeconds) * 1000 : undefined,
+      failedAtMs: this.playMoments.failedAtMs,
+      allNotesDoneAtMs: this.playMoments.allNotesDoneAtMs,
+      outroAtMs: this.playMoments.outroAtMs,
+      gaugeRiseAtMs: this.playMoments.gaugeRiseAtMs,
+      gaugeMaxAtMs: this.playMoments.gaugeMaxAtMs,
+      // Shared by reference: the arrays only grow during a play, and skins are told not to mutate them.
+      scoreHistory: this.scoreHistory,
+      gaugeHistory: this.gaugeHistory,
+      judgeWindows: this.judgeWindows,
+      laneCovers,
+      visibleMs,
+      greenNumber: visibleMs === undefined ? undefined : resolveGreenNumber(visibleMs),
     };
   }
 
+  /**
+   * The lane covers of each play side with lanes, as {@link renderShutter} draws them (whether or not it does: a skin
+   * that sets `drawsLaneCover` reads them to draw its own). The array and its entries are reused across frames.
+   */
+  private resolveLaneCovers(): readonly BeMusicLaneCover[] {
+    let cache = this.laneCovers;
+    if (!cache || cache.channels !== this.laneChannels) {
+      const covers: BeMusicLaneCover[] = [];
+      for (const side of ['1P', '2P'] as const) {
+        if (this.laneChannels.some((channel) => isChannelOnSide(channel, side))) {
+          covers.push({ side, sudden: 0, hidden: 0, lift: 0 });
+        }
+      }
+      cache = { channels: this.laneChannels, covers };
+      this.laneCovers = cache;
+    }
+    const { laneCover, shutter } = this.options;
+    for (const cover of cache.covers) {
+      const mode = (cover.side === '1P' ? this.options.hiddenSudden1P : this.options.hiddenSudden2P) ?? 'OFF';
+      fillLaneCover(cover, mode, shutter, laneCover);
+    }
+    return cache.covers;
+  }
+
+  /**
+   * How long a note stays visible below `cover` (the first play side's) at the current scroll and BPM, over the lanes
+   * laid out last frame. `undefined` until the lanes are laid out or while the BPM is unknown. `#SCROLL` / `#SPEED`
+   * changes are not taken into account.
+   */
+  private resolveVisibleMs(cover: BeMusicLaneCover | undefined, bpm: number | undefined): number | undefined {
+    if (this.laneX.size === 0 || bpm === undefined || !(bpm > 0)) return undefined;
+    let laneHeight = 0;
+    for (const lane of this.laneX.values()) {
+      laneHeight = Math.max(laneHeight, lane.bottom - lane.top);
+    }
+    return resolveNoteVisibleMs(laneHeight, cover?.sudden ?? 0, cover?.lift ?? 0, PIXELS_PER_BEAT * this.hiSpeed, bpm);
+  }
+
   /**
    * Paints the chrome layers (`skinLayer` / `overlayLayer`) for this frame and sets their transforms together with the
    * BGA layer's. The default draws the skinless chrome through `skinlessChromeRenderer` (or the be-music skin's
@@ -3755,6 +4017,10 @@ export class CoreGameplayView<TOptions extends CoreGameplayViewOptions = CoreGam
         top,
         bottom,
         beam: this.resolveFallbackLaneLaserAlpha(channel),
+        pressedAtMs: this.lanePressedAt.get(channel),
+        releasedAtMs: this.laneReleasedAt.get(channel),
+        holding: this.longNotes.isHolding(channel),
+        holdStartedAtMs: this.longNotes.holdStartedAtMs(channel),
       });
     });
 
@@ -3892,7 +4158,7 @@ export class CoreGameplayView<TOptions extends CoreGameplayViewOptions = CoreGam
         if (yEnd > lane.bottom || y < lane.top - 48) {
           continue;
         }
-        this.renderLongNote(laneIndex, note.channel, lane, y, yEnd);
+        this.renderLongNote(laneIndex, note, lane, y, yEnd);
         continue;
       }
       // Single notes hide the moment their bottom edge passes the judgement-line bottom (= `lane.bottom`). Until then
@@ -4052,6 +4318,25 @@ export class CoreGameplayView<TOptions extends CoreGameplayViewOptions = CoreGam
     if (this.renderThemeMeasureLines({ beats, firstBeatIndex, maxBeat, pixelsPerBeat, beatDistance, top, bottom })) {
       return;
     }
+    const binding = this.skinBinding;
+    if (binding?.drawsMeasureLines) {
+      // The skin draws them: hand it one line per lane run, so double play's gap stays clear.
+      const runs = this.resolveMeasureLineRuns();
+      for (let beatIndex = firstBeatIndex; beatIndex < beats.length; beatIndex += 1) {
+        const beat = beats[beatIndex]!;
+        if (!this.scrollMapper && beat > maxBeat) {
+          break;
+        }
+        const y = bottom - beatDistance(beat) * pixelsPerBeat;
+        if (y < top - 1 || y > bottom + 1) {
+          continue;
+        }
+        for (const run of runs) {
+          binding.addMeasureLine({ side: run.side, x: run.x, w: run.w, y });
+        }
+      }
+      return;
+    }
     // Fallback: simple white strip when the theme draws none. One pooled `Graphics` carries every line — the
     // accumulated rect-fill commands form one batched draw, no per-line allocation.
     const x0 = left.x;
@@ -4070,6 +4355,19 @@ export class CoreGameplayView<TOptions extends CoreGameplayViewOptions = CoreGam
     }
   }
 
+  /** The lane runs of this frame's lanes, recomputed only when their geometry changes. */
+  private resolveMeasureLineRuns(): readonly SideLaneRun[] {
+    let signature = this.laneX.size;
+    for (const lane of this.laneX.values()) {
+      signature = (signature * 31 + lane.x * 7 + lane.w) % 1_000_000_007;
+    }
+    const cached = this.measureLineRuns;
+    if (cached && cached.signature === signature) return cached.runs;
+    const runs = resolveSideLaneRuns(this.laneX);
+    this.measureLineRuns = { signature, runs };
+    return runs;
+  }
+
   private renderSingleNote(laneIndex: number, channel: string, lane: GameplayLaneRect, y: number): void {
     // `y` is where the chart timing intersects the judgement line for this note. We anchor the sprite by its **bottom
     // edge** so the just-timing moment lines up with the bottom edge of the visual note (LR2 / BMS convention) instead
@@ -4088,7 +4386,7 @@ export class CoreGameplayView<TOptions extends CoreGameplayViewOptions = CoreGam
     const kind = resolveBeMusicLaneKind(channel, laneIndex, this.chartPlayVariant);
     const binding = this.skinBinding;
     if (binding) {
-      binding.addNote({ kind, x: lane.x, w: lane.w, y });
+      binding.addNote({ kind, x: lane.x, w: lane.w, y, autoplay: this.isAutoplayedChannel(channel) });
       return;
     }
     const graphic = this.noteLayerPool.acquireGraphics();
@@ -4103,11 +4401,12 @@ export class CoreGameplayView<TOptions extends CoreGameplayViewOptions = CoreGam
    */
   private renderLongNote(
     laneIndex: number,
-    channel: string,
+    note: RuntimeNote,
     lane: GameplayLaneRect,
     yStart: number,
     yEnd: number,
   ): void {
+    const channel = note.channel;
     // `yStart` / `yEnd` are the chart-time intersections with the judgement line. With the bottom-edge anchor
     // convention (matching LR2 / BMS): - LN_START's *bottom edge* sits at `yStart` (just-timing of the head) - LN_END's
     // *bottom edge* sits at `yEnd` (just-timing of the tail) The body fills the band between them; we clamp the bottom
@@ -4133,7 +4432,16 @@ export class CoreGameplayView<TOptions extends CoreGameplayViewOptions = CoreGam
       const kind = resolveBeMusicLaneKind(channel, laneIndex, this.chartPlayVariant);
       const binding = this.skinBinding;
       if (binding) {
-        binding.addLongNote({ kind, x: lane.x, w: lane.w, top, bottom });
+        binding.addLongNote({
+          kind,
+          x: lane.x,
+          w: lane.w,
+          top,
+          bottom,
+          mode: this.resolveLongNoteMode(note),
+          state: this.longNotes.stateOf(channel, note.beat, note.judged),
+          autoplay: this.isAutoplayedChannel(channel),
+        });
       } else {
         const graphic = this.noteLayerPool.acquireGraphics();
         graphic.label = `ln-body-fallback[lane=${laneIndex},ch=${channel}]`;
@@ -4293,6 +4601,9 @@ export class CoreGameplayView<TOptions extends CoreGameplayViewOptions = CoreGam
         // ruleset's gauge line-up and runs its curve, so HARD really drains and DEATH really ends the run.
         // `resolveSelectedGauge` prefers the replay's recorded pick, so a played-back log runs its original gauge.
         gauge: this.resolveSelectedGauge(),
+        // The engine reports the ruleset after applying the judge ruleset, the debug window override, and (for a
+        // replay) the recorded settings below, so the windows skins see are the ones the run is judged with.
+        onRulesetResolved: (info) => this.applyResolvedRuleset(info),
         signal: (this.sharedEngineAbortController = new AbortController()).signal,
         ...(this.options.replay !== undefined
           ? {
@@ -4438,8 +4749,16 @@ export class CoreGameplayView<TOptions extends CoreGameplayViewOptions = CoreGam
       const next = summary.gauge.current;
       if (next !== previous) {
         this.onThemeEvent({ kind: 'gauge', previous, next });
+        // Latch the first rise above the starting value and the first time the gauge tops out.
+        const moments = this.playMoments;
+        if (next > summary.gauge.initial) moments.gaugeRiseAtMs ??= this.playClock();
+        if (next >= summary.gauge.max) moments.gaugeMaxAtMs ??= this.playClock();
       }
+      if (summary.gauge.failedMidPlay === true) this.playMoments.failedAtMs ??= this.playClock();
     }
+    // `poor` excludes empty POORs, so this counts judged notes only.
+    const judged = summary.perfect + summary.great + summary.good + summary.bad + summary.poor;
+    if (summary.total > 0 && judged >= summary.total) this.playMoments.allNotesDoneAtMs ??= this.playClock();
     // Note: the per-note `judged` flag is no longer synced here. The renderer's `this.notes` /
     // `this.mineNotes` are references into the same `PreparedPlaybackChartData` instance the engine is
     // judging against (handed in via `engineOptions.preparedChart`), so when the engine sets
@@ -4512,10 +4831,34 @@ export class CoreGameplayView<TOptions extends CoreGameplayViewOptions = CoreGam
       case 'clear-poor-bga':
         this.lastPoorAt = -Number.POSITIVE_INFINITY;
         break;
+      case 'long-note-start':
+        this.longNotes.start(command.channel, command.beat, command.mode, this.playClock());
+        break;
+      case 'long-note-end':
+        this.longNotes.end(command.channel, command.outcome);
+        break;
     }
     this.onThemeEvent({ kind: 'lane-command', command });
   }
 
+  /** Keeps the engine's long-note style and its judge windows (converted to ms) for the skin runtime. */
+  private applyResolvedRuleset(info: PlayerRulesetInfo): void {
+    this.longNoteStyle = info.longNoteStyle;
+    this.judgeWindows = toBeMusicJudgeWindows(info.windows);
+  }
+
+  /**
+   * The mode a long note plays in: the one the engine announced while it is held, otherwise worked out from the
+   * ruleset's long-note style (unknown until the engine reports its ruleset).
+   */
+  private resolveLongNoteMode(note: RuntimeNote): BeMusicLongNote['mode'] {
+    const held = this.longNotes.heldMode(note.channel, note.beat);
+    if (held !== undefined) return held;
+    return this.longNoteStyle === undefined
+      ? undefined
+      : resolveBeMusicLongNoteMode(this.longNoteStyle, note.longNoteMode);
+  }
+
   /**
    * Pushes one sample to {@link gaugeHistory} / {@link scoreHistory} using the current engine-derived
    * \`gaugeState.current\` and \`score.exScore\` snapshots. Called from the shared-engine command handler when
@@ -4549,9 +4892,11 @@ export class CoreGameplayView<TOptions extends CoreGameplayViewOptions = CoreGam
     this.tracker.combo = state.combo;
     if (state.combo > this.maxCombo) this.maxCombo = state.combo;
     const judgeKind = state.judge as JudgeKind;
+    // Autoplay hits, mine BADs, and missed notes carry no `deltaMs`; the log skips them.
+    this.judgeTimings.push(this.playClock(), state.judge, state.deltaMs, state.channel);
     this.publishJudge(judgeKind, this.currentSeconds(), state.channel);
     if ((judgeKind === 'PERFECT' || judgeKind === 'GREAT') && state.channel) {
-      this.triggerBomb(state.channel);
+      this.triggerBomb(state.channel, judgeKind);
     }
   }
 
@@ -4565,6 +4910,7 @@ export class CoreGameplayView<TOptions extends CoreGameplayViewOptions = CoreGam
   private handleSharedEngineChartFinished(finalSummary: Readonly<PlayerSummary> | undefined): void {
     if (this.disposed || this.chartEnded) return;
     this.chartEnded = true;
+    this.playMoments.outroAtMs ??= this.playClock();
     const delayMs = resolvePostChartResultDelayMs(this.notes, this.timingResolver, this.currentSeconds());
     // Hold the play scene for roughly two measures after the final note. This keeps the last hit / final keysound from
     // being swallowed by an immediate result transition while still falling back to a one-frame defer on empty charts or
diff --git a/packages/player-web/src/scene/core/judge-timing-log.test.ts b/packages/player-web/src/scene/core/judge-timing-log.test.ts
new file mode 100644
index 000000000..0d3d473f7
--- /dev/null
+++ b/packages/player-web/src/scene/core/judge-timing-log.test.ts
@@ -0,0 +1,66 @@
+import { describe, expect, it } from 'vite-plus/test';
+import { JudgeTimingLog, RECENT_JUDGE_TIMING_COUNT } from './judge-timing-log.ts';
+
+describe('JudgeTimingLog', () => {
+  it('records timed judgements oldest first, with their channel', () => {
+    const log = new JudgeTimingLog();
+    expect(log.push(100, 'PERFECT', -3, '11')).toBe(true);
+    expect(log.push(200, 'GREAT', 12)).toBe(true);
+    expect(log.recent).toEqual([
+      { atMs: 100, deltaMs: -3, judge: 'PERFECT', channel: '11' },
+      { atMs: 200, deltaMs: 12, judge: 'GREAT' },
+    ]);
+    expect(log.all).toEqual(log.recent);
+    expect(log.lastDeltaMs).toBe(12);
+  });
+
+  it('skips judgements without a finite timing or a known grade', () => {
+    const log = new JudgeTimingLog();
+    expect(log.push(0, 'POOR', undefined)).toBe(false);
+    expect(log.push(0, 'BAD', Number.NaN)).toBe(false);
+    expect(log.push(0, 'READY', 5)).toBe(false);
+    expect(log.all).toEqual([]);
+    expect(log.recent).toEqual([]);
+    expect(log.lastDeltaMs).toBeUndefined();
+  });
+
+  it('keeps only the latest judgements in recent, oldest first, while all keeps every one', () => {
+    const log = new JudgeTimingLog(3);
+    for (let index = 0; index < 5; index += 1) log.push(index, 'GOOD', index);
+    expect(log.recent.map((timing) => timing.deltaMs)).toEqual([2, 3, 4]);
+    log.push(5, 'GOOD', 5);
+    expect(log.recent.map((timing) => timing.deltaMs)).toEqual([3, 4, 5]);
+    expect(log.all.map((timing) => timing.deltaMs)).toEqual([0, 1, 2, 3, 4, 5]);
+  });
+
+  it('defaults to the documented 64 recent judgements', () => {
+    const log = new JudgeTimingLog();
+    for (let index = 0; index < 100; index += 1) log.push(index, 'PERFECT', index);
+    expect(RECENT_JUDGE_TIMING_COUNT).toBe(64);
+    expect(log.recent).toHaveLength(64);
+    expect(log.recent[0]!.deltaMs).toBe(36);
+    expect(log.recent.at(-1)!.deltaMs).toBe(99);
+  });
+
+  it('hands back the same recent array between judgements', () => {
+    const log = new JudgeTimingLog(2);
+    log.push(0, 'PERFECT', 1);
+    const first = log.recent;
+    expect(log.recent).toBe(first);
+    log.push(1, 'PERFECT', 2);
+    expect(log.recent).toBe(first);
+  });
+
+  it('starts a fresh all list on clear, leaving the previous one intact', () => {
+    const log = new JudgeTimingLog();
+    log.push(0, 'PERFECT', 1);
+    const previous = log.all;
+    log.clear();
+    expect(previous).toHaveLength(1);
+    expect(log.all).toEqual([]);
+    expect(log.recent).toEqual([]);
+    expect(log.lastDeltaMs).toBeUndefined();
+    log.push(1, 'GREAT', -4);
+    expect(log.recent).toEqual([{ atMs: 1, deltaMs: -4, judge: 'GREAT' }]);
+  });
+});
diff --git a/packages/player-web/src/scene/core/judge-timing-log.ts b/packages/player-web/src/scene/core/judge-timing-log.ts
new file mode 100644
index 000000000..cee5cd308
--- /dev/null
+++ b/packages/player-web/src/scene/core/judge-timing-log.ts
@@ -0,0 +1,81 @@
+import type { BeMusicJudge, BeMusicJudgeTiming } from '@be-music/skin-sdk';
+
+/** How many judgements {@link JudgeTimingLog.recent} keeps. */
+export const RECENT_JUDGE_TIMING_COUNT = 64;
+
+const JUDGES: ReadonlySet<string> = new Set<BeMusicJudge>(['PERFECT', 'GREAT', 'GOOD', 'BAD', 'POOR']);
+
+/**
+ * The timed judgements of one play: every one of them ({@link all}, for the result screen) and the latest
+ * {@link RECENT_JUDGE_TIMING_COUNT} ({@link recent}, for live timing meters). The recent ones sit in a ring buffer and
+ * their oldest-first view is rebuilt in place only when a judgement arrives, so reading it every frame allocates
+ * nothing.
+ */
+export class JudgeTimingLog {
+  private readonly ring: BeMusicJudgeTiming[] = [];
+  private readonly recentView: BeMusicJudgeTiming[] = [];
+  private head = 0;
+  private dirty = false;
+  private allTimings: BeMusicJudgeTiming[] = [];
+  private latest: number | undefined;
+  private readonly capacity: number;
+
+  // A plain field rather than a parameter property: the benchmarks run this file through Node's type stripping, which
+  // only accepts erasable syntax.
+  constructor(capacity = RECENT_JUDGE_TIMING_COUNT) {
+    this.capacity = capacity;
+  }
+
+  /**
+   * Records one judgement. Ignored (returns `false`) when it carries no finite timing or its grade isn't one of
+   * PERFECT / GREAT / GOOD / BAD / POOR.
+   */
+  push(atMs: number, judge: string, deltaMs: number | undefined, channel?: string): boolean {
+    if (deltaMs === undefined || !Number.isFinite(deltaMs) || !JUDGES.has(judge)) return false;
+    const timing: BeMusicJudgeTiming = { atMs, deltaMs, judge: judge as BeMusicJudge };
+    if (channel !== undefined) timing.channel = channel;
+    this.allTimings.push(timing);
+    this.latest = deltaMs;
+    if (this.ring.length < this.capacity) {
+      this.ring.push(timing);
+    } else {
+      this.ring[this.head] = timing;
+      this.head = (this.head + 1) % this.capacity;
+    }
+    this.dirty = true;
+    return true;
+  }
+
+  /** Signed offset (ms) of the latest recorded judgement, or `undefined` before the first. */
+  get lastDeltaMs(): number | undefined {
+    return this.latest;
+  }
+
+  /** The latest judgements, oldest first. The same array every call: read it, never keep it across judgements. */
+  get recent(): readonly BeMusicJudgeTiming[] {
+    if (this.dirty) {
+      const { ring, head, recentView } = this;
+      recentView.length = ring.length;
+      for (let index = 0; index < ring.length; index += 1) {
+        recentView[index] = ring[(head + index) % ring.length]!;
+      }
+      this.dirty = false;
+    }
+    return this.recentView;
+  }
+
+  /** Every recorded judgement of the play, oldest first. */
+  get all(): readonly BeMusicJudgeTiming[] {
+    return this.allTimings;
+  }
+
+  /** Forgets everything, for a new play. {@link all} becomes a fresh array, so a previous play's list stays intact. */
+  clear(): void {
+    this.ring.length = 0;
+    this.recentView.length = 0;
+    this.head = 0;
+    this.dirty = false;
+    this.allTimings = [];
+    this.latest = undefined;
+  }
+}
diff --git a/packages/player-web/src/scene/core/judge-windows.test.ts b/packages/player-web/src/scene/core/judge-windows.test.ts
new file mode 100644
index 000000000..2c44ae0f3
--- /dev/null
+++ b/packages/player-web/src/scene/core/judge-windows.test.ts
@@ -0,0 +1,60 @@
+import type { JudgeWindowSetUs, RulesetWindowTables } from '@be-music/player/core/engine';
+import { describe, expect, it } from 'vite-plus/test';
+import { toBeMusicJudgeWindows } from './judge-windows.ts';
+
+const KEY: JudgeWindowSetUs = {
+  judges: [
+    [-20_000, 20_000],
+    [-60_000, 50_000],
+    [-150_000, 120_000],
+    [-280_000, 220_000],
+  ],
+  ms: [-0, 1_000_000],
+};
+const SCRATCH: JudgeWindowSetUs = {
+  judges: [
+    [-30_000, 30_000],
+    [-70_000, 70_000],
+    [-160_000, 160_000],
+    [-290_000, 290_000],
+  ],
+  ms: [-500_000, 500_000],
+};
+const LONG_END: JudgeWindowSetUs = {
+  judges: [
+    [-120_000, 120_000],
+    [-160_000, 160_000],
+    [-200_000, 200_000],
+    [-280_000, 220_000],
+  ],
+};
+
+describe('toBeMusicJudgeWindows', () => {
+  it('turns the µs window pairs into positive early / late ms', () => {
+    const tables: RulesetWindowTables = {
+      note: KEY,
+      scratch: SCRATCH,
+      longNoteEnd: LONG_END,
+      longScratchEnd: LONG_END,
+    };
+    const windows = toBeMusicJudgeWindows(tables);
+    expect(windows.note).toEqual({
+      perfect: { earlyMs: 20, lateMs: 20 },
+      great: { earlyMs: 50, lateMs: 60 },
+      good: { earlyMs: 120, lateMs: 150 },
+      bad: { earlyMs: 220, lateMs: 280 },
+      emptyPoor: { earlyMs: 1000, lateMs: 0 },
+    });
+    expect(Object.is(windows.note.emptyPoor?.lateMs, 0)).toBe(true);
+    expect(windows.scratch.bad).toEqual({ earlyMs: 290, lateMs: 290 });
+    expect(windows.scratch.emptyPoor).toEqual({ earlyMs: 500, lateMs: 500 });
+  });
+
+  it('leaves out the empty POOR window where the ruleset has none', () => {
+    const tables: RulesetWindowTables = { note: KEY, scratch: SCRATCH, longNoteEnd: LONG_END, longScratchEnd: KEY };
+    const { longNoteEnd } = toBeMusicJudgeWindows(tables);
+    expect(longNoteEnd.emptyPoor).toBeUndefined();
+    expect('emptyPoor' in longNoteEnd).toBe(false);
+    expect(longNoteEnd.perfect).toEqual({ earlyMs: 120, lateMs: 120 });
+  });
+});
diff --git a/packages/player-web/src/scene/core/judge-windows.ts b/packages/player-web/src/scene/core/judge-windows.ts
new file mode 100644
index 000000000..7ba700d96
--- /dev/null
+++ b/packages/player-web/src/scene/core/judge-windows.ts
@@ -0,0 +1,36 @@
+import type { JudgeWindowSetUs, RulesetWindowTables, WindowPairUs } from '@be-music/player/core/engine';
+import type { BeMusicJudgeWindow, BeMusicJudgeWindowSet, BeMusicJudgeWindows } from '@be-music/skin-sdk';
+
+/**
+ * One engine window pair (µs, `[lateBound <= 0, earlyBound >= 0]` in the ruleset's `noteTime - inputTime`
+ * convention) as the skin SDK's pair of positive ms reaches.
+ */
+function toJudgeWindow([lateBoundUs, earlyBoundUs]: WindowPairUs): BeMusicJudgeWindow {
+  // `Math.max` folds an early-only window's `-0` late reach into `0`.
+  return { earlyMs: Math.max(0, earlyBoundUs) / 1000, lateMs: Math.max(0, -lateBoundUs) / 1000 };
+}
+
+function toJudgeWindowSet(set: JudgeWindowSetUs): BeMusicJudgeWindowSet {
+  const [perfect, great, good, bad] = set.judges;
+  const windows: BeMusicJudgeWindowSet = {
+    perfect: toJudgeWindow(perfect),
+    great: toJudgeWindow(great),
+    good: toJudgeWindow(good),
+    bad: toJudgeWindow(bad),
+  };
+  if (set.ms !== undefined) windows.emptyPoor = toJudgeWindow(set.ms);
+  return windows;
+}
+
+/**
+ * The engine's resolved window tables (µs) as the {@link BeMusicJudgeWindows} a be-music skin reads (ms). The
+ * scratch lane's long-note end has its own table in the engine; the SDK carries one `longNoteEnd`, so the key lanes'
+ * table stands for both.
+ */
+export function toBeMusicJudgeWindows(tables: RulesetWindowTables): BeMusicJudgeWindows {
+  return {
+    note: toJudgeWindowSet(tables.note),
+    scratch: toJudgeWindowSet(tables.scratch),
+    longNoteEnd: toJudgeWindowSet(tables.longNoteEnd),
+  };
+}
diff --git a/packages/player-web/src/scene/core/lane-cover.test.ts b/packages/player-web/src/scene/core/lane-cover.test.ts
new file mode 100644
index 000000000..4a1c51d9d
--- /dev/null
+++ b/packages/player-web/src/scene/core/lane-cover.test.ts
@@ -0,0 +1,65 @@
+import { describe, expect, it } from 'vite-plus/test';
+import type { BeMusicLaneCover } from '../../skin/be-music/types.ts';
+import { fillLaneCover, resolveGreenNumber, resolveNoteVisibleMs } from './lane-cover.ts';
+
+const blank = (): BeMusicLaneCover => ({ side: '1P', sudden: 9, hidden: 9, lift: 9 });
+
+describe('fillLaneCover', () => {
+  it('covers the top under SUDDEN, the bottom under HIDDEN, and both under HID+SUD', () => {
+    expect(fillLaneCover(blank(), 'SUDDEN', 0.3, true)).toEqual({ side: '1P', sudden: 0.3, hidden: 0, lift: 0 });
+    expect(fillLaneCover(blank(), 'HIDDEN', 0.3, true)).toEqual({ side: '1P', sudden: 0, hidden: 0.3, lift: 0 });
+    expect(fillLaneCover(blank(), 'HID+SUD', 0.3, true)).toEqual({ side: '1P', sudden: 0.3, hidden: 0.3, lift: 0 });
+  });
+
+  it('covers nothing when the mode is OFF or LANE COVER is switched off', () => {
+    expect(fillLaneCover(blank(), 'OFF', 0.3, true)).toEqual({ side: '1P', sudden: 0, hidden: 0, lift: 0 });
+    expect(fillLaneCover(blank(), 'HID+SUD', 0.3, false)).toEqual({ side: '1P', sudden: 0, hidden: 0, lift: 0 });
+  });
+
+  it('defaults the shutter to a quarter and clamps it to 0..1, like the scene', () => {
+    expect(fillLaneCover(blank(), 'SUDDEN', undefined, undefined).sudden).toBe(0.25);
+    expect(fillLaneCover(blank(), 'SUDDEN', 1.5, true).sudden).toBe(1);
+    expect(fillLaneCover(blank(), 'HIDDEN', -0.2, true).hidden).toBe(0);
+  });
+
+  it('writes into the object it is given', () => {
+    const target = blank();
+    expect(fillLaneCover(target, 'SUDDEN', 0.5, true)).toBe(target);
+  });
+});
+
+describe('resolveNoteVisibleMs', () => {
+  it('measures the lane in beats at the scroll and converts beats to ms at the BPM', () => {
+    // 576 px at 144 px/beat = 4 beats; at 120 BPM one beat is 500 ms.
+    expect(resolveNoteVisibleMs(576, 0, 0, 144, 120)).toBe(2000);
+  });
+
+  it("matches beatoraja's white number for a lane one measure tall at hi-speed 1", () => {
+    const hiSpeed = 2.5;
+    const bpm = 155;
+    const lanecover = 0.2;
+    const pixelsPerBeat = 72 * hiSpeed;
+    const beatoraja = (240_000 / bpm / hiSpeed) * (1 - lanecover);
+    expect(resolveNoteVisibleMs(72 * 4, lanecover, 0, pixelsPerBeat, bpm)).toBeCloseTo(beatoraja, 9);
+  });
+
+  it('subtracts SUDDEN+ and LIFT from the travelled height', () => {
+    expect(resolveNoteVisibleMs(576, 0.25, 0.25, 144, 120)).toBe(1000);
+    expect(resolveNoteVisibleMs(576, 0.8, 0.5, 144, 120)).toBe(0);
+  });
+
+  it('reports 0 without a usable scroll, BPM, or lane', () => {
+    expect(resolveNoteVisibleMs(576, 0, 0, 0, 120)).toBe(0);
+    expect(resolveNoteVisibleMs(576, 0, 0, 144, 0)).toBe(0);
+    expect(resolveNoteVisibleMs(576, 0, 0, 144, Number.NaN)).toBe(0);
+    expect(resolveNoteVisibleMs(0, 0, 0, 144, 120)).toBe(0);
+  });
+});
+
+describe('resolveGreenNumber', () => {
+  it('takes three fifths of the visible time, rounded', () => {
+    expect(resolveGreenNumber(2000)).toBe(1200);
+    expect(resolveGreenNumber(1001)).toBe(601);
+    expect(resolveGreenNumber(0)).toBe(0);
+  });
+});
diff --git a/packages/player-web/src/scene/core/lane-cover.ts b/packages/player-web/src/scene/core/lane-cover.ts
new file mode 100644
index 000000000..5d68a766a
--- /dev/null
+++ b/packages/player-web/src/scene/core/lane-cover.ts
@@ -0,0 +1,48 @@
+import type { BeMusicLaneCover } from '../../skin/be-music/types.ts';
+
+/** The HIDDEN / SUDDEN mask picked for one play side. */
+export type LaneCoverMode = 'OFF' | 'HIDDEN' | 'SUDDEN' | 'HID+SUD';
+
+/**
+ * Writes one side's lane cover into `target` (reused across frames, so the per-frame runtime allocates nothing): the
+ * fraction of the lane height covered at the top (SUDDEN+) and just above the judgement line (HIDDEN+). Mirrors the
+ * scene's own shutter: nothing is covered while LANE COVER is off (`enabled === false`) or the mode is `OFF`, and
+ * `shutter` (default 0.25) is clamped to 0..1 and applies to both ends under HID+SUD. LIFT isn't supported, so `lift`
+ * stays 0.
+ */
+export function fillLaneCover(
+  target: BeMusicLaneCover,
+  mode: LaneCoverMode,
+  shutter: number | undefined,
+  enabled: boolean | undefined,
+): BeMusicLaneCover {
+  const ratio = enabled === false || mode === 'OFF' ? 0 : Math.max(0, Math.min(1, shutter ?? 0.25));
+  target.sudden = mode === 'SUDDEN' || mode === 'HID+SUD' ? ratio : 0;
+  target.hidden = mode === 'HIDDEN' || mode === 'HID+SUD' ? ratio : 0;
+  target.lift = 0;
+  return target;
+}
+
+/**
+ * How long (ms) a note stays on screen, from the lower edge of the SUDDEN+ cover down to the judgement line, at the
+ * current scroll: `laneHeightPx` scaled by the uncovered part (`1 - suddenRatio - liftRatio`), travelled at
+ * `pixelsPerBeat`, one beat lasting `60000 / bpm` ms. This is beatoraja's white number (`240000 / bpm / hispeed ×
+ * (1 - lanecover)` for a lane one measure tall) expressed in the core view's pixel scroll. HIDDEN+ is not subtracted:
+ * like beatoraja, the duration runs to the judgement line. Returns 0 when the scroll or BPM is not positive.
+ */
+export function resolveNoteVisibleMs(
+  laneHeightPx: number,
+  suddenRatio: number,
+  liftRatio: number,
+  pixelsPerBeat: number,
+  bpm: number,
+): number {
+  if (!(pixelsPerBeat > 0) || !(bpm > 0) || !(laneHeightPx > 0)) return 0;
+  const uncovered = Math.max(0, 1 - Math.max(0, suddenRatio) - Math.max(0, liftRatio));
+  return ((laneHeightPx * uncovered) / pixelsPerBeat) * (60_000 / bpm);
+}
+
+/** IIDX-style green number for a visible duration: `visibleMs × 3 / 5`, rounded (beatoraja's `duration_green`). */
+export function resolveGreenNumber(visibleMs: number): number {
+  return Math.round((visibleMs * 3) / 5);
+}
diff --git a/packages/player-web/src/scene/core/long-note-tracker.test.ts b/packages/player-web/src/scene/core/long-note-tracker.test.ts
new file mode 100644
index 000000000..dcffdd1de
--- /dev/null
+++ b/packages/player-web/src/scene/core/long-note-tracker.test.ts
@@ -0,0 +1,74 @@
+import { describe, expect, it } from 'vite-plus/test';
+import { LongNoteTracker, resolveBeMusicLongNoteMode } from './long-note-tracker.ts';
+
+describe('resolveBeMusicLongNoteMode', () => {
+  it('plays every long note as an LN under LR2', () => {
+    expect(resolveBeMusicLongNoteMode('ln', 1)).toBe('ln');
+    expect(resolveBeMusicLongNoteMode('ln', 2)).toBe('ln');
+    expect(resolveBeMusicLongNoteMode('ln', 3)).toBe('ln');
+  });
+
+  it('follows the chart under beatoraja, defaulting to a charge note', () => {
+    expect(resolveBeMusicLongNoteMode('per-note', 1)).toBe('ln');
+    expect(resolveBeMusicLongNoteMode('per-note', 2)).toBe('cn');
+    expect(resolveBeMusicLongNoteMode('per-note', 3)).toBe('hcn');
+    expect(resolveBeMusicLongNoteMode('per-note', undefined)).toBe('cn');
+  });
+
+  it('plays charge notes under IIDX, hell charge where the chart asks', () => {
+    expect(resolveBeMusicLongNoteMode('charge', 1)).toBe('cn');
+    expect(resolveBeMusicLongNoteMode('charge', 2)).toBe('cn');
+    expect(resolveBeMusicLongNoteMode('charge', 3)).toBe('hcn');
+  });
+});
+
+describe('LongNoteTracker', () => {
+  it('reads unreached long notes as pending and missed ones as dropped', () => {
+    const tracker = new LongNoteTracker();
+    expect(tracker.stateOf('11', 4, false)).toBe('pending');
+    expect(tracker.stateOf('11', 4, true)).toBe('dropped');
+    expect(tracker.isHolding('11')).toBe(false);
+    expect(tracker.holdStartedAtMs('11')).toBeUndefined();
+  });
+
+  it('tracks a hold from start to completion', () => {
+    const tracker = new LongNoteTracker();
+    tracker.start('11', 4, 'cn', 1200);
+    expect(tracker.stateOf('11', 4, true)).toBe('held');
+    expect(tracker.isHolding('11')).toBe(true);
+    expect(tracker.holdStartedAtMs('11')).toBe(1200);
+    expect(tracker.heldMode('11', 4)).toBe('cn');
+    expect(tracker.heldMode('11', 8)).toBeUndefined();
+    // Other lanes and later notes on the lane are unaffected.
+    expect(tracker.isHolding('12')).toBe(false);
+    expect(tracker.stateOf('11', 8, false)).toBe('pending');
+
+    tracker.end('11', 'complete');
+    expect(tracker.stateOf('11', 4, true)).toBe('done');
+    expect(tracker.isHolding('11')).toBe(false);
+    expect(tracker.holdStartedAtMs('11')).toBeUndefined();
+    expect(tracker.heldMode('11', 4)).toBeUndefined();
+  });
+
+  it('remembers each finished long note on a lane', () => {
+    const tracker = new LongNoteTracker();
+    tracker.start('16', 4, 'ln', 0);
+    tracker.end('16', 'dropped');
+    tracker.start('16', 12, 'ln', 3000);
+    expect(tracker.stateOf('16', 4, true)).toBe('dropped');
+    expect(tracker.stateOf('16', 12, true)).toBe('held');
+    tracker.end('16', 'complete');
+    expect(tracker.stateOf('16', 4, true)).toBe('dropped');
+    expect(tracker.stateOf('16', 12, true)).toBe('done');
+  });
+
+  it('ignores an end without a hold, and forgets everything on clear', () => {
+    const tracker = new LongNoteTracker();
+    tracker.end('11', 'complete');
+    expect(tracker.stateOf('11', 4, false)).toBe('pending');
+    tracker.start('11', 4, 'hcn', 10);
+    tracker.clear();
+    expect(tracker.isHolding('11')).toBe(false);
+    expect(tracker.stateOf('11', 4, false)).toBe('pending');
+  });
+});
diff --git a/packages/player-web/src/scene/core/long-note-tracker.ts b/packages/player-web/src/scene/core/long-note-tracker.ts
new file mode 100644
index 000000000..e7aca1728
--- /dev/null
+++ b/packages/player-web/src/scene/core/long-note-tracker.ts
@@ -0,0 +1,96 @@
+import type { LongNoteStyle } from '@be-music/player/core/engine';
+import type { PlayerUiLongNoteMode, PlayerUiLongNoteOutcome } from '@be-music/player/core/ui-signal-bus';
+import type { BeMusicLongNoteMode, BeMusicLongNoteState } from '@be-music/skin-sdk';
+
+/**
+ * How a ruleset plays a chart long note, mirroring the engine: LR2 plays every one as an LN, IIDX as a charge note
+ * (hell charge where the chart says 3), beatoraja follows the chart. A chart note without a mode is a CN, as in the
+ * engine.
+ */
+export function resolveBeMusicLongNoteMode(
+  style: LongNoteStyle,
+  chartMode: 1 | 2 | 3 | undefined,
+): BeMusicLongNoteMode {
+  const mode = chartMode ?? 2;
+  switch (style) {
+    case 'ln':
+      return 'ln';
+    case 'charge':
+      return mode === 3 ? 'hcn' : 'cn';
+    default:
+      return mode === 3 ? 'hcn' : mode === 2 ? 'cn' : 'ln';
+  }
+}
+
+interface LaneLongNotes {
+  /** Head beat of the long note held on the lane, or `undefined` when none is. */
+  activeBeat: number | undefined;
+  activeMode: PlayerUiLongNoteMode;
+  activeStartedAtMs: number;
+  /** How each long note that finished on the lane ended, by head beat. */
+  readonly outcomes: Map<number, PlayerUiLongNoteOutcome>;
+}
+
+/**
+ * Per-lane long-note book-keeping fed by the engine's `long-note-start` / `long-note-end` commands, read back each
+ * frame to label drawn long notes and lanes. Allocates only when a lane sees its first long note and when a long note
+ * finishes; the per-frame reads allocate nothing.
+ */
+export class LongNoteTracker {
+  private readonly lanes = new Map<string, LaneLongNotes>();
+
+  /** A long note with its head at `beat` started being held on `channel` at play-clock `atMs`. */
+  start(channel: string, beat: number, mode: PlayerUiLongNoteMode, atMs: number): void {
+    let lane = this.lanes.get(channel);
+    if (!lane) {
+      lane = { activeBeat: undefined, activeMode: mode, activeStartedAtMs: 0, outcomes: new Map() };
+      this.lanes.set(channel, lane);
+    }
+    lane.activeBeat = beat;
+    lane.activeMode = mode;
+    lane.activeStartedAtMs = atMs;
+  }
+
+  /** The long note held on `channel` finished. Ignored when none is held there. */
+  end(channel: string, outcome: PlayerUiLongNoteOutcome): void {
+    const lane = this.lanes.get(channel);
+    if (!lane || lane.activeBeat === undefined) return;
+    lane.outcomes.set(lane.activeBeat, outcome);
+    lane.activeBeat = undefined;
+  }
+
+  clear(): void {
+    this.lanes.clear();
+  }
+
+  /** True while a long note is held on `channel`. */
+  isHolding(channel: string): boolean {
+    return this.lanes.get(channel)?.activeBeat !== undefined;
+  }
+
+  /** Play-clock ms the hold on `channel` started, while one is held. */
+  holdStartedAtMs(channel: string): number | undefined {
+    const lane = this.lanes.get(channel);
+    return lane?.activeBeat === undefined ? undefined : lane.activeStartedAtMs;
+  }
+
+  /** The mode the engine announced for the long note at `beat` on `channel`, while it is held. */
+  heldMode(channel: string, beat: number): PlayerUiLongNoteMode | undefined {
+    const lane = this.lanes.get(channel);
+    return lane?.activeBeat === beat ? lane.activeMode : undefined;
+  }
+
+  /**
+   * Where the long note with its head at `beat` on `channel` is in its life. `judged` is the note's own flag: a judged
+   * long note that never started was missed at the head, so it reads as dropped.
+   */
+  stateOf(channel: string, beat: number, judged: boolean): BeMusicLongNoteState {
+    const lane = this.lanes.get(channel);
+    if (lane) {
+      if (lane.activeBeat === beat) return 'held';
+      const outcome = lane.outcomes.get(beat);
+      if (outcome !== undefined) return outcome === 'complete' ? 'done' : 'dropped';
+    }
+    return judged ? 'dropped' : 'pending';
+  }
+}
diff --git a/packages/player-web/src/scene/core/measure-line-runs.test.ts b/packages/player-web/src/scene/core/measure-line-runs.test.ts
new file mode 100644
index 000000000..3d94e9128
--- /dev/null
+++ b/packages/player-web/src/scene/core/measure-line-runs.test.ts
@@ -0,0 +1,42 @@
+import { describe, expect, it } from 'vite-plus/test';
+import { resolveSideLaneRuns } from './measure-line-runs.ts';
+
+describe('resolveSideLaneRuns', () => {
+  it('merges edge-to-edge lanes into one run on the side of its leftmost lane', () => {
+    const lanes = new Map([
+      ['11', { x: 40, w: 20 }],
+      ['16', { x: 0, w: 40 }],
+      ['12', { x: 60, w: 20 }],
+    ]);
+    expect(resolveSideLaneRuns(lanes)).toEqual([{ side: '1P', x: 0, w: 80 }]);
+  });
+
+  it('splits double play into one run per side across the gap', () => {
+    const lanes = new Map([
+      ['16', { x: 0, w: 40 }],
+      ['11', { x: 40, w: 20 }],
+      ['21', { x: 200, w: 20 }],
+      ['26', { x: 220, w: 40 }],
+    ]);
+    expect(resolveSideLaneRuns(lanes)).toEqual([
+      { side: '1P', x: 0, w: 60 },
+      { side: '2P', x: 200, w: 60 },
+    ]);
+  });
+
+  it("keeps 9-key's 1x and 2x lanes in one 1P run", () => {
+    const lanes = new Map([
+      ['11', { x: 0, w: 30 }],
+      ['15', { x: 30, w: 30 }],
+      ['22', { x: 60, w: 30 }],
+    ]);
+    expect(resolveSideLaneRuns(lanes)).toEqual([{ side: '1P', x: 0, w: 90 }]);
+  });
+
+  it('tolerates sub-pixel seams and reports nothing for no lanes', () => {
+    expect(resolveSideLaneRuns([['11', { x: 0, w: 20 }] as const, ['12', { x: 20.4, w: 20 }] as const])).toEqual([
+      { side: '1P', x: 0, w: 40.4 },
+    ]);
+    expect(resolveSideLaneRuns(new Map())).toEqual([]);
+  });
+});
diff --git a/packages/player-web/src/scene/core/measure-line-runs.ts b/packages/player-web/src/scene/core/measure-line-runs.ts
new file mode 100644
index 000000000..48b59cd90
--- /dev/null
+++ b/packages/player-web/src/scene/core/measure-line-runs.ts
@@ -0,0 +1,27 @@
+import type { BeMusicSide } from '../../skin/be-music/types.ts';
+
+/** One run of edge-to-edge lanes a measure line crosses, labelled with its play side. */
+export interface SideLaneRun {
+  side: BeMusicSide;
+  x: number;
+  w: number;
+}
+
+/**
+ * Groups lanes (by channel) that touch into runs, left to right, the way `resolveLaneRuns` does — one run in single
+ * play and in 9-key, one per side in double play — and labels each run with the side of its leftmost lane (`2x`
+ * channels are 2P, everything else 1P). A measure line drawn once per run never crosses the gap between the sides.
+ */
+export function resolveSideLaneRuns(lanes: Iterable<readonly [string, { x: number; w: number }]>): SideLaneRun[] {
+  const sorted = [...lanes].sort((a, b) => a[1].x - b[1].x);
+  const runs: SideLaneRun[] = [];
+  for (const [channel, lane] of sorted) {
+    const last = runs[runs.length - 1];
+    if (last && lane.x <= last.x + last.w + 0.5) {
+      last.w = Math.max(last.w, lane.x + lane.w - last.x);
+    } else {
+      runs.push({ side: channel.startsWith('2') ? '2P' : '1P', x: lane.x, w: lane.w });
+    }
+  }
+  return runs;
+}
diff --git a/packages/player-web/src/scene/core/result.ts b/packages/player-web/src/scene/core/result.ts
index 58fc2ae0f..458d387f4 100644
--- a/packages/player-web/src/scene/core/result.ts
+++ b/packages/player-web/src/scene/core/result.ts
@@ -8,6 +8,8 @@ import type { PixiGameplayResultData } from './result-data.ts';
 import type { BeMusicEffectLevel, BeMusicSkin } from '../../skin/be-music/types.ts';
 import { phantomSkin } from '../../skins/phantom/index.ts';
 import { BeMusicResultBinding, resolveBeMusicSkinStage } from '../../skin/be-music/binding.ts';
+import { SongImageCache } from '../../skin/be-music/song-images.ts';
+import { resolveSongSource } from '../../collection/collection.ts';
 import {
   resolveDesignTextResolution,
   resolveScaledViewport,
@@ -66,6 +68,13 @@ export interface CoreResultViewOptions {
   beMusicSkin?: BeMusicSkin;
   /** Showmanship level for the be-music skin's result entrance. Defaults to `'full'`. */
   beMusicEffects?: BeMusicEffectLevel;
+  /**
+   * The player's stored values for the be-music skin's `settings`, keyed by setting id. They are checked against the
+   * skin's schema (`resolveBeMusicSkinSettings`: unknown ids dropped, invalid values replaced by the default, numbers
+   * clamped) and handed to the skin as `frame.settings`. Omit it to draw with the skin's defaults; change it live with
+   * `setBeMusicSkinSettings`.
+   */
+  beMusicSkinSettings?: Readonly<Record<string, unknown>>;
   /**
    * Loaded song collection — needed to resolve per-song artwork (BANNER / STAGEFILE / BACKBMP) via the same
    * chart-asset loader the select view uses. May be `undefined` for embed scenarios where the result is rendered outside
@@ -115,6 +124,8 @@ export class CoreResultView {
   private readonly fallbackLayer = new Container();
   /** Draws the be-music skin's result on its canvas, shown in `fallbackLayer`; created on first use. */
   private skinBinding: BeMusicResultBinding | undefined;
+  /** Song images handed to the be-music skin (`frame.songImage`); created with the binding. */
+  private songImages: SongImageCache | undefined;
   /** Clip mask for the design rect — keeps theme artwork from bleeding into the letterbox bars. */
   private readonly designClipMask = new Graphics();
   /**
@@ -151,9 +162,21 @@ export class CoreResultView {
    */
   protected readonly timerStartedAt: Map<number, number> = new Map<number, number>();
   protected options: CoreResultViewOptions;
+  /** The player's stored values for the be-music skin's settings (`beMusicSkinSettings`, then the setter). */
+  private beMusicSkinSettings: Readonly<Record<string, unknown>> | undefined;
 
   public constructor(options: CoreResultViewOptions = {}) {
     this.options = options;
+    this.beMusicSkinSettings = options.beMusicSkinSettings;
+  }
+
+  /**
+   * Replaces the player's values for the be-music skin's `settings` (see the `beMusicSkinSettings` option); the skin
+   * draws with them from the next frame. `undefined` goes back to the skin's defaults.
+   */
+  public setBeMusicSkinSettings(stored: Readonly<Record<string, unknown>> | undefined): void {
+    this.beMusicSkinSettings = stored;
+    this.skinBinding?.setSettings(stored);
   }
 
   private get app(): Application {
@@ -321,6 +344,8 @@ export class CoreResultView {
     try {
       this.skinBinding?.dispose();
       this.skinBinding = undefined;
+      this.songImages?.dispose();
+      this.songImages = undefined;
       this.sceneRoot.destroy({ children: true, context: true });
     } catch (error) {
       log.warn('sceneRoot.destroy threw', error);
@@ -401,7 +426,14 @@ export class CoreResultView {
     // A skip (Enter before the chart draw finishes → timer 151) jumps the skin's entrance to its settled layout.
     const skipped = this.timerStartedAt.has(151);
     if (!this.skinBinding) {
-      this.skinBinding = new BeMusicResultBinding(this.options.beMusicSkin ?? phantomSkin);
+      const collection = this.options.collection;
+      this.songImages = new SongImageCache({
+        resolveSource: (song) => (collection ? resolveSongSource(collection, song) : undefined),
+      });
+      this.skinBinding = new BeMusicResultBinding(this.options.beMusicSkin ?? phantomSkin, {
+        songImage: this.songImages.lookup,
+        settings: this.beMusicSkinSettings,
+      });
       this.fallbackLayer.addChild(this.skinBinding.view);
     }
     this.skinBinding.render({
diff --git a/packages/player-web/src/scene/core/select.test.ts b/packages/player-web/src/scene/core/select.test.ts
index b81749857..eb6486d9b 100644
--- a/packages/player-web/src/scene/core/select.test.ts
+++ b/packages/player-web/src/scene/core/select.test.ts
@@ -1,6 +1,14 @@
 import { createEmptyJson } from '@be-music/json';
 import { describe, expect, it } from 'vite-plus/test';
-import { DEFAULT_PLAY_OPTIONS, matchesSearchQuery, wrappedCursorDelta } from './select.ts';
+import {
+  cycleSkinPlayOptionValue,
+  DEFAULT_PLAY_OPTIONS,
+  HISPEED_MAX,
+  matchesSearchQuery,
+  resolveSkinPlayOptionValue,
+  wrappedCursorDelta,
+} from './select.ts';
+import type { PixiPlayOptions } from './select.ts';
 import type { BrowserBrowseEntry, BrowserSongEntry } from '../../collection/types.ts';
 
 /**
@@ -142,3 +150,60 @@ describe('wrappedCursorDelta', () => {
     expect(wrappedCursorDelta(2, 3)).toBe(-1);
   });
 });
+
+describe('resolveSkinPlayOptionValue', () => {
+  it("accepts a value from the option's choices", () => {
+    expect(resolveSkinPlayOptionValue('random1P', 'MIRROR')).toBe('MIRROR');
+    expect(resolveSkinPlayOptionValue('autoScratch1P', true)).toBe(true);
+    expect(resolveSkinPlayOptionValue('sort', 'LEVEL')).toBe('LEVEL');
+  });
+
+  it("rejects a value outside the option's choices", () => {
+    expect(resolveSkinPlayOptionValue('random1P', 'R-RANDOM')).toBeUndefined();
+    expect(resolveSkinPlayOptionValue('autoScratch1P', 1)).toBeUndefined();
+    expect(resolveSkinPlayOptionValue('gauge1P', undefined)).toBeUndefined();
+  });
+
+  it('clamps the numeric options and rejects non-finite or non-numeric values', () => {
+    expect(resolveSkinPlayOptionValue('hiSpeed', 99)).toBe(HISPEED_MAX);
+    expect(resolveSkinPlayOptionValue('hiSpeed', 2.5)).toBe(2.5);
+    expect(resolveSkinPlayOptionValue('shutter', -1)).toBe(0);
+    expect(resolveSkinPlayOptionValue('shutter', Number.NaN)).toBeUndefined();
+    expect(resolveSkinPlayOptionValue('hiSpeed', '3')).toBeUndefined();
+  });
+
+  it('rejects keys that are not play options', () => {
+    // A skin is plain JavaScript at runtime: an unknown key must not grow the play-option object.
+    expect(resolveSkinPlayOptionValue('bogus' as keyof PixiPlayOptions, 3)).toBeUndefined();
+    expect(resolveSkinPlayOptionValue('toString' as keyof PixiPlayOptions, 3)).toBeUndefined();
+  });
+});
+
+describe('cycleSkinPlayOptionValue', () => {
+  it('moves forward and wraps past the last choice', () => {
+    expect(cycleSkinPlayOptionValue('gauge1P', 'GROOVE')).toBe('HARD');
+    expect(cycleSkinPlayOptionValue('gauge1P', 'EASY', 1)).toBe('GROOVE');
+    expect(cycleSkinPlayOptionValue('dpFlip', false)).toBe(true);
+  });
+
+  it('moves backwards with step -1 and wraps past the first choice', () => {
+    expect(cycleSkinPlayOptionValue('gauge1P', 'HARD', -1)).toBe('GROOVE');
+    expect(cycleSkinPlayOptionValue('gauge1P', 'GROOVE', -1)).toBe('EASY');
+    expect(cycleSkinPlayOptionValue('random1P', 'OFF', -1)).toBe('SCATTER');
+  });
+
+  it('treats any other step as one choice in its direction', () => {
+    expect(cycleSkinPlayOptionValue('gauge1P', 'GROOVE', 3)).toBe('HARD');
+    expect(cycleSkinPlayOptionValue('gauge1P', 'GROOVE', -5)).toBe('EASY');
+  });
+
+  it('lands on the first choice when the current value is not one of them', () => {
+    expect(cycleSkinPlayOptionValue('bga', 'BOGUS' as PixiPlayOptions['bga'])).toBe('OFF');
+  });
+
+  it('leaves numeric options and unknown keys alone', () => {
+    expect(cycleSkinPlayOptionValue('hiSpeed', DEFAULT_PLAY_OPTIONS.hiSpeed)).toBeUndefined();
+    expect(cycleSkinPlayOptionValue('shutter', DEFAULT_PLAY_OPTIONS.shutter, -1)).toBeUndefined();
+    expect(cycleSkinPlayOptionValue('bogus' as keyof PixiPlayOptions, 0 as never)).toBeUndefined();
+  });
+});
diff --git a/packages/player-web/src/scene/core/select.ts b/packages/player-web/src/scene/core/select.ts
index 55dac37df..cb7aa6177 100644
--- a/packages/player-web/src/scene/core/select.ts
+++ b/packages/player-web/src/scene/core/select.ts
@@ -15,8 +15,25 @@ import type {
   BrowserSongEntry,
 } from '../../collection/types.ts';
 import { CORE_TEXT_FONT } from './fonts.ts';
-import type { BeMusicEffectLevel, BeMusicSkin } from '../../skin/be-music/types.ts';
+import type {
+  BeMusicBgaMode,
+  BeMusicBgaSize,
+  BeMusicDifficultyFilter,
+  BeMusicEffectLevel,
+  BeMusicGaugeType,
+  BeMusicHiddenSudden,
+  BeMusicHsFix,
+  BeMusicKeysFilter,
+  BeMusicPlayOptionChoices,
+  BeMusicPlayOptions,
+  BeMusicRandomMode,
+  BeMusicSelectActions,
+  BeMusicSelectSort,
+  BeMusicSkin,
+  BeMusicSongRecord,
+} from '../../skin/be-music/types.ts';
 import { BeMusicSelectBinding, resolveBeMusicSkinStage } from '../../skin/be-music/binding.ts';
+import { SongImageCache } from '../../skin/be-music/song-images.ts';
 import { resolveSelectListWindow } from '../../skin/be-music/registry.ts';
 import { phantomSkin } from '../../skins/phantom/index.ts';
 import {
@@ -81,164 +98,30 @@ export interface PixiSongSelectNavigation {
 }
 
 /**
- * Per-session gameplay tweaks the user picks from the select-screen "PLAY OPTIONS" overlay (toggled with Space). The
- * host reads the current snapshot via {@link CoreSongSelectView.getPlayOptions} on song-pick and feeds it into {@link
- * PixiGameplayViewOptions}.
- *
- * Kept deliberately small for now — HiSpeed and AutoPlay are the two choices that change every play session. Note
- * arrangement (RANDOM / MIRROR / S-RANDOM), gauge type, and judge rank would slot in here once the gameplay engine
- * grows the corresponding transformations.
+ * Per-session gameplay tweaks the user picks on the select screen. The shape lives in `@be-music/skin-sdk` as
+ * `BeMusicPlayOptions` so be-music skins can read and change it; these names are kept for existing importers.
  */
-export interface PixiPlayOptions {
-  /**
-   * Visual scroll-speed multiplier. The chart's note-to-second mapping is unchanged; only the on-screen pixels-per-beat
-   * scaling moves. Range matches gameplay's runtime adjust hotkeys (`ArrowUp` / `ArrowDown` during play).
-   */
-  hiSpeed: number;
-  /**
-   * When `true`, every note auto-judges as PERFECT at its scheduled time. Mirrors the LR2 AUTOPLAY skin button
-   * (`#SRC_BUTTON type=16`); the dedicated `onSongAutoPlay` callback also forces this on for that single launch
-   * regardless of what's stored here.
-   */
-  autoPlay: boolean;
-  /**
-   * BGA (background animation) display mode. Mirrors the LR2 `#SRC_BUTTON,type=72` cycle (OFF / ON / AUTOPLAY ONLY).
-   * When `'AUTOPLAY_ONLY'` the BGA renders only when {@link autoPlay} (or the AUTOPLAY skin-button override) is also
-   * active — matches LR2 behavior where AUTOPLAY ONLY hides BGA during regular human-played sessions.
-   */
-  bga: PixiBgaMode;
-  /**
-   * BGA frame size — `'NORMAL'` uses the skin's default `#DST_BGA` rect (op 30), `'EXTEND'` uses the larger variant
-   * gated on op 31. Mirrors `#SRC_BUTTON,type=73`.
-   */
-  bgaSize: PixiBgaSize;
-  /**
-   * Score-graph (per-judge prediction line) display flag. Mirrors `#SRC_BUTTON,type=70` and ops 38 (off) / 39 (on). The
-   * LR2 default skin gates its score-graph chrome on op 39 — toggling this on reveals those elements without needing a
-   * dedicated renderer in the gameplay scene.
-   */
-  scoreGraph: boolean;
-  /**
-   * Difficulty filter for the song-list. `'ALL'` shows every chart; the named values restrict the bar list to charts
-   * whose `#DIFFICULTY` matches the corresponding LR2 enum (1=BEGINNER.. 5=INSANE). Mirrors `#SRC_BUTTON,type=10`
-   * (cycling) and types 91..96 (direct set).
-   */
-  difficultyFilter: PixiDifficultyFilter;
-  /**
-   * Keymode filter for the song-list. `'ALL'` shows every chart; the named values restrict the bar list to charts whose
-   * lane usage matches the corresponding LR2 keymode op (160=7K..164=9K). Mirrors `#SRC_BUTTON,type=11` cycling.
-   */
-  keysFilter: PixiKeysFilter;
-  /**
-   * Sort order for the song-list. Mirrors `#SRC_BUTTON,type=12` cycling (off / level / title / clear). `'CLEAR'` is a
-   * no-op for now — without persisted play history every chart has the same "not played" status, so the sorted order
-   * matches the input order anyway.
-   */
-  sort: PixiSelectSort;
-  /**
-   * HS-FIX mode picked from `#SRC_BUTTON,type=55`. Without HS-FIX (`'OFF'`) the visual scroll rate scales with the
-   * chart's BPM, so high-BPM sections fly past while low-BPM sections crawl. The other modes apply a one-time HS
-   * multiplier so the user's chosen HS feels consistent across the chart:
-   *
-   * - `'MAXBPM'` — pegs the user's HS to the chart's MAX BPM (slower segments scroll proportionally slower).
-   * - `'MINBPM'` — pegs to MIN BPM (faster segments scroll faster).
-   * - `'AVERAGE'` — pegs to the time-weighted average BPM.
-   * - `'CONSTANT'` — adjusts HS at every BPM change so visual scroll is exactly constant. Falls back to `'AVERAGE'`
-   *   behavior for now (per-frame BPM-aware scroll requires a render-pipeline change that hasn't landed yet).
-   */
-  hsFix: PixiHsFix;
-  /**
-   * 1P-side HIDDEN / SUDDEN effect picked from `#SRC_BUTTON,type=50`. Cycles OFF → HIDDEN → SUDDEN → HID+SUD on each
-   * click. Drives the opaque mask over the 1P keyboard / scratch lanes. SP charts only render this side; DP charts pair
-   * it with {@link hiddenSudden2P}.
-   */
-  hiddenSudden1P: PixiHiddenSudden;
-  /**
-   * 2P-side HIDDEN / SUDDEN effect picked from `#SRC_BUTTON,type=51`. Independent from the 1P value — LR2's panel UI
-   * exposes per-side cycle buttons because real players sometimes want, e.g., HIDDEN on their dominant side and OFF on
-   * the other.
-   */
-  hiddenSudden2P: PixiHiddenSudden;
-  /**
-   * Shutter / LANE COVER coverage (0..1) — the fraction of the playfield the LANE COVER (and any active HIDDEN / SUDDEN
-   * masks) occupies. Drives slider `type=4 / 5` on the panel-1 shutter track. Adjustable via the 1P 4-key / 6-key
-   * (`KeyD` / `KeyF`) when panel 1 is open. Independent from {@link laneCover} — height is preserved across ON/OFF
-   * toggles so the user doesn't have to redial it after re-enabling the cover.
-   */
-  shutter: number;
-  /**
-   * LANE COVER ON / OFF toggle. In LR2's SYSTEM OPTION panel this is the binary state shown next to the "LANE COVER"
-   * label — distinct from {@link shutter} (which is the height). When OFF, the gameplay-side mask is hidden regardless
-   * of `shutter`. When ON, the mask renders at the `shutter`-derived height.
-   */
-  laneCover: boolean;
-  /**
-   * 1P side auto-scratch flag picked from `#SRC_BUTTON,type=44`. When true the scratch lane (channel 16) auto-judges as
-   * PERFECT at every note's scheduled time, so the player only has to play the keys.
-   */
-  autoScratch1P: boolean;
-  /** 2P side auto-scratch (`#SRC_BUTTON,type=45`, channel 26). */
-  autoScratch2P: boolean;
-  /**
-   * DP FLIP toggle picked from `#SRC_BUTTON,type=54`. When true, 1P and 2P lane channels are swapped at chart-prepare
-   * time. Only DP charts have lanes on both sides, so SP charts are unaffected. LR2 has no dedicated op for DP FLIP —
-   * it's a pure gameplay-side transformation.
-   */
-  dpFlip: boolean;
-  /**
-   * Note-arrangement mode for the 1P keyboard lanes (channels 11..15 + 18 + 19). Mirrors `#SRC_BUTTON,type=42`. Scratch
-   * (channel 16) is never touched.
-   *
-   * - `OFF` — original chart layout
-   * - `MIRROR` — reverse the lane order (1↔7, 2↔6, 3↔5)
-   * - `RANDOM` — chart-wide random permutation of the lanes
-   * - `S-RANDOM` — per-chord random assignment (chord shapes are NOT preserved)
-   * - `SCATTER` — currently aliased to `RANDOM`; reserved for a future per-measure permutation pass
-   */
-  random1P: PixiRandomMode;
-  /** 2P side note arrangement (channels 21..25 + 28 + 29). */
-  random2P: PixiRandomMode;
-  /**
-   * 1P gauge variant (`#SRC_BUTTON,type=40`):
-   *
-   * - `GROOVE` — LR2 default cumulative gauge (start 20 %, clear 80 %)
-   * - `HARD` — survival gauge (start 100 %, fail at 0 %)
-   * - `DEATH` — instant-death (start 100 %, any miss = 0)
-   * - `EASY` — gentler GROOVE (clear 60 %)
-   */
-  gauge1P: PixiGaugeType;
-  /** 2P gauge variant (`#SRC_BUTTON,type=41`). */
-  gauge2P: PixiGaugeType;
-}
-
+export type PixiPlayOptions = BeMusicPlayOptions;
 /** Allowed values for {@link PixiPlayOptions.difficultyFilter}. */
-export type PixiDifficultyFilter = 'ALL' | 'BEGINNER' | 'NORMAL' | 'HYPER' | 'ANOTHER' | 'INSANE';
-
+export type PixiDifficultyFilter = BeMusicDifficultyFilter;
 /** Allowed values for {@link PixiPlayOptions.keysFilter}. */
-export type PixiKeysFilter = 'ALL' | 'KEYS_5' | 'KEYS_7' | 'KEYS_9' | 'KEYS_10' | 'KEYS_14';
-
+export type PixiKeysFilter = BeMusicKeysFilter;
 /** Allowed values for {@link PixiPlayOptions.sort}. */
-export type PixiSelectSort = 'OFF' | 'LEVEL' | 'TITLE' | 'CLEAR';
-
+export type PixiSelectSort = BeMusicSelectSort;
 /** Allowed values for {@link PixiPlayOptions.hsFix}. */
-export type PixiHsFix = 'OFF' | 'MAXBPM' | 'MINBPM' | 'AVERAGE' | 'CONSTANT';
-
+export type PixiHsFix = BeMusicHsFix;
 /** Allowed values for {@link PixiPlayOptions.hiddenSudden1P} / `hiddenSudden2P`. */
-export type PixiHiddenSudden = 'OFF' | 'HIDDEN' | 'SUDDEN' | 'HID+SUD';
-
+export type PixiHiddenSudden = BeMusicHiddenSudden;
 /** Allowed values for {@link PixiPlayOptions.random1P} / `random2P`. */
-export type PixiRandomMode = 'OFF' | 'MIRROR' | 'RANDOM' | 'S-RANDOM' | 'SCATTER';
-
+export type PixiRandomMode = BeMusicRandomMode;
 /** Allowed values for {@link PixiPlayOptions.gauge1P} / `gauge2P`. */
-export type PixiGaugeType = 'GROOVE' | 'HARD' | 'DEATH' | 'EASY';
-
-const SHUTTER_DEFAULT = 0.25;
-
+export type PixiGaugeType = BeMusicGaugeType;
 /** Allowed values for {@link PixiPlayOptions.bga}. */
-export type PixiBgaMode = 'OFF' | 'ON' | 'AUTOPLAY_ONLY';
-
+export type PixiBgaMode = BeMusicBgaMode;
 /** Allowed values for {@link PixiPlayOptions.bgaSize}. */
-export type PixiBgaSize = 'NORMAL' | 'EXTEND';
+export type PixiBgaSize = BeMusicBgaSize;
+
+const SHUTTER_DEFAULT = 0.25;
 
 /**
  * Cycle order for {@link PixiPlayOptions.bga}. Matches the LR2 default-skin cell order on the `#SRC_BUTTON,type=72`
@@ -394,6 +277,75 @@ function cycleNext<T>(values: readonly T[], current: T): T {
   return values[(index + 1) % values.length]!;
 }
 
+/** Choices of every enum / on-off play option, in their LR2 button cycle order — what be-music skins can pick from. */
+const PLAY_OPTION_CHOICES: BeMusicPlayOptionChoices = {
+  autoPlay: BOOLEAN_CYCLE,
+  bga: BGA_CYCLE,
+  bgaSize: BGA_SIZE_CYCLE,
+  scoreGraph: BOOLEAN_CYCLE,
+  difficultyFilter: DIFFICULTY_FILTER_CYCLE,
+  keysFilter: KEYS_FILTER_CYCLE,
+  sort: SORT_CYCLE,
+  hsFix: HS_FIX_CYCLE,
+  hiddenSudden1P: HIDDEN_SUDDEN_CYCLE,
+  hiddenSudden2P: HIDDEN_SUDDEN_CYCLE,
+  laneCover: BOOLEAN_CYCLE,
+  autoScratch1P: BOOLEAN_CYCLE,
+  autoScratch2P: BOOLEAN_CYCLE,
+  dpFlip: BOOLEAN_CYCLE,
+  random1P: RANDOM_CYCLE,
+  random2P: RANDOM_CYCLE,
+  gauge1P: GAUGE_CYCLE,
+  gauge2P: GAUGE_CYCLE,
+};
+
+/** Numeric play options a be-music skin may set, each with the clamp the select scene applies to it. */
+const NUMERIC_PLAY_OPTION_CLAMPS: { readonly [K in keyof PixiPlayOptions]?: (value: number) => number } = {
+  hiSpeed: clampHiSpeed,
+  shutter: clampShutter,
+};
+
+/**
+ * Validates a be-music skin's `setPlayOption(key, value)`. Returns the value to store — clamped for the numeric options
+ * (`hiSpeed`, `shutter`) — or `undefined` when the change must be ignored: an unknown key, a value outside the option's
+ * choices, or a non-finite / non-numeric value for a numeric option. Skins are untyped at runtime, so every input is
+ * checked rather than trusted.
+ */
+export function resolveSkinPlayOptionValue<K extends keyof PixiPlayOptions>(
+  key: K,
+  value: unknown,
+): PixiPlayOptions[K] | undefined {
+  if (!Object.hasOwn(DEFAULT_PLAY_OPTIONS, key)) return undefined;
+  const choices = PLAY_OPTION_CHOICES[key] as readonly unknown[] | undefined;
+  if (choices) return choices.includes(value) ? (value as PixiPlayOptions[K]) : undefined;
+  const clamp = NUMERIC_PLAY_OPTION_CLAMPS[key];
+  if (!clamp || typeof value !== 'number' || !Number.isFinite(value)) return undefined;
+  return clamp(value) as PixiPlayOptions[K];
+}
+
+/**
+ * The choice `step` places after `current` in `key`'s choices, wrapping around either end — what a be-music skin's
+ * `cyclePlayOption(key, step)` moves to. Any negative `step` goes back one and anything else forward one. A value
+ * outside the choices lands on the first choice; options without a fixed set of choices (`hiSpeed`, `shutter`, or an
+ * unknown key) return `undefined`.
+ */
+export function cycleSkinPlayOptionValue<K extends keyof PixiPlayOptions>(
+  key: K,
+  current: PixiPlayOptions[K],
+  step: number = 1,
+): PixiPlayOptions[K] | undefined {
+  if (!Object.hasOwn(PLAY_OPTION_CHOICES, key)) return undefined;
+  const choices = PLAY_OPTION_CHOICES[key] as readonly PixiPlayOptions[K][] | undefined;
+  if (!choices || choices.length === 0) return undefined;
+  const index = choices.indexOf(current);
+  if (index < 0) return choices[0];
+  const delta = step < 0 ? -1 : 1;
+  return choices[(index + delta + choices.length) % choices.length];
+}
+
+/** Play options that filter or reorder the song list: changing one moves the cursor back to the top. */
+const LIST_PLAY_OPTIONS: ReadonlySet<keyof PixiPlayOptions> = new Set(['difficultyFilter', 'keysFilter', 'sort']);
+
 /**
  * Bundle of LR2 system sound-effect bytes (typically loaded from `LR2files\Sound\lr2\*.wav`). Each field is the encoded
  * audio payload (WAV / OGG / MP3 / etc.); {@link CoreSongSelectView} decodes lazily on first play through its own
@@ -423,6 +375,13 @@ export interface CoreSongSelectViewOptions {
   beMusicSkin?: BeMusicSkin;
   /** Showmanship level for the be-music skin (entrance, outro, ambient motion). Defaults to `'full'`. */
   beMusicEffects?: BeMusicEffectLevel;
+  /**
+   * The player's stored values for the be-music skin's `settings`, keyed by setting id. They are checked against the
+   * skin's schema (`resolveBeMusicSkinSettings`: unknown ids dropped, invalid values replaced by the default, numbers
+   * clamped) and handed to the skin as `frame.settings`. Omit it to draw with the skin's defaults; change it live with
+   * `setBeMusicSkinSettings`.
+   */
+  beMusicSkinSettings?: Readonly<Record<string, unknown>>;
   onSongSelected?: (song: BrowserSongEntry) => void;
   /**
    * AUTOPLAY-mode launch hook. Fired when the user clicks the skin's AUTOPLAY button (#SRC_BUTTON `type = 16`) or
@@ -482,6 +441,13 @@ export interface CoreSongSelectViewOptions {
    * knows.
    */
   onPlayOptionsChange?: (options: PixiPlayOptions) => void;
+  /**
+   * Looks up the player's best record on a chart, for a be-music skin's `frame.songRecord(song)` (its lamp, best
+   * scores, play count). Return `undefined` for a chart that has no record. Called while the skin draws, possibly
+   * for every visible row on every frame, so it should be a cheap lookup. Omit it when the host keeps no records: every
+   * song then reads as never played.
+   */
+  resolveSongRecord?: (song: BrowserSongEntry) => BeMusicSongRecord | undefined;
 }
 
 /** Design-canvas size a skin family's theme renders the select frame into. */
@@ -616,6 +582,8 @@ export class CoreSongSelectView<TOptions extends CoreSongSelectViewOptions = Cor
   private readonly beMusicBackHolder = new Container();
   private readonly beMusicFrontHolder = new Container();
   private beMusicRenderer: BeMusicSelectBinding | undefined;
+  /** Song images handed to the be-music skin (`frame.songImage`); created with the renderer. */
+  private songImages: SongImageCache | undefined;
   /** Set when the last skinless render reported an unfinished transition, so the next tick renders again. */
   private beMusicNeedsFrame = false;
   /** `performance.now()` of the last cursor move — drives the skin's focus transitions. */
@@ -823,9 +791,12 @@ export class CoreSongSelectView<TOptions extends CoreSongSelectViewOptions = Cor
    */
   private readonly oneShotDecoding = new Set<string>();
   protected options: TOptions;
+  /** The player's stored values for the be-music skin's settings (`beMusicSkinSettings`, then the setter). */
+  private beMusicSkinSettings: Readonly<Record<string, unknown>> | undefined;
 
   public constructor(options: TOptions = {} as TOptions) {
     this.options = options;
+    this.beMusicSkinSettings = options.beMusicSkinSettings;
     this.selectBgmBytes = options.selectBgm;
     this.setOneShotBytes('decide', options.decideBgm);
     this.setSystemSounds(options.systemSounds);
@@ -839,6 +810,15 @@ export class CoreSongSelectView<TOptions extends CoreSongSelectViewOptions = Cor
    * Returns a shallow snapshot of the current play-option state. The host typically calls this from `onSongSelected` /
    * `onSongAutoPlay` and forwards the values onto {@link PixiGameplayViewOptions}.
    */
+  /**
+   * Replaces the player's values for the be-music skin's `settings` (see the `beMusicSkinSettings` option); the skin
+   * draws with them from the next frame. `undefined` goes back to the skin's defaults.
+   */
+  public setBeMusicSkinSettings(stored: Readonly<Record<string, unknown>> | undefined): void {
+    this.beMusicSkinSettings = stored;
+    this.beMusicRenderer?.setSettings(stored);
+  }
+
   public getPlayOptions(): PixiPlayOptions {
     return { ...this.playOptions };
   }
@@ -1320,8 +1300,11 @@ export class CoreSongSelectView<TOptions extends CoreSongSelectViewOptions = Cor
       if (this.beMusicNeedsFrame) {
         this.perf.time('render', () => this.render());
       }
-      if (this.beMusicBackHolder.visible) {
-        this.beMusicRenderer?.tick(now, this.focusedSong(), this.launchAt, this.selectAudioAnalyzer?.sample(now));
+      if (this.beMusicBackHolder.visible && this.beMusicRenderer) {
+        const { width, height } = resolveBeMusicSkinStage(this.beMusicSkin);
+        const onStage = this.mouseX >= 0 && this.mouseY >= 0 && this.mouseX < width && this.mouseY < height;
+        this.beMusicRenderer.setPointer(onStage ? this.mouseX : undefined, onStage ? this.mouseY : undefined);
+        this.beMusicRenderer.tick(now, this.focusedSong(), this.launchAt, this.selectAudioAnalyzer?.sample(now));
       }
     }
     const report = this.perf.endFrame(() => ({
@@ -1345,6 +1328,8 @@ export class CoreSongSelectView<TOptions extends CoreSongSelectViewOptions = Cor
     if (this.launchTimer !== undefined) window.clearTimeout(this.launchTimer);
     this.beMusicRenderer?.dispose();
     this.beMusicRenderer = undefined;
+    this.songImages?.dispose();
+    this.songImages = undefined;
     window.removeEventListener('keydown', this.handleKeyDown);
     if (this.host) {
       this.host.app.canvas.removeEventListener('pointerdown', this.handlePointerDown);
@@ -1445,6 +1430,8 @@ export class CoreSongSelectView<TOptions extends CoreSongSelectViewOptions = Cor
       return;
     }
     this.collection = collection;
+    // Images cached for the previous collection's songs may not match the new one's files.
+    this.songImages?.clear();
     this.browseStack = [];
     this.parentCursorStack = [];
     this.selectedIndex = 0;
@@ -2348,6 +2335,8 @@ export class CoreSongSelectView<TOptions extends CoreSongSelectViewOptions = Cor
       actions: this.beMusicActions,
       effects: this.options.beMusicEffects ?? 'full',
       launchAt: this.launchAt,
+      playOptions: this.playOptions,
+      playOptionChoices: PLAY_OPTION_CHOICES,
     });
     // The binding draws the skin every frame in `tick`; nothing needs a re-render here.
     this.beMusicNeedsFrame = this.launchAt !== undefined;
@@ -2361,20 +2350,50 @@ export class CoreSongSelectView<TOptions extends CoreSongSelectViewOptions = Cor
 
   private ensureBeMusicRenderer(): BeMusicSelectBinding {
     if (!this.beMusicRenderer) {
-      this.beMusicRenderer = new BeMusicSelectBinding(this.beMusicSkin);
+      const songImages = new SongImageCache({
+        resolveSource: (song) => resolveSongSource(this.collection, song),
+        onLoaded: () => this.beMusicRenderer?.invalidate(),
+      });
+      this.songImages = songImages;
+      this.beMusicRenderer = new BeMusicSelectBinding(this.beMusicSkin, {
+        resolveSongRecord: this.options.resolveSongRecord,
+        songImage: songImages.lookup,
+        settings: this.beMusicSkinSettings,
+      });
       this.beMusicBackHolder.addChild(this.beMusicRenderer.backLayer);
       this.beMusicFrontHolder.addChild(this.beMusicRenderer.frontLayer);
     }
     return this.beMusicRenderer;
   }
 
-  /** PLAY / AUTO PLAY / search callbacks handed to the skin's hit areas. */
-  private readonly beMusicActions = {
+  /** PLAY / AUTO PLAY / search / play-option / readme callbacks handed to the skin's hit areas. */
+  private readonly beMusicActions: BeMusicSelectActions = {
     play: (): void => this.launchFocusedSong(false),
     autoPlay: (): void => this.launchFocusedSong(true),
     activateSearch: (): void => this.options.onSearchActivate?.(),
+    setPlayOption: (key, value): void => this.setSkinPlayOption(key, value),
+    cyclePlayOption: (key, step = 1): void => {
+      const next = cycleSkinPlayOptionValue(key, this.playOptions[key], step);
+      if (next !== undefined) this.setSkinPlayOption(key, next);
+    },
+    toggleReadme: (): void => {
+      const song = this.focusedSong();
+      if (song) this.toggleReadText(song);
+    },
   };
 
+  /**
+   * A be-music skin's play-option change: values outside the option's choices (or range) are dropped (see {@link
+   * resolveSkinPlayOptionValue}), and a list filter / sort change moves the cursor back to the top like the LR2 buttons
+   * do.
+   */
+  private setSkinPlayOption<K extends keyof PixiPlayOptions>(key: K, value: PixiPlayOptions[K]): void {
+    const next = resolveSkinPlayOptionValue(key, value);
+    if (next === undefined || this.playOptions[key] === next) return;
+    this.setPlayOption(key, next);
+    if (LIST_PLAY_OPTIONS.has(key)) this.snapCursorAfterFilterChange();
+  }
+
   private launchFocusedSong(autoPlay: boolean): void {
     const focused = this.focusedSong();
     if (!focused) return;
diff --git a/packages/player-web/src/scene/default/decide.ts b/packages/player-web/src/scene/default/decide.ts
new file mode 100644
index 000000000..77f36fea5
--- /dev/null
+++ b/packages/player-web/src/scene/default/decide.ts
@@ -0,0 +1,17 @@
+import { CoreDecideView, type CoreDecideTarget, type CoreDecideViewOptions } from '../core/decide.ts';
+
+/** Constructor options for {@link DefaultPixiDecideView}. */
+export type DefaultPixiDecideViewOptions = CoreDecideViewOptions;
+
+/** What {@link DefaultPixiDecideView.mount} shows: the chart about to be played and the collection it came from. */
+export type DefaultPixiDecideTarget = CoreDecideTarget;
+
+/**
+ * Default-family decide scene: the be-music skin's `decide` screen between select and play. Hosts mount it only when
+ * the skin declares one (`skin.decide`) and go straight to the play otherwise.
+ */
+export class DefaultPixiDecideView extends CoreDecideView {
+  constructor(options: DefaultPixiDecideViewOptions) {
+    super(options);
+  }
+}
diff --git a/packages/player-web/src/scene/default/index.ts b/packages/player-web/src/scene/default/index.ts
index b24864151..9ccb16687 100644
--- a/packages/player-web/src/scene/default/index.ts
+++ b/packages/player-web/src/scene/default/index.ts
@@ -16,6 +16,7 @@ export {
   type FallbackGameplayRenderOptions,
   type FallbackGameplayRuntime,
 } from '../../skins/phantom/chrome.ts';
+export * from './decide.ts';
 export * from './gameplay.ts';
 export * from './result.ts';
 export * from './select.ts';
diff --git a/packages/player-web/src/skin/be-music/binding.ts b/packages/player-web/src/skin/be-music/binding.ts
index d7a122f5a..8a8e88aa7 100644
--- a/packages/player-web/src/skin/be-music/binding.ts
+++ b/packages/player-web/src/skin/be-music/binding.ts
@@ -1,10 +1,12 @@
 import { CanvasSource, Container, Sprite, Texture } from 'pixi.js';
 import { getDesignPixelRatio } from '../../scene/core/viewport.ts';
 import { ChildPool } from '../../scene/pixi-utils.ts';
-import { wideStage } from '@be-music/skin-sdk';
+import { resolveBeMusicSkinSettings, wideStage } from '@be-music/skin-sdk';
 import { logger } from '../../logger.ts';
 import type {
+  BeMusicBgaFrame,
   BeMusicBomb,
+  BeMusicDecideFrame,
   BeMusicGameplayFrame,
   BeMusicGameplayLayout,
   BeMusicGameplayRuntime,
@@ -13,8 +15,12 @@ import type {
   BeMusicMine,
   BeMusicNote,
   BeMusicResultFrame,
+  BeMusicMeasureLine,
   BeMusicSelectFrame,
   BeMusicSkin,
+  BeMusicSkinSettingValues,
+  BeMusicSongImageLookup,
+  BeMusicSongRecord,
   BeMusicStage,
   BeMusicSurface,
   BeMusicSurfaceContextMap,
@@ -27,6 +33,21 @@ import type {
 
 const log = logger('be-music-skin');
 
+/** Hosts that hand no song images report every image as unavailable. */
+const NO_SONG_IMAGE: BeMusicSongImageLookup = () => undefined;
+
+/** Hosts that keep no play records report every song as never played. */
+const NO_SONG_RECORD = (): BeMusicSongRecord | undefined => undefined;
+
+/**
+ * The player's stored values for a skin's settings, keyed by setting id, as a host persisted them. Bindings check them
+ * against the skin's schema with `resolveBeMusicSkinSettings` before a skin sees them.
+ */
+export type BeMusicStoredSkinSettings = Readonly<Record<string, unknown>>;
+
+/** How long the decide screen shows when the skin doesn't say (`BeMusicDecideSkin.durationMs`). */
+const DEFAULT_DECIDE_DURATION_MS = 2000;
+
 /** Largest canvas edge a surface allocates, whatever the window size. */
 const MAX_CANVAS_EDGE = 4096;
 
@@ -156,7 +177,15 @@ export class BeMusicGameplayBinding {
   readonly bombDurationMs: number;
   /** Whether the skin draws mines from the frame; when false the scene draws them itself. */
   readonly drawsMines: boolean;
+  /** Whether the skin draws the lane covers from `runtime.laneCovers`; when false the scene draws them itself. */
+  readonly drawsLaneCover: boolean;
+  /** Whether the skin draws measure lines from the frame; when false the scene draws them itself. */
+  readonly drawsMeasureLines: boolean;
+  /** Whether the skin composites the BGA from the frame; when false the scene shows it behind the skin. */
+  readonly drawsBga: boolean;
   private readonly skin: BeMusicSkin;
+  private settings: BeMusicSkinSettingValues;
+  private readonly songImage: BeMusicSongImageLookup;
   private readonly surface: SkinSurface;
   private frame: BeMusicGameplayFrame | undefined;
   private lanes: BeMusicLaneFrame[] = [];
@@ -164,14 +193,32 @@ export class BeMusicGameplayBinding {
   private longNotes: BeMusicLongNote[] = [];
   private mines: BeMusicMine[] = [];
   private bombs: BeMusicBomb[] = [];
+  private measureLines: BeMusicMeasureLine[] = [];
   private frameNumber = 0;
   private drawnFrame = -1;
 
-  constructor(skin: BeMusicSkin) {
+  /**
+   * `songImage` resolves the song's images for `frame.songImage`; without one every image reads as unavailable.
+   * `settings` are the player's stored values for the skin's settings; without them the skin draws with its defaults.
+   */
+  constructor(
+    skin: BeMusicSkin,
+    options: { songImage?: BeMusicSongImageLookup; settings?: BeMusicStoredSkinSettings } = {},
+  ) {
     this.skin = skin;
     this.surface = new SkinSurface(skin);
+    this.songImage = options.songImage ?? NO_SONG_IMAGE;
     this.bombDurationMs = skin.gameplay.bombDurationMs ?? 300;
     this.drawsMines = skin.gameplay.drawsMines === true;
+    this.drawsLaneCover = skin.gameplay.drawsLaneCover === true;
+    this.drawsMeasureLines = skin.gameplay.drawsMeasureLines === true;
+    this.drawsBga = skin.gameplay.drawsBga === true;
+    this.settings = resolveBeMusicSkinSettings(skin, options.settings);
+  }
+
+  /** Replaces the player's values for the skin's settings; the next frame draws with them. */
+  setSettings(stored: BeMusicStoredSkinSettings | undefined): void {
+    this.settings = resolveBeMusicSkinSettings(this.skin, stored);
   }
 
   /** Starts a frame and shows the skin's canvas in `layerPool` (the scene's chrome layer, above the BGA). */
@@ -187,6 +234,7 @@ export class BeMusicGameplayBinding {
     this.longNotes = [];
     this.mines = [];
     this.bombs = [];
+    this.measureLines = [];
     this.frame = {
       nowMs: runtime.nowMs ?? 0,
       runtime,
@@ -196,9 +244,14 @@ export class BeMusicGameplayBinding {
       longNotes: this.longNotes,
       mines: this.mines,
       bombs: this.bombs,
+      measureLines: this.measureLines,
+      // Filled by `setBga` for a skin that sets `drawsBga`.
+      bga: undefined,
       beatPhase: runtime.beatPhase ?? 0,
       effects: runtime.effects ?? 'full',
       audio: runtime.audio,
+      settings: this.settings,
+      songImage: this.songImage,
     };
     const sprite = context.layerPool.acquireSprite();
     sprite.texture = this.surface.texture;
@@ -225,10 +278,20 @@ export class BeMusicGameplayBinding {
     this.mines.push(mine);
   }
 
+  /** Collected only for a skin that sets `drawsMeasureLines`; the scene draws its own lines otherwise. */
+  addMeasureLine(line: BeMusicMeasureLine): void {
+    this.measureLines.push(line);
+  }
+
   addBombs(bombs: readonly BeMusicBomb[]): void {
     for (const bomb of bombs) this.bombs.push({ ...bomb });
   }
 
+  /** The BGA layers showing this frame; handed over only for a skin that sets `drawsBga`. */
+  setBga(bga: BeMusicBgaFrame | undefined): void {
+    if (this.frame && this.drawsBga) this.frame.bga = bga;
+  }
+
   dispose(): void {
     this.surface.destroy();
   }
@@ -241,8 +304,14 @@ export class BeMusicGameplayBinding {
   };
 }
 
-/** The select frame the scene hands over; the binding adds `revision`, `audio`, and `hit`. */
-export type BeMusicSelectSceneFrame = Omit<BeMusicSelectFrame, 'revision' | 'audio' | 'hit'>;
+/**
+ * The select frame the scene hands over; the binding adds `revision`, `audio`, `hit`, and the skin-facing extras
+ * (`pointer`, `songRecord`, `songImage`, `settings`).
+ */
+export type BeMusicSelectSceneFrame = Omit<
+  BeMusicSelectFrame,
+  'revision' | 'audio' | 'hit' | 'pointer' | 'songRecord' | 'songImage' | 'settings'
+>;
 
 /**
  * Select for one scene: {@link render} records the latest state when the scene's input changes, and {@link tick} draws
@@ -257,13 +326,34 @@ export class BeMusicSelectBinding {
   private readonly skin: BeMusicSkin;
   private readonly surface: SkinSurface;
   private readonly hitPool: ChildPool;
+  private settings: BeMusicSkinSettingValues;
+  private readonly songRecord: BeMusicSelectFrame['songRecord'];
+  private readonly songImage: BeMusicSongImageLookup;
+  /** The pointer in design pixels, replaced (not mutated) when it moves so a skin may keep last frame's. */
+  private pointer: BeMusicSelectFrame['pointer'] = undefined;
   private frame: BeMusicSelectSceneFrame | undefined;
   private revision = 0;
 
-  constructor(skin: BeMusicSkin) {
+  /**
+   * `resolveSongRecord` looks up the player's best record on a song for `frame.songRecord`; without one every song
+   * reads as never played. `songImage` resolves song images for `frame.songImage` (call {@link invalidate} when one
+   * arrives); without one every image reads as unavailable. `settings` are the player's stored values for the skin's
+   * settings; without them the skin draws with its defaults.
+   */
+  constructor(
+    skin: BeMusicSkin,
+    options: {
+      resolveSongRecord?: BeMusicSelectFrame['songRecord'];
+      songImage?: BeMusicSongImageLookup;
+      settings?: BeMusicStoredSkinSettings;
+    } = {},
+  ) {
     this.skin = skin;
     this.surface = new SkinSurface(skin);
     this.outroMs = skin.select.outroMs ?? 0;
+    this.songRecord = options.resolveSongRecord ?? NO_SONG_RECORD;
+    this.songImage = options.songImage ?? NO_SONG_IMAGE;
+    this.settings = resolveBeMusicSkinSettings(skin, options.settings);
     this.backLayer.addChild(new Sprite({ texture: this.surface.texture, roundPixels: true }));
     this.hitPool = new ChildPool(this.frontLayer);
   }
@@ -274,6 +364,32 @@ export class BeMusicSelectBinding {
     this.revision += 1;
   }
 
+  /**
+   * Replaces the player's values for the skin's settings and moves `frame.revision`, so a skin that caches its layout
+   * per revision redraws with them on the next {@link tick}.
+   */
+  setSettings(stored: BeMusicStoredSkinSettings | undefined): void {
+    this.settings = resolveBeMusicSkinSettings(this.skin, stored);
+    this.revision += 1;
+  }
+
+  /** Moves `frame.revision` without a state change, e.g. when a song image the skin asked for has loaded. */
+  invalidate(): void {
+    this.revision += 1;
+  }
+
+  /**
+   * Records where the pointer is, in the stage's design pixels, or `undefined` when it is off the stage. Read by the
+   * next {@link tick} as `frame.pointer` and by `frame.hit`'s hover test.
+   */
+  setPointer(x: number | undefined, y: number | undefined): void {
+    if (x === undefined || y === undefined) {
+      this.pointer = undefined;
+    } else if (this.pointer?.x !== x || this.pointer.y !== y) {
+      this.pointer = { x, y };
+    }
+  }
+
   /** Draws the skin with the latest state, the current time, and what is playing. */
   tick(
     nowMs: number,
@@ -285,6 +401,7 @@ export class BeMusicSelectBinding {
     if (!base) return;
     const pool = this.hitPool;
     pool.begin();
+    const pointer = this.pointer;
     const frame: BeMusicSelectFrame = {
       ...base,
       nowMs,
@@ -292,6 +409,10 @@ export class BeMusicSelectBinding {
       launchAt,
       audio,
       revision: this.revision,
+      pointer,
+      songRecord: this.songRecord,
+      songImage: this.songImage,
+      settings: this.settings,
       hit: (x, y, w, h, action, cursor = 'pointer') => {
         const area = pool.acquireGraphics();
         area.rect(x, y, w, h).fill({ color: 0xffffff, alpha: 0.001 });
@@ -299,6 +420,7 @@ export class BeMusicSelectBinding {
         area.cursor = cursor;
         area.removeAllListeners('pointerdown');
         area.on('pointerdown', action);
+        return pointer !== undefined && pointer.x >= x && pointer.x < x + w && pointer.y >= y && pointer.y < y + h;
       },
     };
     try {
@@ -316,20 +438,40 @@ export class BeMusicSelectBinding {
   }
 }
 
+/** The result frame the scene hands over; the binding adds `songImage` and `settings`. */
+export type BeMusicResultSceneFrame = Omit<BeMusicResultFrame, 'songImage' | 'settings'>;
+
 /** Result for one scene: draws the skin every frame onto a canvas shown by {@link view}. */
 export class BeMusicResultBinding {
   /** Persistent container showing the skin's canvas; the scene mounts it once. */
   readonly view = new Container();
   private readonly skin: BeMusicSkin;
   private readonly surface: SkinSurface;
+  private settings: BeMusicSkinSettingValues;
+  private readonly songImage: BeMusicSongImageLookup;
 
-  constructor(skin: BeMusicSkin) {
+  /**
+   * `songImage` resolves song images for `frame.songImage`; without one every image reads as unavailable. `settings`
+   * are the player's stored values for the skin's settings; without them the skin draws with its defaults.
+   */
+  constructor(
+    skin: BeMusicSkin,
+    options: { songImage?: BeMusicSongImageLookup; settings?: BeMusicStoredSkinSettings } = {},
+  ) {
     this.skin = skin;
     this.surface = new SkinSurface(skin);
+    this.settings = resolveBeMusicSkinSettings(skin, options.settings);
+    this.songImage = options.songImage ?? NO_SONG_IMAGE;
     this.view.addChild(new Sprite({ texture: this.surface.texture, roundPixels: true }));
   }
 
-  render(frame: BeMusicResultFrame): void {
+  /** Replaces the player's values for the skin's settings; the next frame draws with them. */
+  setSettings(stored: BeMusicStoredSkinSettings | undefined): void {
+    this.settings = resolveBeMusicSkinSettings(this.skin, stored);
+  }
+
+  render(sceneFrame: BeMusicResultSceneFrame): void {
+    const frame: BeMusicResultFrame = { ...sceneFrame, songImage: this.songImage, settings: this.settings };
     this.surface.draw((surface) => this.skin.result.draw(surface, frame));
   }
 
@@ -338,3 +480,52 @@ export class BeMusicResultBinding {
     this.surface.destroy();
   }
 }
+
+/** The decide frame the scene hands over; the binding adds `songImage` and `settings`. */
+export type BeMusicDecideSceneFrame = Omit<BeMusicDecideFrame, 'songImage' | 'settings'>;
+
+/** Decide for one scene: draws the skin's `decide` every frame onto a canvas shown by {@link view}. */
+export class BeMusicDecideBinding {
+  /** Persistent container showing the skin's canvas; the scene mounts it once. */
+  readonly view = new Container();
+  /** How long (ms) the screen shows before the play starts (the skin's `decide.durationMs`, default 2000). */
+  readonly durationMs: number;
+  private readonly skin: BeMusicSkin;
+  private readonly surface: SkinSurface;
+  private settings: BeMusicSkinSettingValues;
+  private readonly songImage: BeMusicSongImageLookup;
+
+  /**
+   * `songImage` resolves song images for `frame.songImage`; without one every image reads as unavailable. `settings`
+   * are the player's stored values for the skin's settings; without them the skin draws with its defaults.
+   */
+  constructor(
+    skin: BeMusicSkin,
+    options: { songImage?: BeMusicSongImageLookup; settings?: BeMusicStoredSkinSettings } = {},
+  ) {
+    this.skin = skin;
+    this.surface = new SkinSurface(skin);
+    this.settings = resolveBeMusicSkinSettings(skin, options.settings);
+    this.songImage = options.songImage ?? NO_SONG_IMAGE;
+    this.durationMs = Math.max(0, skin.decide?.durationMs ?? DEFAULT_DECIDE_DURATION_MS);
+    this.view.addChild(new Sprite({ texture: this.surface.texture, roundPixels: true }));
+  }
+
+  /** Replaces the player's values for the skin's settings; the next frame draws with them. */
+  setSettings(stored: BeMusicStoredSkinSettings | undefined): void {
+    this.settings = resolveBeMusicSkinSettings(this.skin, stored);
+  }
+
+  /** Draws one frame; a no-op for a skin without a decide screen. */
+  render(sceneFrame: BeMusicDecideSceneFrame): void {
+    const decide = this.skin.decide;
+    if (!decide) return;
+    const frame: BeMusicDecideFrame = { ...sceneFrame, songImage: this.songImage, settings: this.settings };
+    this.surface.draw((surface) => decide.draw(surface, frame));
+  }
+
+  dispose(): void {
+    this.view.destroy({ children: true });
+    this.surface.destroy();
+  }
+}
diff --git a/packages/player-web/src/skin/be-music/registry.ts b/packages/player-web/src/skin/be-music/registry.ts
index f2eee26a4..c79ae7814 100644
--- a/packages/player-web/src/skin/be-music/registry.ts
+++ b/packages/player-web/src/skin/be-music/registry.ts
@@ -1,7 +1,7 @@
 import { validateBeMusicSkin, type BeMusicSelectLayout, type BeMusicSkin } from '@be-music/skin-sdk';
 import { logger } from '../../logger.ts';
 
-export { resolveBeMusicLaneKind } from '@be-music/skin-sdk';
+export { resolveBeMusicLaneKind, resolveBeMusicSkinSettings } from '@be-music/skin-sdk';
 
 const log = logger('be-music-skin');
 
diff --git a/packages/player-web/src/skin/be-music/song-images.test.ts b/packages/player-web/src/skin/be-music/song-images.test.ts
new file mode 100644
index 000000000..63bf5c550
--- /dev/null
+++ b/packages/player-web/src/skin/be-music/song-images.test.ts
@@ -0,0 +1,154 @@
+import { describe, expect, it, vi } from 'vite-plus/test';
+import { SongImageCache, resolveSongImagePath } from './song-images.ts';
+import type { BrowserSongAssetSource, BrowserSongEntry } from '../../collection/types.ts';
+
+function song(
+  chartPath: string,
+  metadata: { stageFile?: string; banner?: string; backBmp?: string },
+): BrowserSongEntry {
+  return { sourceId: 'src', chartPath, chart: { metadata } } as unknown as BrowserSongEntry;
+}
+
+const SOURCE = { id: 'src' } as BrowserSongAssetSource;
+
+interface FakeBitmap {
+  path: string;
+  close: ReturnType<typeof vi.fn>;
+}
+
+function fakeBitmap(path: string): FakeBitmap {
+  return { path, close: vi.fn() };
+}
+
+/** A loader whose loads resolve when the test says so. */
+function deferredLoader() {
+  const calls: { path: string; resolve: (image: FakeBitmap | undefined) => void }[] = [];
+  const load = vi.fn(
+    (_source: BrowserSongAssetSource, _song: BrowserSongEntry, path: string) =>
+      new Promise<ImageBitmap | undefined>((resolve) => {
+        calls.push({ path, resolve: (image) => resolve(image as unknown as ImageBitmap | undefined) });
+      }),
+  );
+  return { load, calls };
+}
+
+const flush = () => new Promise((resolve) => setTimeout(resolve, 0));
+
+describe('resolveSongImagePath', () => {
+  it('maps each kind to its chart header', () => {
+    const entry = song('a.bms', { stageFile: 'stage.png', banner: 'banner.bmp', backBmp: 'back.jpg' });
+    expect(resolveSongImagePath(entry, 'stageFile')).toBe('stage.png');
+    expect(resolveSongImagePath(entry, 'banner')).toBe('banner.bmp');
+    expect(resolveSongImagePath(entry, 'backBmp')).toBe('back.jpg');
+  });
+
+  it('treats a missing or blank header as no image', () => {
+    expect(resolveSongImagePath(song('a.bms', {}), 'banner')).toBeUndefined();
+    expect(resolveSongImagePath(song('a.bms', { banner: '  ' }), 'banner')).toBeUndefined();
+  });
+});
+
+describe('SongImageCache', () => {
+  it('loads on the first miss, notifies, and then answers from the cache', async () => {
+    const { load, calls } = deferredLoader();
+    const onLoaded = vi.fn();
+    const cache = new SongImageCache({ resolveSource: () => SOURCE, onLoaded, load });
+    const entry = song('a.bms', { stageFile: 'stage.png' });
+
+    expect(cache.lookup(entry, 'stageFile')).toBeUndefined();
+    expect(cache.lookup(entry, 'stageFile')).toBeUndefined();
+    expect(load).toHaveBeenCalledTimes(1);
+
+    const image = fakeBitmap('stage.png');
+    calls[0]!.resolve(image);
+    await flush();
+    expect(onLoaded).toHaveBeenCalledTimes(1);
+    expect(cache.lookup(entry, 'stageFile')).toBe(image);
+    expect(load).toHaveBeenCalledTimes(1);
+  });
+
+  it('remembers images that are missing or fail to decode', async () => {
+    const { load, calls } = deferredLoader();
+    const resolveSource = vi.fn(() => SOURCE);
+    const cache = new SongImageCache({ resolveSource, load });
+    const noHeader = song('a.bms', {});
+    expect(cache.lookup(noHeader, 'banner')).toBeUndefined();
+    expect(cache.lookup(noHeader, 'banner')).toBeUndefined();
+    expect(load).not.toHaveBeenCalled();
+
+    const broken = song('b.bms', { banner: 'broken.bmp' });
+    cache.lookup(broken, 'banner');
+    calls[0]!.resolve(undefined);
+    await flush();
+    expect(cache.lookup(broken, 'banner')).toBeUndefined();
+    expect(load).toHaveBeenCalledTimes(1);
+  });
+
+  it('answers undefined without loading when the host has no source for the song', () => {
+    const { load } = deferredLoader();
+    const cache = new SongImageCache({ resolveSource: () => undefined, load });
+    expect(cache.lookup(song('a.bms', { banner: 'banner.bmp' }), 'banner')).toBeUndefined();
+    expect(load).not.toHaveBeenCalled();
+  });
+
+  it('closes the least recently used image once over capacity', async () => {
+    const { load, calls } = deferredLoader();
+    const cache = new SongImageCache({ resolveSource: () => SOURCE, load, capacity: 2 });
+    const a = song('a.bms', { banner: 'a.bmp' });
+    const b = song('b.bms', { banner: 'b.bmp' });
+    const c = song('c.bms', { banner: 'c.bmp' });
+    const images = [fakeBitmap('a.bmp'), fakeBitmap('b.bmp'), fakeBitmap('c.bmp')];
+
+    cache.lookup(a, 'banner');
+    cache.lookup(b, 'banner');
+    calls[0]!.resolve(images[0]);
+    calls[1]!.resolve(images[1]);
+    await flush();
+    // Touch `a` so `b` becomes the least recently used.
+    expect(cache.lookup(a, 'banner')).toBe(images[0]);
+    cache.lookup(c, 'banner');
+    calls[2]!.resolve(images[2]);
+    await flush();
+
+    expect(cache.size).toBe(2);
+    expect(images[1]!.close).toHaveBeenCalledTimes(1);
+    expect(images[0]!.close).not.toHaveBeenCalled();
+    expect(cache.lookup(a, 'banner')).toBe(images[0]);
+    expect(cache.lookup(c, 'banner')).toBe(images[2]);
+  });
+
+  it('closes every image on dispose, including one that arrives afterwards', async () => {
+    const { load, calls } = deferredLoader();
+    const onLoaded = vi.fn();
+    const cache = new SongImageCache({ resolveSource: () => SOURCE, onLoaded, load });
+    const loaded = fakeBitmap('a.bmp');
+    const late = fakeBitmap('b.bmp');
+    cache.lookup(song('a.bms', { banner: 'a.bmp' }), 'banner');
+    calls[0]!.resolve(loaded);
+    await flush();
+    cache.lookup(song('b.bms', { banner: 'b.bmp' }), 'banner');
+
+    cache.dispose();
+    expect(loaded.close).toHaveBeenCalledTimes(1);
+    calls[1]!.resolve(late);
+    await flush();
+    expect(late.close).toHaveBeenCalledTimes(1);
+    expect(onLoaded).toHaveBeenCalledTimes(1);
+    expect(cache.lookup(song('a.bms', { banner: 'a.bmp' }), 'banner')).toBeUndefined();
+  });
+
+  it('drops loads started before a clear and retries afterwards', async () => {
+    const { load, calls } = deferredLoader();
+    const cache = new SongImageCache({ resolveSource: () => SOURCE, load });
+    const entry = song('a.bms', { banner: 'a.bmp' });
+    cache.lookup(entry, 'banner');
+    cache.clear();
+    const stale = fakeBitmap('a.bmp');
+    calls[0]!.resolve(stale);
+    await flush();
+    expect(stale.close).toHaveBeenCalledTimes(1);
+    expect(cache.size).toBe(0);
+    cache.lookup(entry, 'banner');
+    expect(load).toHaveBeenCalledTimes(2);
+  });
+});
diff --git a/packages/player-web/src/skin/be-music/song-images.ts b/packages/player-web/src/skin/be-music/song-images.ts
new file mode 100644
index 000000000..e30044da2
--- /dev/null
+++ b/packages/player-web/src/skin/be-music/song-images.ts
@@ -0,0 +1,139 @@
+import { loadAssetBytes, resolveChartImageAsset } from '../../collection/collection.ts';
+import type { BrowserSongAssetSource, BrowserSongEntry } from '../../collection/types.ts';
+import { loadImageBitmapFromBytes } from '../../media/textures.ts';
+import { logger } from '../../logger.ts';
+import type { BeMusicSongImageKind, BeMusicSongImageLookup } from './types.ts';
+
+const log = logger('be-music-song-images');
+
+/**
+ * How many decoded song images a cache keeps before closing the least recently used one. Comfortably above what one
+ * screen shows (a select list's banners plus the focused song's stage file and back image).
+ */
+export const DEFAULT_SONG_IMAGE_CAPACITY = 32;
+
+/** The chart-relative path of `song`'s `kind` image (`#STAGEFILE`, `#BANNER`, `#BACKBMP`), when the chart names one. */
+export function resolveSongImagePath(song: BrowserSongEntry, kind: BeMusicSongImageKind): string | undefined {
+  const metadata = song.chart.metadata;
+  const path = kind === 'stageFile' ? metadata.stageFile : kind === 'banner' ? metadata.banner : metadata.backBmp;
+  return path !== undefined && path.trim().length > 0 ? path : undefined;
+}
+
+export interface SongImageCacheOptions {
+  /** The asset source holding `song`'s files, or `undefined` when the host has none for it. */
+  resolveSource(song: BrowserSongEntry): BrowserSongAssetSource | undefined;
+  /** Called after an image finished loading, so the screen can be redrawn (select bumps its `revision`). */
+  onLoaded?: () => void;
+  /** Most images kept decoded at once. Default {@link DEFAULT_SONG_IMAGE_CAPACITY}. */
+  capacity?: number;
+  /** Reads and decodes one image. Defaults to the chart-asset loader plus `createImageBitmap`; tests swap it. */
+  load?: (source: BrowserSongAssetSource, song: BrowserSongEntry, path: string) => Promise<ImageBitmap | undefined>;
+}
+
+/**
+ * Decoded song images for be-music skins, behind the synchronous {@link lookup} the frames hand out as `songImage`. A
+ * miss starts loading the image and answers `undefined`; once it decodes, `onLoaded` fires and later lookups return it.
+ * Images that are missing or fail to decode are remembered so they aren't retried every frame. At most `capacity`
+ * bitmaps are kept: the least recently looked-up one is `close()`d to make room, and {@link dispose} closes the rest.
+ * A skin should therefore look an image up on every draw rather than keep the bitmap.
+ */
+export class SongImageCache {
+  private readonly images = new Map<string, ImageBitmap>();
+  private readonly pending = new Set<string>();
+  private readonly unavailable = new Set<string>();
+  private readonly options: SongImageCacheOptions;
+  private readonly capacity: number;
+  private generation = 0;
+  private disposed = false;
+
+  constructor(options: SongImageCacheOptions) {
+    this.options = options;
+    this.capacity = Math.max(1, Math.floor(options.capacity ?? DEFAULT_SONG_IMAGE_CAPACITY));
+  }
+
+  /** Number of decoded images held right now. */
+  get size(): number {
+    return this.images.size;
+  }
+
+  readonly lookup: BeMusicSongImageLookup = (song, kind) => {
+    if (this.disposed) return undefined;
+    const key = `${song.sourceId}\u0000${song.chartPath}\u0000${kind}`;
+    const cached = this.images.get(key);
+    if (cached) {
+      // Re-insert so the map's insertion order doubles as the recency order the eviction walks.
+      this.images.delete(key);
+      this.images.set(key, cached);
+      return cached;
+    }
+    if (this.pending.has(key) || this.unavailable.has(key)) return undefined;
+    const path = resolveSongImagePath(song, kind);
+    const source = path !== undefined ? this.options.resolveSource(song) : undefined;
+    if (path === undefined || source === undefined) {
+      this.unavailable.add(key);
+      return undefined;
+    }
+    this.pending.add(key);
+    void this.load(key, source, song, path, this.generation);
+    return undefined;
+  };
+
+  /** Closes every image and forgets what was missing (e.g. after the song collection was replaced). */
+  clear(): void {
+    this.generation += 1;
+    for (const image of this.images.values()) image.close();
+    this.images.clear();
+    this.pending.clear();
+    this.unavailable.clear();
+  }
+
+  dispose(): void {
+    if (this.disposed) return;
+    this.clear();
+    this.disposed = true;
+  }
+
+  private async load(
+    key: string,
+    source: BrowserSongAssetSource,
+    song: BrowserSongEntry,
+    path: string,
+    generation: number,
+  ): Promise<void> {
+    let image: ImageBitmap | undefined;
+    try {
+      image = await (this.options.load ?? loadSongImage)(source, song, path);
+    } catch (error) {
+      log.debug('song image failed to load', { path, error });
+    }
+    if (this.disposed || generation !== this.generation) {
+      image?.close();
+      return;
+    }
+    this.pending.delete(key);
+    if (!image) {
+      this.unavailable.add(key);
+      return;
+    }
+    this.images.set(key, image);
+    this.evict();
+    this.options.onLoaded?.();
+  }
+
+  private evict(): void {
+    for (const [key, image] of this.images) {
+      if (this.images.size <= this.capacity) return;
+      this.images.delete(key);
+      image.close();
+    }
+  }
+}
+
+async function loadSongImage(
+  source: BrowserSongAssetSource,
+  song: BrowserSongEntry,
+  path: string,
+): Promise<ImageBitmap | undefined> {
+  const bytes = await loadAssetBytes(resolveChartImageAsset(source, song.chartPath, path));
+  return bytes ? loadImageBitmapFromBytes(path, bytes) : undefined;
+}
diff --git a/packages/player-web/src/skin/beatoraja/runtime-adapter.test.ts b/packages/player-web/src/skin/beatoraja/runtime-adapter.test.ts
index f768d3085..d84e9e0a4 100644
--- a/packages/player-web/src/skin/beatoraja/runtime-adapter.test.ts
+++ b/packages/player-web/src/skin/beatoraja/runtime-adapter.test.ts
@@ -319,6 +319,24 @@ describe('BeatorajaRuntimeAdapter — applyCommand', () => {
     expect(adapter.getTimerStart(lnHoldTimerId(1, 7)!)).toBeUndefined();
   });
 
+  it('ignores the long-note start / end commands (the LN-hold state stays on hold-lane / release-lane)', () => {
+    const clock = makeClock();
+    const adapter = new BeatorajaRuntimeAdapter({
+      chartPlayVariant: '7',
+      baseOps: new Set(),
+      getNowMs: clock.now,
+    });
+    clock.advance(1000);
+    adapter.applyCommand({ kind: 'hold-lane-until-beat', channel: '11', beat: 64 });
+    adapter.applyCommand({ kind: 'long-note-start', channel: '11', beat: 32, mode: 'cn' });
+    expect(adapter.isLaneLnHeld('11')).toBe(true);
+    adapter.applyCommand({ kind: 'long-note-end', channel: '11', outcome: 'dropped' });
+    expect(adapter.isLaneLnHeld('11')).toBe(true);
+    expect(adapter.getTimerStart(lnHoldTimerId(1, 1)!)).toBe(1000);
+    adapter.applyCommand({ kind: 'long-note-start', channel: '12', beat: 32, mode: 'ln' });
+    expect(adapter.isLaneLnHeld('12')).toBe(false);
+  });
+
   it('routes scratch (16 / 26) onto lane 0 → timer 100 (1P) / 110 (2P)', () => {
     // prop.lua `keyon_1p_scratch = 100`, `keyon_2p_scratch = 110`. Earlier the adapter mapped scratch
     // onto lane 8 → timer 108 (`keyon_1p_key8`), so scratch presses never lit the right beam.
diff --git a/packages/player/src/core/engine.ts b/packages/player/src/core/engine.ts
index 3c4805c76..1032ba179 100644
--- a/packages/player/src/core/engine.ts
+++ b/packages/player/src/core/engine.ts
@@ -54,7 +54,12 @@ import {
   resolveHighSpeedMultiplier,
   type HighSpeedControlAction,
 } from './high-speed-control.ts';
-import { createPlayerUiSignalBus, type PlayerGaugeSummary, type PlayerUiSignalBus } from './ui-signal-bus.ts';
+import {
+  createPlayerUiSignalBus,
+  type PlayerGaugeSummary,
+  type PlayerUiLongNoteMode,
+  type PlayerUiSignalBus,
+} from './ui-signal-bus.ts';
 import { createPlayerInputSignalBus, type PlayerInputSignalBus } from './input-signal-bus.ts';
 import { createInputWakeUp } from './input-wakeup.ts';
 import {
@@ -95,8 +100,11 @@ import {
   type JudgeSelectionCandidate,
   type JudgeWindowSetUs,
   type LongNoteStyle,
+  type PlaylogRulesetId,
+  type RulesetConfig,
   type RulesetJudgeIndex,
   type RulesetWindowTables,
+  type WindowPairUs,
 } from '../ruleset/index.ts';
 import { createPlaylogRecorder, type PlaylogRecordingOptions } from '../playlog/recorder.ts';
 import type { BeMusicPlaylog, PlaylogInputEvent } from '../playlog/format.ts';
@@ -307,6 +315,38 @@ export interface PlayerOptions {
    * against (`preparedChart`, or a chart remapped to the log's note arrangement).
    */
   replayInputs?: readonly PlaylogInputEvent[];
+  /**
+   * Called once, before playback starts, with the ruleset the play is judged under — after `judgeRuleset`,
+   * `judgeWindowMs`, and (for a replay) the recorded settings were applied. Lets a host show the windows the engine
+   * actually uses instead of re-deriving them. Under LR2 a mid-chart `#EXRANKxx` can narrow or widen the windows
+   * later; `windows` is the table in force at the start of the chart.
+   */
+  onRulesetResolved?: (info: PlayerRulesetInfo) => void;
+}
+
+export type { JudgeWindowSetUs, LongNoteStyle, PlaylogRulesetId, RulesetWindowTables, WindowPairUs };
+
+/** The judging setup a play resolved to; see {@link PlayerOptions.onRulesetResolved}. */
+export interface PlayerRulesetInfo {
+  /** Versioned ruleset id (`'lr2/1'`, `'beatoraja/1'`, `'iidx/1'`). */
+  id: string;
+  rulesetId: PlaylogRulesetId;
+  /** How the ruleset plays the chart's long notes (LN / per-note / charge). */
+  longNoteStyle: LongNoteStyle;
+  /**
+   * Judge windows (µs) at the start of the chart, in the ruleset convention `delta = noteTime - inputTime`: each pair
+   * is `[lateBound <= 0, earlyBound >= 0]`, so a positive delta is an EARLY press.
+   */
+  windows: RulesetWindowTables;
+}
+
+function reportResolvedRuleset(options: PlayerOptions, ruleset: RulesetConfig): void {
+  options.onRulesetResolved?.({
+    id: ruleset.id,
+    rulesetId: ruleset.rulesetId,
+    longNoteStyle: ruleset.longNoteStyle,
+    windows: ruleset.windows,
+  });
 }
 
 export interface PlayerSummary {
@@ -694,6 +734,11 @@ function resolveEffectiveLongNoteMode(style: LongNoteStyle, chartMode: LongNoteM
   }
 }
 
+/** The UI-command spelling of an effective long-note mode. */
+function toUiLongNoteMode(mode: LongNoteMode): PlayerUiLongNoteMode {
+  return mode === 3 ? 'hcn' : mode === 2 ? 'cn' : 'ln';
+}
+
 /** True for the modes that score the head on the press and the tail on the release. */
 function isChargeLongNoteMode(mode: LongNoteMode): boolean {
   return mode === 2 || mode === 3;
@@ -1866,6 +1911,7 @@ export async function autoPlay(json: BeMusicJson, options: PlayerOptions = {}):
       ...(options.judgeWindowMs !== undefined ? { judgeWindowOverrideMs: options.judgeWindowMs } : {}),
     },
   );
+  reportResolvedRuleset(options, autoRuleset);
   const { summary, applyGaugeJudge } = createInitialPlayerSummary(autoRuleset, autoRuleset.noteCount);
   const scoreTracker = createScoreTracker({ moneyScore: autoRuleset.moneyScore });
   // AUTO plays never have manual inputs, but recording still snapshots the resolved chart + play settings so an
@@ -2188,11 +2234,16 @@ export async function autoPlay(json: BeMusicJson, options: PlayerOptions = {}):
       // sprite vanishes while the lane laser still reads as "held" — both regressions reported during Phase 4c
       // shared-engine playthroughs.
       if (uiEnabled) {
+        uiSignals.pushCommand({ kind: 'long-note-end', channel: pending.note.channel, outcome: 'complete' });
         uiSignals.pushCommand({ kind: 'release-lane', channel: pending.note.channel });
       }
     }
   };
 
+  /** UI-command mode of a long note under the active ruleset (`autoPlay` and `manualPlay` share the mapping). */
+  const autoUiLongNoteMode = (note: TimedPlayableNote): PlayerUiLongNoteMode =>
+    toUiLongNoteMode(resolveEffectiveLongNoteMode(autoRuleset.longNoteStyle, resolvePlayableLongNoteMode(note) ?? 2));
+
   inputRuntime?.start();
 
   // Event-driven wake-up so the loop's inter-tick sleep can be cut short the moment a control command
@@ -2314,6 +2365,12 @@ export async function autoPlay(json: BeMusicJson, options: PlayerOptions = {}):
             });
             insertPendingAutoLongNote(pendingAutoLongNotes, note, endSeconds);
             if (uiEnabled) {
+              uiSignals.pushCommand({
+                kind: 'long-note-start',
+                channel: note.channel,
+                beat: note.beat,
+                mode: autoUiLongNoteMode(note),
+              });
               publishUiFrame(note.seconds, note.beat);
             }
           } else {
@@ -2513,6 +2570,7 @@ export async function manualPlay(json: BeMusicJson, options: PlayerOptions = {})
       ...(options.judgeWindowMs !== undefined ? { judgeWindowOverrideMs: options.judgeWindowMs } : {}),
     },
   );
+  reportResolvedRuleset(options, ruleset);
   /**
    * Signed judge windows in force at a given chart time. The ruleset owns the whole table set — key vs scratch,
    * note vs long-note end, and (LR2 only) the `#EXRANKxx` timeline — so the engine never derives a window itself.
@@ -2997,6 +3055,16 @@ export async function manualPlay(json: BeMusicJson, options: PlayerOptions = {})
           endSeconds,
         });
         insertPendingAutoLongNote(pendingAutoScratchLongNotes, note, endSeconds);
+        if (uiEnabled) {
+          uiSignals.pushCommand({
+            kind: 'long-note-start',
+            channel: note.channel,
+            beat: note.beat,
+            mode: toUiLongNoteMode(
+              resolveEffectiveLongNoteMode(ruleset.longNoteStyle, resolvePlayableLongNoteMode(note) ?? 2),
+            ),
+          });
+        }
         continue;
       }
       applyJudgeToSummary(summary, 'PERFECT', scoreTracker);
@@ -3057,6 +3125,7 @@ export async function manualPlay(json: BeMusicJson, options: PlayerOptions = {})
       // fades out at the tail. Without this the scratch streak keeps glowing past the LN's visual end. Gated on
       // `uiEnabled` to match the matching `hold-lane-until-beat` push in `applyAutoScratchJudgements`.
       if (uiEnabled) {
+        uiSignals.pushCommand({ kind: 'long-note-end', channel: pending.note.channel, outcome: 'complete' });
         uiSignals.pushCommand({ kind: 'release-lane', channel: pending.note.channel });
       }
     }
@@ -3330,6 +3399,11 @@ export async function manualPlay(json: BeMusicJson, options: PlayerOptions = {})
     // set; without it the sustain glow / lane laser would stay lit indefinitely once the engine finalizes the
     // LN (early grace expiry, end-beat reached, or kitty-state release).
     if (uiEnabled) {
+      uiSignals.pushCommand({
+        kind: 'long-note-end',
+        channel,
+        outcome: judge.kind === 'BAD' || judge.kind === 'POOR' ? 'dropped' : 'complete',
+      });
       uiSignals.pushCommand({ kind: 'release-lane', channel });
     }
     applyResolvedManualJudge(channel, judge, atSeconds);
@@ -3599,6 +3673,12 @@ export async function manualPlay(json: BeMusicJson, options: PlayerOptions = {})
       // on manual play, and the skin's sustain-glow gated on timer 70..89 stays invisible for the whole hold.
       if (uiEnabled && longNoteMode !== undefined) {
         uiSignals.pushCommand({ kind: 'hold-lane-until-beat', channel, beat: candidate.endBeat ?? candidate.beat });
+        uiSignals.pushCommand({
+          kind: 'long-note-start',
+          channel,
+          beat: candidate.beat,
+          mode: toUiLongNoteMode(longNoteMode),
+        });
       }
       const headJudge = resolveManualTimedJudge(signedDeltaMs, judgeWindowsFor(channel, nowSec));
       if (longNoteMode !== undefined && isChargeLongNoteMode(longNoteMode)) {
@@ -3609,6 +3689,7 @@ export async function manualPlay(json: BeMusicJson, options: PlayerOptions = {})
           activeLongNotesByChannel.delete(channel);
           longHoldUntilMsByChannel.delete(channel);
           if (uiEnabled) {
+            uiSignals.pushCommand({ kind: 'long-note-end', channel, outcome: 'dropped' });
             uiSignals.pushCommand({ kind: 'release-lane', channel });
           }
           collectMultiBad();
diff --git a/packages/player/src/core/ui-signal-bus.ts b/packages/player/src/core/ui-signal-bus.ts
index 7f24fab34..c72ff9e46 100644
--- a/packages/player/src/core/ui-signal-bus.ts
+++ b/packages/player/src/core/ui-signal-bus.ts
@@ -88,13 +88,33 @@ export interface PlayerUiFramePayload {
   activeAudioVoiceCount?: number;
 }
 
+/**
+ * How the active ruleset plays a long note — which is not always the chart's `#LNMODE`: LR2 plays every long note as
+ * an `'ln'`, IIDX plays them as charge notes. `'ln'` judges once (the start, early release = BAD), `'cn'` judges the
+ * start and the release, `'hcn'` additionally drains the gauge while it isn't held.
+ */
+export type PlayerUiLongNoteMode = 'ln' | 'cn' | 'hcn';
+
+/**
+ * How a held long note finished: `'complete'` when its end was judged a hit, `'dropped'` when it ended in a BAD / POOR
+ * (released early, or a broken charge-note head under IIDX).
+ */
+export type PlayerUiLongNoteOutcome = 'complete' | 'dropped';
+
 export type PlayerUiCommand =
   | { kind: 'flash-lane'; channel: string }
   | { kind: 'hold-lane-until-beat'; channel: string; beat: number }
   | { kind: 'press-lane'; channel: string }
   | { kind: 'release-lane'; channel: string }
   | { kind: 'trigger-poor-bga'; seconds: number }
-  | { kind: 'clear-poor-bga' };
+  | { kind: 'clear-poor-bga' }
+  /**
+   * A long note's head was hit (or autoplayed) and the hold began. `beat` is the head's beat, which identifies the long
+   * note on its lane; `mode` is the mode the engine actually plays it in. At most one long note is held per channel.
+   */
+  | { kind: 'long-note-start'; channel: string; beat: number; mode: PlayerUiLongNoteMode }
+  /** The long note held on `channel` (announced by the last `long-note-start` there) finished. */
+  | { kind: 'long-note-end'; channel: string; outcome: PlayerUiLongNoteOutcome };
 
 export interface PlayerUiSignalBus {
   readonly frameTick: WritableSignal<number>;
diff --git a/packages/player/src/index.test.ts b/packages/player/src/index.test.ts
index 76033af03..f663fffa2 100644
--- a/packages/player/src/index.test.ts
+++ b/packages/player/src/index.test.ts
@@ -80,6 +80,7 @@ import {
   type CreateAudioSessionContext,
   type CreatePlayerUiRuntimeContext,
   type PlayerLoadProgress,
+  type PlayerRulesetInfo,
   extractInvisiblePlayableNotes,
   extractLandmineNotes,
   extractPlayableNotes,
@@ -95,6 +96,7 @@ import {
   resolveBmsControlFlowForPlayback,
 } from './index.ts';
 import type { PlayerInputCommand } from './core/input-signal-bus.ts';
+import type { PlayerUiCommand } from './core/ui-signal-bus.ts';
 import { resolveChartVolWavGain, resolveDisplayedJudgeRankLabel, resolveDisplayedJudgeRankValue } from './utils.ts';
 import { parsePlaylog, serializePlaylog, simulatePlaylog, type BeMusicPlaylog } from './playlog/index.ts';
 
@@ -278,6 +280,27 @@ function createJudgeComboRecorder(records: RecordedJudgeCombo[]) {
   };
 }
 
+/** UI runtime that records every long-note command the engine pushes (the UI must be enabled for them to fire). */
+function createLongNoteCommandRecorder(records: PlayerUiCommand[]) {
+  return async (context: CreatePlayerUiRuntimeContext) => {
+    const original = context.uiSignals.pushCommand;
+    context.uiSignals.pushCommand = (command) => {
+      if (command.kind === 'long-note-start' || command.kind === 'long-note-end') {
+        records.push(command);
+      }
+      original(command);
+    };
+    return {
+      tuiEnabled: true,
+      start: () => undefined,
+      stop: () => undefined,
+      dispose: () => undefined,
+      triggerPoor: () => undefined,
+      clearPoor: () => undefined,
+    };
+  };
+}
+
 function createPlaybackEndRecorder(targetSeconds: number, records: number[]) {
   return async (context: CreatePlayerUiRuntimeContext) => ({
     tuiEnabled: true,
@@ -992,6 +1015,131 @@ describe('player', () => {
     expect(releaseIndex).toBeGreaterThan(holdIndex);
   });
 
+  test('player: auto play announces each long note start and completion with the mode it plays in', async () => {
+    const lr2Commands: PlayerUiCommand[] = [];
+    await autoPlay(createLnobjLongNoteChart(2), {
+      auto: true,
+      speed: 4,
+      leadInMs: 0,
+      audio: false,
+      createUiRuntime: createLongNoteCommandRecorder(lr2Commands),
+    });
+    // LR2 plays every long note as an LN, whatever `#LNMODE` says.
+    expect(lr2Commands).toEqual([
+      { kind: 'long-note-start', channel: '11', beat: 4, mode: 'ln' },
+      { kind: 'long-note-end', channel: '11', outcome: 'complete' },
+    ]);
+
+    const beatorajaCommands: PlayerUiCommand[] = [];
+    await autoPlay(createLnobjLongNoteChart(3), {
+      auto: true,
+      speed: 4,
+      leadInMs: 0,
+      audio: false,
+      judgeRuleset: 'beatoraja',
+      createUiRuntime: createLongNoteCommandRecorder(beatorajaCommands),
+    });
+    expect(beatorajaCommands).toEqual([
+      { kind: 'long-note-start', channel: '11', beat: 4, mode: 'hcn' },
+      { kind: 'long-note-end', channel: '11', outcome: 'complete' },
+    ]);
+  });
+
+  test('player: auto scratch announces the scratch long note start and completion', async () => {
+    const commands: PlayerUiCommand[] = [];
+    await manualPlay(createScratchLnobjLongNoteChart(), {
+      autoScratch: true,
+      speed: 4,
+      leadInMs: 0,
+      audio: false,
+      createUiRuntime: createLongNoteCommandRecorder(commands),
+    });
+    expect(commands).toEqual([
+      { kind: 'long-note-start', channel: '16', beat: 4, mode: 'ln' },
+      { kind: 'long-note-end', channel: '16', outcome: 'complete' },
+    ]);
+  });
+
+  test('player: a long note held to its end completes', async () => {
+    const commands: PlayerUiCommand[] = [];
+    await manualPlay(createLnobjLongNoteChart(), {
+      speed: 1,
+      leadInMs: 0,
+      audio: false,
+      createUiRuntime: createLongNoteCommandRecorder(commands),
+      createInputRuntime: createScheduledInputRuntime([
+        { delayMs: 520, command: { kind: 'kitty-state', pressTokens: ['z'], repeatTokens: [], releaseTokens: [] } },
+        { delayMs: 520, command: { kind: 'lane-input', tokens: ['z'] } },
+        { delayMs: 1700, command: { kind: 'interrupt', reason: 'escape' } },
+      ]),
+    }).catch((error: unknown) => {
+      if (!(error instanceof PlayerInterruptedError)) throw error;
+    });
+    expect(commands).toEqual([
+      { kind: 'long-note-start', channel: '11', beat: 4, mode: 'ln' },
+      { kind: 'long-note-end', channel: '11', outcome: 'complete' },
+    ]);
+  });
+
+  test('player: a long note released early is dropped', async () => {
+    const commands: PlayerUiCommand[] = [];
+    await manualPlay(createLnobjLongNoteChart(1), {
+      speed: 1,
+      leadInMs: 0,
+      audio: false,
+      createUiRuntime: createLongNoteCommandRecorder(commands),
+      createInputRuntime: createScheduledInputRuntime([
+        { delayMs: 520, command: { kind: 'kitty-state', pressTokens: ['z'], repeatTokens: [], releaseTokens: [] } },
+        { delayMs: 520, command: { kind: 'lane-input', tokens: ['z'] } },
+        { delayMs: 900, command: { kind: 'kitty-state', pressTokens: [], repeatTokens: [], releaseTokens: ['z'] } },
+        { delayMs: 1200, command: { kind: 'interrupt', reason: 'escape' } },
+      ]),
+    }).catch((error: unknown) => {
+      if (!(error instanceof PlayerInterruptedError)) throw error;
+    });
+    expect(commands).toEqual([
+      { kind: 'long-note-start', channel: '11', beat: 4, mode: 'ln' },
+      { kind: 'long-note-end', channel: '11', outcome: 'dropped' },
+    ]);
+  });
+
+  test('player: reports the resolved ruleset and its windows before playback', async () => {
+    const manualInfos: PlayerRulesetInfo[] = [];
+    await manualPlay(createLnobjLongNoteChart(), {
+      speed: 4,
+      leadInMs: 0,
+      audio: false,
+      tui: false,
+      judgeRuleset: 'beatoraja',
+      onRulesetResolved: (info) => manualInfos.push(info),
+      createInputRuntime: createScheduledInputRuntime([
+        { delayMs: 0, command: { kind: 'interrupt', reason: 'escape' } },
+      ]),
+    }).catch((error: unknown) => {
+      if (!(error instanceof PlayerInterruptedError)) throw error;
+    });
+    expect(manualInfos).toHaveLength(1);
+    expect(manualInfos[0]).toMatchObject({ id: 'beatoraja/1', rulesetId: 'beatoraja', longNoteStyle: 'per-note' });
+    const [lateBoundUs, earlyBoundUs] = manualInfos[0]!.windows.note.judges[0];
+    expect(lateBoundUs).toBeLessThan(0);
+    expect(earlyBoundUs).toBeGreaterThan(0);
+
+    // The debug BAD-window override (a replay restores it from the log) reaches the reported tables too.
+    const autoInfos: PlayerRulesetInfo[] = [];
+    await autoPlay(createLnobjLongNoteChart(), {
+      auto: true,
+      speed: 4,
+      leadInMs: 0,
+      audio: false,
+      tui: false,
+      judgeWindowMs: 300,
+      onRulesetResolved: (info) => autoInfos.push(info),
+    });
+    expect(autoInfos).toHaveLength(1);
+    expect(autoInfos[0]).toMatchObject({ id: 'lr2/1', rulesetId: 'lr2', longNoteStyle: 'ln' });
+    expect(autoInfos[0]!.windows.note.judges[3][1]).toBe(300_000);
+  });
+
   test('player: stray key in front of a note fires LR2 empty POOR — gauge -2, counters untouched', async () => {
     // BPM 240 → measure 1 starts at chart 1.0 s. The press lands at ~0.3 s, i.e. ~0.7 s before the note — outside
     // the BAD window but inside LR2's 1-second early 空POOR region.
diff --git a/packages/skin-sdk/scripts/exports-cases.ts b/packages/skin-sdk/scripts/exports-cases.ts
index 5cc64f983..1640a9039 100644
--- a/packages/skin-sdk/scripts/exports-cases.ts
+++ b/packages/skin-sdk/scripts/exports-cases.ts
@@ -64,6 +64,26 @@ const BENCH_AUDIO = {
   bands: Array.from({ length: skinSdkApi.AUDIO_BAND_COUNT }, (_, index) => index / skinSdkApi.AUDIO_BAND_COUNT),
 };
 const BENCH_PALETTE = [0xffffff, 0xffd84a, 0x4ad8ff];
+const BENCH_SETTINGS = [
+  {
+    kind: 'choice',
+    id: 'theme',
+    label: 'Theme',
+    options: [
+      { value: 'neon', label: 'Neon' },
+      { value: 'mono', label: 'Mono' },
+    ],
+    default: 'neon',
+  },
+  { kind: 'number', id: 'judgeOffset', label: 'Judge offset', min: -40, max: 40, step: 2, default: 0, unit: 'px' },
+  { kind: 'toggle', id: 'glow', label: 'Glow', default: true },
+] satisfies skinSdkApi.BeMusicSkinSetting[];
+const BENCH_STORED_SETTINGS = { theme: 'mono', judgeOffset: 72, glow: 'yes', removed: 1 };
+const BENCH_JUDGE_TIMINGS = Array.from({ length: 1000 }, (_, index) => ({
+  atMs: index * 120,
+  deltaMs: Math.round(Math.sin(index * 1.7) * 60),
+  judge: 'GREAT',
+})) satisfies skinSdkApi.BeMusicJudgeTiming[];
 const BENCH_SKIN = {
   apiVersion: skinSdkApi.BE_MUSIC_SKIN_API_VERSION,
   id: 'bench',
@@ -93,6 +113,11 @@ export function registerSkinSdkExportsCases(define: DefineBenchmarkCase): void {
       skinSdkApi.bandLevel(BENCH_AUDIO.bands, 5, 24);
     },
   });
+  define('skin-sdk.binJudgeTimings', {
+    run: () => {
+      skinSdkApi.binJudgeTimings(BENCH_JUDGE_TIMINGS, 2, 100);
+    },
+  });
   define('skin-sdk.comboTier', {
     run: () => {
       skinSdkApi.comboTier(120);
@@ -198,6 +223,11 @@ export function registerSkinSdkExportsCases(define: DefineBenchmarkCase): void {
       skinSdkApi.resolveBeMusicLaneKind('12', 2, '7');
     },
   });
+  define('skin-sdk.resolveBeMusicSkinSettings', {
+    run: () => {
+      skinSdkApi.resolveBeMusicSkinSettings({ settings: BENCH_SETTINGS }, BENCH_STORED_SETTINGS);
+    },
+  });
   define('skin-sdk.resolveFallbackLaneLayout', {
     run: () => {
       skinSdkApi.resolveFallbackLaneLayout({
@@ -299,4 +329,9 @@ export function registerSkinSdkExportsCases(define: DefineBenchmarkCase): void {
       skinSdkApi.validateBeMusicSkin(BENCH_SKIN);
     },
   });
+  define('skin-sdk.validateBeMusicSkinSettings', {
+    run: () => {
+      skinSdkApi.validateBeMusicSkinSettings(BENCH_SETTINGS);
+    },
+  });
 }
diff --git a/packages/skin-sdk/src/define.test.ts b/packages/skin-sdk/src/define.test.ts
index f4f253e01..1359a18d3 100644
--- a/packages/skin-sdk/src/define.test.ts
+++ b/packages/skin-sdk/src/define.test.ts
@@ -24,10 +24,14 @@ function skin(overrides: Partial<BeMusicSkin> = {}): BeMusicSkin {
 }
 
 describe('isSupportedBeMusicSkinApiVersion', () => {
-  it('accepts the current revision only', () => {
+  it('accepts the current revision', () => {
     expect(isSupportedBeMusicSkinApiVersion(BE_MUSIC_SKIN_API_VERSION)).toBe(true);
+  });
+
+  it('refuses future and unknown revisions', () => {
     expect(isSupportedBeMusicSkinApiVersion(BE_MUSIC_SKIN_API_VERSION + 1)).toBe(false);
     expect(isSupportedBeMusicSkinApiVersion(0)).toBe(false);
+    expect(isSupportedBeMusicSkinApiVersion(1.5)).toBe(false);
   });
 });
 
@@ -53,6 +57,32 @@ describe('validateBeMusicSkin', () => {
     expect(validateBeMusicSkin(skin({ apiVersion: 99 }))[0]).toMatch(/apiVersion 99/u);
   });
 
+  it('checks an optional decide screen', () => {
+    expect(validateBeMusicSkin(skin({ decide: { durationMs: 1500, draw: () => {} } }))).toEqual([]);
+    expect(validateBeMusicSkin(skin({ decide: {} as BeMusicSkin['decide'] }))).toEqual([
+      'decide.draw must be a function',
+    ]);
+    expect(validateBeMusicSkin(skin({ decide: { durationMs: -1, draw: () => {} } }))).toEqual([
+      'decide.durationMs -1 must be a non-negative number',
+    ]);
+  });
+
+  it('includes problems with the settings schema', () => {
+    expect(
+      validateBeMusicSkin(skin({ settings: [{ kind: 'toggle', id: 'glow', label: 'Glow', default: true }] })),
+    ).toEqual([]);
+    expect(
+      validateBeMusicSkin(
+        skin({
+          settings: [
+            { kind: 'toggle', id: 'glow', label: 'Glow', default: true },
+            { kind: 'toggle', id: 'glow', label: 'Glow again', default: false },
+          ],
+        }),
+      ),
+    ).toEqual(['setting "glow": id is used more than once']);
+  });
+
   it('reports malformed ids, versions, and metadata', () => {
     const problems = validateBeMusicSkin(
       skin({
diff --git a/packages/skin-sdk/src/define.ts b/packages/skin-sdk/src/define.ts
index 5d823e3d1..2493bcb65 100644
--- a/packages/skin-sdk/src/define.ts
+++ b/packages/skin-sdk/src/define.ts
@@ -1,3 +1,4 @@
+import { validateBeMusicSkinSettings } from './settings.ts';
 import type { BeMusicSkin, BeMusicSurfaceContextKind } from './types.ts';
 
 /**
@@ -32,7 +33,7 @@ function isHttpUrl(value: string): boolean {
 
 /**
  * Problems with a skin's declaration — an unsupported API revision, a malformed id or version, missing author, bad
- * URLs — as human-readable messages. Empty when the skin is fine.
+ * URLs, an invalid `settings` schema — as human-readable messages. Empty when the skin is fine.
  */
 export function validateBeMusicSkin(skin: BeMusicSkin): string[] {
   const problems: string[] = [];
@@ -57,6 +58,14 @@ export function validateBeMusicSkin(skin: BeMusicSkin): string[] {
   for (const screen of ['gameplay', 'select', 'result'] as const) {
     if (typeof skin[screen]?.draw !== 'function') problems.push(`${screen}.draw must be a function`);
   }
+  if (skin.decide !== undefined) {
+    if (typeof skin.decide.draw !== 'function') problems.push('decide.draw must be a function');
+    const { durationMs } = skin.decide;
+    if (durationMs !== undefined && !(Number.isFinite(durationMs) && durationMs >= 0)) {
+      problems.push(`decide.durationMs ${String(durationMs)} must be a non-negative number`);
+    }
+  }
+  problems.push(...validateBeMusicSkinSettings(skin.settings));
   return problems;
 }
 
diff --git a/packages/skin-sdk/src/index.ts b/packages/skin-sdk/src/index.ts
index db8e0e6da..98ecdea82 100644
--- a/packages/skin-sdk/src/index.ts
+++ b/packages/skin-sdk/src/index.ts
@@ -9,19 +9,24 @@
  * - Play state: judgement words (`judgeDisplayWord`, the flashing GREAT of a PERFECT), moments (combo milestones, the
  *   clear line, full combo, count-in progress), effect levels, input impulses, and the loading caption.
  * - Sound: `audioDrive` turns the frame's audio analysis into ready-to-use drive values.
- * - Song facts: select-row facts (`resolveSongRowFacts`), result lamp and track rows.
+ * - Song facts: select-row facts (`resolveSongRowFacts`), result lamp and track rows, and judgement-timing histograms
+ *   (`binJudgeTimings`).
+ * - Skin settings: `resolveBeMusicSkinSettings` fills in and checks the values of a skin's `settings` schema.
  * - Text and motion: tabular figure layout, the default text face, easing, staged timelines, roll-up counters, and a
  *   deterministic hash for jitter.
  */
 export type * from './types.ts';
 export type * from './song.ts';
 export type * from './result-data.ts';
+export type * from './play-options.ts';
 
 export * from './audio.ts';
 export * from './playfield.ts';
 export * from './lane-geometry.ts';
 
 export * from './define.ts';
+export * from './settings.ts';
+export * from './judge-timing.ts';
 export * from './stage.ts';
 export * from './layout.ts';
 export * from './fonts.ts';
diff --git a/packages/skin-sdk/src/judge-timing.test.ts b/packages/skin-sdk/src/judge-timing.test.ts
new file mode 100644
index 000000000..ce1a7bccf
--- /dev/null
+++ b/packages/skin-sdk/src/judge-timing.test.ts
@@ -0,0 +1,49 @@
+import { describe, expect, it } from 'vite-plus/test';
+import { binJudgeTimings } from './judge-timing.ts';
+
+const timings = (...deltas: number[]) => deltas.map((deltaMs) => ({ deltaMs }));
+
+describe('binJudgeTimings', () => {
+  it('has no bins without timings or a range', () => {
+    expect(binJudgeTimings([])).toEqual({ binMs: 1, originMs: 0, counts: [] });
+  });
+
+  it('bins 1 ms wide from the earliest to the latest timing by default', () => {
+    expect(binJudgeTimings(timings(-2, 0, 0, 1))).toEqual({ binMs: 1, originMs: -2, counts: [1, 0, 2, 1] });
+  });
+
+  it('puts bin edges on multiples of binMs, early timings below zero', () => {
+    // Bins: [-10, -5) [-5, 0) [0, 5) [5, 10)
+    expect(binJudgeTimings(timings(-7, -5, -0.5, 0, 4.9, 5, 9), 5)).toEqual({
+      binMs: 5,
+      originMs: -10,
+      counts: [1, 2, 2, 2],
+    });
+  });
+
+  it('reports a 0 origin for timings that are all late', () => {
+    expect(Object.is(binJudgeTimings(timings(0.5, 3), 2).originMs, 0)).toBe(true);
+  });
+
+  it('covers -rangeMs..rangeMs when given and leaves timings outside out', () => {
+    expect(binJudgeTimings(timings(-30, -10, 0, 10, 30), 10, 20)).toEqual({
+      binMs: 10,
+      originMs: -20,
+      counts: [0, 1, 1, 1, 0],
+    });
+    expect(binJudgeTimings([], 10, 20).counts).toEqual([0, 0, 0, 0, 0]);
+  });
+
+  it('skips timings that are not finite', () => {
+    expect(binJudgeTimings(timings(Number.NaN, 1, Number.POSITIVE_INFINITY))).toEqual({
+      binMs: 1,
+      originMs: 1,
+      counts: [1],
+    });
+  });
+
+  it('refuses a bin width that is not positive', () => {
+    expect(() => binJudgeTimings(timings(1), 0)).toThrow(RangeError);
+    expect(() => binJudgeTimings(timings(1), Number.NaN)).toThrow(RangeError);
+  });
+});
diff --git a/packages/skin-sdk/src/judge-timing.ts b/packages/skin-sdk/src/judge-timing.ts
new file mode 100644
index 000000000..b249bb14b
--- /dev/null
+++ b/packages/skin-sdk/src/judge-timing.ts
@@ -0,0 +1,53 @@
+import type { BeMusicJudgeTiming } from './types.ts';
+
+/** A histogram of judgement timings (see {@link binJudgeTimings}). */
+export interface BeMusicJudgeTimingHistogram {
+  /** Width of each bin (ms). */
+  binMs: number;
+  /** Lower edge (ms) of `counts[0]`; bin `i` covers `originMs + i × binMs` up to (not including) the next edge. */
+  originMs: number;
+  /** Judgements per bin, earliest (most negative) first. */
+  counts: readonly number[];
+}
+
+/**
+ * Bins judgement timings by their signed offset for a timing histogram (negative = early / FAST, positive = late /
+ * SLOW). Bin edges sit on multiples of `binMs`, so the bin starting at 0 holds the dead-on and slightly late presses.
+ *
+ * Without `rangeMs` the bins cover the earliest to the latest timing (no bins when `timings` is empty). With it they
+ * cover `-rangeMs..rangeMs` whatever the timings, so histograms of different plays line up, and timings outside that
+ * range are left out.
+ *
+ * @throws RangeError when `binMs` is not a positive finite number.
+ */
+export function binJudgeTimings(
+  timings: readonly Pick<BeMusicJudgeTiming, 'deltaMs'>[],
+  binMs = 1,
+  rangeMs?: number,
+): BeMusicJudgeTimingHistogram {
+  if (!(Number.isFinite(binMs) && binMs > 0)) throw new RangeError(`binMs must be a positive number, got ${binMs}`);
+  let min: number;
+  let max: number;
+  if (rangeMs !== undefined) {
+    const range = Math.abs(rangeMs);
+    min = -range;
+    max = range;
+  } else {
+    min = Number.POSITIVE_INFINITY;
+    max = Number.NEGATIVE_INFINITY;
+    for (const { deltaMs } of timings) {
+      if (!Number.isFinite(deltaMs)) continue;
+      if (deltaMs < min) min = deltaMs;
+      if (deltaMs > max) max = deltaMs;
+    }
+    if (min > max) return { binMs, originMs: 0, counts: [] };
+  }
+  const firstBin = Math.floor(min / binMs);
+  const counts = Array.from({ length: Math.floor(max / binMs) - firstBin + 1 }, () => 0);
+  for (const { deltaMs } of timings) {
+    if (!Number.isFinite(deltaMs) || deltaMs < min || deltaMs > max) continue;
+    counts[Math.floor(deltaMs / binMs) - firstBin]! += 1;
+  }
+  // `+ 0` turns a -0 origin (an all-late set starting in bin 0) into 0.
+  return { binMs, originMs: firstBin * binMs + 0, counts };
+}
diff --git a/packages/skin-sdk/src/play-options.ts b/packages/skin-sdk/src/play-options.ts
new file mode 100644
index 000000000..96253a352
--- /dev/null
+++ b/packages/skin-sdk/src/play-options.ts
@@ -0,0 +1,155 @@
+/**
+ * Per-session gameplay tweaks the player picks on the select screen: hi-speed, autoplay, note arrangement, gauge type,
+ * HIDDEN / SUDDEN and the lane cover, BGA display, and the song-list filters. The host owns the live values and hands
+ * them to every play it launches; be-music skins read them from `BeMusicSelectFrame.playOptions` /
+ * `BeMusicDecideFrame.playOptions` and change them through `BeMusicSelectActions.setPlayOption` /
+ * `cyclePlayOption`. Several fields mirror an LR2 `#SRC_BUTTON` type, noted per field.
+ */
+export interface BeMusicPlayOptions {
+  /**
+   * Visual scroll-speed multiplier. The chart's note-to-second mapping is unchanged; only the on-screen pixels-per-beat
+   * scaling moves. Range matches gameplay's runtime adjust hotkeys (`ArrowUp` / `ArrowDown` during play).
+   */
+  hiSpeed: number;
+  /**
+   * When `true`, every note auto-judges as PERFECT at its scheduled time. Mirrors the LR2 AUTOPLAY skin button
+   * (`#SRC_BUTTON type=16`); the dedicated `onSongAutoPlay` callback also forces this on for that single launch
+   * regardless of what's stored here.
+   */
+  autoPlay: boolean;
+  /**
+   * BGA (background animation) display mode. Mirrors the LR2 `#SRC_BUTTON,type=72` cycle (OFF / ON / AUTOPLAY ONLY).
+   * When `'AUTOPLAY_ONLY'` the BGA renders only when {@link autoPlay} (or the AUTOPLAY skin-button override) is also
+   * active — matches LR2 behavior where AUTOPLAY ONLY hides BGA during regular human-played sessions.
+   */
+  bga: BeMusicBgaMode;
+  /**
+   * BGA frame size — `'NORMAL'` uses the skin's default `#DST_BGA` rect (op 30), `'EXTEND'` uses the larger variant
+   * gated on op 31. Mirrors `#SRC_BUTTON,type=73`.
+   */
+  bgaSize: BeMusicBgaSize;
+  /**
+   * Score-graph (per-judge prediction line) display flag. Mirrors `#SRC_BUTTON,type=70` and ops 38 (off) / 39 (on). The
+   * LR2 default skin gates its score-graph chrome on op 39 — toggling this on reveals those elements without needing a
+   * dedicated renderer in the gameplay scene.
+   */
+  scoreGraph: boolean;
+  /**
+   * Difficulty filter for the song-list. `'ALL'` shows every chart; the named values restrict the bar list to charts
+   * whose `#DIFFICULTY` matches the corresponding LR2 enum (1=BEGINNER.. 5=INSANE). Mirrors `#SRC_BUTTON,type=10`
+   * (cycling) and types 91..96 (direct set).
+   */
+  difficultyFilter: BeMusicDifficultyFilter;
+  /**
+   * Keymode filter for the song-list. `'ALL'` shows every chart; the named values restrict the bar list to charts whose
+   * lane usage matches the corresponding LR2 keymode op (160=7K..164=9K). Mirrors `#SRC_BUTTON,type=11` cycling.
+   */
+  keysFilter: BeMusicKeysFilter;
+  /**
+   * Sort order for the song-list. Mirrors `#SRC_BUTTON,type=12` cycling (off / level / title / clear). `'CLEAR'` is a
+   * no-op for now — without persisted play history every chart has the same "not played" status, so the sorted order
+   * matches the input order anyway.
+   */
+  sort: BeMusicSelectSort;
+  /**
+   * HS-FIX mode picked from `#SRC_BUTTON,type=55`. Without HS-FIX (`'OFF'`) the visual scroll rate scales with the
+   * chart's BPM, so high-BPM sections fly past while low-BPM sections crawl. The other modes apply a one-time HS
+   * multiplier so the user's chosen HS feels consistent across the chart:
+   *
+   * - `'MAXBPM'` — pegs the user's HS to the chart's MAX BPM (slower segments scroll proportionally slower).
+   * - `'MINBPM'` — pegs to MIN BPM (faster segments scroll faster).
+   * - `'AVERAGE'` — pegs to the time-weighted average BPM.
+   * - `'CONSTANT'` — adjusts HS at every BPM change so visual scroll is exactly constant. Falls back to `'AVERAGE'`
+   *   behavior for now (per-frame BPM-aware scroll requires a render-pipeline change that hasn't landed yet).
+   */
+  hsFix: BeMusicHsFix;
+  /**
+   * 1P-side HIDDEN / SUDDEN effect picked from `#SRC_BUTTON,type=50`. Cycles OFF → HIDDEN → SUDDEN → HID+SUD on each
+   * click. Drives the opaque mask over the 1P keyboard / scratch lanes. SP charts only render this side; DP charts pair
+   * it with {@link hiddenSudden2P}.
+   */
+  hiddenSudden1P: BeMusicHiddenSudden;
+  /**
+   * 2P-side HIDDEN / SUDDEN effect picked from `#SRC_BUTTON,type=51`. Independent from the 1P value — LR2's panel UI
+   * exposes per-side cycle buttons because real players sometimes want, e.g., HIDDEN on their dominant side and OFF on
+   * the other.
+   */
+  hiddenSudden2P: BeMusicHiddenSudden;
+  /**
+   * Shutter / LANE COVER coverage (0..1) — the fraction of the playfield the LANE COVER (and any active HIDDEN / SUDDEN
+   * masks) occupies. Drives slider `type=4 / 5` on the panel-1 shutter track. Adjustable via the 1P 4-key / 6-key
+   * (`KeyD` / `KeyF`) when panel 1 is open. Independent from {@link laneCover} — height is preserved across ON/OFF
+   * toggles so the user doesn't have to redial it after re-enabling the cover.
+   */
+  shutter: number;
+  /**
+   * LANE COVER ON / OFF toggle. In LR2's SYSTEM OPTION panel this is the binary state shown next to the "LANE COVER"
+   * label — distinct from {@link shutter} (which is the height). When OFF, the gameplay-side mask is hidden regardless
+   * of `shutter`. When ON, the mask renders at the `shutter`-derived height.
+   */
+  laneCover: boolean;
+  /**
+   * 1P side auto-scratch flag picked from `#SRC_BUTTON,type=44`. When true the scratch lane (channel 16) auto-judges as
+   * PERFECT at every note's scheduled time, so the player only has to play the keys.
+   */
+  autoScratch1P: boolean;
+  /** 2P side auto-scratch (`#SRC_BUTTON,type=45`, channel 26). */
+  autoScratch2P: boolean;
+  /**
+   * DP FLIP toggle picked from `#SRC_BUTTON,type=54`. When true, 1P and 2P lane channels are swapped at chart-prepare
+   * time. Only DP charts have lanes on both sides, so SP charts are unaffected. LR2 has no dedicated op for DP FLIP —
+   * it's a pure gameplay-side transformation.
+   */
+  dpFlip: boolean;
+  /**
+   * Note-arrangement mode for the 1P keyboard lanes (channels 11..15 + 18 + 19). Mirrors `#SRC_BUTTON,type=42`. Scratch
+   * (channel 16) is never touched.
+   *
+   * - `OFF` — original chart layout
+   * - `MIRROR` — reverse the lane order (1↔7, 2↔6, 3↔5)
+   * - `RANDOM` — chart-wide random permutation of the lanes
+   * - `S-RANDOM` — per-chord random assignment (chord shapes are NOT preserved)
+   * - `SCATTER` — currently aliased to `RANDOM`; reserved for a future per-measure permutation pass
+   */
+  random1P: BeMusicRandomMode;
+  /** 2P side note arrangement (channels 21..25 + 28 + 29). */
+  random2P: BeMusicRandomMode;
+  /**
+   * 1P gauge variant (`#SRC_BUTTON,type=40`):
+   *
+   * - `GROOVE` — LR2 default cumulative gauge (start 20 %, clear 80 %)
+   * - `HARD` — survival gauge (start 100 %, fail at 0 %)
+   * - `DEATH` — instant-death (start 100 %, any miss = 0)
+   * - `EASY` — gentler GROOVE (clear 60 %)
+   */
+  gauge1P: BeMusicGaugeType;
+  /** 2P gauge variant (`#SRC_BUTTON,type=41`). */
+  gauge2P: BeMusicGaugeType;
+}
+
+/** Allowed values for {@link BeMusicPlayOptions.difficultyFilter}. */
+export type BeMusicDifficultyFilter = 'ALL' | 'BEGINNER' | 'NORMAL' | 'HYPER' | 'ANOTHER' | 'INSANE';
+
+/** Allowed values for {@link BeMusicPlayOptions.keysFilter}. */
+export type BeMusicKeysFilter = 'ALL' | 'KEYS_5' | 'KEYS_7' | 'KEYS_9' | 'KEYS_10' | 'KEYS_14';
+
+/** Allowed values for {@link BeMusicPlayOptions.sort}. */
+export type BeMusicSelectSort = 'OFF' | 'LEVEL' | 'TITLE' | 'CLEAR';
+
+/** Allowed values for {@link BeMusicPlayOptions.hsFix}. */
+export type BeMusicHsFix = 'OFF' | 'MAXBPM' | 'MINBPM' | 'AVERAGE' | 'CONSTANT';
+
+/** Allowed values for {@link BeMusicPlayOptions.hiddenSudden1P} / `hiddenSudden2P`. */
+export type BeMusicHiddenSudden = 'OFF' | 'HIDDEN' | 'SUDDEN' | 'HID+SUD';
+
+/** Allowed values for {@link BeMusicPlayOptions.random1P} / `random2P`. */
+export type BeMusicRandomMode = 'OFF' | 'MIRROR' | 'RANDOM' | 'S-RANDOM' | 'SCATTER';
+
+/** Allowed values for {@link BeMusicPlayOptions.gauge1P} / `gauge2P`. */
+export type BeMusicGaugeType = 'GROOVE' | 'HARD' | 'DEATH' | 'EASY';
+
+/** Allowed values for {@link BeMusicPlayOptions.bga}. */
+export type BeMusicBgaMode = 'OFF' | 'ON' | 'AUTOPLAY_ONLY';
+
+/** Allowed values for {@link BeMusicPlayOptions.bgaSize}. */
+export type BeMusicBgaSize = 'NORMAL' | 'EXTEND';
diff --git a/packages/skin-sdk/src/result-data.ts b/packages/skin-sdk/src/result-data.ts
index 5e039668f..fc2bf7d1a 100644
--- a/packages/skin-sdk/src/result-data.ts
+++ b/packages/skin-sdk/src/result-data.ts
@@ -1,6 +1,7 @@
 import type { ScoreSummary } from '@be-music/player/core/scoring';
 import type { BeMusicPlaylog } from '@be-music/player/playlog';
-import type { BrowserSongEntry } from './song.ts';
+import type { BeMusicJudgeTiming } from './types.ts';
+import type { BeMusicClearLamp, BrowserSongEntry } from './song.ts';
 
 /**
  * One sample of the gauge polyline. `progress` is the chart-time fraction (0 = first note, 1 = last playable / sample
@@ -55,4 +56,18 @@ export interface BeMusicResultData {
    * legacy paths that finished without the shared engine having produced one. See `@be-music/player/playlog`.
    */
   playlog?: BeMusicPlaylog;
+  /** The play's clear lamp (FAILED, the gauge it was cleared on, FULL COMBO, …). */
+  lamp?: BeMusicClearLamp;
+  /** Gauge the play ran on, as the ruleset names it (`GROOVE`, `HARD`, `EX-HARD`, …). */
+  gaugeType?: string;
+  /** Compat ruleset that judged the play (`lr2` / `beatoraja` / `iidx`). */
+  judgeRuleset?: string;
+  /** FAST (early) and SLOW (late) GREAT / GOOD counts. */
+  fast?: number;
+  slow?: number;
+  /**
+   * Every timed judgement of the play, oldest first (see `BeMusicGameplayRuntime.lastJudgeDeltaMs` for which ones
+   * carry a timing). Feed it to {@link binJudgeTimings} for a timing histogram.
+   */
+  judgeTimings?: readonly BeMusicJudgeTiming[];
 }
diff --git a/packages/skin-sdk/src/settings.test.ts b/packages/skin-sdk/src/settings.test.ts
new file mode 100644
index 000000000..c5617f0d6
--- /dev/null
+++ b/packages/skin-sdk/src/settings.test.ts
@@ -0,0 +1,121 @@
+import { describe, expect, it } from 'vite-plus/test';
+import { resolveBeMusicSkinSettings, validateBeMusicSkinSettings, type BeMusicSkinSetting } from './settings.ts';
+
+const THEME: BeMusicSkinSetting = {
+  kind: 'choice',
+  id: 'theme',
+  label: 'Theme',
+  options: [
+    { value: 'neon', label: 'Neon' },
+    { value: 'mono', label: 'Mono' },
+  ],
+  default: 'neon',
+};
+const OFFSET: BeMusicSkinSetting = {
+  kind: 'number',
+  id: 'judgeOffset',
+  label: 'Judge offset',
+  min: -40,
+  max: 40,
+  step: 2,
+  default: 0,
+  unit: 'px',
+};
+const GLOW: BeMusicSkinSetting = { kind: 'toggle', id: 'glow', label: 'Glow', default: true };
+const SETTINGS = [THEME, OFFSET, GLOW] as const;
+
+describe('resolveBeMusicSkinSettings', () => {
+  it('uses the defaults when nothing is stored', () => {
+    expect(resolveBeMusicSkinSettings({ settings: SETTINGS })).toEqual({ theme: 'neon', judgeOffset: 0, glow: true });
+  });
+
+  it('is empty for a skin without settings', () => {
+    expect(resolveBeMusicSkinSettings({}, { theme: 'mono' })).toEqual({});
+  });
+
+  it('keeps valid stored values', () => {
+    expect(
+      resolveBeMusicSkinSettings({ settings: SETTINGS }, { theme: 'mono', judgeOffset: -12, glow: false }),
+    ).toEqual({ theme: 'mono', judgeOffset: -12, glow: false });
+  });
+
+  it('clamps stored numbers into the range', () => {
+    expect(resolveBeMusicSkinSettings({ settings: SETTINGS }, { judgeOffset: 99 }).judgeOffset).toBe(40);
+    expect(resolveBeMusicSkinSettings({ settings: SETTINGS }, { judgeOffset: -99 }).judgeOffset).toBe(-40);
+  });
+
+  it('falls back to the default for stale or mistyped values', () => {
+    expect(
+      resolveBeMusicSkinSettings({ settings: SETTINGS }, { theme: 'retired', judgeOffset: Number.NaN, glow: 'yes' }),
+    ).toEqual({ theme: 'neon', judgeOffset: 0, glow: true });
+    expect(resolveBeMusicSkinSettings({ settings: SETTINGS }, { theme: 1, judgeOffset: '4', glow: 0 })).toEqual({
+      theme: 'neon',
+      judgeOffset: 0,
+      glow: true,
+    });
+  });
+
+  it('drops stored keys the schema no longer declares', () => {
+    expect(resolveBeMusicSkinSettings({ settings: [GLOW] }, { glow: false, removed: 3 })).toEqual({ glow: false });
+  });
+});
+
+describe('validateBeMusicSkinSettings', () => {
+  it('passes a well-formed schema, and no schema', () => {
+    expect(validateBeMusicSkinSettings(SETTINGS)).toEqual([]);
+    expect(validateBeMusicSkinSettings(undefined)).toEqual([]);
+    expect(validateBeMusicSkinSettings([])).toEqual([]);
+  });
+
+  it('reports duplicate and empty ids and empty labels', () => {
+    expect(validateBeMusicSkinSettings([GLOW, { ...GLOW, label: 'Glow 2' }])).toEqual([
+      'setting "glow": id is used more than once',
+    ]);
+    expect(validateBeMusicSkinSettings([{ ...GLOW, id: '' }])).toEqual(['settings[0]: id must not be empty']);
+    expect(validateBeMusicSkinSettings([{ ...GLOW, label: ' ' }])).toEqual(['setting "glow": label must not be empty']);
+  });
+
+  it('checks choice options and defaults', () => {
+    expect(validateBeMusicSkinSettings([{ ...THEME, options: [] }] as BeMusicSkinSetting[])).toEqual([
+      'setting "theme": options must not be empty',
+    ]);
+    expect(validateBeMusicSkinSettings([{ ...THEME, default: 'gold' } as BeMusicSkinSetting])).toEqual([
+      'setting "theme": default "gold" is not one of the option values',
+    ]);
+    expect(
+      validateBeMusicSkinSettings([
+        {
+          ...THEME,
+          options: [
+            { value: 'neon', label: 'Neon' },
+            { value: 'neon', label: 'Neon again' },
+          ],
+        } as BeMusicSkinSetting,
+      ]),
+    ).toEqual(['setting "theme": option values must be unique']);
+  });
+
+  it('checks number ranges, steps, and units', () => {
+    expect(validateBeMusicSkinSettings([{ ...OFFSET, default: 50 } as BeMusicSkinSetting])).toEqual([
+      'setting "judgeOffset": default 50 is outside -40..40',
+    ]);
+    expect(validateBeMusicSkinSettings([{ ...OFFSET, min: 10, max: 0 } as BeMusicSkinSetting])).toEqual([
+      'setting "judgeOffset": min and max must be finite numbers with min <= max',
+    ]);
+    expect(validateBeMusicSkinSettings([{ ...OFFSET, step: 0 } as BeMusicSkinSetting])).toEqual([
+      'setting "judgeOffset": step must be a positive number',
+    ]);
+    expect(validateBeMusicSkinSettings([{ ...OFFSET, unit: 'em' } as unknown as BeMusicSkinSetting])).toEqual([
+      'setting "judgeOffset": unit "em" must be one of px, ms, %',
+    ]);
+  });
+
+  it('checks toggle defaults and unknown kinds', () => {
+    expect(validateBeMusicSkinSettings([{ ...GLOW, default: 'on' } as unknown as BeMusicSkinSetting])).toEqual([
+      'setting "glow": default must be a boolean',
+    ]);
+    expect(validateBeMusicSkinSettings([{ ...GLOW, kind: 'color' } as unknown as BeMusicSkinSetting])).toEqual([
+      'setting "glow": kind "color" must be choice, number, or toggle',
+    ]);
+  });
+});
diff --git a/packages/skin-sdk/src/settings.ts b/packages/skin-sdk/src/settings.ts
new file mode 100644
index 000000000..aadbeb804
--- /dev/null
+++ b/packages/skin-sdk/src/settings.ts
@@ -0,0 +1,149 @@
+import type { BeMusicSkin } from './types.ts';
+
+/** A skin setting picked from a fixed list (a colour theme, a layout variant). */
+export interface BeMusicSkinChoiceSetting {
+  readonly kind: 'choice';
+  /** Key of the value in {@link BeMusicSkinSettingValues}; unique within the skin. */
+  readonly id: string;
+  /** Name shown in the host's settings UI. */
+  readonly label: string;
+  /** The choices: `value` is what the skin receives, `label` what the player sees. */
+  readonly options: readonly { readonly value: string; readonly label: string }[];
+  /** Value used until the player picks one; must be one of the option values. */
+  readonly default: string;
+}
+
+/** A numeric skin setting with a range (an offset, an opacity). */
+export interface BeMusicSkinNumberSetting {
+  readonly kind: 'number';
+  /** Key of the value in {@link BeMusicSkinSettingValues}; unique within the skin. */
+  readonly id: string;
+  /** Name shown in the host's settings UI. */
+  readonly label: string;
+  readonly min: number;
+  readonly max: number;
+  /** Increment the host's slider moves by. */
+  readonly step?: number;
+  /** Value used until the player picks one; must lie in `min..max`. */
+  readonly default: number;
+  /** Unit shown beside the value. */
+  readonly unit?: 'px' | 'ms' | '%';
+}
+
+/** An on / off skin setting. */
+export interface BeMusicSkinToggleSetting {
+  readonly kind: 'toggle';
+  /** Key of the value in {@link BeMusicSkinSettingValues}; unique within the skin. */
+  readonly id: string;
+  /** Name shown in the host's settings UI. */
+  readonly label: string;
+  readonly default: boolean;
+}
+
+/** One option a skin lets the player tune (see `BeMusicSkin.settings`). */
+export type BeMusicSkinSetting = BeMusicSkinChoiceSetting | BeMusicSkinNumberSetting | BeMusicSkinToggleSetting;
+
+/**
+ * The player's value for every setting a skin declares, keyed by setting id: a `string` for a choice, a `number` for a
+ * number, a `boolean` for a toggle.
+ */
+export type BeMusicSkinSettingValues = Readonly<Record<string, string | number | boolean>>;
+
+const NUMBER_UNITS: ReadonlySet<string> = new Set(['px', 'ms', '%']);
+
+/**
+ * Problems with a skin's `settings` schema — duplicate or empty ids, empty labels, defaults outside their range or
+ * options — as human-readable messages. Empty when the schema is fine (or absent). `validateBeMusicSkin` includes
+ * these.
+ */
+export function validateBeMusicSkinSettings(settings: readonly BeMusicSkinSetting[] | undefined): string[] {
+  if (settings === undefined) return [];
+  if (!Array.isArray(settings)) return ['settings must be an array'];
+  const problems: string[] = [];
+  const ids = new Set<string>();
+  settings.forEach((setting: BeMusicSkinSetting, index) => {
+    const name =
+      typeof setting?.id === 'string' && setting.id !== '' ? `setting "${setting.id}"` : `settings[${index}]`;
+    if (typeof setting?.id !== 'string' || setting.id.trim() === '') {
+      problems.push(`${name}: id must not be empty`);
+    } else if (ids.has(setting.id)) {
+      problems.push(`${name}: id is used more than once`);
+    } else {
+      ids.add(setting.id);
+    }
+    if (typeof setting?.label !== 'string' || setting.label.trim() === '') {
+      problems.push(`${name}: label must not be empty`);
+    }
+    switch (setting?.kind) {
+      case 'choice': {
+        if (!Array.isArray(setting.options) || setting.options.length === 0) {
+          problems.push(`${name}: options must not be empty`);
+          break;
+        }
+        const values = setting.options.map((option) => option.value);
+        if (new Set(values).size !== values.length) problems.push(`${name}: option values must be unique`);
+        if (!values.includes(setting.default)) {
+          problems.push(`${name}: default "${String(setting.default)}" is not one of the option values`);
+        }
+        break;
+      }
+      case 'number': {
+        const { min, max, step } = setting;
+        if (!Number.isFinite(min) || !Number.isFinite(max) || min > max) {
+          problems.push(`${name}: min and max must be finite numbers with min <= max`);
+        } else if (!Number.isFinite(setting.default) || setting.default < min || setting.default > max) {
+          problems.push(`${name}: default ${String(setting.default)} is outside ${min}..${max}`);
+        }
+        if (step !== undefined && !(Number.isFinite(step) && step > 0)) {
+          problems.push(`${name}: step must be a positive number`);
+        }
+        if (setting.unit !== undefined && !NUMBER_UNITS.has(setting.unit)) {
+          problems.push(`${name}: unit "${String(setting.unit)}" must be one of ${[...NUMBER_UNITS].join(', ')}`);
+        }
+        break;
+      }
+      case 'toggle':
+        if (typeof setting.default !== 'boolean') problems.push(`${name}: default must be a boolean`);
+        break;
+      default:
+        problems.push(
+          `${name}: kind "${String((setting as { kind?: unknown })?.kind)}" must be choice, number, or toggle`,
+        );
+    }
+  });
+  return problems;
+}
+
+/**
+ * The values a skin draws with: `stored` (what the host persisted for the skin, possibly from an older release of it)
+ * checked against the skin's `settings` schema. Each setting gets its stored value when that is still valid — a known
+ * option, a finite number (clamped into `min..max`), a boolean — and its `default` otherwise. Stored keys the schema
+ * no longer declares are dropped.
+ */
+export function resolveBeMusicSkinSettings(
+  skin: Pick<BeMusicSkin, 'settings'>,
+  stored?: Readonly<Record<string, unknown>>,
+): BeMusicSkinSettingValues {
+  const values: Record<string, string | number | boolean> = {};
+  for (const setting of skin.settings ?? []) {
+    const value = stored?.[setting.id];
+    switch (setting.kind) {
+      case 'choice':
+        values[setting.id] =
+          typeof value === 'string' && setting.options.some((option) => option.value === value)
+            ? value
+            : setting.default;
+        break;
+      case 'number':
+        values[setting.id] =
+          typeof value === 'number' && Number.isFinite(value)
+            ? Math.min(setting.max, Math.max(setting.min, value))
+            : setting.default;
+        break;
+      case 'toggle':
+        values[setting.id] = typeof value === 'boolean' ? value : setting.default;
+        break;
+    }
+  }
+  return values;
+}
diff --git a/packages/skin-sdk/src/song.ts b/packages/skin-sdk/src/song.ts
index 4a98e909f..c2990880d 100644
--- a/packages/skin-sdk/src/song.ts
+++ b/packages/skin-sdk/src/song.ts
@@ -39,3 +39,34 @@ export interface BrowserFolderNode {
 export type BrowserBrowseEntry =
   | { kind: 'folder'; folder: BrowserFolderNode }
   | { kind: 'song'; song: BrowserSongEntry };
+
+/** A song image a host can hand a skin: the chart's `#STAGEFILE`, `#BANNER`, or `#BACKBMP`. */
+export type BeMusicSongImageKind = 'stageFile' | 'banner' | 'backBmp';
+
+/**
+ * Clear lamp of a play or a best record, worst first: not played, failed, then the gauge the chart was cleared on
+ * (ASSIST EASY … EX HARD), FULL COMBO (no BAD / POOR), PERFECT (no GOOD or worse), and MAX (every note a PGREAT).
+ */
+export type BeMusicClearLamp =
+  | 'NO_PLAY'
+  | 'FAILED'
+  | 'ASSIST_EASY'
+  | 'EASY'
+  | 'NORMAL'
+  | 'HARD'
+  | 'EX_HARD'
+  | 'FULL_COMBO'
+  | 'PERFECT'
+  | 'MAX';
+
+/** The player's best record on one chart, as a host keeps it. */
+export interface BeMusicSongRecord {
+  /** Best clear lamp so far. */
+  lamp: BeMusicClearLamp;
+  exScore?: number;
+  maxCombo?: number;
+  /** Fewest BAD + POOR. */
+  missCount?: number;
+  /** How many times the chart was played. */
+  playCount?: number;
+}
diff --git a/packages/skin-sdk/src/types.ts b/packages/skin-sdk/src/types.ts
index b3a024070..bc4e1bea8 100644
--- a/packages/skin-sdk/src/types.ts
+++ b/packages/skin-sdk/src/types.ts
@@ -1,7 +1,9 @@
 import type { ChartPlayVariant } from '@be-music/player/core/lane-layout';
 import type { BeMusicAudioFrame } from './audio.ts';
-import type { BeMusicResultData } from './result-data.ts';
-import type { BrowserBrowseEntry, BrowserSongEntry } from './song.ts';
+import type { BeMusicPlayOptions } from './play-options.ts';
+import type { BeMusicResultData, GaugeHistorySample, ScoreHistorySample } from './result-data.ts';
+import type { BeMusicSkinSetting, BeMusicSkinSettingValues } from './settings.ts';
+import type { BeMusicSongImageKind, BeMusicSongRecord, BrowserBrowseEntry, BrowserSongEntry } from './song.ts';
 
 /**
  * be-music skin format — the code-defined skins the built-in (default) family renders with when no LR2 / beatoraja
@@ -56,6 +58,17 @@ export interface BeMusicSkin<K extends BeMusicSurfaceContextKind = BeMusicSurfac
   readonly gameplay: BeMusicGameplaySkin<K>;
   readonly select: BeMusicSelectSkin<K>;
   readonly result: BeMusicResultSkin<K>;
+  /**
+   * The decide screen shown between picking a chart and the play (title card, stage file, the chosen options). Hosts
+   * mount it only when a skin declares one, and go straight from select to gameplay otherwise.
+   */
+  readonly decide?: BeMusicDecideSkin<K>;
+  /**
+   * Options the player can tune for this skin (a colour theme, a judge-text offset, an effect toggle). Hosts build
+   * their settings UI from this schema, persist the values per skin, and hand them back on every frame as `settings`,
+   * already checked and filled in by {@link resolveBeMusicSkinSettings}. Ids must be unique.
+   */
+  readonly settings?: readonly BeMusicSkinSetting[];
 }
 
 /** A skin's maker, as shown in skin pickers and credits. */
@@ -115,6 +128,15 @@ export interface BeMusicStage {
  */
 export type BeMusicEffectLevel = 'full' | 'reduced' | 'off';
 
+/** A judgement grade, best first. */
+export type BeMusicJudge = 'PERFECT' | 'GREAT' | 'GOOD' | 'BAD' | 'POOR';
+
+/** A play side. `'2P'` only exists in double play. */
+export type BeMusicSide = '1P' | '2P';
+
+/** An image the host hands a skin (song images, BGA layers): anything `drawImage` / `texImage2D` accepts. */
+export type BeMusicImage = CanvasImageSource;
+
 /** Visual class of a lane, resolved from its channel — skins pick colours per class. */
 export type BeMusicLaneKind = 'white' | 'black' | 'scratch';
 
@@ -122,7 +144,7 @@ export type BeMusicLaneKind = 'white' | 'black' | 'scratch';
 export interface BeMusicLayoutLane {
   channel: string | undefined;
   kind: BeMusicLaneKind;
-  side: '1P' | '2P';
+  side: BeMusicSide;
   x: number;
   w: number;
 }
@@ -145,7 +167,7 @@ export interface BeMusicGameplayLayout {
     top: number;
     judgementY: number;
     /** Horizontal extent of each play side present (`2P` only in double play). */
-    sides: Partial<Record<'1P' | '2P', { left: number; right: number }>>;
+    sides: Partial<Record<BeMusicSide, { left: number; right: number }>>;
   };
   /** The BGA rect, or `undefined` when the playfield leaves no room for one. */
   bga: BeMusicRect | undefined;
@@ -153,7 +175,7 @@ export interface BeMusicGameplayLayout {
 
 /** One side's recent judgement. */
 export interface BeMusicJudgeState {
-  side: '1P' | '2P';
+  side: BeMusicSide;
   /** PERFECT / GREAT / GOOD / BAD / POOR. Empty when no recent judge. */
   judge?: string;
   combo?: number;
@@ -224,6 +246,110 @@ export interface BeMusicGameplayRuntime {
   effects?: BeMusicEffectLevel;
   /** Live analysis of the mix for audio-reactive chrome (loudness, spectrum, onsets); absent without Web Audio. */
   audio?: BeMusicAudioFrame;
+  /**
+   * The chart being played — level, difficulty, `#RANK`, `#TOTAL` and the rest of its header via
+   * `song.chart.metadata`, plus the same images {@link BeMusicGameplayFrame.songImage} resolves.
+   */
+  song?: BrowserSongEntry;
+  /**
+   * Signed timing offset (ms) of the most recent timed judgement: positive when the press was late (SLOW), negative
+   * when early (FAST), 0 dead on. Only judgements with a timing carry one — autoplay hits, mine BADs and missed notes
+   * (POOR without a press) leave it unchanged.
+   */
+  lastJudgeDeltaMs?: number;
+  /**
+   * The most recent timed judgements (at most 64), oldest first — drives timing meters. Same rules as
+   * {@link lastJudgeDeltaMs}.
+   */
+  judgeTimings?: readonly BeMusicJudgeTiming[];
+  /** SUDDEN+ / HIDDEN+ / LIFT per play side, as fractions of the lane height. */
+  laneCovers?: readonly BeMusicLaneCover[];
+  /**
+   * How long (ms) a note stays on screen, from the edge of the lane cover to the judgement line, at the current speed.
+   */
+  visibleMs?: number;
+  /** IIDX-style green number (`visibleMs × 0.6`): the note's on-screen time in frames at 60 Hz. */
+  greenNumber?: number;
+  /** Lowest, highest, and main (longest-held) BPM of the chart. */
+  minBpm?: number;
+  maxBpm?: number;
+  mainBpm?: number;
+  /**
+   * Length of the song (ms) and how far the audio has played (ms), on the audio clock: it stops while paused and
+   * starts at 0 when the song starts. Remaining time is `songLengthMs - songElapsedMs`. Unlike {@link chartMs}, which is
+   * measured from the chart's first beat and runs negative through the count-in, this measures the song as heard.
+   */
+  songLengthMs?: number;
+  songElapsedMs?: number;
+  /**
+   * Play-clock ms (the {@link nowMs} clock) of moments that happen at most once per play, latched when they occur and
+   * `undefined` before: the gauge failing mid-play, the last playable note being judged, and the chart's end (the
+   * outro).
+   */
+  failedAtMs?: number;
+  allNotesDoneAtMs?: number;
+  outroAtMs?: number;
+  /**
+   * Play-clock ms when the gauge first rose above its starting value, and when it first reached its maximum.
+   * `undefined` until it happens.
+   */
+  gaugeRiseAtMs?: number;
+  gaugeMaxAtMs?: number;
+  /**
+   * EX-score and gauge samples taken at every judgement so far, the same series the result screen receives. They are
+   * the host's live arrays, shared by reference: read them, never mutate them.
+   */
+  scoreHistory?: readonly ScoreHistorySample[];
+  gaugeHistory?: readonly GaugeHistorySample[];
+  /**
+   * The judge windows of the active ruleset, in ms. Resolved from the chart's `#RANK` when the play starts; a mid-chart
+   * `#EXRANK` change is not reflected.
+   */
+  judgeWindows?: BeMusicJudgeWindows;
+}
+
+/**
+ * One timed judgement: when it happened and how far off the press was. `deltaMs` is positive when late (SLOW) and
+ * negative when early (FAST). See {@link binJudgeTimings} for a histogram.
+ */
+export interface BeMusicJudgeTiming {
+  /** Play-clock ms of the judgement. */
+  atMs: number;
+  /** Signed offset (ms): > 0 late, < 0 early. */
+  deltaMs: number;
+  judge: BeMusicJudge;
+  /** Lane channel of the judged note. */
+  channel?: string;
+}
+
+/** One play side's lane covers, as fractions (0..1) of the lane height. */
+export interface BeMusicLaneCover {
+  side: BeMusicSide;
+  /** SUDDEN+: the cover over the top of the lanes. */
+  sudden: number;
+  /** HIDDEN+: the cover just above the judgement line. */
+  hidden: number;
+  /** LIFT: how far the judgement line is raised. */
+  lift: number;
+}
+
+/** One judge window: how early and how late (both positive ms) a press still earns the grade. */
+export interface BeMusicJudgeWindow {
+  earlyMs: number;
+  lateMs: number;
+}
+
+/** The windows of one note class; `emptyPoor` is the window for an empty POOR, when the ruleset has one. */
+export type BeMusicJudgeWindowSet = Record<'perfect' | 'great' | 'good' | 'bad', BeMusicJudgeWindow> & {
+  emptyPoor?: BeMusicJudgeWindow;
+};
+
+/** The active ruleset's judge windows per note class. */
+export interface BeMusicJudgeWindows {
+  note: BeMusicJudgeWindowSet;
+  scratch: BeMusicJudgeWindowSet;
+  /** The release of a long note that judges its end (charge / hell charge notes). */
+  longNoteEnd: BeMusicJudgeWindowSet;
 }
 
 export interface BeMusicLaneFrame {
@@ -236,6 +362,12 @@ export interface BeMusicLaneFrame {
   bottom: number;
   /** Key-beam intensity in [0, 1]: 1 while held, decaying after release. */
   beam: number;
+  /** Play-clock ms of the lane's last key press and release (also for autoplay hits). */
+  pressedAtMs?: number;
+  releasedAtMs?: number;
+  /** True while a long note in this lane is held, and the play-clock ms the hold started. */
+  holding?: boolean;
+  holdStartedAtMs?: number;
 }
 
 /** A tap note as drawn this frame: its lane rect and the y its bottom edge sits at. */
@@ -244,6 +376,8 @@ export interface BeMusicNote {
   x: number;
   w: number;
   y: number;
+  /** True when autoplay (or auto-scratch) will hit this note. */
+  autoplay?: boolean;
 }
 
 /**
@@ -265,8 +399,21 @@ export interface BeMusicLongNote {
   w: number;
   top: number;
   bottom: number;
+  /**
+   * How the long note judges: `'ln'` (only the start counts), `'cn'` (charge note: the release is judged too), or
+   * `'hcn'` (hell charge note: the gauge drains while it isn't held).
+   */
+  mode?: BeMusicLongNoteMode;
+  /** Where the long note is in its life: not yet reached, being held, let go early, or completed. */
+  state?: BeMusicLongNoteState;
+  /** True when autoplay (or auto-scratch) plays this long note. */
+  autoplay?: boolean;
 }
 
+export type BeMusicLongNoteMode = 'ln' | 'cn' | 'hcn';
+
+export type BeMusicLongNoteState = 'pending' | 'held' | 'dropped' | 'done';
+
 export interface BeMusicBomb {
   channel: string;
   kind: BeMusicLaneKind;
@@ -278,8 +425,45 @@ export interface BeMusicBomb {
   elapsedMs: number;
   /** Stable per-hit seed so particle scatter doesn't shimmer frame to frame. */
   seed: number;
+  /** The judgement that set the hit off. */
+  judge?: BeMusicJudge;
+}
+
+/** A measure (bar) line crossing one lane run, as drawn this frame. */
+export interface BeMusicMeasureLine {
+  side: BeMusicSide;
+  /** Left edge and width of the lane run it crosses. */
+  x: number;
+  w: number;
+  y: number;
 }
 
+/**
+ * The BGA layers showing this frame, for a skin that composites the BGA itself ({@link BeMusicGameplaySkin.drawsBga}).
+ * Following the BMS convention, the host hands {@link layer} with pure black (`#000000`) already turned transparent,
+ * while {@link base} and {@link poor} are opaque: draw all three with plain alpha blending, without keying them again.
+ * A bmson layer (whose spec keeps black opaque) and a video layer come as authored. `#SWBGA` animation frames are
+ * already picked; a slot's `#ARGB` tint and opacity are left to the skin.
+ */
+export interface BeMusicBgaFrame {
+  /** The base layer (`#BMP` on channel 04), or a video frame. */
+  base?: BeMusicImage;
+  /** The layer drawn over the base (channel 07). */
+  layer?: BeMusicImage;
+  /** The miss image (channel 06), shown while {@link poorActive}. */
+  poor?: BeMusicImage;
+  /** True while a POOR is being shown: draw {@link poor} in place of the base and layer. */
+  poorActive: boolean;
+}
+
+/**
+ * Looks up one of a song's images (`#STAGEFILE`, `#BANNER`, `#BACKBMP`). Images load lazily: the first calls return
+ * `undefined` while the image decodes, and the screen is redrawn (on select, `revision` moves) once it is ready. Also
+ * `undefined` when the song has no such image or the host doesn't provide images. Look the image up on every draw rather
+ * than keeping it: hosts cache a bounded number and may close the least recently used one.
+ */
+export type BeMusicSongImageLookup = (song: BrowserSongEntry, kind: BeMusicSongImageKind) => ImageBitmap | undefined;
+
 /** Everything on the gameplay screen this frame. */
 export interface BeMusicGameplayFrame {
   nowMs: number;
@@ -295,10 +479,20 @@ export interface BeMusicGameplayFrame {
   mines: readonly BeMusicMine[];
   /** Live hit effects with their age. */
   bombs: readonly BeMusicBomb[];
+  /**
+   * Measure lines on screen, one per lane run they cross. Always empty unless the skin sets
+   * {@link BeMusicGameplaySkin.drawsMeasureLines}.
+   */
+  measureLines: readonly BeMusicMeasureLine[];
+  /** The BGA layers to composite. Always `undefined` unless the skin sets {@link BeMusicGameplaySkin.drawsBga}. */
+  bga: BeMusicBgaFrame | undefined;
   /** Fractional beat position in [0, 1). */
   beatPhase: number;
   effects: BeMusicEffectLevel;
   audio: BeMusicAudioFrame | undefined;
+  /** The player's values for the skin's {@link BeMusicSkin.settings}. */
+  settings: BeMusicSkinSettingValues;
+  songImage: BeMusicSongImageLookup;
 }
 
 export interface BeMusicGameplaySkin<K extends BeMusicSurfaceContextKind = BeMusicSurfaceContextKind> {
@@ -311,6 +505,21 @@ export interface BeMusicGameplaySkin<K extends BeMusicSurfaceContextKind = BeMus
    * skin in its own built-in style, so a skin written before mines reached the frame still shows them.
    */
   readonly drawsMines?: boolean;
+  /**
+   * Set to `true` when the skin draws the lane covers (SUDDEN+ / HIDDEN+) itself from `runtime.laneCovers`. Otherwise
+   * the player draws its own covers over the skin.
+   */
+  readonly drawsLaneCover?: boolean;
+  /**
+   * Set to `true` when the skin draws measure lines itself from `frame.measureLines`. Otherwise the player draws its
+   * own lines.
+   */
+  readonly drawsMeasureLines?: boolean;
+  /**
+   * Set to `true` when the skin composites the BGA itself from `frame.bga`. Otherwise the player shows the BGA behind
+   * the skin's canvas, in {@link BeMusicGameplayLayout.bga}.
+   */
+  readonly drawsBga?: boolean;
 }
 
 /** Song-list geometry shared by the skin (drawing) and the scene (row hit-testing). */
@@ -326,8 +535,19 @@ export interface BeMusicSelectActions {
   play: () => void;
   autoPlay: () => void;
   activateSearch: () => void;
+  /** Sets one play option. Values outside the option's choices are ignored. */
+  setPlayOption<K extends keyof BeMusicPlayOptions>(key: K, value: BeMusicPlayOptions[K]): void;
+  /** Moves one play option to its next (`step` 1, the default) or previous (`-1`) choice, wrapping around. */
+  cyclePlayOption(key: keyof BeMusicPlayOptions, step?: 1 | -1): void;
+  /** Opens or closes the focused song's readme (the `.txt` beside the chart), when it has one. */
+  toggleReadme(): void;
 }
 
+/** The values each play option can take, for options with a fixed set of choices (numeric ones are left out). */
+export type BeMusicPlayOptionChoices = {
+  readonly [K in keyof BeMusicPlayOptions]?: readonly BeMusicPlayOptions[K][];
+};
+
 /** Everything on the select screen this frame. */
 export interface BeMusicSelectFrame {
   designWidth: number;
@@ -358,12 +578,23 @@ export interface BeMusicSelectFrame {
   launchAt: number | undefined;
   /** What is playing right now: the BGM or the chart preview (see {@link BeMusicAudioFrame}). */
   audio: BeMusicAudioFrame | undefined;
+  /** The current play options; change them through {@link BeMusicSelectActions.setPlayOption}. */
+  playOptions: Readonly<BeMusicPlayOptions>;
+  /** The choices of every play option that has a fixed set. */
+  playOptionChoices: BeMusicPlayOptionChoices;
+  /** The pointer in design pixels, or `undefined` when it is outside the screen (or there is none). */
+  pointer: { x: number; y: number } | undefined;
+  /** The player's best record on `song`, or `undefined` when the host keeps none (or it was never played). */
+  songRecord(song: BrowserSongEntry): BeMusicSongRecord | undefined;
+  songImage: BeMusicSongImageLookup;
+  /** The player's values for the skin's {@link BeMusicSkin.settings}. */
+  settings: BeMusicSkinSettingValues;
   /**
    * Makes the rect (design pixels) run `action` when clicked — e.g. `frame.hit(x, y, w, h, frame.actions.play)`. Hit
    * areas last for the frame they were declared in, so declare them on every draw. `cursor` is the CSS cursor shown
-   * over the rect (`'pointer'` by default).
+   * over the rect (`'pointer'` by default). Returns whether the pointer is over the rect, for hover states.
    */
-  hit(x: number, y: number, w: number, h: number, action: () => void, cursor?: string): void;
+  hit(x: number, y: number, w: number, h: number, action: () => void, cursor?: string): boolean;
 }
 
 export interface BeMusicSelectSkin<K extends BeMusicSurfaceContextKind = BeMusicSurfaceContextKind> {
@@ -388,9 +619,40 @@ export interface BeMusicResultFrame {
   elapsedMs: number;
   nowMs: number;
   effects: BeMusicEffectLevel;
+  songImage: BeMusicSongImageLookup;
+  /** The player's values for the skin's {@link BeMusicSkin.settings}. */
+  settings: BeMusicSkinSettingValues;
 }
 
 export interface BeMusicResultSkin<K extends BeMusicSurfaceContextKind = BeMusicSurfaceContextKind> {
   /** Draws one result frame. Called every frame while the result screen is shown. */
   draw(surface: BeMusicSurface<K>, frame: BeMusicResultFrame): void;
 }
+
+/** Everything on the decide screen this frame. */
+export interface BeMusicDecideFrame {
+  designWidth: number;
+  designHeight: number;
+  nowMs: number;
+  /** Milliseconds since the screen mounted. */
+  elapsedMs: number;
+  /** The chart about to be played. */
+  song: BrowserSongEntry;
+  /** The options the play will run with. */
+  playOptions: Readonly<BeMusicPlayOptions>;
+  songImage: BeMusicSongImageLookup;
+  effects: BeMusicEffectLevel;
+  /** The player's values for the skin's {@link BeMusicSkin.settings}. */
+  settings: BeMusicSkinSettingValues;
+  audio: BeMusicAudioFrame | undefined;
+}
+
+export interface BeMusicDecideSkin<K extends BeMusicSurfaceContextKind = BeMusicSurfaceContextKind> {
+  /**
+   * How long (ms) the screen shows before the play starts. Default 2000. The player can skip ahead (Enter) or go back to
+   * select (Escape) meanwhile.
+   */
+  readonly durationMs?: number;
+  /** Draws one decide frame. Called every frame while the decide screen is shown. */
+  draw(surface: BeMusicSurface<K>, frame: BeMusicDecideFrame): void;
+}