From af0b1d1938333f2fe87650b27dc86970c22f44d0 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 19 Mar 2026 15:42:08 +0000
Subject: [PATCH 1/2] Initial plan


From e1382a717a5f36ec1c964a4527fd1a7c7975e242 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 19 Mar 2026 15:44:45 +0000
Subject: [PATCH 2/2] Fix fast piggie flash to scope to play area and remove
 canvas border

Co-authored-by: acrosman <2972053+acrosman@users.noreply.github.com>
---
 app/games/fast-piggie/interface.html | 14 ++++++++------
 app/games/fast-piggie/style.css      | 18 +++++++++++++-----
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/app/games/fast-piggie/interface.html b/app/games/fast-piggie/interface.html
index ce48ebb..1f20d85 100644
--- a/app/games/fast-piggie/interface.html
+++ b/app/games/fast-piggie/interface.html
@@ -31,16 +31,18 @@ <h3>How to Play</h3>
       </span>
     </div>
 
-    <!-- Game canvas: keyboard-accessible wedge board -->
-    <canvas id="fp-canvas" class="fp-canvas" width="500" height="500" tabindex="0" role="application"
-      aria-label="Game board. Use arrow keys to cycle through wedges, Enter or Space to select."></canvas>
+    <!-- Game canvas wrapper: contains canvas and flash overlay so flash is scoped to the play area -->
+    <div class="fp-canvas-wrap">
+      <canvas id="fp-canvas" class="fp-canvas" width="500" height="500" tabindex="0" role="application"
+        aria-label="Game board. Use arrow keys to cycle through wedges, Enter or Space to select."></canvas>
+
+      <!-- Visual flash overlay (toggled by JS via class names) -->
+      <div id="fp-flash" class="fp-flash" aria-hidden="true"></div>
+    </div>
 
     <!-- Screen-reader-only feedback region: assertive = interrupts immediately -->
     <div id="fp-feedback" role="status" aria-live="assertive" aria-atomic="true" class="fp-feedback sr-only"></div>
 
-    <!-- Visual flash overlay (toggled by JS via class names) -->
-    <div id="fp-flash" class="fp-flash" aria-hidden="true"></div>
-
     <!-- Controls -->
     <div class="fp-controls">
       <button id="fp-stop-btn" class="fp-btn fp-btn--secondary">
diff --git a/app/games/fast-piggie/style.css b/app/games/fast-piggie/style.css
index 91d3064..dd19e12 100644
--- a/app/games/fast-piggie/style.css
+++ b/app/games/fast-piggie/style.css
@@ -27,14 +27,21 @@
   font-size: 1.25rem;
 }
 
+/* Canvas wrapper: provides positioning context for the flash overlay */
+.fp-canvas-wrap {
+  position: relative;
+  display: inline-flex;
+  width: clamp(280px, 60vmin, 500px);
+  height: clamp(280px, 60vmin, 500px);
+}
+
 /* Canvas */
 .fp-canvas {
   display: block;
   max-width: 100%;
   /* Intrinsic size is 500×500; CSS keeps it responsive */
-  width: clamp(280px, 60vmin, 500px);
-  height: clamp(280px, 60vmin, 500px);
-  border: 2px solid #343a40;
+  width: 100%;
+  height: 100%;
   border-radius: 50%; /* visual hint that it's a circle game */
   background-color: #ffffff;
   cursor: crosshair;
@@ -45,10 +52,11 @@
   outline-offset: 4px;
 }
 
-/* Flash overlay */
+/* Flash overlay: scoped to the canvas wrapper, matches the circular play area */
 .fp-flash {
-  position: fixed;
+  position: absolute;
   inset: 0;
+  border-radius: 50%;
   pointer-events: none;
   opacity: 0;
 }