fix(backgammon): the table takes the whole screen; one avatar system

The backgammon game never entered game mode, so the HUD and the dock
stayed over the board (screenshots only hid it when an earlier game had
left game mode on). It now enters on mount and exits on unmount like the
other games. Avatars follow one rule across games: a person is a purple
rounded square on a lip, a bot an ink rounded square with the robot
(chess's player tile was blue, backgammon's were circles).
backgammon.mjs --only result,layout: 27/27.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

public/js/modules/backgammon/scenes/game.js

@@ -70,6 +70,9 @@ export function mountGame(el, p) {
     nextDice: [], speed: 1,
   };
 
+  // The table takes the whole screen: the HUD and the dock step away, as they
+  // do for the other three games (this scene never asked, so both stayed up).
+  scene.enterGameMode();
   render(el);
   S.canvas = el.querySelector('#bg-canvas');
   S.ctx = S.canvas.getContext('2d');
@@ -104,7 +107,7 @@ async function openBotMatch() {
   } catch (e) { /* offline: the game is played, nothing is paid */ }
 }
 
-export function unmountGame() { teardown(); }
+export function unmountGame() { teardown(); scene.exitGameMode(); }
 
 function teardown() {
   if (!S) return;
@@ -1285,10 +1288,13 @@ function styles() {
 .bgg-avatar {
   display: flex; align-items: center; justify-content: center;
   width: 42px; height: 42px;
-  border-radius: 50%;
+  border-radius: 14px;
   overflow: hidden;
   background: var(--back-600);
+  box-shadow: 0 3px 0 var(--back-950);
 }
+.bgg-avatar:not(:has(.bgg-bot-face)) { background: var(--btn-purple-2); box-shadow: 0 3px 0 var(--btn-purple-edge); }
+.bgg-avatar .avatar { border-radius: 14px; }
 .bgg-plate.is-active .bgg-avatar { box-shadow: 0 0 0 2.5px var(--gold); }
 .bgg-avatar .avatar { width: 42px; height: 42px; }
 .bgg-bot-face { display: flex; }

public/js/modules/chess/scenes/game.js

@@ -1333,10 +1333,11 @@ const GAME_STYLE = `
     flex-shrink: 0;
     display: flex; align-items: center; justify-content: center;
     overflow: hidden;
-    background: var(--btn-blue-2);
-    box-shadow: 0 3px 0 var(--btn-blue-edge);
+    background: var(--btn-purple-2);
+    box-shadow: 0 3px 0 var(--btn-purple-edge);
   }
-  #plate-opponent .cg-avatar { background: var(--btn-purple-2); box-shadow: 0 3px 0 var(--btn-purple-edge); }
+  /* One avatar system: a person is purple, a bot is an ink tile with the robot. */
+  #plate-opponent .cg-avatar:has(.gi-bot) { background: var(--back-600); box-shadow: 0 3px 0 var(--back-950); }
   .cg-avatar img { width: 44px; height: 44px; object-fit: cover; }
   .cg-avatar .gi { width: 32px; height: 32px; }
   .cg-avatar .avatar-fallback { display: flex; align-items: center; justify-content: center; }