Scratch Card

Build a scratch card promo game for my website. Match my existing design system, colors, and fonts.

STRUCTURE
- A card (about 300x180px, rounded corners) with the prize layer underneath and a scratchable foil layer on top, drawn on a canvas element: a metallic-looking fill with a "Scratch here" hint and a subtle pattern.
- The card sits inline in a page section, centered, with a short heading above it. Its space is reserved from first paint.
- Under the card, one line explains the rules and the one-play limit.

ODDS AND HONESTY (non-negotiable)
- Prizes live in one config array: { label, prize code or value, weight }. The prize is drawn by WEIGHT ONCE, when the card first renders, and that drawn prize is what sits under the foil from the start: scratching reveals it, it never changes mid-scratch. Never render a fake near-win under the foil and never swap the outcome after the draw; forbid both in a comment as fraud.
- Empty config or zero total weight = the card does not render. A clearly marked TODO tells me to define real prizes, weights, and redemption, and to check prize-promotion legality in my market.
- One play per visitor: localStorage flag set when scratching starts; returning visitors see the revealed result, not a fresh card.

SCRATCHING
- Pointer events scratch the foil using canvas destination-out compositing with a soft round brush (about 24px); touch scratching must not scroll the page (touch-action: none on the canvas only).
- Track the scratched pixel ratio (sample the canvas alpha on pointer-up, not every move); when at least 50% of the foil is cleared, auto-reveal the rest.
- After the threshold, the remaining foil fades out (300ms), the full prize shows, and the result line states the prize and how to redeem it, announced via aria-live="polite".

ACCESSIBILITY AND QUALITY
- Scratching is not keyboard-accessible by nature, so provide a visible "Reveal without scratching" button that triggers the same draw-and-reveal honestly; the canvas has an aria-label describing the game.
- Fixed card dimensions from first paint (no layout shift); the canvas resizes crisply for devicePixelRatio.
- Respect prefers-reduced-motion for the fade; everything works without any external library.

QUESTIONS
- Before you build, find or ask for: my real prizes with their weights and how each is redeemed. Check my project and site first; whatever you cannot find there, ask me for. Never invent these or ship placeholders.
- If anything else about my brand or content is unclear, ask me before inventing.