Nudge the logo off centre

The lettering does not sit in the middle of its own image, so centring
the image leaves the logo looking pushed to one side.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01H9v2Xoa6eoeGYpK6gp95k9

public/player/backdrop.js

@@ -19,20 +19,23 @@ import {
   BACKGROUND_MAX_OVERSAMPLE,
   LOGO_SRC,
   LOGO_WIDTH,
+  LOGO_OFFSET,
 } from '/config.js';
 import { createPicker } from './motion.js';
 
 const KEYS = Object.keys(BACKGROUNDS);
 
 /**
- * Point the logo overlay at the configured file and size it against the
- * screen. The element is in the page from the start — only the two values that
- * belong to the config are set here.
+ * Point the logo overlay at the configured file, size it against the screen
+ * and nudge it off centre. The element is in the page from the start — only
+ * the values that belong to the config are set here. The offset is a fraction
+ * of the logo's own width, which is what a percentage in the translate means.
  */
 export function showLogo(element) {
   if (!element) return;
   element.src = LOGO_SRC;
   element.style.width = `${LOGO_WIDTH * 100}vw`;
+  element.style.setProperty('--logo-shift', `${LOGO_OFFSET * 100}%`);
 }
 
 /**

public/player/player.css

@@ -49,7 +49,10 @@ body {
   position: fixed;
   top: 50%;
   left: 50%;
-  translate: -50% -50%;
+  /* Centred, then nudged sideways by LOGO_OFFSET, which backdrop.js writes
+     onto the element. */
+  --logo-shift: 0%;
+  translate: calc(-50% + var(--logo-shift)) -50%;
   height: auto;
   /* Only bites on a screen too short for the width above — on the projector
      the width is what decides. */