From 277ef72c9957877e664f5b9920fa34c112177bf7 Mon Sep 17 00:00:00 2001
From: jwinterm <johnwmurphy@gmail.com>
Date: Sun, 12 Jul 2026 11:06:22 -0400
Subject: [PATCH] fix(render): SP camera host fills #game-display, beats
 .rotdis canvas clamp

The render-kit dungeon host was a flex item in a centered flex container (.rotdis) with
sibling canvases, so it got shrunk + shoved into a corner; and .rotdis canvas has
max-width:100% !important which clamped the camera canvas. Fix: host is now
position:absolute inset:0 (fills #game-display, which is position:relative), and the
canvas overrides max-width via setProperty(..., important). Dungeon now renders centered
on the player in the game area.
---
 html/js/render/spGameRenderer.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/html/js/render/spGameRenderer.js b/html/js/render/spGameRenderer.js
index 7f47456..3ed2cb6 100644
--- a/html/js/render/spGameRenderer.js
+++ b/html/js/render/spGameRenderer.js
@@ -26,9 +26,10 @@
         if (!host) {
             host = doc().createElement('div');
             host.id = 'rk-game-host';
-            host.style.cssText = 'display:none; position:relative; width:100%; max-width:900px;' +
-                ' aspect-ratio:16/10; margin:0 auto; overflow:hidden; background:#0a0c0f;' +
-                ' border:1px solid #2a313a; border-radius:6px; touch-action:none; cursor:grab;';
+            // Absolutely FILL #game-display (which is position:relative) so the flex centering + the
+            // hidden ROT/FX sibling canvases can't shrink or shove us into a corner.
+            host.style.cssText = 'display:none; position:absolute; top:0; left:0; right:0; bottom:0;' +
+                ' overflow:hidden; background:#0a0c0f; z-index:6; touch-action:none; cursor:grab;';
             gd.appendChild(host);
         }
         return host;
@@ -76,7 +77,9 @@
         if (SP._renderer && SP._renderer.canvas) {
             var c = SP._renderer.canvas;
             c.style.position = 'absolute'; c.style.top = '0'; c.style.left = '0';
-            c.style.maxWidth = 'none'; c.style.imageRendering = 'pixelated';
+            // Beat `.rotdis canvas { max-width:100% !important }` so the camera controls the size.
+            c.style.setProperty('max-width', 'none', 'important');
+            c.style.setProperty('image-rendering', 'pixelated', 'important');
         }
         if (!host._rkZoomBound) {
             host._rkZoomBound = true;