Fix select-card layout: scope global canvas rule to #game so mini-portraits stop stretching over the card

2398d24cd751be4f81b794f6d546da8d7166b22e · 2026-08-31 14:20:01 -0700 · Steve Abrams

Root cause of the badge/name-over-portrait regression: the global 'canvas{position:absolute;inset:0;width/height:100%}' rule (for the game canvas) leaked into the character-select portrait canvases, absolutely positioning each portrait to fill its whole card with name/stats painting on top. Scoped it to #game; portraits now sit in a proper 72x90 block with name + stats stacked below.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Files touched

M index.html

Diff

commit 2398d24cd751be4f81b794f6d546da8d7166b22e
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Mon Aug 31 14:20:01 2026 -0700

    Fix select-card layout: scope global canvas rule to #game so mini-portraits stop stretching over the card
    
    Root cause of the badge/name-over-portrait regression: the global 'canvas{position:absolute;inset:0;width/height:100%}' rule (for the game canvas) leaked into the character-select portrait canvases, absolutely positioning each portrait to fill its whole card with name/stats painting on top. Scoped it to #game; portraits now sit in a proper 72x90 block with name + stats stacked below.
    
    Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 645bb15..27815ee 100644
--- a/index.html
+++ b/index.html
@@ -24,7 +24,7 @@
     box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 24px 80px rgba(255,61,154,.18), 0 8px 40px rgba(34,224,255,.12);
     background:#0d0d14;
   }
-  canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; image-rendering:auto; }
+  #game{ position:absolute; inset:0; width:100%; height:100%; display:block; image-rendering:auto; }
 
   /* overlay screens */
   .screen{

← 5e37c3a Apply graphic-designer review fixes #1-5 · back to Neon Baguette Battle · Polish: distinct per-stat select bars + stronger fighter/flo beedee1 →