Rewrite layout with CSS Grid framework - predictable areas for gameboard, sidebar, and bottom bar

src/main.ts

@@ -1417,13 +1417,14 @@ function attachEvents() {
 }
 
 function render() {
+  const playerCount = state.players.length;
   app.innerHTML = `
-    <main class="layout">
+    <main class="layout" style="--player-count: ${playerCount}">
       <section class="game-area">
         ${renderBoard()}
-        ${renderSidebar()}
       </section>
-      <footer class="scoreboard scoreboard--bottom">
+      ${renderSidebar()}
+      <footer class="scoreboard">
         ${renderScoreboard()}
       </footer>
     </main>