play: autosize the terminal so the full board always fits (cards were clipping)

space/static/app.css

@@ -213,8 +213,8 @@ html, body {
 .term-frame {
   position: relative;
   z-index: 10;
-  width: min(1180px, 95vw);
-  height: min(760px, 90vh);
+  width: min(1280px, 96vw);
+  height: min(1100px, 94vh);
   background: var(--bg);
   border: 1px solid var(--ink);
   border-radius: 6px;

space/static/play.html

@@ -36,10 +36,16 @@ const JADE = {
   brightCyan: "#8cd3cb", brightWhite: "#f6f5dd",
 };
 
+// The board needs this much terminal real estate; below it, cards clip.
+const MIN_ROWS = 44;
+const MIN_COLS = 110;
+const MAX_FONT = 15;
+const MIN_FONT = 10;
+
 const term = new Terminal({
   theme: JADE,
   fontFamily: "'IBM Plex Mono', ui-monospace, monospace",
-  fontSize: 15,
+  fontSize: MAX_FONT,
   lineHeight: 1.05,
   cursorBlink: true,
   cursorStyle: "block",
@@ -61,7 +67,20 @@ try {
   webgl.onContextLoss(() => webgl.dispose());
   term.loadAddon(webgl);
 } catch (e) { /* DOM renderer: playable, just softer card frames */ }
-fit.fit();
+
+// Fit the whole board, not just the window: start at the comfy font size and
+// step down until the grid clears MIN_ROWS x MIN_COLS (or we hit the floor).
+function fitGame() {
+  let size = MAX_FONT;
+  term.options.fontSize = size;
+  fit.fit();
+  while ((term.rows < MIN_ROWS || term.cols < MIN_COLS) && size > MIN_FONT) {
+    size -= 1;
+    term.options.fontSize = size;
+    fit.fit();
+  }
+}
+fitGame();
 
 const status = document.getElementById("status");
 function setStatus(html, dead = false) {
@@ -95,8 +114,8 @@ term.onData((data) => {
   if (ws.readyState === WebSocket.OPEN) ws.send(new TextEncoder().encode(data));
 });
 
-window.addEventListener("resize", () => { fit.fit(); sendResize(); });
-const ro = new ResizeObserver(() => { fit.fit(); sendResize(); });
+window.addEventListener("resize", () => { fitGame(); sendResize(); });
+const ro = new ResizeObserver(() => { fitGame(); sendResize(); });
 ro.observe(document.getElementById("terminal"));
 </script>
 </body>