diff --git a/CHANGELOG.md b/CHANGELOG.md
index 84e8771..96f83e9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -72,6 +72,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   fence. The gem's rim joins in: on a confirmed hit the outline flashes in the
   string's own colour with the same intensity treatment as the wires, fading with the
   scorer's alpha. With no scorer attached, nothing changes.
+- **Background controls in the player (3D Highway)** — change the highway
+  background mid-song from the player's Plugin Controls popover instead of
+  opening Settings: a style dropdown, a Reactive toggle, and an Intensity
+  slider, all kept in sync with the Settings page. Controls that the active
+  style ignores are greyed out with a reason on hover (Custom video and
+  Butterchurn use neither; Custom image uses Intensity but not Reactive), so
+  a knob is never present-but-inert. The control disappears when a non-3D
+  renderer is selected.
 
 ### Changed
 - **`GET /api/song/{f}?stems=1`** (new, opt-in) — returns the pack's playable stem
diff --git a/plugins/highway_3d/plugin.json b/plugins/highway_3d/plugin.json
index e4718ff..caa52fc 100644
--- a/plugins/highway_3d/plugin.json
+++ b/plugins/highway_3d/plugin.json
@@ -1,7 +1,7 @@
 {
     "id": "highway_3d",
     "name": "3D Highway",
-    "version": "3.33.1",
+    "version": "3.34.0",
     "type": "visualization",
     "bundled": true,
     "script": "screen.js",
diff --git a/plugins/highway_3d/screen.js b/plugins/highway_3d/screen.js
index a96a521..c4929fe 100644
--- a/plugins/highway_3d/screen.js
+++ b/plugins/highway_3d/screen.js
@@ -4011,12 +4011,363 @@
 
     let _nextInstanceId = 0;
 
+    /* ======================================================================
+     *  Player-chrome background control
+     * ======================================================================
+     * A Background picker mounted into the player's Plugins rail popover, so
+     * the background can be switched MID-SONG without leaving for Settings.
+     *
+     * It writes through the SAME global setters settings.html uses
+     * (h3dBgSetStyle / SetReactive / SetIntensity), so the existing pub-sub
+     * rebuilds the mounted style live and both UIs stay agreed. Nothing extra
+     * is persisted here, and the option list is generated from BG_STYLE_IDS —
+     * add a style there and it shows up in both places automatically.
+     *
+     * MOUNTED ONCE, REFCOUNTED. Under splitscreen there are N renderer
+     * instances but these settings are global, so N copies of the control
+     * would be N ways to set one value. init() acquires, destroy() releases,
+     * and the last release unmounts — so the control disappears when the user
+     * switches to a non-3D renderer instead of lingering as a dead knob.
+     *
+     * Everything here is event-driven. No DOM work on a per-frame path.
+     */
+    // Wording is kept verbatim in sync with settings.html's <option> text so
+    // the same style is not named two different things in two UIs that sit
+    // two clicks apart. An id with no entry here falls back to the raw id.
+    const _PC_LABELS = {
+        off: 'Off', particles: 'Particles (drifting)',
+        silhouettes: 'Silhouettes (parallax)', lights: 'Lights (stage glows)',
+        geometric: 'Geometric (rotating shapes)',
+        butterchurn: 'Butterchurn (visualizer)',
+        image: 'Custom image', video: 'Custom video',
+    };
+    // Which settings each background style actually consumes, so a control
+    // that would do nothing is greyed out instead of lying.
+    //
+    // Derived by reading the BG_STYLES bodies: a style uses `intensity` if its
+    // build() reads settings.intensity, and uses `reactive` if its update()
+    // dereferences the `bands` argument. 'butterchurn' is not a BG_STYLES entry
+    // at all - _bgMountStyle falls through to BG_STYLES.off - and it drives its
+    // own audio tap and opacity, so both are false for it.
+    //
+    // KEEP IN STEP WITH BG_STYLES. If a style starts reading bands or intensity
+    // and its row is not updated, the control stays greyed out and lies the
+    // other way. An id missing from this table defaults to both-enabled, which
+    // is the safe direction: a new style is assumed to use its settings.
+    const _PC_USES = {
+        off:         { intensity: false, reactive: false, why: 'No background to adjust' },
+        particles:   { intensity: true,  reactive: true },
+        silhouettes: { intensity: true,  reactive: true },
+        lights:      { intensity: true,  reactive: true },
+        geometric:   { intensity: true,  reactive: true },
+        image:       { intensity: true,  reactive: false, why: 'This background does not react to audio' },
+        video:       { intensity: false, reactive: false, why: 'The video plays as-is - nothing to adjust here' },
+        butterchurn: { intensity: false, reactive: false, why: 'Butterchurn reacts to audio itself - tune it in Settings > 3D Highway, or its Visualizer panel' },
+    };
+    let _pcRefs = 0, _pcEl = null, _pcSel = null, _pcReactive = null, _pcIntensity = null;
+    // Non-disabled wrappers around the two greyable controls. A native-disabled
+    // <button>/<input> receives no pointer events, so its `title` tooltip never
+    // shows on hover — the whole "greyed out, says why on hover" affordance
+    // would be dead. The reason lives on these wrappers instead, and the
+    // disabled control gets pointer-events:none so the hover reaches them.
+    let _pcReactiveWrap = null, _pcIntensityWrap = null;
+    let _pcListener = null, _pcRetry = 0, _pcRetryTimer = 0;
+
+    // The player chrome exposes this slot once it has initialised. A host
+    // that does not provide it gets no control (and no error) - the Settings
+    // page remains the way in.
+    function _pcSlot() {
+        try {
+            const fn = window.feedBack && window.feedBack.ui && window.feedBack.ui.playerControlSlot;
+            return typeof fn === 'function' ? fn() : null;
+        } catch (_) { return null; }
+    }
+    // Visual language: these controls sit in the player's Plugin Controls
+    // popover alongside pills from other plugins (Invert, Split, Tuner, the
+    // STEMS group...), so they follow the same look - small rounded pills,
+    // dark fill, brighter on hover, tinted when active.
+    //
+    // Styled INLINE rather than with the Tailwind classes those plugins use
+    // (px-3 py-1.5 bg-dark-600 hover:bg-dark-500 ...). This plugin owns its
+    // compiled stylesheet and several of those utilities are not in it, so
+    // using them would mean regenerating assets/plugin.css and bumping the
+    // manifest version. The values below are the resolved tokens from
+    // tailwind.config.js (dark-600 #181830, dark-500 #1e1e3a, gray-300
+    // #d1d5db), so the result matches without the build step.
+    const _PC_C = {
+        idle: '#181830',              // bg-dark-600
+        hover: '#1e1e3a',             // bg-dark-500
+        text: '#d1d5db',              // text-gray-300
+        textDim: '#6b7280',           // text-gray-500 (inert controls)
+        onBg: 'rgba(20,83,45,0.5)',   // bg-green-900/50
+        onText: '#86efac',            // text-green-300
+    };
+    const _PC_PILL = 'padding:.375rem .75rem;border:0;border-radius:.5rem;'
+        + 'font-size:.75rem;line-height:1rem;cursor:pointer;'
+        + 'transition:background-color .15s,color .15s;';
+    function _pcPill(label, title) {
+        const b = document.createElement('button');
+        b.type = 'button';
+        b.textContent = label;
+        if (title) b.title = title;
+        b.style.cssText = _PC_PILL;
+        // Hover is a pseudo-class we cannot express inline; these two
+        // listeners reproduce hover:bg-dark-500 for non-active pills only
+        // (an active pill keeps its tint on hover, as the other plugins do).
+        b.addEventListener('mouseenter', () => { if (!b._on) b.style.backgroundColor = _PC_C.hover; });
+        b.addEventListener('mouseleave', () => { if (!b._on) b.style.backgroundColor = _PC_C.idle; });
+        return b;
+    }
+    // Paint a pill's on/off state, optionally greyed out. `disabled` is used
+    // when the active background style ignores the setting entirely (see
+    // _pcSync and _PC_USES) - the pill stays visible so the layout
+    // does not jump, but it is inert and says why on hover.
+    function _pcPaint(btn, on, disabled, reason) {
+        btn._on = !!on && !disabled;
+        btn.disabled = !!disabled;
+        btn.setAttribute('aria-disabled', disabled ? 'true' : 'false');
+        // pointer-events:none lets the hover fall through to _pcReactiveWrap,
+        // which carries the reason a disabled button's own title can't show.
+        btn.style.pointerEvents = disabled ? 'none' : '';
+        btn.style.cursor = disabled ? 'not-allowed' : 'pointer';
+        btn.style.opacity = disabled ? '.45' : '1';
+        btn.title = reason || 'React to the audio';
+        if (disabled) {
+            btn.style.backgroundColor = _PC_C.idle;
+            btn.style.color = _PC_C.textDim;
+            return;
+        }
+        btn.style.backgroundColor = on ? _PC_C.onBg : _PC_C.idle;
+        btn.style.color = on ? _PC_C.onText : _PC_C.text;
+    }
+    function _pcGroupLabel(text) {
+        const el = document.createElement('div');
+        el.textContent = text;
+        el.style.cssText = 'font-size:.625rem;letter-spacing:.05em;text-transform:uppercase;'
+            + 'color:#6b7280;margin:.375rem 0 .1875rem;';
+        return el;
+    }
+    // Pull every control back to what is actually stored. Runs on mount and
+    // whenever the settings bus reports one of our keys changed, so editing
+    // from the Settings page updates this control and vice-versa.
+    function _pcSync() {
+        if (_pcSel) {
+            // The custom slots stay unselectable until something is uploaded -
+            // same rule settings.html applies.
+            const img = _pcSel.querySelector('option[value="image"]');
+            const vid = _pcSel.querySelector('option[value="video"]');
+            if (img) img.disabled = !_bgReadSetting(null, 'customImageDataUrl');
+            if (vid) vid.disabled = !_bgReadSetting(null, 'customVideoName');
+            _pcSel.value = _bgReadSetting(null, 'style');
+        }
+        // Grey out whichever controls the ACTIVE style ignores (see _PC_USES).
+        // An unknown id enables both rather than disabling both, so a style
+        // added without a table row is merely unhelpful, never inert.
+        const uses = _PC_USES[_bgReadSetting(null, 'style')] || { intensity: true, reactive: true };
+        const why = uses.why || 'This background style ignores this setting';
+        if (_pcReactive) {
+            _pcPaint(_pcReactive, !!_bgReadSetting(null, 'reactive'), !uses.reactive,
+                uses.reactive ? 'React to the audio' : why);
+        }
+        // The reason shows via the wrapper (see _pcReactiveWrap); empty when
+        // enabled so the control's own title takes over.
+        if (_pcReactiveWrap) {
+            _pcReactiveWrap.title = uses.reactive ? '' : why;
+            _pcReactiveWrap.style.cursor = uses.reactive ? '' : 'not-allowed';
+        }
+        if (_pcIntensity) {
+            _pcIntensity.value = String(_bgReadSetting(null, 'intensity'));
+            _pcIntensity.disabled = !uses.intensity;
+            _pcIntensity.setAttribute('aria-disabled', uses.intensity ? 'false' : 'true');
+            _pcIntensity.style.pointerEvents = uses.intensity ? '' : 'none';
+            _pcIntensity.style.opacity = uses.intensity ? '1' : '.45';
+            _pcIntensity.style.cursor = uses.intensity ? '' : 'not-allowed';
+            _pcIntensity.title = uses.intensity ? 'Background intensity' : why;
+        }
+        if (_pcIntensityWrap) {
+            _pcIntensityWrap.title = uses.intensity ? '' : why;
+            _pcIntensityWrap.style.cursor = uses.intensity ? '' : 'not-allowed';
+        }
+    }
+    // Mirror the current values into the Settings panel's controls when it's
+    // in the DOM.
+    //
+    // settings.html hydrates ONCE from localStorage when the panel is injected
+    // and never subscribes to the settings bus, so before this existed there
+    // was only one writer and it could not go stale. Adding the in-player
+    // picker made a second writer, and the panel had no way to hear about it —
+    // change the style mid-song and Settings would still show the old value.
+    //
+    // Assigning .value / .checked programmatically does NOT fire a 'change'
+    // event, so this cannot loop back into the setters.
+    function _pcSyncSettingsPanel() {
+        try {
+            const st = document.getElementById('h3d-bg-style');
+            if (st) st.value = _bgReadSetting(null, 'style');
+            const re = document.getElementById('h3d-bg-reactive');
+            if (re) re.checked = !!_bgReadSetting(null, 'reactive');
+            const inten = _bgReadSetting(null, 'intensity');
+            const ie = document.getElementById('h3d-bg-intensity');
+            if (ie) ie.value = String(inten);
+            // The panel prints the numeric value beside the slider; keep its
+            // formatting identical to settings.html's own hydration.
+            const il = document.getElementById('h3d-bg-intensity-label');
+            if (il) il.textContent = Number(inten).toFixed(2);
+        } catch (e) { console.error('[3D-Hwy] settings-panel mirror failed', e); }
+    }
+    function _pcMount() {
+        // A screen change can swap the popover out from under us, orphaning
+        // the control. Re-resolve only when the cached node is actually gone.
+        if (_pcEl && !_pcEl.isConnected) _pcTeardownDom();
+        if (_pcEl) return true;
+        const slot = _pcSlot();
+        if (!slot) return false;
+
+        const box = document.createElement('div');
+        box.className = 'h3d-pc';
+        box.style.cssText = 'display:flex;flex-direction:column;width:100%;';
+
+        box.appendChild(_pcGroupLabel('Background'));
+        // A dropdown, not pills: the style list is 8 entries and growing, and
+        // a pill per style dominated a popover whose other controls are single
+        // toggles. Styled to match the surrounding pills rather than left as a
+        // raw <select>.
+        _pcSel = document.createElement('select');
+        _pcSel.title = 'Background style';
+        _pcSel.style.cssText = 'width:100%;padding:.375rem .5rem;border:0;border-radius:.5rem;'
+            + 'font-size:.75rem;line-height:1rem;cursor:pointer;'
+            + 'background-color:' + _PC_C.idle + ';color:' + _PC_C.text + ';';
+        for (const id of BG_STYLE_IDS) {
+            const o = document.createElement('option');
+            o.value = id;
+            o.textContent = _PC_LABELS[id] || id;
+            _pcSel.appendChild(o);
+        }
+        _pcSel.addEventListener('change', () => {
+            try { window.h3dBgSetStyle(_pcSel.value); }
+            catch (e) { console.error('[3D-Hwy] bg style set failed', e); }
+        });
+        box.appendChild(_pcSel);
+        const optWrap = document.createElement('div');
+        optWrap.style.cssText = 'display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.375rem;';
+        _pcReactiveWrap = optWrap;   // carries the greyed-out reason on hover
+        _pcReactive = _pcPill('Reactive', 'React to the audio');
+        _pcReactive.addEventListener('click', () => {
+            if (_pcReactive.disabled) return;
+            try { window.h3dBgSetReactive(!_pcReactive._on); }
+            catch (e) { console.error('[3D-Hwy] bg reactive set failed', e); }
+        });
+        optWrap.appendChild(_pcReactive);
+        box.appendChild(optWrap);
+
+        box.appendChild(_pcGroupLabel('Intensity'));
+        // Wrapper carries the reason on hover when the slider is disabled — a
+        // native-disabled <input> shows no title of its own.
+        _pcIntensityWrap = document.createElement('div');
+        _pcIntensityWrap.style.cssText = 'width:100%;';
+        _pcIntensity = document.createElement('input');
+        _pcIntensity.type = 'range';
+        _pcIntensity.min = '0'; _pcIntensity.max = '1'; _pcIntensity.step = '0.05';
+        _pcIntensity.title = 'Background intensity';
+        _pcIntensity.style.cssText = 'width:100%;accent-color:#4080e0;';
+        // 'change' (fires on release), NOT 'input'. Every write goes through
+        // _bgWriteGlobal -> _bgEmitChange -> _bgRebuild(), which tears the
+        // background style down and re-runs build(). On 'input' a single drag
+        // across the range would trigger ~20 full scene rebuilds on the main
+        // thread mid-playback. settings.html's slider makes the same choice:
+        // oninput only repaints its label, onchange calls the setter.
+        _pcIntensity.addEventListener('change', () => {
+            if (_pcIntensity.disabled) return;
+            try { window.h3dBgSetIntensity(parseFloat(_pcIntensity.value)); }
+            catch (e) { console.error('[3D-Hwy] bg intensity set failed', e); }
+        });
+        _pcIntensityWrap.appendChild(_pcIntensity);
+        box.appendChild(_pcIntensityWrap);
+        slot.appendChild(box);
+        _pcEl = box;
+        _pcSync();
+        _pcListener = (key) => {
+            if (key === 'style' || key === 'reactive' || key === 'intensity'
+                || key === 'customImageDataUrl' || key === 'customVideoName') {
+                _pcSync();
+                _pcSyncSettingsPanel();
+            }
+        };
+        _bgSubscribe(_pcListener);
+        return true;
+    }
+    function _pcTeardownDom() {
+        if (_pcListener) { _bgUnsubscribe(_pcListener); _pcListener = null; }
+        if (_pcEl && _pcEl.parentNode) _pcEl.parentNode.removeChild(_pcEl);
+        _pcEl = null; _pcSel = null; _pcReactive = null; _pcIntensity = null;
+        _pcReactiveWrap = null; _pcIntensityWrap = null;
+    }
+    function _pcAcquire() {
+        _pcRefs++;
+        _pcBindScreenHook();
+        if (_pcMount()) return;
+        // The rail popover may not be built yet on a cold load. Retry a few
+        // times, then give up quietly — Settings still works.
+        if (_pcRetryTimer) return;
+        _pcRetry = 0;
+        const tick = () => {
+            _pcRetryTimer = 0;
+            if (_pcRefs <= 0) return;          // renderer went away mid-retry
+            if (_pcMount()) return;
+            if (++_pcRetry > 12) return;       // ~3s at 250ms
+            _pcRetryTimer = setTimeout(tick, 250);
+        };
+        _pcRetryTimer = setTimeout(tick, 250);
+    }
+    // Re-mount after the player chrome is rebuilt.
+    //
+    // _pcMount's isConnected check can only run when something calls it, and
+    // after the first successful mount nothing did - init() and the retry tick
+    // are the only callers, and the tick stops on success. So a popover that
+    // got swapped out left the control gone until the next song change. This
+    // listener gives that check a real trigger.
+    //
+    // Event-driven and cheap: one _pcMount() call per screen change, and it
+    // early-returns immediately when the cached node is still connected.
+    let _pcScreenHook = null;
+    function _pcBindScreenHook() {
+        if (_pcScreenHook) return;
+        const bus = window.feedBack;
+        if (!bus || typeof bus.on !== 'function') return;
+        _pcScreenHook = () => { if (_pcRefs > 0) _pcMount(); };
+        try { bus.on('screen:changed', _pcScreenHook); }
+        catch (e) { _pcScreenHook = null; }
+    }
+    function _pcRelease() {
+        _pcRefs = Math.max(0, _pcRefs - 1);
+        if (_pcRefs > 0) return;
+        if (_pcRetryTimer) { clearTimeout(_pcRetryTimer); _pcRetryTimer = 0; }
+        // Drop the screen:changed subscription too, not just the DOM. The
+        // refcount guard inside the hook makes a stale one harmless, but the
+        // listener and its closure would otherwise outlive the control for the
+        // page's lifetime — and a plugin re-load (new ?v=) evaluates this file
+        // again, binding another hook to the same bus while the old one stays.
+        // _pcBindScreenHook re-binds on the next acquire.
+        if (_pcScreenHook) {
+            try {
+                const bus = window.feedBack;
+                if (bus && typeof bus.off === 'function') bus.off('screen:changed', _pcScreenHook);
+            } catch (e) { /* best-effort: a host without off() just keeps the no-op hook */ }
+            _pcScreenHook = null;
+        }
+        _pcTeardownDom();
+    }
+
     /* ======================================================================
      *  Factory — feedBack#36 setRenderer contract
      * ====================================================================== */
 
     function createFactory() {
         const _instanceId = ++_nextInstanceId;
+        // Whether THIS instance holds a refcount on the shared player-chrome
+        // control. Guards the init -> init (no destroy) path so one instance
+        // can never take two references and pin the control.
+        let _pcAcquired = false;
 
         // ── Per-instance Three.js state ───────────────────────────────────
         let scene = null, cam = null, ren = null;
@@ -15723,6 +16074,12 @@
                         // Mark ready before RAF so any resize(w,h) calls that arrive
                         // in the meantime (e.g. from sizeCanvases()) are applied directly.
                         _isReady = true;
+                        // Claim the shared player-chrome control only now that the
+                        // renderer is actually viable. Acquiring at the top of init()
+                        // meant a machine without WebGL2 mounted a Background control
+                        // for a renderer that never drew a frame, and no failure path
+                        // below released it.
+                        if (!_pcAcquired) { _pcAcquired = true; _pcAcquire(); }
                         _resolveReady();
                         _updateFocusState();
                         if (sz.w > 0 && sz.h > 0) {
@@ -16150,6 +16507,7 @@
                 _paneAspect = 0;
                 if (cam && cam.fov !== BASE_VFOV) { cam.fov = BASE_VFOV; cam.updateProjectionMatrix(); }
                 _wrapPinned = false;
+                if (_pcAcquired) { _pcAcquired = false; _pcRelease(); }
                 _unsubscribeFocus(); teardown();
                 highwayCanvas = null;
             },
diff --git a/plugins/highway_3d/tests/background_control.test.js b/plugins/highway_3d/tests/background_control.test.js
new file mode 100644
index 0000000..8d04c1b
--- /dev/null
+++ b/plugins/highway_3d/tests/background_control.test.js
@@ -0,0 +1,370 @@
+// Player-chrome background control.
+//
+// The control mounts a Background picker (style / Reactive / Intensity) into
+// the player's Plugin Controls popover so the background can be changed
+// mid-song. Two things about it are easy to get wrong and invisible when they
+// are:
+//
+//   * It is REFCOUNTED. Several renderer instances can be live at once (a
+//     splitscreen host creates one per panel), but the settings it writes are
+//     global — N controls would be N ways to set one value, and a leaked
+//     refcount pins a dead control in the UI. The multi-instance behaviour is
+//     exercised here with stubbed instances; it is NOT verified against a real
+//     splitscreen session, whose visualizer does not currently work.
+//   * It GREYS OUT controls the active style ignores. Not every background
+//     style reads `intensity`, and none of them read audio bands under
+//     Butterchurn, so a live-looking knob that does nothing is a real bug.
+//
+// screen.js is a single ~16k-line IIFE, so the control cannot be imported. The
+// self-contained `_pc*` block is sliced out of the real source and evaluated
+// with its few collaborators stubbed (BG_STYLE_IDS, _bgReadSetting,
+// _bgSubscribe/_bgUnsubscribe). The slice markers are asserted before use: move
+// or rename the block and this fails loudly rather than testing nothing.
+
+const { test } = require('node:test');
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const path = require('node:path');
+const vm = require('node:vm');
+
+const SCREEN_JS = path.join(__dirname, '..', 'screen.js');
+const START = '    const _PC_LABELS = {';
+const END_CRLF = '    /* ======================================================================\r\n     *  Factory';
+const END_LF = '    /* ======================================================================\n     *  Factory';
+
+// What each style is expected to consume, derived by reading the BG_STYLES
+// bodies in screen.js — deliberately NOT read from the plugin's own _PC_USES
+// table, which would only assert that the table equals itself.
+//   intensity: true  => the style's build() reads settings.intensity
+//   reactive:  true  => the style's update() dereferences its `bands` argument
+// 'butterchurn' is not a BG_STYLES entry at all (mount falls through to
+// BG_STYLES.off) and drives its own audio tap, so both are false.
+const EXPECTED_USES = {
+    off: { intensity: false, reactive: false },
+    particles: { intensity: true, reactive: true },
+    silhouettes: { intensity: true, reactive: true },
+    lights: { intensity: true, reactive: true },
+    geometric: { intensity: true, reactive: true },
+    image: { intensity: true, reactive: false },
+    video: { intensity: false, reactive: false },
+    butterchurn: { intensity: false, reactive: false },
+};
+
+const BG_STYLE_IDS = ['off', 'particles', 'silhouettes', 'lights', 'geometric', 'butterchurn', 'image', 'video'];
+
+// Minimal DOM: only what the control touches.
+function makeDom() {
+    class El {
+        constructor(tag) {
+            this.tagName = String(tag).toUpperCase();
+            this.children = [];
+            this.parentNode = null;
+            this.listeners = {};
+            this.style = { cssText: '' };
+            this.disabled = false;
+            this._on = false;
+        }
+        appendChild(c) { c.parentNode = this; this.children.push(c); return c; }
+        removeChild(c) {
+            const i = this.children.indexOf(c);
+            if (i >= 0) this.children.splice(i, 1);
+            c.parentNode = null;
+            return c;
+        }
+        addEventListener(t, fn) { (this.listeners[t] || (this.listeners[t] = [])).push(fn); }
+        setAttribute(k, v) { this[k] = v; }
+        get isConnected() {
+            let n = this;
+            while (n.parentNode) n = n.parentNode;
+            return n === root;
+        }
+        querySelector(sel) {
+            const m = /^option\[value="(.+)"\]$/.exec(sel);
+            const want = m ? m[1] : null;
+            const walk = (n) => {
+                for (const c of n.children) {
+                    if (want != null && c.tagName === 'OPTION' && c.value === want) return c;
+                    const r = walk(c);
+                    if (r) return r;
+                }
+                return null;
+            };
+            return walk(this);
+        }
+        fire(type) { (this.listeners[type] || []).forEach((fn) => fn()); }
+    }
+    const root = new El('root');
+    const slot = new El('div');
+    root.appendChild(slot);
+    return { El, root, slot };
+}
+
+function load({ store: initialStore } = {}) {
+    const src = fs.readFileSync(SCREEN_JS, 'utf8');
+    const start = src.indexOf(START);
+    assert.notEqual(start, -1, 'could not find the _PC_LABELS marker in screen.js');
+    let end = src.indexOf(END_CRLF);
+    if (end === -1) end = src.indexOf(END_LF);
+    assert.notEqual(end, -1, 'could not find the Factory banner marker in screen.js');
+    assert.ok(end > start, 'slice markers found out of order in screen.js');
+    const block = src.slice(start, end);
+
+    const dom = makeDom();
+    const store = Object.assign({
+        style: 'particles',
+        reactive: true,
+        intensity: 0.5,
+        customImageDataUrl: '',
+        customVideoName: '',
+    }, initialStore);
+
+    const bus = {};
+    const listeners = new Set();
+    const emit = (key) => { for (const fn of listeners) fn(key); };
+    const writes = [];
+    const timers = [];
+
+    const sandbox = {
+        console,
+        BG_STYLE_IDS,
+        _bgReadSetting: (_panelKey, key) => store[key],
+        _bgSubscribe: (fn) => listeners.add(fn),
+        _bgUnsubscribe: (fn) => listeners.delete(fn),
+        setTimeout: (fn) => { timers.push(fn); return timers.length; },
+        clearTimeout: () => {},
+        document: {
+            createElement: (t) => new dom.El(t),
+            // The Settings-panel mirror looks these up; absent here so it no-ops.
+            getElementById: () => null,
+        },
+        window: {
+            feedBack: {
+                ui: { playerControlSlot: () => dom.slot },
+                // The real bus is an EventTarget wrapper exposing on/off. Modelled
+                // here so the screen:changed subscription — and its removal — are
+                // observable.
+                on: (ev, fn) => { (bus[ev] || (bus[ev] = [])).push(fn); },
+                off: (ev, fn) => {
+                    const l = bus[ev];
+                    if (!l) return;
+                    const i = l.indexOf(fn);
+                    if (i >= 0) l.splice(i, 1);
+                },
+            },
+            h3dBgSetStyle: (v) => { writes.push(['style', v]); store.style = v; emit('style'); },
+            h3dBgSetReactive: (v) => { writes.push(['reactive', v]); store.reactive = v; emit('reactive'); },
+            h3dBgSetIntensity: (v) => { writes.push(['intensity', v]); store.intensity = v; emit('intensity'); },
+        },
+    };
+    sandbox.globalThis = sandbox;
+
+    const api = vm.runInNewContext(
+        block
+        + '\n({ _pcAcquire, _pcRelease,'
+        + '   get el() { return _pcEl; },'
+        + '   get sel() { return _pcSel; },'
+        + '   get react() { return _pcReactive; },'
+        + '   get intens() { return _pcIntensity; },'
+        + '   get refs() { return _pcRefs; } })',
+        sandbox,
+    );
+    const fireScreenChanged = () => (bus['screen:changed'] || []).slice().forEach((fn) => fn());
+    const screenHooks = () => (bus['screen:changed'] || []).length;
+    return { api, dom, store, emit, writes, timers, sandbox, listenerCount: () => listeners.size, fireScreenChanged, screenHooks };
+}
+
+test('mounts one control into the player-control slot', () => {
+    const { api, dom } = load();
+    api._pcAcquire();
+    assert.equal(dom.slot.children.length, 1);
+    assert.ok(api.sel, 'style dropdown was not created');
+    assert.equal(api.sel.children.length, BG_STYLE_IDS.length, 'one option per style');
+});
+
+test('multiple renderer instances share a single control', () => {
+    const { api, dom } = load();
+    api._pcAcquire();
+    api._pcAcquire();
+    api._pcAcquire();
+    api._pcAcquire();
+    assert.equal(dom.slot.children.length, 1, 'four instances must not mount four controls');
+    assert.equal(api.refs, 4);
+
+    api._pcRelease();
+    api._pcRelease();
+    api._pcRelease();
+    assert.equal(dom.slot.children.length, 1, 'still held by the last instance');
+    api._pcRelease();
+    assert.equal(dom.slot.children.length, 0, 'last release must unmount');
+    assert.equal(api.el, null);
+});
+
+test('the last release unbinds the screen:changed hook', () => {
+    const ctl = load();
+    ctl.api._pcAcquire();
+    assert.equal(ctl.screenHooks(), 1, 'acquire should subscribe once');
+
+    ctl.api._pcAcquire();
+    ctl.api._pcRelease();
+    assert.equal(ctl.screenHooks(), 1, 'a partial release must keep the hook');
+
+    ctl.api._pcRelease();
+    assert.equal(ctl.screenHooks(), 0, 'the hook outlived the control');
+
+    // And re-acquiring must re-subscribe exactly once, not zero times (the
+    // bind is guarded on _pcScreenHook, so failing to null it would leave the
+    // control permanently deaf to chrome rebuilds).
+    ctl.api._pcAcquire();
+    assert.equal(ctl.screenHooks(), 1, 're-acquire did not re-subscribe');
+    ctl.api._pcRelease();
+});
+
+test('teardown unsubscribes from the settings bus', () => {
+    const ctl = load();
+    ctl.api._pcAcquire();
+    assert.equal(ctl.listenerCount(), 1);
+    ctl.api._pcRelease();
+    assert.equal(ctl.listenerCount(), 0, 'listener leaked after unmount');
+});
+
+test('tracks changes made from the Settings page', () => {
+    const { api, store, emit } = load();
+    api._pcAcquire();
+    store.style = 'lights';
+    emit('style');
+    assert.equal(api.sel.value, 'lights');
+});
+
+test('custom media options stay disabled until something is uploaded', () => {
+    const { api, store, emit } = load();
+    api._pcAcquire();
+    assert.equal(api.sel.querySelector('option[value="image"]').disabled, true);
+    store.customImageDataUrl = 'data:image/png;base64,AAAA';
+    emit('customImageDataUrl');
+    assert.equal(api.sel.querySelector('option[value="image"]').disabled, false);
+    assert.equal(api.sel.querySelector('option[value="video"]').disabled, true, 'video is independent');
+});
+
+test('re-mounts into a fresh slot when the player chrome is rebuilt', () => {
+    const { api, dom, sandbox, listenerCount } = load();
+    api._pcAcquire();
+    const first = api.el;
+
+    dom.root.removeChild(dom.slot);
+    const fresh = new dom.El('div');
+    dom.root.appendChild(fresh);
+    sandbox.window.feedBack.ui.playerControlSlot = () => fresh;
+
+    api._pcAcquire();
+    assert.equal(fresh.children.length, 1, 'did not remount into the new slot');
+    assert.notEqual(api.el, first, 'stale node was reused');
+    assert.equal(listenerCount(), 1, 'remount must not double-subscribe');
+});
+
+test('a host with no player-control slot mounts nothing and does not throw', () => {
+    const { api, dom, sandbox, timers } = load();
+    sandbox.window.feedBack.ui = {};
+    api._pcAcquire();
+    assert.equal(api.el, null);
+    assert.equal(dom.slot.children.length, 0);
+
+    let guard = 0;
+    while (timers.length && guard++ < 100) timers.shift()();
+    assert.ok(guard < 100, 'retry loop did not terminate');
+});
+
+test('intensity writes once on release, not on every drag step', () => {
+    const { api, writes } = load();
+    api._pcAcquire();
+    for (const v of ['0.10', '0.20', '0.30', '0.40', '0.50']) {
+        api.intens.value = v;
+        api.intens.fire('input');
+    }
+    assert.equal(writes.filter((w) => w[0] === 'intensity').length, 0,
+        'dragging must not write — every write rebuilds the background scene');
+    api.intens.fire('change');
+    assert.equal(writes.filter((w) => w[0] === 'intensity').length, 1,
+        'releasing must write exactly once');
+});
+
+test('the dropdown and Reactive pill drive the real setters', () => {
+    const { api, store, writes } = load();
+    api._pcAcquire();
+    api.sel.value = 'geometric';
+    api.sel.fire('change');
+    assert.equal(store.style, 'geometric');
+
+    const before = store.reactive;
+    api.react.fire('click');
+    assert.equal(store.reactive, !before, 'Reactive pill must toggle');
+    assert.ok(writes.some((w) => w[0] === 'reactive'));
+});
+
+test('greys out exactly the controls each style ignores', () => {
+    const { api, store, emit } = load();
+    api._pcAcquire();
+    for (const [style, want] of Object.entries(EXPECTED_USES)) {
+        store.style = style;
+        emit('style');
+        assert.equal(!api.intens.disabled, want.intensity, `${style}: intensity enabled-ness`);
+        assert.equal(!api.react.disabled, want.reactive, `${style}: reactive enabled-ness`);
+    }
+});
+
+test('an unknown style enables both controls (fails open)', () => {
+    const { api, store, emit } = load();
+    api._pcAcquire();
+    store.style = 'some_future_style';
+    emit('style');
+    assert.equal(api.intens.disabled, false);
+    assert.equal(api.react.disabled, false);
+});
+
+test('greyed-out controls cannot reach the setters', () => {
+    const { api, store, emit, writes } = load();
+    api._pcAcquire();
+    store.style = 'video';           // uses neither setting
+    emit('style');
+    const before = writes.length;
+    api.intens.fire('change');
+    api.react.fire('click');
+    assert.equal(writes.length, before, 'an inert control must not write');
+});
+
+test('greyed-out controls explain themselves on hover', () => {
+    const { api, store, emit } = load();
+    api._pcAcquire();
+    store.style = 'butterchurn';
+    emit('style');
+    assert.match(api.react.title, /butterchurn/i);
+    assert.match(api.intens.title, /butterchurn/i);
+});
+
+// A native-disabled <button>/<input> fires no pointer events, so its own
+// `title` never shows on hover. The reason must therefore also sit on the
+// non-disabled wrapper, and the disabled control must let the hover fall
+// through (pointer-events:none) — otherwise the "says why on hover" feature is
+// dead in the browser while these tests pass on the swallowed control title.
+test('the greyed-out reason reaches a hoverable wrapper', () => {
+    const { api, store, emit } = load();
+    api._pcAcquire();
+    store.style = 'video';           // uses neither setting
+    emit('style');
+
+    assert.match(api.react.parentNode.title, /nothing to adjust/i,
+        'reactive reason must be on the wrapper, not only the disabled pill');
+    assert.equal(api.react.style.pointerEvents, 'none',
+        'disabled pill must pass hover through to its wrapper');
+
+    assert.match(api.intens.parentNode.title, /nothing to adjust/i,
+        'intensity reason must be on the wrapper, not only the disabled slider');
+    assert.equal(api.intens.style.pointerEvents, 'none',
+        'disabled slider must pass hover through to its wrapper');
+
+    // ...and an enabled style clears the wrapper so the control's own title wins.
+    store.style = 'particles';
+    emit('style');
+    assert.equal(api.react.parentNode.title, '');
+    assert.equal(api.intens.parentNode.title, '');
+    assert.equal(api.intens.style.pointerEvents, '');
+});