Fix Fast Piggie flash scope and remove canvas border

[Copilot]

The correct/wrong answer flash animations covered the entire viewport (position: fixed; inset: 0) instead of being scoped to the circular play area. The canvas also had an unnecessary black border.

Changes

• interface.html — Wrapped <canvas> and #fp-flash in a new div.fp-canvas-wrap so the flash overlay is contained within the play area

• style.css

  • Added .fp-canvas-wrap with position: relative to serve as the positioning context for the flash overlay
  • Changed .fp-flash from position: fixed; inset: 0 → position: absolute; inset: 0; border-radius: 50% — flash now only covers the circular play area
  • Removed border: 2px solid #343a40 from .fp-canvas

/* Before */
.fp-flash {
  position: fixed;
  inset: 0;
}

/* After */
.fp-canvas-wrap {
  position: relative;
  display: inline-flex;
  width: clamp(280px, 60vmin, 500px);
  height: clamp(280px, 60vmin, 500px);
}

.fp-flash {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Fix flash in fast piggie</issue_title>
<issue_description>Fast Piggie flashes green when you click the right wedge. It's very distracting. Just the wedge itself, and the game circle should flash.</issue_description>

<agent_instructions>Update the Fast Piggie game located in app/games/fast-piggie so that when the player gets the right answer the selection wedge and circle flash green – as the do now – but the rest of the page does not. Same should also be true when they get the wrong answer the whole screen should not flash red, just the play area circle. While you're at it, remove the black line around the game play area. </agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes Fix flash in fast piggie #9

---

💬 Send tasks to Copilot coding agent from Slack and Teams to turn conversations into code. Copilot posts an update in your thread when it's finished.