Added new opponents. Fixed styling issues.

public/data/opponents.json

@@ -275,6 +275,99 @@
           "bernie-happy-01"
         ]
       }
+    },
+    {
+      "id": "jerry",
+      "spriteIndex": 10,
+      "name": "Jerry",
+      "bio": "Well now yall know I want to play some them games!"
+    },
+    {
+      "id": "natasha",
+      "spriteIndex": 11,
+      "name": "Natasha",
+      "bio": "Perhaps if I win, you will spill the secrets you've been keeping!",
+      "speech": {
+        "intro": [
+          "natasha-intro-01",
+          "natasha-intro-02"
+        ],
+        "happy": [
+          "natasha-happy-01",
+          "natasha-happy-02",
+          "natasha-happy-03",
+          "natasha-happy-04",
+          "natasha-happy-05"
+        ],
+        "upset": [
+          "natasha-upset-01",
+          "natasha-upset-02",
+          "natasha-upset-03",
+          "natasha-upset-04",
+          "natasha-upset-05"
+        ],
+        "pick": [
+          "natasha-pick"
+        ]
+      }
+    },
+    {
+      "id": "zanthor",
+      "spriteIndex": 12,
+      "name": "Zanthor",
+      "bio": "Hocus Pocus Alacazam!!!!",
+      "speech": {
+        "intro": [
+          "zanthor-intro-01",
+          "zanthor-intro-02"
+        ],
+        "happy": [
+          "zanthor-happy-01",
+          "zanthor-happy-02",
+          "zanthor-happy-03",
+          "zanthor-happy-04",
+          "zanthor-happy-05"
+        ],
+        "upset": [
+          "zanthor-upset-01",
+          "zanthor-upset-02",
+          "zanthor-upset-03",
+          "zanthor-upset-04",
+          "zanthor-upset-05"
+        ],
+        "pick": [
+          "zanthor-pick"
+        ]
+      }
+    },
+    {
+      "id": "juliet",
+      "spriteIndex": 13,
+      "name": "Juliet",
+      "bio": "Let's take a break on a warm summer day to spend time playing games!",
+      "speech": {
+        "intro": [
+          "juliet-intro-01",
+          "juliet-intro-02"
+        ],
+        "happy": [
+          "juliet-happy-01",
+          "juliet-happy-02",
+          "juliet-happy-03",
+          "juliet-happy-04",
+          "juliet-happy-05"
+        ],
+        "upset": [
+          "juliet-upset-01",
+          "juliet-upset-02",
+          "juliet-upset-03",
+          "juliet-upset-04",
+          "juliet-upset-05"
+        ],
+        "pick": [
+          "juliet-pick"
+        ]
+      }
     }
   ]
 }

public/src/main.js

@@ -68,4 +68,29 @@ const config = {
   ],
 };
 
-new Phaser.Game(config);
+const game = new Phaser.Game(config);
+
+// Phaser positions its DOM overlay container with margins only (no explicit
+// left/top); under Scale.FIT the absolutely-positioned container drifts away
+// from the letterboxed canvas as the viewport narrows, dragging DOM video
+// portraits below their canvas targets. Pin the container to the canvas's real
+// box on every resize so game coordinates map exactly onto the canvas.
+function syncDomContainer() {
+  const container = game.domContainer;
+  const canvas = game.scale.canvas;
+  if (!container || !canvas) return;
+  const baseW = game.scale.gameSize.width;
+  const baseH = game.scale.gameSize.height;
+  const rect = canvas.getBoundingClientRect();
+  const parent = container.offsetParent;
+  const pRect = parent ? parent.getBoundingClientRect() : { left: 0, top: 0 };
+  const st = container.style;
+  st.margin = '0';
+  st.transformOrigin = 'left top';
+  st.left = `${rect.left - pRect.left}px`;
+  st.top = `${rect.top - pRect.top}px`;
+  st.transform = `scale(${rect.width / baseW}, ${rect.height / baseH})`;
+}
+
+game.scale.on('resize', syncDomContainer);
+game.events.once('ready', syncDomContainer);

public/styles.css

@@ -23,6 +23,7 @@ html, body {
 }
 
 #game-container {
+  position: relative;
   width: 100%;
   height: 100%;
 }